iPhone Application Design Patterns
For the past two years, the elegant iPhone has housed some of the most poorly designed applications you could imagine. Apple’s creative teams must dry-heave over other developers’ blatant disregard of aesthetics. Much like a rude house-guest who overstays their welcome, iPhone apps have been slow to rise to the level of even looking like they belong on the handset. (End hoity-toity designer rant.)
Well, good news. Roll out the ticker tape. Why? Good design trends are finally emerging in the App Store!
This article explores the unique ways in which designers use graphical elements and screen interactions to create apps that are easy on the eyes and mind.
1. Mirroring Native iPhone UI Elements
“Tell them what you’re gonna tell them, tell them, then tell them what you told them.” Creating a whole new OS within your app can be fun, but when you’re dealing with mobile, people just want to get stuff done. Getting stuff done means that the designer has to get into the flow of the OS and create an app that requires zero explanation for the end user to use. Mirroring some of the native iPhone UI elements is a great way to do this. Giving the user familiar tools saves the time and energy of learning a new system. Who doesn’t want that?!?
In the new Facebook 3.0, you’ll find a grid layout that users can swipe left and right to access more categories. Because it mirrors Apple’s native UI, users do not have to “learn” how to use it all over again. A similar approach exists in Web design: users expect to see a logo in the top left, navigation along the top, etc. Facebook has taken this concept mobile, using large buttons that are easily distinguishable and tap-able.
Where has a similar concept, allowing users to swipe left and right to access more data.
Where To
Appbox is an colletion of apps within an app. Lots of small utilities wrapped up into one neat package. But did they go with a boring list view? Heck no! They created a cool springboard – nice!
AppBox Pro
Tweetdeck is a good example of user interface design on many levels. Notice how the design highlights recent updates. The application could display the updates in a new window, with a categorized or tabbed list. But it doesn’t. Instead, a more familiar dialogue menu is displayed — it serves as a springboard to jump to a specific category or to clear the messages altogether.
Tweetdeck
2. Simplifying The Interface
Simplifying user interfaces may sound like a mechanical task, but what lies beneath the surface of user interface design? The answer is simple: users. And what do users want? What makes them all warm and fuzzy? How do you deliver what they want so that they don’t even notice how they are consuming information?
Facebook’s first release did a great job of fitting a lot of core functionality into a small space. The problem, of course, is in laying out all that data and creating an intuitive interface. Compare 3.0 with the first release, and you’ll see how they took a “springboard” approach to streamlining the interface, keeping it intuitive and maintaining functionality.
Facebook’s first release did a great job of fitting a lot of core functionality into a small screen. The question is how to lay out all that data and creating an intuitive interface? Compare 3.0 with this first release, and you’ll see how they took a “springboard” approach to streamline the interface, keep it intuitive and maintain funtionality.
Facebook v01 vs. v02
Flickr is another big-brand example of how to do it right. Think about it – what is the core of Flickr? Pictures. Do users want to look at big, clunky navigational elements? No they want to look at pictures! Flickr has managed to pull in all of their core functionality without heading down the highway to navigational hell. In fact, a great portion of the nav is handled by interacting with the photos themselves. Simple and smart.
Flickr
3. Hardware-ish Look
Many utilities are breaking out of the conventional iPhone UI to take advantage of the device’s unique ability to respond to finger gestures. Of these, a great many are glossy hardware-esqe interfaces, mimicing our interactions from days past, but with perpectually shiny exteriors and clicks and pops that maintain their newness from the first to one-thousandth click. Next up – an app that get dirtier the more you play it!
Convertbot reminds me the very first mp3 players that came out – except way cooler.
Little Snapper mimics the function wheel that you turn on a typical digital SLR.
iHandy Level simulates the look and functionality of a real, well-used leveler.
This app looks like it belongs in a Mercedes. Plush leather, matte-finish tactile buttons – quality craftsmanship. I can just imagine how each button press feels solid, requiring the perfect amount of pressure to depress. No more, no less.
4. Big Pretty Buttons
You know that you are a geek designer when you get excited about the latest trends in list view design. And what do people do when they encounter a list view? Of course, they skim. And how do we make it easier for people to decide what interests them? That’s right: more visual cues!
Essentially, users are asking for a snapshot of what’s next, and then decide if they want more information. One way to do this is with big pretty buttons. Large and in charge, elegantly designed big buttons give the user a lot of information through their color, icons and typography.
Delivery Status Touch (iTunes Link)
Check out how Delivery Status uses appropriate colors for its big buttons to identify each brand. And good use of typography to establish a hierarchy of information.
Be Happy Now’s big buttons convey the “be happy” mantra through a mellow color scheme and light, clear typeface.
5. Layered Interface
Several apps are taking advantage of the iPhone’s abilities by layering the interface and making some pieces stationary and others vertically or horizontally scrollable.
Tweetie uses layers to lay out a bunch of info specific to each of your Twitter friends. Just check out all the info packed into this one screen!
Would we expect any less from Pantone? The color picker shown above is a layered interface that allows picking a range of colors, sorting, scrolling and opening and closing of detail screen all without driving you crazy.
6. Icons For The List View
Gone are the days of boring text list views! Iconography has given a huge boost to usability, navigability and sensibility!
These icons beautifully encapsulate schoolwork and bring an overall freshness to the layout. Great visual queues tell the student what’s happening today at a glance.
Top Floor uses simple and easily recognizable icons to guide users to their category of choice quickly.
7. Illustrated Utilities
Utilities that rely on graphics not found in the standard UI are increasing in popularity, as app developers try to set their apps apart from the crowd.
Magnetic Personalities (iTunes link)
Okay, technically this is not a “utility,” but it is still an excellent example of how buttons don’t have to be so… button-y!
8. Using Gestures In Utilities
The word “utilities” conjures a rather mechanical image in the mind: a button that links stoically to other buttons, which leads you to a list of something, which leads you to such-and-such an interaction. Boring! The possibilities for creative interaction within utility apps is huge and largely untapped (no pun intended, but you get the idea).
Mover exemplifies how to use gestures in this application for sharing contacts, photos and bookmarks. Open two devices, and flick the shared files from one handset to another.
