Designing The Mobile User Experience

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    10 Favorites

    Designing The Mobile User Experience - Presentation 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

    + alvesjalvesj, 11 months ago

    custom

    1689 views, 10 favs, 0 embeds more stats

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1689
      • 1689 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 10
    • Downloads 209
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories