Your SlideShare is downloading. ×
0
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Designing The Mobile User Experience
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing The Mobile User Experience

9,012

Published on

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Designing the Mobile User Experience Jos e Alves Interaction Designer, UX&D
  2. “ Understanding and patience of the mobile ecosystem is one of the most crucial skills of the mobile designer.” Brian Fling
  3. Legacy
  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. 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. 2003 - The first mobile phone with a cursor - NEC FOMA N2051. 2007 - Apple introduce’s the iphone.
  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. • More mobile phones than humans. • Every second 4 babies are born on Earth and 32 mobile phones are sold.
  9. Fragmentation
  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. • About 2500 phone models. • About 500 different operators. • More than 25 browsers. • About 14 different screen sizes.
  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. 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. Mobile vs Desktop
  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. Direct Manipulation vs Indirect Manipulation
  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. • You just tap/click anything directly. Direct Manipulation
  19. Methodology
  20. • Do Nothing. (SSR - Small screen rendering) • Programmatically reformat. (strip images and styling) • Handheld stylesheets. • Mobile specific site/app.
  21. Complex Simple Slower Faster Mobile Specific Site Stylesheets No Styling SSR Value Method Comparison Implementation Browser Experience
  22. Mobilise It, Don’t Miniaturise It
  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. “ ... precisely targets mobile user needs, making (the) best possible use of technology.” Barbara Ballard • Content and context specific. Mobilisation
  25. Context is King
  26. • What is contextually relevant. • Mobilise content not only the layout.
  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. Fundamentals
  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. Font Families
  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. • One handed interaction (most of the phones) • Two handed interaction (e.g Sony psp) Physical Interaction
  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. • Most devices sold today are WAP 2.0. (XHTML, not WML) Browser
  35. What does that mean? Instead of
  36. • However, XHTML/CSS support is inconsistent.
  37. • Test on as many devices as you can. • Don’t use emulators. Usability Testing
  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. "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. Best Practices
  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. Where Are We Heading
  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. "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. Thank You.
  46. Resources
  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. • 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. • 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

×