iPhone App Design Trends

For the past two years, the ele­gant iPhone has housed some of the most poorly designed appli­ca­tions you could imag­ine. The hype sur­round­ing iPhone has prompted many design­ers across the globe to try their skills with the new mobile medium. The result are lit­er­ally thou­sands of var­i­ous iPhone-applications that are often hardly usable and counter-intuitive. How­ever, some design­ers invest a lot of time and efforts into cre­at­ing usable and orig­i­nal user inter­faces (yes, there are usable and cre­ative UIs).

This arti­cle explores the ways in which design­ers use graph­i­cal ele­ments and screen inter­ac­tions to cre­ate iPhone-applications that are easy on the eyes and mind. The aim of this arti­cle is to dis­play com­mon trends and design approaches in iPhone app design – please notice that they are not nec­es­sar­ily opti­mal ones from the design or usabil­ity point of view.

1. Mir­ror­ing Native iPhone UI Elements

“Tell them what you’re gonna tell them, tell them, and then tell them what you told them.” Cre­at­ing a whole new OS within your app can be fun, but when you’re deal­ing with the mobile medium, peo­ple just want to get stuff done. Get­ting stuff done means that the designer has to get into the flow of the OS and cre­ate an app that requires zero expla­na­tion for the end user to oper­ate. Mir­ror­ing the lay­out and UI ele­ments that the user is already famil­iar with saves time and energy. So it seems quite con­ve­nient to use this approach when design­ing iPhone-applications.

Face­book (iTunes Link)
In the new Face­book 3.0, you’ll find a grid lay­out that users can swipe left and right to access more cat­e­gories. Because it mir­rors Apple’s native UI, users do not have to “learn” how to use it all over again. A sim­i­lar approach exists in Web design: users expect to see a logo in the top left, nav­i­ga­tion along the top, etc. Face­book has taken this con­cept mobile, using large but­tons that are eas­ily dis­tin­guish­able and tap-able.

Where (iTunes link)
Where has a sim­i­lar con­cept, allow­ing users to swipe left and right to access more data.

Tweet­deck [iTunes link]
Tweet­deck is a good exam­ple of user inter­face design on many lev­els. Notice how the design high­lights recent updates. The appli­ca­tion could dis­play the updates in a new win­dow, with a cat­e­go­rized or tabbed list. But it doesn’t. Instead, a more famil­iar dia­logue menu is dis­played — it serves as a spring­board to jump to a spe­cific cat­e­gory or to clear the mes­sages altogether.

2. Sim­pli­fy­ing The Interface

Sim­pli­fy­ing user inter­faces may sound like a mechan­i­cal task, but what lies beneath the sur­face of user inter­face design? The answer is sim­ple: 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 con­sum­ing information?

Facebook’s first release did a great job of fit­ting a lot of core func­tion­al­ity into a small space. The prob­lem, of course, is in lay­ing out all that data and cre­at­ing an intu­itive inter­face. Com­pare 3.0 with the first release, and you’ll see how they took a “spring­board” approach to stream­lin­ing the inter­face, keep­ing it intu­itive and main­tain­ing functionality.

Flickr [iTunes link]
Flickr is another exam­ple of how to achieve a good bal­ance between func­tion­al­ity, visual design and the small dis­play area on mobile devices. Think about it: what is at the core of Flickr? Pho­tos. Its users prob­a­bly do not want to look at big clunky nav­i­ga­tional ele­ments; instead, they are look­ing for pic­tures. Flickr has man­aged to fit all of its core func­tion­al­ity with­out head­ing down the high­way to nav­i­ga­tional hell. In fact, most ele­ments in the nav­i­ga­tion are han­dled by inter­act­ing with the pho­tos them­selves. Sim­ple and smart.

3. Hardware-ish Look

Many util­i­ties are break­ing out of the con­ven­tional iPhone UI to take advan­tage of the device’s unique abil­ity to respond to fin­ger ges­tures. Many of these have hardware-ish inter­faces that users are famil­iar with but come with per­pet­u­ally shiny exte­ri­ors and clicks and pops that main­tain their new­ness from the first to one-thousandth click. Next up, though: an app that gets dirt­ier the more you play with it.

