User experience for mobile applications lecture given at Columbia University in Februrary 2009 http://openideals.com http://www.cs.columbia.edu/~nieh/teaching/e6998/

1. Experience & Design in the Mobile World
User Interface and Experience Design
Nathan Freitas, Oliver+Coady
nathan@olivercoady.com

2. When developing software for the web or a
desktop computer, you only need to consider the
mouse and the keyboard.
With a mobile device, you must take into account
the entire world around you (and your users).

3. Possible User Input Sources for a Mobile Device
• Keyboard • Vibration
• “Click” Tap via Touch (or Stylus) • Sound / Music
• Wheel or Trackball • Wireless Network Coverage
• GPS or Network Location • Environment Lighting
• Accelerometer Motion • Multitouch and Gestures
• Orientation / Compass / Altitude • Device Security / Loss

4. Three Device Classes
Mobile devices can be categorized by their
physical dimensions, network connectivity,
software capabilities and more

5. Low: WAP / SMS

6. text NATHANF to 41411
(my SMS business card)

7. Medium: Java / J2ME / Symbian

8. High: Apple iPhone, Android, Windows Mobile

9. User Experience, Desires & Dreams

10. Think about the “60 second” use case...
and then think about the “60 minute” use case.

11. 60 second = quick reference, lookup or message
directions, scores, stocks, weather...
60 minute = long, in-depth interaction while
relaxing, wasting time or on a train or plane
networked game, writing / reading / browsing, movies, podcasts,
project / finance management

12. Casual
Dice Flashlight
Game Utility
RPG Banking
Serious

13. What Would Fisher Price Do?
Easy, Fun, Instant Feedback, Limited Choices

14. 12 Myths of Mobile User-Interface Design
• Users want power and aesthetics. • Mobile devices will essentially be
Features are everything phones, organizers, or combinations,
with maybe music/video added on
• What we really need is a Swiss army
knife • The industry is converging on a UI
standard
• 3G is here!
• Highly usable systems are just
• Focus groups and other traditional around the corner
market analysis tools are the best
way to determine user needs • One underlying operating system will
dominate
• If it works in New York, it will work
anywhere • Mobile devices will be free-or nearly
free
• The killer app will be games, --er, no,
I mean, nightlife, or gps.... uh... • Advanced data-oriented services are
just around the corner
http://nickcowie.com/2008/revisited-12-myths-of-mobile-user-interface-design/

15. Create Your User Stories
I want to be able to find all the While I am shopping at a store,
open happy hours nearby so I I want to be able to find out if I
can save money can get it cheaper online
I want to be able to poll my I am walking to get fast food
friends for advice at any moment and I’d really like my lunch to
be ready when I get there
As I go for a run, I want to
The camera should wait until
know how my pace is
my hand is still and the shot is
compared to others my age.
level before the picture is taken.

16. Think About Where & When
• At the office, during a meeting • At a sales meeting, for a $$$ deal
• By a parent, during breakfast • By a single parent, making dinner
• In the backseat of a taxi • In the drivers seat of a semi-truck
• By a doctor in a hospital • By a doctor in Rwanda
• By a soldier at a base • By a soldier, under fire

17. Simple Wireframing

18. Iterating with Paper

19. At some point, ink turns into pixels

20. Apple iPhone Human Interface Guidelines
http://developer.apple.com/iphone

21. Use Standard Buttons / Icons / Assets

22. Tools to Discuss & Download

23. Better Design through Stenciling

24. LWUIT: Make J2ME Sexier
Lightweight UI Toolkit aka “Swing for Mobile”

25. Xcode Interface Builder

26. DroidDraw

27. Application Case Studies

28. Web Portal -> Mobile Application

29. Browser-based / Multi-Device
Opera /
XHTML
Android
iPhone
Blackberry

30. Browser-based / Multi-Device
Opera /
XHTML
Android
iPhone
Blackberry

31. Geo Reporting Application
Form-based application with Multimedia Capture

32. Mobile Apps Connect to the Web
Also accessible via SMS, Twitter, VOIP/Telephone

34. http://coovents.com

35. Mobile Content Management System (CMS)
Content Drop-down Menu
Splash Screen

36. In Summary
• Spend at least half your time thinking, drawing, designing and planning
• Don’t just design for the lowest common denominator
• Mouse Click != Finger Tap
• For Web -> Mobile, extract just the most useful bits of functionality
• Connectivity is Your Enemy
• and more?

37. Links
• Apple iPhone HIG: http://developer.apple.com/iphone
• Inauguration Report: http://npr.org/inaugurationreport
• Ultimate iPhone Stencil: http://graffletopia.com/stencils/413
• DroidDraw: http://www.droiddraw.org/
• J2ME LWUIT: https://lwuit.dev.java.net/

38. Thank You!
email: nathan@olivercoady.com
blog: http://openideals.com