iPhone App Design Trends

Advertisement

For the past two years, the elegant iPhone has housed some of the most poorly designed applications you could imagine. The hype surrounding iPhone has prompted many designers across the globe to try their skills with the new mobile medium. The result are literally thousands of various iPhone-applications that are often hardly usable and counter-intuitive. However, some designers invest a lot of time and efforts into creating usable and original user interfaces (yes, there are usable and creative UIs).

This article explores the ways in which designers use graphical elements and screen interactions to create iPhone-applications that are easy on the eyes and mind. The aim of this article is to display common trends and design approaches in iPhone app design – please notice that they are not necessarily optimal ones from the design or usability point of view.

1. Mirroring Native iPhone UI Elements

“Tell them what you’re gonna tell them, tell them, and then tell them what you told them.” Creating a whole new OS within your app can be fun, but when you’re dealing with the mobile medium, 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 operate. Mirroring the layout and UI elements that the user is already familiar with saves time and energy. So it seems quite convenient to use this approach when designing iPhone-applications.

Facebook1 (iTunes Link2)
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.

Facebook

Where3 (iTunes link4)
Where has a similar concept, allowing users to swipe left and right to access more data.

Where

Tweetdeck5 [iTunes link6]
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 Animation

Flickr7 [iTunes link8]
Flickr is another example of how to achieve a good balance between functionality, visual design and the small display area on mobile devices. Think about it: what is at the core of Flickr? Photos. Its users probably do not want to look at big clunky navigational elements; instead, they are looking for pictures. Flickr has managed to fit all of its core functionality without heading down the highway to navigational hell. In fact, most elements in the navigation are 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. Many of these have hardware-ish interfaces that users are familiar with but come with perpetually shiny exteriors and clicks and pops that maintain their newness from the first to one-thousandth click. Next up, though: an app that gets dirtier the more you play with it.

Convertbot9 (iTunes link10)
Convertbot reminds us of the proportion wheel we all used in grade school, except it’s more distinctive, original and creative.

Convertbot

Little Snapper11 (iTunes Link12)
Little Snapper mimics the wheel that you turn on a typical digital SLR.

Little Snapper

iHandy Level13 (iTunes Link14)
iHandy Level simulates the look and functionality of a real, well-used leveler.

iHandy Level

Where To?15 [iTunes Link16]
This application looks like it belongs in a Mercedes. Plush leather, matte-finish tactile buttons: quality craftsmanship. We can just imagine how each button press feels solid, requiring the perfect amount of pressure.

where to

4. Rich, Padded And Pretty List Views

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 Touch17 (iTunes Link18)
Check out how Delivery Status uses appropriate colors on its big buttons to identify each brand. And it uses typography well to establish a hierarchy of information.

Delivery Status

Be Happy Now19 (iTunes Link20)
Be Happy Now’s big buttons convey the “be happy” mantra through a mellow color scheme and light, calm and clear typeface.

Be Happy Now

Next Read21 [iTunes link22]
The Next Read application allows friends to share books. Here all books about a particular topic are presented, including the title, cover image, review rating and number of people who have recommended it. Notice the padding and a lot of white space for each navigation option; this makes the areas easily clickable and easier to navigate.

next read

Nike23 [iTunes link24]
Nike’s workout application for women includes a nice visual treatment and illustrations that match the brand. It breaks out of the traditional UI just enough to communicate the brand without making it difficult for users to understand the interface and how to use it.

nike

Borange25 [iTunes link26]
Borange is a “social availability” application that helps you coordinate meetings with friends. The list view presents a lot of information: friends you want to hang out with, the meeting location and a nice visualization of friends who are available.

borange

5. Layered Interface

Several applications take advantage of the iPhone’s capabilities by layering the interface and making some elements stationary and others vertically or horizontally scrollable. This approach has several benefits:

  1. It reduces the number of traditional navigation elements that are necessary (i.e. fewer buttons help to avoid a cluttered interface).
  2. It gives users a faster route to the information they want.
  3. More screen space is available for information.