Con­vert­bot (iTunes link)
Con­vert­bot reminds us of the pro­por­tion wheel we all used in grade school, except it’s more dis­tinc­tive, orig­i­nal and creative.

Lit­tle Snap­per (iTunes Link)
Lit­tle Snap­per mim­ics the wheel that you turn on a typ­i­cal dig­i­tal SLR.

iHandy Level (iTunes Link)
iHandy Level sim­u­lates the look and func­tion­al­ity of a real, well-used leveler.

Where To? [iTunes Link]
This appli­ca­tion looks like it belongs in a Mer­cedes. Plush leather, matte-finish tac­tile but­tons: qual­ity crafts­man­ship. We can just imag­ine how each but­ton press feels solid, requir­ing the per­fect amount of pressure.

4. Rich, Padded And Pretty List Views

You know that you are a geek designer when you get excited about the lat­est trends in list view design. And what do peo­ple do when they encounter a list view? Of course, they skim. And how do we make it eas­ier for peo­ple to decide what inter­ests them? That’s right: more visual cues!

Essen­tially, users are ask­ing for a snap­shot of what’s next, and then decide if they want more infor­ma­tion. One way to do this is with big pretty but­tons. Large and in charge, ele­gantly designed big but­tons give the user a lot of infor­ma­tion through their color, icons and typography.

Deliv­ery Sta­tus Touch (iTunes Link)
Check out how Deliv­ery Sta­tus uses appro­pri­ate col­ors on its big but­tons to iden­tify each brand. And it uses typog­ra­phy well to estab­lish a hier­ar­chy of information.

Be Happy Now (iTunes Link)
Be Happy Now’s big but­tons con­vey the “be happy” mantra through a mel­low color scheme and light, calm and clear typeface.

Next Read [iTunes link]
The Next Read appli­ca­tion allows friends to share books. Here all books about a par­tic­u­lar topic are pre­sented, includ­ing the title, cover image, review rat­ing and num­ber of peo­ple who have rec­om­mended it. Notice the padding and a lot of white space for each nav­i­ga­tion option; this makes the areas eas­ily click­able and eas­ier to navigate.

Nike [iTunes link]
Nike’s work­out appli­ca­tion for women includes a nice visual treat­ment and illus­tra­tions that match the brand. It breaks out of the tra­di­tional UI just enough to com­mu­ni­cate the brand with­out mak­ing it dif­fi­cult for users to under­stand the inter­face and how to use it.

Bor­ange [iTunes link]
Bor­ange is a “social avail­abil­ity” appli­ca­tion that helps you coor­di­nate meet­ings with friends. The list view presents a lot of infor­ma­tion: friends you want to hang out with, the meet­ing loca­tion and a nice visu­al­iza­tion of friends who are available.

5. Lay­ered Interface

Sev­eral appli­ca­tions take advan­tage of the iPhone’s capa­bil­i­ties by lay­er­ing the inter­face and mak­ing some ele­ments sta­tion­ary and oth­ers ver­ti­cally or hor­i­zon­tally scrol­lable. This approach has sev­eral benefits:

1. It reduces the num­ber of tra­di­tional nav­i­ga­tion ele­ments that are nec­es­sary (i.e. fewer but­tons help to avoid a clut­tered interface).
2. It gives users a faster route to the infor­ma­tion they want.
3. More screen space is avail­able for information.

Tweetie (iTunes Link)
Tweetie uses lay­ers to orga­nize infor­ma­tion spe­cific to each of your Twit­ter friends. Just look at all of the infor­ma­tion packed into this one screen!

Barnes & Noble [iTunes link]
Barnes & Noble has a lay­ered inter­face that allows you to quickly slide through new releases at the top or dive into more cat­e­gories below.

USA Today [iTunes link]
USA Today takes a slightly dif­fer­ent approach to lay­er­ing the inter­face in its “Pic­tures” sec­tion: it uses slid­ing pan­els to dis­play blocks of infor­ma­tion. While the inter­face may look clut­tered at the first glance, one can eas­ily get around it. The inter­est­ing part is that within each panel you can slide thumb­nails left and right to view more images.

