iOS Human Interface Guidelines summary

Part 1 – Chapters 1 through 6

Apple’s iOS Human Interface Guidelines describes the guidelines and principles that help you design an amazing user interface and user experience for your iOS app. I’ve been reading Apple’s iOS Human Interface Guidelines (to download the PDF, see the top right corner of this linked page on the Apple developer website). It’s a great read for anyone who wants to start designing an app, I highly recommend giving it a look through.
However, if you’ve been a designer for a number of years already, and especially if you have your own iPhone or iPad, there are quite a few things that will probably be common knowledge to you already in terms of both design and usability.

I decided for the designers out there who don’t have time to read ALL of Apple’s guidelines and PDFs for designing the perfect app (that’s pretty much everyone) I’d come up with a short, point form summary of the full 156 page iOS Human Interface Guidelines PDF. Enjoy!

Sizes:

iPhone 5 & 5S:

  • Retina display
  • 4-inch (diagonal) widescreen Multi-Touch display
  • 1136-by-640-pixel resolution at 326 ppi

There is an excellent resource for a downloadable iPhone 5 UI Template here:

http://www.teehanlax.com/tools/iphone/

 

iPhone 4: 640 x 960px (and vice versa)
buttons: 44 x 44px

The new iPad also has new specs:

Here is another excellent downloadable PSD file for Retina iPad UI.

http://www.teehanlax.com/tools/ipad
iPad: 1024 x 768px (and vice versa, buttons 88 x 88px)

Users / Target:

Determine the main purpose of the App.

Create an App definition statement:

Determine who your target is and what the main function of your App is, and how it benefits them.

Design:

Design the App for the device:

  • Controls should look tappable
  • Structure should be clean, easy to navigate
  • User feedback should be subtle but clear
  • Always have a reason for customization
  • If the App purpose is viewing content, don’t design a UI that competes or is overly designed / busy
  • If the App is a game or story-driven, create a unique design world full of rich graphics and beautiful, innovative interactions

Pop up menus and using lists, styles:

2 different styles – rounded or square lists (pg 44, 45)

Focus on the Primary Task:

  • Analyse what’s needed in each screen
  • Ask if it’s critical information or function
  • Minimize the number & prominence of controls
  • Customize controls subtly so they integrate with your App’s graphic style

Consider fading controls after user stops interacting with them for awhile & redisplaying when user taps screen

Consider fading whole screen (slide icons or nav on and off screen after 10 seconds or so of non-interaction)

Think top-down:

Just like website designs, put the most frequently used information on a higher level (near the top)

Make path of use logical:

  • Make navigation logical and easy to use (use back buttons and / or breadcrumbs)
  • In most cases, give users ONLY ONE path to a screen
  • If a screen needs to be accessible in different contexts, consider modal view

Make the main function of the App immediately apparent:

  • Minimize the number of controls
  • Use standard controls
  • Label controls clearly
  • Always – Be consistent!

Minimize effort required for user input:

Make it easy for users to input choices (ie. picker / button instead of text field > it’s easier for a user to select from a list than to type words)

Enhance sharing & connecting:

  • Social media, info, location, etc.
  • Make it easy for people to interact and share location, opinions, scores, ratings, etc

Added Value:

Go beyond the App and share data with other tools (google maps, GPS, web RSS feeds, FB, twitter etc)

Avoid including settings:

Use configuration options (usually in back view – see pg 52 for more information)

Branding:

  • Branding should be refined, subtle & unobtrusive
  • Avoid taking space away from important content (ie. subtly design / customize background of screen instead of persistent header bar)
  • EXCEPTION – the icon should be well branded

Search functions:

See pg 53 & 54 for details if your App requires this

App Store description

Briefly & accurately describe your app, highlight App qualities

Text & Headline content:

  • Convey information in short, condensed headline style
  • Keep it direct & concise
  • Controls > short labels or symbols (see buttons & icons, pg 135 or design your own pg 149)

Consistent use of UI elements:

Add realism to design elements:

Use realistic design elements & movement / animation to enhance your App (ie. make sure your views & controls mimic real objects)

Graphics:

  • Rich beautiful graphics engage people
  • Consider texture, wood, metal, stitching…
  • Create high-res artwork
  • You can always scale down but not up! Create the original in a multiple of the same dimension
  • OR design for newest release / iPad

Orientation Changes:

  • Portrait vs landscape (pg 58-60)
  • Always maintain focus on primary content
  • Consider adding more content and changing layout in landscape mode instead of just scaling up (ie. add sidebar vs pop over menus)
  • Provide a consistent experience in all rotations
  • Avoid reformatting information or re-wrapping text on rotation

Buttons / Target sizes:

Create a user friendly amount of space between buttons (iPhone 44x44px, iPad 66x66px or 88x88px)

Subtle Animation use:

  • Animation can be used to communicate effectively but should not get in the way of user’s tasks
  • Animation should be consistent with any built-in-apps (GPS, etc)
  • (As always…) Be consistent with your animation usage

Gestures:

  • Use simple rather than complex gestures (tap, swipe to scroll, pinch to zoom etc)
  • Saving your work (see page 63)

Starting up / Launching the App:

  • Display a launch image that resembles the 1st screen of the App
  • Launch the app in default orientation
  • Restore state of the app to that in use when user previously stopped it

Stopping:

Save the current state when stopping App

Disclaimer:

Provide a disclaimer in the App description so users can view disclaimer in the App store

Multitasking:

  • Make sure your UI can handle the double-high status bar (web/browser only)
  • Trigger the double-high status bar during testing to ensure there are no layout problems (page 72)

Printing:

If your App needs the ability to print… (see page 73)

Integrating Ads:

If your App needs to integrate Ads… (see pages 74-79)

Sound:

Use audio appropriately (Pages 80-87)

Voiceover & Accessibility:

  • Supporting voiceover – you should provide descriptive information about views & controls
  • If you’re designing with the standard use of UI elements there is little / no additional work. If customized, you’ll need more information so that voiceover works.

Thanks for reading. I hope this gave you a good overview.

2 Comments

  1. ilse Jun 23, 2011 - 02:11 PM

    Thanks Kenton!

  2. Kenton Jun 21, 2011 - 11:32 PM

    Awesome summary!