Designing the Mobile User Experience Jos e  Alves Interaction Designer, UX&D
“ Understanding and patience of the mobile ecosystem is one of the most crucial skills of the mobile designer.” Brian Fling
Legacy
1894   -  Gugliemo Marconi invents  the radio. 1971   -  James Fergursson discovers the “twisted-nematic” LCD. 1980  - Mot...
1980   - Nintendo Game & Watch  console. 2000   - Sharp releases the first  camera phone -  J-SH04. 2000   - Samsung devel...
2003  - The first mobile phone with  a cursor - NEC FOMA N2051. 2007   - Apple introduce’s the iphone.
•  1996   - GSM (Global system for mobile communications) phones in 103 countries.   •  2000   - 10 million i-mode users (...
•  More mobile phones than humans. •  Every second 4 babies are born on Earth and 32 mobile phones are sold.
Fragmentation
“ Designers face a proliferation of capabilities that make the early (mobile) web look like a playground.” Joe Shepter,  “...
•  About 2500 phone models. •  About 500 different operators.  •  More than 25 browsers. •  About 14 different screen size...
•  Different markup languages.  (WML, XHTML, ...) •  Different operative systems.  (Symbian OS, Windows Mobile, Mac OS, .....
Too much to handle by yourself! •  There is no write once, run everywhere.  •  We need some help from handset detection. (...
Mobile vs Desktop
•  Limited display. •  Users attention may be distracted.  •  Increase need for clarity. (Screen is smaller, but things ha...
Direct Manipulation vs Indirect Manipulation
•  One item on the screen has focus. •  You use soft keys as an intermediate device to move the focus to the item you want...
•  You just tap/click anything directly. Direct Manipulation
Methodology
•  Do Nothing.  (SSR - Small screen rendering) •  Programmatically reformat.  (strip images and styling) •  Handheld style...
Complex Simple Slower Faster Mobile Specific Site Stylesheets No Styling SSR Value Method Comparison Implementation Browse...
Mobilise It, Don’t Miniaturise It
“ ... treats the mobile environment and technology as a subset of the desktop environment.” Barbara Ballard •  It’s a repu...
“ ... precisely targets mobile user needs, making (the) best possible use of technology.” Barbara Ballard •  Content and c...
Context is King
•  What is contextually relevant. •  Mobilise content not only the layout.
“ If the mobile site design only replicates an existing high web site the result will range from suboptimal to completely ...
Fundamentals
http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html http://sender11.typepad.com/sender11/2008/04/more-on-mob...
Font Families
•  Different OS use different fonts.  (e.g a 240x320 screen Series 40 phone uses font heights of 16, 20 and 24 pixels, thi...
•  One handed interaction (most of the phones) •  Two handed interaction (e.g Sony psp)  Physical Interaction
•  Clickable scroll wheel. •  Mini joysticks. •  Click Wheel. •  Stylus. •  Voice Input. •  Soft Keys. •  Key Pad. •  Touc...
•  Most devices sold today are WAP 2.0. (XHTML, not WML) Browser
What does that mean? Instead of
•  However, XHTML/CSS support is inconsistent.
•  Test on as many devices as you can. •  Don’t use emulators. Usability Testing
•  Context is important. (As realistic the experience as possible) •  Are standard usability techniques still valid for mo...
"Most usability testing regimes assume the context of a person facing a computer, the luxury of the person ’ s  full ...
Best Practices
•  W3C proposed recommendations.  (http://www.w3c.org/TR/mobile-bp/) •  W3C mobile web initiative.  (http://www.w3c.org/Mo...
Where Are We Heading
•  Touch is the new click. •  Gestural Interfaces. (http://www.unwiredview.com/2008/01/08/first-glimpse-inside-nokia-s60-t...
"When it comes to design for mobile devices, it ’  tempting to take an ostrich-like approach: Hide your head in the s...
Thank You.
Resources
•  http://sender11.typepad.com/ •  http://www.smallsurfaces.com/ •  http://www.janchipchase.com/ •  http://www.m-trends.or...
•  Matt Jones and Gary Marsden,  "Mobile Interaction Design” •  Cameron Moll,  "Mobile Web Design" •  Barba...
•  http://www.flickr.com/photos/trenchcoatjedi/ 2896368951/ •  http://www.flickr.com/photos/o-ren/3028013048/ •  http://ww...
Upcoming SlideShare
Loading in...5
×

Designing The Mobile User Experience

9,057

Published on

Published in: Business, Technology, Design
1 Comment
40 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,057
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
740
Comments
1
Likes
40
Embeds 0
No embeds

No notes for slide

Designing The Mobile User Experience

  1. 1. Designing the Mobile User Experience Jos e Alves Interaction Designer, UX&D
  2. 2. “ Understanding and patience of the mobile ecosystem is one of the most crucial skills of the mobile designer.” Brian Fling
  3. 3. Legacy
  4. 4. 1894 - Gugliemo Marconi invents the radio. 1971 - James Fergursson discovers the “twisted-nematic” LCD. 1980 - Motorola presents the first portable radio - "DynaTAC”. 1876 - The birth of the telephone.
  5. 5. 1980 - Nintendo Game & Watch console. 2000 - Sharp releases the first camera phone - J-SH04. 2000 - Samsung develops the world's first TV phone - SCH-M220. 2001 - The debut of the ipod.
  6. 6. 2003 - The first mobile phone with a cursor - NEC FOMA N2051. 2007 - Apple introduce’s the iphone.
  7. 7. • 1996 - GSM (Global system for mobile communications) phones in 103 countries. • 2000 - 10 million i-mode users (Japan). • 2002 - 1 million mobile phone users worldwide. • 2008 - 3.0 billion mobile phone users worldwide (prediction for the end of this year). Staggering Numbers
  8. 8. • More mobile phones than humans. • Every second 4 babies are born on Earth and 32 mobile phones are sold.
  9. 9. Fragmentation
  10. 10. “ Designers face a proliferation of capabilities that make the early (mobile) web look like a playground.” Joe Shepter, “The Pulse of Modern Design”
  11. 11. • About 2500 phone models. • About 500 different operators. • More than 25 browsers. • About 14 different screen sizes.
  12. 12. • Different markup languages. (WML, XHTML, ...) • Different operative systems. (Symbian OS, Windows Mobile, Mac OS, ...) • Plethora of user agents. (A user agent is a client application used with a particular network protocol, e.g browsers, email clients, mobile phone, ...) • Varying code practices, urls, ...
  13. 13. Too much to handle by yourself! • There is no write once, run everywhere. • We need some help from handset detection. (With handset detection you can customise your website so it is optimised for a specific mobile phone)
  14. 14. Mobile vs Desktop
  15. 15. • Limited display. • Users attention may be distracted. • Increase need for clarity. (Screen is smaller, but things have to look bigger) • Power management. (e.g. Too many animations might draw battery) • Text input is a pain. (sms is the only mode widely accepted) • Navigation model is different.
  16. 16. Direct Manipulation vs Indirect Manipulation
  17. 17. • One item on the screen has focus. • You use soft keys as an intermediate device to move the focus to the item you want and click it. Indirect Manipulation
  18. 18. • You just tap/click anything directly. Direct Manipulation
  19. 19. Methodology
  20. 20. • Do Nothing. (SSR - Small screen rendering) • Programmatically reformat. (strip images and styling) • Handheld stylesheets. • Mobile specific site/app.
  21. 21. Complex Simple Slower Faster Mobile Specific Site Stylesheets No Styling SSR Value Method Comparison Implementation Browser Experience
  22. 22. Mobilise It, Don’t Miniaturise It
  23. 23. “ ... treats the mobile environment and technology as a subset of the desktop environment.” Barbara Ballard • It’s a repurpose of existing content. Miniaturisation
  24. 24. “ ... precisely targets mobile user needs, making (the) best possible use of technology.” Barbara Ballard • Content and context specific. Mobilisation
  25. 25. Context is King
  26. 26. • What is contextually relevant. • Mobilise content not only the layout.
  27. 27. “ If the mobile site design only replicates an existing high web site the result will range from suboptimal to completely unusable.” Morten Hjerde
  28. 28. Fundamentals
  29. 29. http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html http://sender11.typepad.com/sender11/2008/04/more-on-mobile.html Screen Landscape Multi-scape 128 X 128 128 X 160 176 X 208/220 240 X 320 320 X 480 640 X 200/360/480 800 X 352/400/480 96 X 65 Portrait
  30. 30. Font Families
  31. 31. • Different OS use different fonts. (e.g a 240x320 screen Series 40 phone uses font heights of 16, 20 and 24 pixels, this equals a point size of 16, 21 and 25) • In a phone web browser you can specify the font size. (bbc.co.uk uses arial point size 11, 12 and 13) http://sender11.typepad.com/sender11/2008/01/prototyping-mob.html http://patterns.littlespringsdesign.com/index.php/Mobile_Typography Font Sizes
  32. 32. • One handed interaction (most of the phones) • Two handed interaction (e.g Sony psp) Physical Interaction
  33. 33. • Clickable scroll wheel. • Mini joysticks. • Click Wheel. • Stylus. • Voice Input. • Soft Keys. • Key Pad. • Touch Pad. • Touch Screens. • Multi-Touch Screens. • Gestures. Interaction Techniques and Elements
  34. 34. • Most devices sold today are WAP 2.0. (XHTML, not WML) Browser
  35. 35. What does that mean? Instead of
  36. 36. • However, XHTML/CSS support is inconsistent.
  37. 37. • Test on as many devices as you can. • Don’t use emulators. Usability Testing
  38. 38. • Context is important. (As realistic the experience as possible) • Are standard usability techniques still valid for mobile? • Paper prototyping. (really particullarly usefull for early evaluations) • Make users test on their actual device. • Capture screen, body, face. http://www.slideshare.net/barbaraballard/mobile-usability-testing/ http://www.littlespringsdesign.com/testing/
  39. 39. "Most usability testing regimes assume the context of a person facing a computer, the luxury of the person ’ s full attention, and a comfortable environment with minimal distractions. Information appliances, on the other hand, need to work in low-attention situations, or where the user ’ s attention needs to be fleetingly channeled through the appliance w hile walking, talking, or any of the multitude of other day-to-day activities that would be routinely classed as d istractions.” D avid Pereira
  40. 40. Best Practices
  41. 41. • W3C proposed recommendations. (http://www.w3c.org/TR/mobile-bp/) • W3C mobile web initiative. (http://www.w3c.org/Mobile/) • Input by mobile developers, operators, manufacturers. • Mobile design resources. (http://patterns.littlespringsdesign.com/index.php/Main_Page)
  42. 42. Where Are We Heading
  43. 43. • Touch is the new click. • Gestural Interfaces. (http://www.unwiredview.com/2008/01/08/first-glimpse-inside-nokia-s60-touch-going-beyond-multi-touch/) ( http://www.designinggesturalinterfaces.com/) • Sensors everywhere. (Adam Greenfield, “Everyware: The dawning age of ubiquitous computing” ) • Browsing is out, experiences are in. • “ Icons are dead”, content is the interface.
  44. 44. "When it comes to design for mobile devices, it ’ tempting to take an ostrich-like approach: Hide your head in the sand and behave as though nothing is happening. Unfortunately, in the not-too-distant future, more people will be using mobile devices to access the Net; and no interactive designer will be able to ignore them." Joe Shepter, "The Pulse of Modern Design" (August 2005)
  45. 45. Thank You.
  46. 46. Resources
  47. 47. • http://sender11.typepad.com/ • http://www.smallsurfaces.com/ • http://www.janchipchase.com/ • http://www.m-trends.org/ • http://www.receiver.vodafone.com/ • http://www.forum.nokia.com/ Web
  48. 48. • Matt Jones and Gary Marsden, "Mobile Interaction Design” • Cameron Moll, "Mobile Web Design" • Barbara Ballard, "Designing the Mobile User Experience" • Christian Lindholm and Turkka Keinonen, "Mobile Usability: How Nokia Changed the Face of the Mobile Phone” • Studio 7.5, "Designing for Small Screens" Books
  49. 49. • http://www.flickr.com/photos/trenchcoatjedi/ 2896368951/ • http://www.flickr.com/photos/o-ren/3028013048/ • http://www.flickr.com/photos/shadda/2100736671/ • http://www.flickr.com/photos/14017121@N03/ 2405415702/ • http://www.flickr.com/photos/stevetoronto/ 2670405539/ Images
  1. A particular slide catching your eye?

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

×