Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Interfaces for iPhone

0ebf471a3ae8df42a84f93a7efbbdbd0?s=47 Ash Furrow
February 22, 2012

Designing Interfaces for iPhone

0ebf471a3ae8df42a84f93a7efbbdbd0?s=128

Ash Furrow

February 22, 2012
Tweet

More Decks by Ash Furrow

Other Decks in Technology

Transcript

  1. Designing Interfaces for iPhone Ash Furrow

  2. Objectives • By the end of today, you’ll be able

    to: • Describe the mechanics of iPhone app interfaces • Identify apps that don’t adhere to interface design principles • Justify the importance of interface design
  3. iPhone is Different • Touch • Gestures • 3.5” Screen

    • Direct Data Manipulation
  4. Direct Data Manipulation • Impossible with a keyboard and mouse

    • Intuitive on a touch device
  5. iPhone is Different • Web pages don’t fit • Need

    to format content
  6. iPhone is Different • Users have expectations • Adhere to

    them
  7. Views • Everything under the status bar ! • A

    collection of controls • Pretty boring
  8. View Hierarchies • A collection of views and the transitions

    between them
  9. View Hierarchies Settings App Wifi Settings Network Configuration Screen Brightness

    Sound Settings Wallpaper Settings Ringtone Settings Text Message Sounds ... ...
  10. View Hierarchies Settings App Wifi Settings Network Configuration Screen Brightness

    Sound Settings Wallpaper Settings Ringtone Settings Text Message Souds ... ...
  11. Navigating View Hierarchies • How do we get from one

    view to another? ! • And how do we get back?
  12. Navigating View Hierarchies

  13. View Hierarchies • Users have the tools to navigate anywhere

    within your view hierarchy • Typically, a view should only appear in your view hierarchy once • Don’t navigate on the user’s behalf
  14. View Hierarchies • A view hierarchy with only one view

  15. Modal Views • Disrupt view hierarchies • Change to a

    new mode • Compose an email • Create a new calendar event • Watch a video
  16. Modal Views

  17. Modal Views • Modal views exist outside the view hierarchy

    • Can be accessible from multiple places in your hierarchy • Modal views return you to exactly where you were • Modal views can even be a modal view hierarchy
  18. View Hierarchies Settings App Wifi Settings Network Configuration Screen Brightness

    Sound Settings Ringtone Settings Text Message Souds ... Add New Wifi Network
  19. Modal Views • Modal views can even be a modal

    view hierarchy • Any view in the modal view hierarchy can cause a return to the normal hierarchy
  20. Modal View Hierarchies Awesome App Post New Comment View Sign

    In View ... Forgot Password View Sign Up View
  21. Tab Bars • Tab bars sit at the bottom of

    a view • Use tab bars to give: • Different perspectives on the same data • Different subtasks within your app
  22. Tab Bars

  23. Tab Bars • Each tab bar contains its own view

    hierarchy • Might be a view hierarchy of one • The tab bar itself sits on top of its hierarchies
  24. Content Creation • Displaying content is easy • Allowing the

    user to create content is hard • Hire a designer
  25. Going Forward

  26. Contact @ashfurrow ashfurrow.com podcast: dashdashforce.me