Arrow Buttons

We all know that the user interfaces of OS X apps are becoming more and more differentiated. Apple as well as third party developers slowly move away from the once authoritative OS X Human Interface Guidelines and create not only new user interface elements, but a whole new experience of interacting with applications, at least partly borrowing from iOS innovations.

It is not that easy for an Mac indie developer to follow this trend if he or she doesn’t have at least some graphical and design talent. It is therefore not by chance that so far I have been rather traditional in my approaches. Now, however, I used some free time over the holidays and created a set of custom button controls.

These custom button controls consists of two arrow-shaped buttons that look like this:

Arrow Buttons

I always wanted to have such custom buttons for windows in which several views are displayed one after the other, with the old view animating out of the window and the next view animating into the window (you are right that this approach of a successive display of several views is inspired by iOS). It is of course possible to have such a feature without arrow-shaped buttons, but in my opinion they provide more guidance to the user how he can interact with the application and how the views of the application’s window are connected to each other.

A typical use case for my arrow buttons could look like this:

Arrow Button Use Case

The arrow buttons are meant as a replacement for round textured buttons and have only been designed for this purpose. Besides this restriction, they work as NSButton instances normally do.

How to use the Buttons

I have prepared two NSButton subclasses, one for the left-facing arrow button, one for the right-facing arrow button. Both classes are available for download on GitHub. Just drop the classes in your Xcode project and use a default round textured button in Interface Builder, but set its class to be either TSLeftButton (for the left-facing arrow button) or TSRightButton (for the right-facing button):

Integrating the Arrow Buttons in Xcode

Interface Builder won’t show the custom shape of the buttons, but when running your project, the custom shape will be displayed instead of the default one. The size of the button will not be changed by the NSButton subclasses, so in order for the button title string to remain visually centered, the subclasses will move the title string a few pixels to the left or right. Both custom buttons are drawn without images, so they should display fine also at retina resolution.