Designing Interfaces for iPhone

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