Designing the mobile user experience

4,072 views

Published on

Mobile is hot right now. People are spending more time on their mobile devices than ever before. Given that the number of people accessing the web via mobile devices is predicted to surpass the number accessing via the desktop in the next two years, it is high time that we start to take this mobile thing seriously.

The mobile web is different. It can be daunting for those venturing into the mobile realm for the first time. Where do you start? Do you need to design a native app, a web app or a combination of both? What devices should you target?

In this Twilight Presentation Mark Delaney spoke about:

User-Centred Mobile Design
Mobile Design Considerations
Principles to Prototypes
Responsive Design Techniques
Mark is a senior UX Designer at Intergen and leads the User Experience Design team. In this presentation he took attendees on a whirlwind tour of the best practices for organising and designing your mobile experience.

Published in: Technology, Business

Designing the mobile user experience

  1. 1. _MOBILE UXDESIGNINGTHEMOBILEUSEREXPERIENCEMark DelaneyUser Experience Designer / 5 September 2012
  2. 2. Designing the mobileUser Experience Why care about mobile? Mobile design considerations Responsive web design Mobile prototyping
  3. 3. _MOBILE UXWHYCAREABOUTMOBILE?
  4. 4. IN AWORLD OFTHEIRMOBILEDEVICES Source: Kathy Slamen Photography
  5. 5. Mobile is growing like crazy.
  6. 6. PC vs. Smartphone Sales Source: http://bkaprt.com/mf/4Mobile UX – Designing the Mobile User Experience
  7. 7. “Mobile phoneswill overtake PC’s as the most common web access devices by 2013” Gartner Research, 2010
  8. 8. UNDER-STANDINGTHEMOBILECON-SUMER
  9. 9. Smartphones are alwayswith you 73% OF PEOPLE SURVEYED Say they don’t leave their home without their device Google: Our Mobile Planet, May 2012
  10. 10. Home 97% On the go Work 80% 76% In a store 64% used everywhere Smartphones are Café or coffee shop 64% Restaurant 56% At a social gathering 56% Airport 55% Public transport 44% Doctor 35% School 24%Google: Our Mobile Planet, May 2012
  11. 11. Allowing users to stayconnected 59% Emailing 51% Social Networking 45% Search 41% ACCESS THE INTERNET On their smartphones Video 24% at least once a day Google: Our Mobile Planet, May 2012
  12. 12. Smartphones have become soimportant that… 24% WOULD RATHER GIVE UP TV THAN THEIR smartphone Google: Our Mobile Planet, May 2012
  13. 13. Major access pointfor search 38% SEARCH ON THEIR SMARTPHONES every day Google: Our Mobile Planet, May 2012
  14. 14. Smartphonesare used while multi-tasking with other media Google: Our Mobile Planet, May 2012
  15. 15. Designing the mobileUser Experience Why care about mobile? Mobile design considerations Responsive web design Mobile prototyping essentials
  16. 16. _MOBILE UXMOBILEDESIGNCONSIDER-ATIONS
  17. 17. MOBILEFIRST Source: www.flickr.com/photos/pete-karl/4637024524
  18. 18. Designing for mobile first 3 reasons to consider mobile first approach ■ Mobile is exploding Todays smartphones are driving huge use of networked applications and Web content. ■ Mobile forces you to focus There simply isnt room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritise. ■ Mobile extends your capabilities Allows you to deliver innovative experiences by building on new capabilities native to mobile devices and modes of useMobile UX – Designing the Mobile User Experience
  19. 19. “If you design mobilefirst, you createagreement on whatmatters most. You canthen apply the samerationale to thedesktop/laptop versionof the web site.”Ethan Marcotte – A List Apart
  20. 20. MOBILEWEBSITE,WEB APPOR NATIVEAPP? Source: Gerry Alexis
  21. 21. What are the differences? In case you were wondering… ■ Mobile optimised website An iteration of your desktop site that has been optimised for the mobile context ■ Native app A custom-made application users can download onto their mobile phone for frequent use ■ Mobile web app Is designed to work like a native app but accessible via a browserMobile UX – Designing the Mobile User Experience
  22. 22. So what one should you create?
  23. 23. MOBILECONTEXT Source: Marie Kåstru
  24. 24. The mobile context is somewhat varied…
  25. 25. Design for partial attentionand interruption “One thumb, one eyeball” ■ Expectation of engagement Immersive isn’t always desirable ■ Multi-tasking and task switching People are motivated to be productive and efficient ■ Human constraints Varied concentration spans caused by social settings, and ergonomic limitations of mobile devicesMobile UX – Designing the Mobile User Experience
  26. 26. SCREENSIZE Source: www.flickr.com/photos/katerha/4592429363
  27. 27. 1024 x 768 as an agreed standard
  28. 28. Losing that much screen space forces you to focusMobile UX – Designing the Mobile User Experience
  29. 29. TOUCHTARGETS Source: www.flickr.com/photos/ogimogi/2223450729/sizes/l/in/photostream/
  30. 30. Finger-friendly design Go small by going big ■ Small touch targets lead to big problems Small touch targets make users work harder because they require more accuracy to hit ■ Pixel width of the average index finger The average width of the index finger is 1.1 to 2 cm (11 – 20 mm) for most adults ■ Finger-sized is ideal, but not always practical Finger-sized targets are much easier to apply on a tablet than a mobile device because there is more screen space availableMobile UX – Designing the Mobile User Experience
  31. 31. Microsofttouchguidelines
  32. 32. TOUCHGESTURES Source: www.flickr.com/photos/7247517@N02/1503933726//
  33. 33. Touch guidanceMobile UX – Designing the Mobile User Experience
  34. 34. Content over navigationMobile UX – Designing the Mobile User Experience
  35. 35. PIXELDENSITY Source: www.flickr.com/photos/randomguyweird/5412716286/
  36. 36. Designingfor iPhone4s RetinaDisplayMobile UX – Designing the Mobile User Experience
  37. 37. Guidelines for scalingto pixel density Avoid the following: ■ Dont use smaller images that are scaled up Images are scaled by default, images look blurry at 140% scale on HD ■ Don’t use larger images that are scaled down Larger images that are scaled down can show scaling distortion and jagged edges ■ Avoid specifying sizes that arent multiples of 5px Units that arent multiples of 5px can experience pixel shifting when scaled to 140% and 180%.Mobile UX – Designing the Mobile User Experience
  38. 38. Designing the mobileUser Experience Why care about mobile? Mobile design considerations Responsive web design Mobile prototyping
  39. 39. _MOBILE UXRE-SPONSIVEWEBDESIGN(RWD)
  40. 40. “Rather than tailoringdisconnected designs toeach of an ever-increasingnumber of web devices,we can treat them asfacets of the sameexperience”Ethan Marcotte – A List Apart
  41. 41. Becoming responsive The ingredients… ■ A flexible, grid-based layout The benefits of creating a liquid layout are becoming too great to ignore ■ Flexible images and media Being able to create flexible images is an important consideration when trying to create a flexible layout ■ Media queries Allow you to gather data about site visitors and use it to apply the appropriate stylesMobile UX – Designing the Mobile User Experience
  42. 42. Responsive Web Designprinciples Desktop Tablet Smartphone Header Header Header Sidebar 2 Sidebar 1 Sidebar 1 Content Content Content Sidebar 2 Sidebar 1 Sidebar 2Mobile UX – Designing the Mobile User Experience
  43. 43. Responsive Web DesignIS RWDprinciplesREALLY THERIGHTANSWER?Mobile UX – Designing the Mobile User Experience Source: www.flickr.com/photos/rohit_saxena/4873732679
  44. 44. What would Jakob do? (WWJD)Mobile UX – Designing the Mobile User Experience
  45. 45. “It’s cheap but degrading to reuse content and design across diverging media forms like… desktop vs. mobile.Superior UX requires tight platform integration.” Jakob Nielson – May 2012
  46. 46. Designing the mobileUser Experience Why care about mobile? Mobile design considerations Responsive web design Mobile prototyping
  47. 47. _MOBILE UXMOBILEPROTOTYPING
  48. 48. “Do I need to changeto my design process?”
  49. 49. “When the rubber hits the road, what do Ineed to do differently?”
  50. 50. The User ExperienceDesign Process
  51. 51. “Designers new to mobile don’t havethe domain specific skills or heuristics to lean on” Rachel Hinman – Mobile Frontier, 2012
  52. 52. Mobile Prototyping isESSENTIAL
  53. 53. PROTO-TYPES AREDECISIONMAKINGAIDS Source: www.flickr.com/photos/cannedtuna/6491204853/
  54. 54. Prototyping Key reasons to include prototyping ■ Communicate a design idea or experience Prototypes serve as a powerful communication tool because they are often more precise than words ■ Gather user feedback Prototypes provide you with a tangible artefact in which to gather feedbackMobile UX – Designing the Mobile User Experience
  55. 55. Prototyping Four “whys” of prototyping ■ Explore the unknowns Provide the means to explore tangible solutions and helps designers see potential issues ■ Fine-tune an idea The devil is often in the details, and prototyping is a great way to fine-tune your workMobile UX – Designing the Mobile User Experience
  56. 56. PROTO-TYPINGMETHODS Source: www.flickr.com/photos/21218849@N03/2829366856/
  57. 57. Explore ideaswith low fidelitysketching Source: www.netmagazine.com
  58. 58. Validatedecisions withpaperprototyping Source: Rachel Hinman – The Mobile Frontier
  59. 59. On-deviceprototyping hassignificantbenefits Source: m.clove.co.uk
  60. 60. Prototyping is nosubstitute for creativityand great ideas. Those come from you.
  61. 61. Designing the mobile UXConsiderations, tips and techniques■ The mobile web is different ■ Optimise for file size and memory A shift from the static environment of the PC Less is more■ Design for humans ■ Pixel sizes will likely vary Understand the varied context of use As will pixel density on many devices■ Consider mobile first ■ Is a ‘Responsive’ Design suitable? It pays to explore the mobile first approach Base this on ROI■ Native app, web app or hybrid? ■ Do research and prototypes What is the most appropriate for you Understand your users and the experience■ Define constraints ■ Get something on a device asap Understand the limitations – e.g. screen size Solve design problems in contextMobile UX – Designing the Mobile User Experience
  62. 62. Thank youmark.delaney@intergen.co.nz
  63. 63. Any questions?

×