Tweetie27 (iTunes Link28)
Tweetie uses layers to organize information specific to each of your Twitter friends. Just look at all of the information packed into this one screen!

Tweetie

Barnes & Noble29 [iTunes link30]
Barnes & Noble has a layered interface that allows you to quickly slide through new releases at the top or dive into more categories below.

barnes and noble

USA Today31 [iTunes link32]
USA Today takes a slightly different approach to layering the interface in its “Pictures” section: it uses sliding panels to display blocks of information. While the interface may look cluttered at the first glance, one can easily get around it. The interesting part is that within each panel you can slide thumbnails left and right to view more images.

usa today

myPantone33 [iTunes link34]
Would we expect any less from Pantone? The color picker shown above is a layered interface that lets you pick from a range of colors, sort and scroll as well as open and close detail screens, all without too driving you crazy.

pantone

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 usability and navigation. Let’s now take a look at some examples of applications that use icons to their advantage.

iStudiez35 (iTunes Link36)
This application uses various educational metaphors as icons to clearly communicate the purpose of the application. Excellent visual cues tell the student what’s happening today at a glance.

iStudiez

Top Floor37 (iTunes Link38)
Top Floor uses simple and easily recognizable icons to quickly guide users to their category of choice.

Top Floor

New York Times39
Isn’t it great when applications just let you do whatever you want to do? For an app with as much information as the New York Times’, users are bound to have their favorite sections. Well, guess what? The New York Times cares: it lets you customize the tab bar’s navigation to include only your favorite sections of the paper. Drag an icon down the tab bar and you are set. The downside of the design is, of course, its lack of visual appeal.

wall street jounal

Filemaker40 [iTunes link41]
Here is another example of beautiful icons that aren’t obscure or confusing. Designers should never use icons just for the sake of having icons. As designers, we want icons that illustrate what users are actually going to get when they choose a particular path. Nicely done, Filemaker.

filemaker

7. Illustrations in use

Applications that rely on graphics not found in the standard user interfaces are increasing in popularity, as developers try to set their apps apart from the crowd. Sometimes it works, but often it doesn’t. The more unconventional a design is, the more likely it is to have usability problems. Please always conduct usability testing before releasing a product with a “creative” user interface.

Magnetic Personalities42 (iTunes link43)
An excellent example of how buttons don’t have to look like standard buttons.

Magnetic Personalities

SugarSync44 [iTunes link45]
This interface could have easily followed the traditional list-view route. Instead, the designers played with the concept of “connectivity” to create a visual treatment that communicates the purpose of the app. It is unusual and requires some time to get used to.

sugar sync

Mom Maps46 [iTunes link47]
Another example of how illustrations do a great job of pulling together the whole concept of an application.

mom maps

8. Using Gestures

Classic linear navigation may look boring: a button that links to other buttons, which leads you to a list of something, which leads you to such-and-such an interaction. Not really spectacular. The possibilities for creative interaction in utility apps are huge and largely untapped (no pun intended).

Mover48 (iTunes link49)
Mover exemplifies how to use gestures for sharing contacts, photos and bookmarks. Open two devices, and flick the shared files from one handset to the other.

Mover

ABC Animals50 [iTunes link51]
This application teaches while it entertains. Being able to trace a letter with your finger is another example of how the iPhone responds to touch and movement.

abc animals

All Recipes52 [iTunes link53]
This applications allows you to mix in various elements to create your next meal using gestures.

all recipies

Something is missing?

We missed some common design approach or trend? Please let us know in the comments to this post!

(al)

↑ Back to topShare on Twitter

