Good User Interface Design on Mac OS X and the iPhone OS

Good user interface design can make or break your application, it's not just visual appearance but workflow & accessibility. An application that is visually appealing but not well designed will lose out to an application that isn't as visually appealing but has a well designed user interface.

I am not even going to be able to write as much as I'd like here on the topic of UI design, because to be frank this material could fill reams & reams of paper and still have a lot left to say. So I want to point out some do's, some do nots & just some general Mac OS X & iPhone OS tips I presented at a DM Cocoaheads meeting.

Primary / Secondary / Tertiary Objects

One way of starting out in designing a good UI I heard was to start out and just sit at a white board and write down all the objects in your application. So if we were to take iTunes we could start out with the obvious: Songs, Artists, Playlists, Albums, Videos, etc.

Then break that list up into the primary, secondary and tertiary objects categories. Now look at your primary objects category, those objects should take up most of the UI. You can see this already in just about any great app. In iTunes songs are definitely the primary object and so take up the biggest chunk of the UI. In web browsers the web page is the primary object and thus takes up the overwhelming majority of the UI, in fact every bit of UI on web browsers like Google Chrome or Safari are pretty much just to help you navigate to other webpages in 1 form or another.

You can see this sectioning done very well on iTunes as well...

iPhone UI Design / Emphasizing elements through Contrast

Due to the contained space inherent to iPhone Applications you cannot follow some design ideals that Mac Developers follow. For the iPhone it's more about designing your application from a hierarchical design and making any one function not take too long to get to. There are many examples of this I could point to, instead of the usual twitter clients (which also display this well) I am going to show off one of the tools I use to practice Japanese text called iKana Touch.

iKana touch is a very well designed iphone application in that it visually looks great, has a very clear hierarchy of functions and visually emphasizes important elements very well.

 

For me you can't get much simpler than this. You have a Very simple startup menu showing you very well defined groups of Kana glyphs you want to study, the table row items have icons on them that well represent what their section is about and make perfect sense (at least if you are studying Japanese.) This very well represents a phrase I once heard at WWDC "a screenful of UI at a time." This UI section I shown above also is very similar to a UI design pattern I'll show later I call General->Specific where you start out broad, dive in 1 level and see a bit more and then can dive in 1 more level and get to a very detailed level.

I want to show you just a couple more screen grabs to emphasize a couple points.

This is iKana Touch's speed test. It's very well designed for several reasons

(1) Anybody can come up and look at this screen and see that this is a speed test and see that there are buttons along the bottom and there is a big kana glyph front and center of the screen which is the glyph that needs to be identified, it's intent is very clear and needs no explanation of what needs to be done.

(2) Colors emphasize important elements well. The timer bar eventually goes red as you have less and less time. If you get an answer wrong it colors the correct answer green and all the other buttons red which imediately draws your attention to the correct answer so you learn.

(3) Although you can't tell here, sounds play an important part the sound you get when you select a correct answer is nice and you get a nice BUZZZZ!!! when you have a wrong answer

At the end of this test you get a nice screen showing you how well you did and the expression on Person's face who shows you your percentage changes depending on how well you did.

Here is another well designed screen...

This requires a tiny explanation for those of you who don't know Japanese. The Kana (native Japanese text) & Kanji (Chinese Characters used in Japanese + some native Japanese invented ones) all have stroke orders. One aspect of learning these glyphs is that you need to learn the proper order in which to draw them.

This screen here is to help you learn the proper order in which to stroke the glyph. Again it requires little explanation, it's obvious that there are circles where you need to start and end your points. And to give you the feel of a genuine learning experience the board is chalkboard themed which we associate with school/college and learning. Very well designed, screen. This brings me to the next point. On this application when you hit the detail for each glyph (see the "Nu" card earlier in this article) the application designers went above and beyond (which you should always try to do) and provided animations when you flip the card over...

Again just wonderful experience, and a wonderful way to teach people the proper way to stroke each glyph and they are fully taking advantage of iPhone OS (now iOS) technologies to make this a great learning experience. Clearly they've gone out of their way to not only test you well, but help you learn just as good as they test you. And another thing to note is how little UI elements are on each screen (which I appreciate.) It makes the app and experience of using it a pleasant and focused one.

General to Specific Design pattern

Above in the first screens of the iPhone app iKana touch I showed 3 screens revealing more and more detail as you dove down a level in the app. What you may or may not realize is that this is a design pattern from the desktop adapted into the iPhone.

Here a great example is one thing many people have seen when they come to the Mac is Delicious Library 2. You can see going left to right across the application that we get an increased level of detail. This makes navigation in the app very simple and your eye knows exactly where to go especially so since I've heard that we tend to scan from the top left to the bottom right. Again there isn't that many UI elements on this screen and the ones that are on there are organized well in their own third of the screen so you know exactly what they are associated with and that (in combination with the icons) makes it easy to know what a controls purpose is.

Android: Mobile Design done wrong

Now before I go on I should state that I both admire some aspects of Android and yet also despise some UI's. To me many Android apps I've seen demonstrate that these developers don't get mobile development in general. With such a constrained UI you can't afford to pile on all the things that you would do in a desktop environment. Let me show you

Clearly you can see here that we don't have the space available like we did on the desktop to really show everything going on. Although this looks decent for showing you when you have events going on during the week, it's absolutely horrible at displaying any level of detail about the items. Worse i've seen many Android calendar apps attempt to show a bar representing the day and then fill in parts of the bar where they have things going on for the day. It's a good idea in theory, except within the confined screens android devices run on it doesn't look good at all. Generally Android applications are not a good source of UI inspiration. As always though there are some Android apps that have been well designed such as shown by Sebastian on his blog http://blog.cocoia.com/2010/doubletwist-android-media-player-app/

Conclusion

Clearly there are a lot of great things going on in both Mac OS X and iPhone/iPad application UI design. Start out by defining the mission of your app in a sentence. Then sit down and just write all the objects that are represented within your application. Your applications UI should be dedicated to the primary elements and you should try to make sure that anything on screen is there for the purpose of making interacting with the primary objects easier. Also well designed graphics in combination with well thought out workflows in an application can lead to less need to explain the user interface to the user and thus lead to less support and happier users. For iPhone applications you need to think of the hierarchy of your application and it's functions and make sure that the functions that users would most commonly want to perform within your app are easy to get to within a couple taps on screen (or less if that's feasible.)

CC Images

http://farm4.static.flickr.com/3436/3869462715_d756e8275b.jpg