myPan­tone [iTunes link]
Would we expect any less from Pan­tone? The color picker shown above is a lay­ered inter­face that lets you pick from a range of col­ors, sort and scroll as well as open and close detail screens, all with­out too dri­ving you crazy.

6. Icons For The List View

Icons aren’t just for springboard-loving folks. On small screens, icons can give a huge boost to an application’s usabil­ity and nav­i­ga­tion. Let’s now take a look at some exam­ples of appli­ca­tions that use icons to their advantage.

iStudiez (iTunes Link)
This appli­ca­tion uses var­i­ous edu­ca­tional metaphors as icons to clearly com­mu­ni­cate the pur­pose of the appli­ca­tion. Excel­lent visual cues tell the stu­dent what’s hap­pen­ing today at a glance.

Top Floor (iTunes Link)
Top Floor uses sim­ple and eas­ily rec­og­niz­able icons to quickly guide users to their cat­e­gory of choice.

New York Times
Isn’t it great when appli­ca­tions just let you do what­ever you want to do? For an app with as much infor­ma­tion as the New York Times’, users are bound to have their favorite sec­tions. Well, guess what? The New York Times cares: it lets you cus­tomize the tab bar’s nav­i­ga­tion to include only your favorite sec­tions of the paper. Drag an icon down the tab bar and you are set. The down­side of the design is, of course, its lack of visual appeal.

File­maker [iTunes link]
Here is another exam­ple of beau­ti­ful icons that aren’t obscure or con­fus­ing. Design­ers should never use icons just for the sake of hav­ing icons. As design­ers, we want icons that illus­trate what users are actu­ally going to get when they choose a par­tic­u­lar path. Nicely done, Filemaker.

7. Illus­tra­tions in use

Appli­ca­tions that rely on graph­ics not found in the stan­dard user inter­faces are increas­ing in pop­u­lar­ity, as devel­op­ers try to set their apps apart from the crowd. Some­times it works, but often it doesn’t. The more uncon­ven­tional a design is, the more likely it is to have usabil­ity prob­lems. Please always con­duct usabil­ity test­ing before releas­ing a prod­uct with a “cre­ative” user interface.

Mag­netic Per­son­al­i­ties (iTunes link)
An excel­lent exam­ple of how but­tons don’t have to look like stan­dard buttons.

Sug­ar­Sync [iTunes link]
This inter­face could have eas­ily fol­lowed the tra­di­tional list-view route. Instead, the design­ers played with the con­cept of “con­nec­tiv­ity” to cre­ate a visual treat­ment that com­mu­ni­cates the pur­pose of the app. It is unusual and requires some time to get used to.

Mom Maps [iTunes link]
Another exam­ple of how illus­tra­tions do a great job of pulling together the whole con­cept of an application.

8. Using Gestures

Clas­sic lin­ear nav­i­ga­tion may look bor­ing: a but­ton that links to other but­tons, which leads you to a list of some­thing, which leads you to such-and-such an inter­ac­tion. Not really spec­tac­u­lar. The pos­si­bil­i­ties for cre­ative inter­ac­tion in util­ity apps are huge and largely untapped (no pun intended).

Mover (iTunes link)
Mover exem­pli­fies how to use ges­tures for shar­ing con­tacts, pho­tos and book­marks. Open two devices, and flick the shared files from one hand­set to the other.

ABC Ani­mals [iTunes link]
This appli­ca­tion teaches while it enter­tains. Being able to trace a let­ter with your fin­ger is another exam­ple of how the iPhone responds to touch and movement.

All Recipes [iTunes link]
This appli­ca­tions allows you to mix in var­i­ous ele­ments to cre­ate your next meal using gestures.

Some­thing is missing?

We missed some com­mon design approach or trend? Please let us know in the com­ments to this post!

About the Author

Jen Gor­don is the owner of Atlanta-based iPhone app design stu­dio Clever Twist, which will release its lat­est app Farm Friends in just a few days. She spe­cial­izes in usable inter­faces, beau­ti­ful design and straight talk. She loves her fam­ily and the iPhone and peri­od­i­cally dreams that she’s close friends with Dolly Par­ton. Fol­low her on Twit­ter or drop her a line to say “Hi!”.

(al)