Designing a Great UI the Aqua Way
Pages: 1, 2

Deity is in the details

Little details are a big deal, so take time to consider them. Some items seem trivial, but they can add up to a major issue that will turn a user away from your application. A good example of a small detail is when developers place buttons in illogical locations. An example would be this actual application.

When you initially launch this program, you fill out a number of configuration windows. On more than one occasion, I’ve hit the Cancel button accidentally because I move my mouse to where the Next button would logically be. I then have to go through the entire configuration again.

Toolbar hoedown

There is nothing worse than opening an application that presents you with a 8” x 8” toolbar and hundreds of microscopic icons waiting for you to peruse their help tags. Resist the desire to give everything a default place on the toolbar. When the user buys your application, it becomes their toolbar. Let the user customize the toolbar to fulfill their needs.

99 steps

One thing that concerns me is an application that uses multiple windows to complete a single task. I can’t stand going through three or four steps (or menus/sub-menus) to complete a task that perhaps a palette (utility window) could handle.

Too many palettes

Of course let’s not go palette crazy. You need a place to locate and keep all of your settings and tools, but there can be too much of a good thing. Palettes can consume an enormous amount of real estate. How many times have you started to perform a task and you end up running into a palette? There are many times you start something that you can’t complete because there is a palette in the way. Even if the application allows you to make a change behind a palette, you can’t see through it. If you have multiple palettes in your application, you need to have some creative solutions to handle them.

One of my favorite graphics applications has six palettes and one toolbar that I need constant access to, but they monopolize my screen space. One delightful way they managed this is by letting me hide all my palettes by pressing the Tab key. I can grab a tool or make settings and dismiss everything with one button. Consider a keyed "hide" option if your application has multiple palettes. Another possible solution I would like to see is giving users opacity control for palettes. It would be fantastic if I could set my palettes to be semi-transparent. Even better, when I click my mouse to perform a task, my palettes would ghost or vanish, allowing me to use my entire work space. No keystrokes.

Microsoft Word X has an intriguing way to handle palettes. They’ve taken items that normally might be considered separate palettes and combined them into one. Their size is managed by making them expand and grow as needed. I really like this feature. The only drawback to their solution is that the palette can actually expand right off your viewable screen.

Mmmm, feedback

Nothing is tastier than good feedback. I was recently testing an application that told me that it was running by displaying the word “Running.” Although a fantastic application, this simple static feedback leaves me a little wary. I like to see an application that uses some type of iconic representation to show me something is happening. Now don’t go placing huge garish icons that pulsate or blink mercilessly. Simple progress bars and small icons in motion add an element of action without annoying the user.

Aqua consistency

Not only do you need to be consistent with your apps internal functions, you need to be consistent with Aqua. I have seen a lot of applications that ignore Aqua guidelines. Consider these items when building your UI.

• The system text is Lucida Grande. Let the system draw your text. Always use anti-aliased text and don’t mix fonts. Using your own fonts in Menus and Windows will only confuse your users.
• Be careful not to use System 9 elements (Platinum) in OS X applications. I can’t tell you how many Cocoa applications I have found with System 9 elements such as icons.
• Don’t make your own windows. Use the Aqua pin-striped windows and allow the system draw them.
• Do not use buttons for labels. Aqua elements are built for specific functions. If you use a button for a label, users will become confused as to why they can’t activate it.

Finally…

Remember that at some point everyone is a novice with your application. Your goal is to build an interface that makes sense, decreases the learning curve, and increases productivity. Take a look at other successful applications that you admire when designing your application. What makes their UI so appealing? Be sure that you take your UI design as seriously as you take your code development. In the next column, we’ll actually fire up Interface Builder and begin building our first UI.

Alan Graham is the creator of the Best of Blogs book series and is a frequent writer on the O'Reilly Network.

---

Read more Designing for Aqua columns.

Return to the Mac DevCenter.