Experience & Design in the Mobile World
User Interface and Experience Design
Nathan Freitas, Oliver+Coady
nathan@olivercoa...
When developing software for the web or a
desktop computer, you only need to consider the
mouse and the keyboard.

With a ...
Possible User Input Sources for a Mobile Device

• Keyboard                            • Vibration


• “Click” Tap via Tou...
Three Device Classes




   Mobile devices can be categorized by their
   physical dimensions, network connectivity,
     ...
Low: WAP / SMS
text NATHANF to 41411


   (my SMS business card)
Medium: Java / J2ME / Symbian
High: Apple iPhone, Android, Windows Mobile
User Experience, Desires & Dreams
Think about the “60 second” use case...

and then think about the “60 minute” use case.
60 second = quick reference, lookup or message
directions, scores, stocks, weather...

60 minute = long, in-depth interact...
Casual
   Dice             Flashlight




Game                    Utility




   RPG              Banking
          Serious
What Would Fisher Price Do?




  Easy, Fun, Instant Feedback, Limited Choices
12 Myths of Mobile User-Interface Design

• Users want power and aesthetics.                                • Mobile devic...
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 ...
Think About Where & When

• At the office, during a meeting   • At a sales meeting, for a $$$ deal


• By a parent, during ...
Simple Wireframing
Iterating with Paper
At some point, ink turns into pixels
Apple iPhone Human Interface Guidelines




      http://developer.apple.com/iphone
Use Standard Buttons / Icons / Assets
Tools to Discuss & Download
Better Design through Stenciling
LWUIT: Make J2ME Sexier




  Lightweight UI Toolkit aka “Swing for Mobile”
Xcode Interface Builder
DroidDraw
Application Case Studies
Web Portal -> Mobile Application
Browser-based / Multi-Device




 Opera /
 XHTML


                         Android


                                   i...
Browser-based / Multi-Device




 Opera /
 XHTML


                         Android


                                   i...
Geo Reporting Application




   Form-based application with Multimedia Capture
Mobile Apps Connect to the Web




Also accessible via SMS, Twitter, VOIP/Telephone
http://coovents.com
Mobile Content Management System (CMS)




                  Content     Drop-down Menu
Splash Screen
In Summary

• Spend at least half your time thinking, drawing, designing and planning


• Don’t just design for the lowest...
Links

• Apple iPhone HIG: http://developer.apple.com/iphone


• Inauguration Report: http://npr.org/inaugurationreport


...
Thank You!

email: nathan@olivercoady.com
blog: http://openideals.com
Oliver Coady Columbia Mobile Ux Talk Feb2009
Upcoming SlideShare
Loading in...5
×

Oliver Coady Columbia Mobile Ux Talk Feb2009

669

Published on

User experience for mobile applications lecture given at Columbia University in Februrary 2009

http://openideals.com

http://www.cs.columbia.edu/~nieh/teaching/e6998/

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
669
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Oliver Coady Columbia Mobile Ux Talk Feb2009

  1. 1. Experience & Design in the Mobile World User Interface and Experience Design Nathan Freitas, Oliver+Coady nathan@olivercoady.com
  2. 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. 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. 4. Three Device Classes Mobile devices can be categorized by their physical dimensions, network connectivity, software capabilities and more
  5. 5. Low: WAP / SMS
  6. 6. text NATHANF to 41411 (my SMS business card)
  7. 7. Medium: Java / J2ME / Symbian
  8. 8. High: Apple iPhone, Android, Windows Mobile
  9. 9. User Experience, Desires & Dreams
  10. 10. Think about the “60 second” use case... and then think about the “60 minute” use case.
  11. 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. 12. Casual Dice Flashlight Game Utility RPG Banking Serious
  13. 13. What Would Fisher Price Do? Easy, Fun, Instant Feedback, Limited Choices
  14. 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. 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. 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. 17. Simple Wireframing
  18. 18. Iterating with Paper
  19. 19. At some point, ink turns into pixels
  20. 20. Apple iPhone Human Interface Guidelines http://developer.apple.com/iphone
  21. 21. Use Standard Buttons / Icons / Assets
  22. 22. Tools to Discuss & Download
  23. 23. Better Design through Stenciling
  24. 24. LWUIT: Make J2ME Sexier Lightweight UI Toolkit aka “Swing for Mobile”
  25. 25. Xcode Interface Builder
  26. 26. DroidDraw
  27. 27. Application Case Studies
  28. 28. Web Portal -> Mobile Application
  29. 29. Browser-based / Multi-Device Opera / XHTML Android iPhone Blackberry
  30. 30. Browser-based / Multi-Device Opera / XHTML Android iPhone Blackberry
  31. 31. Geo Reporting Application Form-based application with Multimedia Capture
  32. 32. Mobile Apps Connect to the Web Also accessible via SMS, Twitter, VOIP/Telephone
  33. 33. http://coovents.com
  34. 34. Mobile Content Management System (CMS) Content Drop-down Menu Splash Screen
  35. 35. 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?
  36. 36. 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/
  37. 37. Thank You! email: nathan@olivercoady.com blog: http://openideals.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×