UI Patterns and Examples for iPhone and iPad

Posted on 2012/01/11 by


Web usage via mobile devices is increasing dramatically. Companies are now including mobile devices into the scope of their online presence. For UX designers this brings a shift in skills needed to serve clients as mobile relevant to every conversation. Below are examples of iOS apps that inform and inspire mobile UI design.

by Nikki Tiedtke and Jim Kalbach

As the web becomes more and more mobile, web designers have to broaden their skill sets. Luckily, many of the classic web design skills transfer over to mobile UX design. But there are significant differences. Screen real estate is perhaps the biggest difference, which drives many of the solutions and decisions you have to make in mobile design.

We find patterns and pattern libraries particularly helpful for understanding design challenges, in general. Below is a list of UI examples specifically for the iPhone and iPad.

While it may be too early to talk about true “standards” in mobile design, there are similarities across the UIs in these examples. Some things we’ve noticed are:

  • Skeuomorphs – Pages that turn like in a real book, mechanical-looking switches for on/off functions, 3-D buttons and knobs, metallic-looking covers and backgrounds: iPad and iPhone UIs make frequent use of real world metaphors, also called skeuomorphs.
  • Direct manipulation – This almost goes without saying, but much of the interaction is via drag-and-drop and direct manipulation.
  • Large targets – This also goes without saying, but links and buttons needed to be larger and with enough distance between them to accommodate “fat fingers.”
  • Horizontal scrolling – On the web you generally try to avoid horizontal scrolling of pages. On the iPad and iPhone it’s quite common and a fairly nature gesture. As a result, I think were also starting to see more and more horizontal scrolling mechanisms on the web, so mobile design has an effect on web design.
  • Icon conventions for mobile– The following icons seem to be accepted conventions these days in mobile apps. These appear often without any other label for clarification.
    • Cogged wheel = Settings
    • Arrow coming out of box = Actions
    • Box with pencil = Compose

We’re sure there are many more conventions emerging–this is just the beginning.

Which patterns have you noticed in mobile UX design that are different from classic web design?

Posted in: English