Jen Gordon is a designer, writer and founder of mobile design training site, Tapptics. She teaches Idea People how to make apps here. She teaches fellow designers and developers how to create beautiful and usable apps here.

  1. 1

    God bless iPhone OS has a good trend of 2D icons but strangely there is no clue on how to prevent the diversity of icons on same function. I have found 5 different Search icons on screens attached.
    I think Apple should create global repository for icons (guides and styles)

    0
  2. 2

    Facebook was impressed!

    0
  3. 3

    Nice post. Twitteriffic is a really nice looking app too.

    0
  4. 4

    Nice list! I think I missed App Things by Culture Code on that list!

    0
  5. 5

    There is one app design, which uses a bit of all the above techniques. The apps name is Mozi24. It’s about cimemas, cinema programs (these two for Hungary only) and movie news. If curious, you may find it in the Entertainment category.

    0
  6. 6

    Your WSJ example is actually The New York Times app.

    0
  7. 7

    Great post. Just wanted to point out that the entry for Wall Street Journal is actually the New York Times app (which happens to be one of my favorites.)

    0
  8. 8

    Now if only Android App developers could learn from your examples. Seems to be a good years-worth of lag in design.

    0
  9. 9

    Love that magnet face! Nostalgia made anew…great article on design trends.

    0
  10. 10

    great post, a lot to do on usability…

    0
  11. 11

    awesome analysis like always!

    0
  12. 12

    very nice selection. we liked it so much we created a special iPhone widget (of which all commissions are donated to charity: water). Can be embedded on your site if you wish.

    http://appsfire.com/selection.php?cid=1255097338-648409481&title=SmashingMag+trending+designs

    Ouriel Ohayon

    0
  13. 13

    i love u SM!

    0
  14. 15

    “Please always conduct usability testing before releasing a product with a ‘creative’ user interface.” Agreed. My motto for iPhone app design: Audacious creativity, tested usability.

    0
  15. 16

    The screenshot of Facebook in this article shows buttons on the home screen, my Facebook app (which is the latest on the UK App Store) is rows of icons with no button border. Any ideas?

    0
  16. 17

    awesome article… as usual !

    0
  17. 18

    Im just getting into the iPhone App Development, very helpful article.
    Another great example is http://www.geoquesttech.com

    0
  18. 19

    Great Article… (as usual) ;-)

    0
  19. 20

    So… when is Smashing Mag going to make an iPhone friendly version?

    0
  20. 21

    What do you think of broadersheet.com as an iPhone style? It has some interesting gestures and custom ui elements for preferences.

    0
  21. 22

    great article!

    I’ve got to say there’s something not quite right about the facebook UI though – i suppose it has to tie in with the web version though ;)

    0
  22. 23
  23. 24

    amazing iphone app trend. another great post.
    thanks brother i like it .

    0
  24. 25

    Although it is a webapp and not a native app, I think the Gmail should be mentioned. It is certainly the most sophisticated functionality that I have seen in an iphone app.

    0
  25. 26

    I LOVE IT! Those are Hot!

    0
  26. 27

    Thanks for these design trends. They will come in handy!

    0
  27. 28

    Whereever it is possible, developers should follow Apple’s “Accessibility Programming Guide for iPhone OS”. For blind users, the iPhone 3GS is a kind of miracle, everything is fully accessible out of the box, but third-party apps are often not as accessible for blind VoiceOver users as they could be. More at:
    http://blind.wikia.com/wiki/IPhone

    0
  28. 29

    Fantastic article! I just downloaded Tweetie 2.0 and they have a fantastic approach to refreshing content on your twitter feed. Some apps put a “Refresh” button on the top of the caption bar. It’s always there and the only time you really need to refresh the list, is when you’ve read through all your current tweets. So that’s a waste of space, and as you stated, it clutters up the UI with functionality that you don’t need all the time.

    Some apps address this by placing the refresh button in the list at the very top. When you have read your last tweet there is an entry that has a Refresh button. This is better. It’s only shown when I care about it, and it doesn’t waste space in the caption bar. However, I still have to pull the list down with my finger, then move my finger to tap the Refresh button, wait for the refresh and go back to pulling and scrolling through the list. Again, that’s really not bad at all.

    Tweetie 2.0 makes it better. It puts the refresh functionality at the top of the list but the Refresh list entry isn’t a button. Instead it states, “Pull down and hold to refresh.” So as I am scrolling through the list, I hit the top of my tweets, I just keep pulling down the list with my finger and it refreshes. I continue swiping and pulling down the list as if my task was never interrupted. Perfect.

    0
  29. 30

    I am a huge fan of the ecoki iphone app, just saw it on abduzeedo today.

    http://www.ecoki.com/iphone

    0
  30. 31

    Nice selection you’ve got here!

    There is also Lexika, this app has a nice mix between the iphone UI and some custom design. I like it!
    http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=326169492&mt=8

    0
  31. 32

    Sorry to toot my own horn but here’s another hardware-ish look: http://wessley.net/LEDit

    Great post btw.

    0
  32. 33

    nice article. I liked.

    0
  33. 34

    i wish i was rich enough to get an iphone… great article. *sigh*

    0
  34. 35

    i am missing iphone .. :sigh:

    0
  35. 36

    Just wanted to comment on your New York Times post. You say that the layout for choosing your sections lacks visual appeal, but in actuality it was designed to look identical to Apple’s own applications. If you go into iPod, choose “More” and select “Edit”, you have the same option to reorganize your icons in the bar at the bottom – and you’ll notice that when doing so, you are presented with the same layout.

    0
  36. 37

    Props to my pal @fiftyforty for creating that lovely WHERE App interface.

    0
  37. 38

    Thanks for featuring MomMaps!
    Recently we’re featured by Apple in Parenting apps (Apps for Moms and Dads) – http://www.apple.com/iphone/apps-for-everything/momsdads.html

    Thanks
    Ravi

    0
  38. 39

    Another great example under the layered category is the app KOMO News. I realize this is a app covering news in a specific region but it’s design is worth taking a look at. Good article

    0
  39. 40

    Nice article!!.. I am a UI designer I hope it will help me to improve my skill thanks..

    0
  40. 41

    interesting list. i find some of the examples only vaguely appropriate to the category they’re presented in: Tweetdeck is hardly “mirroring native iPhone UI elements” – Midomi is a far better example of this, offering slick dark versions of standard UI elements. or, does Next Read really have a “rich, pretty list view”? iStudiez would be much better for this.

    i do like the hardware emulation, layered UI, and icon examples, though.

    0
  41. 42

    anybody see “real or fake” app yet. should make the top 10.

    http://www.realorfakeiphoneapp.com/

    0
  42. 43

    What, in your view, is the special allure for Second Life content creators, assuming of course that they are already competent with the Blue Mars-compatible software and not just working with prims? ,

    0
  43. 44

    I can do a lot of intesting things with two fingers. ,

    0
  44. 45

    Dear Gordon,
    Have you seen the “pmg PassCode” passwords program? Very nice app and this article is very good and also!

    0
  45. 46

    Nice overview. iPhone is such a design icon now, app websites need to keep their look and feel fresh and inviting to attract savvy app buyers. Some fun design ideas here.

    0
  46. 47

    you sharing latest trend apps. thanks

    0
  47. 48

    I’d love to see something specifically on sign-up forms for the iphone….is there a post like that I’m not finding?

    Thanks.
    @ryangraves

    0
  48. 49

    These are cool apps. Wouldn’t it be nice to someday see some of these apps on the desktop? Try going to http://smi.sh to see an app for the PC that will be the depository for all future apps.

    0
  49. 50

    Wow this is really a good page, very useful information for iPhone developers and designers.

    0
  50. 51

    Learn a lot here! Thanks. Intuition (www.iconapps.com) is another app design that I like to add here. Although it is niche for Mom, it’s interface and usage is pretty amazing categorized under to-do/productivity.

    0
  51. 52

    Michael Dela Cruz

    January 20, 2011 3:13 pm

    Fantastic Article I may want to commission your studio to design my first iPhone app.

    0
  52. 53

    interactivechris

    June 11, 2011 7:36 am

    Nice one to read! good overview

    0
  53. 54

    As a graphic designer I love how app designs have forced us to rethink how we beautify small spaces. Number 3 is pretty sweet. 1password has a similar theme in there iphone app design that i also love

    0
  54. 55

    Derek Brooklands

    April 3, 2012 11:32 pm

    Awesome article. I’ve been looking for a solid breakdown of interface examples like this.

    Well put together. Thanks!

    -

    0

↑ Back to top