18. Other capabilities
GPS, accelerometer, microphone, light, camera...
Applications from left to right: iHandy Level, Stickybits, Square
19. Human Factor
Left vs. right handed, proximity of reach, fatigue...
21. Define the app
22. Not a scaled down
Option + “=” on a Mac will give you a ≠
23. Web app vs. native
Left to right: Twitter Mobile Web and Tweetie iPhone App
24. What’s the soul of the
25. Primary touchpoint?
Mobile is the main source of traffic.
Applications from left to right: Ramp Champ, Convertbot
Mobile app augments other experiences.
Applications from left to right: Starbucks, iHome
27. Optimized UI
Same functionality but in an optimized way.
Applications from left to right: Evernote, Gowalla
28. What’s the use case?
How, where, when is an app going to be used?
Who is using the app?
Image via mindingthegaps.com
29. Be clear on the use
From icon to user interface
30. Mobile informs
Mobile apps can be a test bed for new features in
other experiences. Design mobile first.
31. Where are people
What’s their technology ecology?
iPhone? Android? Mac OS? Windows? Laptop?
32. Think about design
33. Consider brand
34. Consider the whole
There’s more than the UI. There’s the icon, startup
screen, app store screens, etc.
35. Native UI vs.
Left to right: Wordpress, Epicurious
36. Understand the
Android, iPhone, Web OS, etc. all have different UIs
37. Review the HIG and
other design guides
38. Make it touchable
Areas of interaction need to be big enough to easily
Design for the best experience in different
40. Promote the primary
Eliminate extra noise by subduing secondary actions.
41. Resolution is higher
Image via informationarchitects.jp
42. Rethink the metaphor
★ Metaphors can create a shallow learning curve, but
aren’t always appropriate
★ Use metaphors that make sense
★ People are coming from the web if not from another
43. Think affordance
How do people know to interact with things?
44. Use default gestures
★ People enter with different gesture vocabularies.
★ If you’re not sure, go default.
★ You may be competing with other apps.
Image via Touch Gesture Reference Guide on lukew.com
45. iPhone vs. iPad
46. On-the-go vs.
on the couch.
Iamge on left via iLounge.com
47. View from all sides
Unlike a laptop, an iPad has no flip up screen to block
interaction with others.
Scrabble image via engadget.com
48. Wide open spaces
Things can get lost on larger screens.
More space means more chances to get lost.
49. Focussed views
Each screen has its own purpose.
Apps from left to right: NewsRack, Dictionary.com, Nike + iPod
50. Single Views
Split views, limited views, etc. on the iPad
51. In-context Popovers
Presents information that would normally be in a
whole other view on a phone.
52. Modal Cards
Another way to surface information without “leaving”
the current view.
53. Beyond design
54. Review designs
★ Create an HTML website with hotspots and share
the URL for review
★ Email images to be reviewed on a device
55. Get as close as you
can to the real thing
★ Get set up with the dev environment
★ Test and run on the simulators
★ Even better, load on to a device
★ Even add assets and commit
56. Test interactions
★ Gestures and inputs
★ UI overload/fatigue
★ Scrolling and selecting
★ Navigation flow
Image via scopeblog.stanford.edu
57. Physical prototypes
★ Don’t have the physical device? Fake it.
★ Made a wooden iPad to test before device was
Image via Jonathan Branam
58. Get user feedback
★ Form a user testing plan
★ Try to get “true” users
★ Conduct your own “guerilla” user testing