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
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

3,004

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 …

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
0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,004
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
165
Comments
0
Likes
25
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. _MOBILE UXDESIGNINGTHEMOBILEUSEREXPERIENCEMark DelaneyUser Experience Designer / 5 September 2012
  • 2. Designing the mobileUser Experience Why care about mobile? Mobile design considerations Responsive web design Mobile prototyping
  • 3. _MOBILE UXWHYCAREABOUTMOBILE?
  • 4. IN AWORLD OFTHEIRMOBILEDEVICES Source: Kathy Slamen Photography
  • 5. Mobile is growing like crazy.
  • 6. PC vs. Smartphone Sales Source: http://bkaprt.com/mf/4Mobile UX – Designing the Mobile User Experience
  • 7. “Mobile phoneswill overtake PC’s as the most common web access devices by 2013” Gartner Research, 2010
  • 8. UNDER-STANDINGTHEMOBILECON-SUMER
  • 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. 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. 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. Smartphones have become soimportant that… 24% WOULD RATHER GIVE UP TV THAN THEIR smartphone Google: Our Mobile Planet, May 2012
  • 13. Major access pointfor search 38% SEARCH ON THEIR SMARTPHONES every day Google: Our Mobile Planet, May 2012
  • 14. Smartphonesare used while multi-tasking with other media Google: Our Mobile Planet, May 2012
  • 15. Designing the mobileUser Experience Why care about mobile? Mobile design considerations Responsive web design Mobile prototyping essentials
  • 16. _MOBILE UXMOBILEDESIGNCONSIDER-ATIONS
  • 17. MOBILEFIRST Source: www.flickr.com/photos/pete-karl/4637024524
  • 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. “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. MOBILEWEBSITE,WEB APPOR NATIVEAPP? Source: Gerry Alexis
  • 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. So what one should you create?
  • 23. MOBILECONTEXT Source: Marie Kåstru
  • 24. The mobile context is somewhat varied…
  • 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. SCREENSIZE Source: www.flickr.com/photos/katerha/4592429363
  • 27. 1024 x 768 as an agreed standard
  • 28. Losing that much screen space forces you to focusMobile UX – Designing the Mobile User Experience
  • 29. TOUCHTARGETS Source: www.flickr.com/photos/ogimogi/2223450729/sizes/l/in/photostream/
  • 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. Microsofttouchguidelines
  • 32. TOUCHGESTURES Source: www.flickr.com/photos/7247517@N02/1503933726//
  • 33. Touch guidanceMobile UX – Designing the Mobile User Experience
  • 34. Content over navigationMobile UX – Designing the Mobile User Experience
  • 35. PIXELDENSITY Source: www.flickr.com/photos/randomguyweird/5412716286/
  • 36. Designingfor iPhone4s RetinaDisplayMobile UX – Designing the Mobile User Experience
  • 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. Designing the mobileUser Experience Why care about mobile? Mobile design considerations Responsive web design Mobile prototyping
  • 39. _MOBILE UXRE-SPONSIVEWEBDESIGN(RWD)
  • 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. 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. 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. Responsive Web DesignIS RWDprinciplesREALLY THERIGHTANSWER?Mobile UX – Designing the Mobile User Experience Source: www.flickr.com/photos/rohit_saxena/4873732679
  • 44. What would Jakob do? (WWJD)Mobile UX – Designing the Mobile User Experience
  • 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. Designing the mobileUser Experience Why care about mobile? Mobile design considerations Responsive web design Mobile prototyping
  • 47. _MOBILE UXMOBILEPROTOTYPING
  • 48. “Do I need to changeto my design process?”
  • 49. “When the rubber hits the road, what do Ineed to do differently?”
  • 50. The User ExperienceDesign Process
  • 51. “Designers new to mobile don’t havethe domain specific skills or heuristics to lean on” Rachel Hinman – Mobile Frontier, 2012
  • 52. Mobile Prototyping isESSENTIAL
  • 53. PROTO-TYPES AREDECISIONMAKINGAIDS Source: www.flickr.com/photos/cannedtuna/6491204853/
  • 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. 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. PROTO-TYPINGMETHODS Source: www.flickr.com/photos/21218849@N03/2829366856/
  • 57. Explore ideaswith low fidelitysketching Source: www.netmagazine.com
  • 58. Validatedecisions withpaperprototyping Source: Rachel Hinman – The Mobile Frontier
  • 59. On-deviceprototyping hassignificantbenefits Source: m.clove.co.uk
  • 60. Prototyping is nosubstitute for creativityand great ideas. Those come from you.
  • 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. Thank youmark.delaney@intergen.co.nz
  • 63. Any questions?

×