Designing The Mobile User Experience
Upcoming SlideShare
Loading in...5
×
 

Designing The Mobile User Experience

on

  • 11,752 views

 

Statistics

Views

Total Views
11,752
Views on SlideShare
11,675
Embed Views
77

Actions

Likes
37
Downloads
676
Comments
1

9 Embeds 77

http://www.slideshare.net 21
http://www.kshitizanand.com 21
http://www.linkedin.com 15
http://kshitizanand.com 13
http://tweetedtimes.com 2
http://light.mindtalk.com 2
http://www.e-presentations.us 1
http://fr.twitter.com 1
http://www.mindtalk.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing The Mobile User Experience Designing The Mobile User Experience Presentation Transcript

  • 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 - Motorola presents the first portable radio - "DynaTAC”. 1876 - The birth of the telephone.
  • 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.
  • 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 (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
  • • 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, “The Pulse of Modern Design”
  • • About 2500 phone models. • About 500 different operators. • More than 25 browsers. • About 14 different screen sizes.
  • • 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, ...
  • 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)
  • Mobile vs Desktop
  • • 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.
  • 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 and click it. Indirect Manipulation
  • • You just tap/click anything directly. Direct Manipulation
  • Methodology
  • • Do Nothing. (SSR - Small screen rendering) • Programmatically reformat. (strip images and styling) • Handheld stylesheets. • Mobile specific site/app.
  • Complex Simple Slower Faster Mobile Specific Site Stylesheets No Styling SSR Value Method Comparison Implementation Browser Experience
  • Mobilise It, Don’t Miniaturise It
  • “ ... treats the mobile environment and technology as a subset of the desktop environment.” Barbara Ballard • It’s a repurpose of existing content. Miniaturisation
  • “ ... precisely targets mobile user needs, making (the) best possible use of technology.” Barbara Ballard • Content and context specific. Mobilisation
  • 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 unusable.” Morten Hjerde
  • Fundamentals
  • 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
  • Font Families
  • • 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
  • • 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. • Touch Pad. • Touch Screens. • Multi-Touch Screens. • Gestures. Interaction Techniques and Elements
  • • 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 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/
  • "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
  • Best Practices
  • • 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)
  • Where Are We Heading
  • • 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.
  • "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)
  • Thank You.
  • Resources
  • • 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
  • • 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
  • • 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