Apple iPhone Tech Talk London 2009: iPhone User Interface Design Essentials

Eric Hope ehope@apple.com — User Interface Evangelist

• solve a problem
• clearly defined style
  • axes: (usage) serious / fun; (content) tool / entertainment

serious tool

• use alignment well — see address book & settings for examples
• avoid redundancy
  • if a word is showing up more than once on a screen, get rid of it
• prioritise info, esp. above the fold

games (fun entertainment)

• games should be straight in — no hierarchy
  • most games are casual — you don’t know how long the user will have
• games should be multitouch enabled — most are
  • any that aren’t are frustrating
• lowercase “i” means go back to menu/options
• give loud visual feedback

serious entertainment

• stick to standard UI elements for navigation
  • the user doesn’t want to learn new things to get to their entertainment

utilities — dead centre on the grid

• as graphically rich as possible, on a single screen
• can they be run five feet away from you in a dock?
• equate to single-use appliances

essential

• one door to one room
• want a tree, not a web
• shared things should be in a modal sheet
• clean layout:
  • focus on structural integrity — as if they were real physical objects
  • the human mind feels uncomfortable if the UI would fall over if it were physical

gorgeous application icon

• one of the most underestimated and undervalued contributions
• legible:
  • one primary silhouette — can you do it in a shadow on the wall?
  • the mind parses shapes, then colours, then words
• high quality (fidelity) art
  • store is saturated with different icons
  • initial apps had equivalent to apple, but now full colour, hi quality
  • apple don’t need to change their apps — they’re built-in
• good example:
  • ramp champ — didn’t sell well due to icon ambiguity
  • pretty and well-defined, but name and icon didn’t mean much
• “your icon is your business card”
• make sure any branding doesn’t obscure silhouette

hi fidelity UI

• tactile design:
  • no intermediary to interface (mouse, keyboard)
  • want wood, leather, aluminium — increases perceived value of app
• free yourself by starting with paper prototypes

dynamic content — most essential

• your app needs a pulse
• apps have a short shelf life on the store
  • most mac apps are serious tools
  • most iphone apps are not — they’re content consumption based
• most users read what’s in the update before they upgrade
  • don’t just “fixed bugs”
  • even if you say “fixed memory leak that affected 1% of users”
  • it’s a “love letter to your customer”

add in-app purchases

• adds investment to your app
• people will come back if they’ve purchased content within your app
• even if a user only spends 99¢ on apps a week, they could spend 10 x 99¢ within a single app — increases their return on investment
• make sure that users can pick up their existing purchases when they get a new phone

animation

• e.g. springboard press and hold
• avoid continuous animation

sound

• “the forgotten frontier for iPhone development”
• 90% of non-game apps have no sound
• compulsion like a mother going to a crying baby
• e.g. mail sent sound in the background even when you’ve moved on to doing something else

polish

• standard alert is generally a bad thing
• icon for spotlight is 29x29 pixels — make sure you stand out
• don’t introduce push notifications until it’s solid
  • people will disable it and never see improvements
• support extras like copy/paste, undo/redo (generally uses shake)

app definition statement

• (your differentiator) (your solution) for (your audience)