_MOBILE UX DESIGNING THE MOBILE USER EXPERIENCE

Size: px

Start display at page:

Download "_MOBILE UX DESIGNING THE MOBILE USER EXPERIENCE"

Eugene Crawford
5 years ago
Views:

1 _MOBILE UX DESIGNING THE MOBILE USER EXPERIENCE Mark Delaney User Experience Designer / 5 September 2012

3 Designing the mobile User Experience Why care about mobile? Mobile design considerations Responsive web design Mobile prototyping

4 _MOBILE UX WHY CARE ABOUT MOBILE?

5 IN A WORLD OF THEIR MOBILE DEVICES Source: Kathy Slamen Photography

6 Mobile is growing like crazy.

7 PC vs. Smartphone Sales Source: Mobile UX Designing the Mobile User Experience

8 Mobile phones will overtake PC s as the most common web access devices by 2013 Gartner Research, 2010

9 UNDER- STANDING THE MOBILE CON- SUMER

10 Smartphones are always with you 73% OF PEOPLE SURVEYED Say they don t leave their home without their device Google: Our Mobile Planet, May 2012

11 Home On the go Work In a store Café or coffee shop Restaurant At a social gathering Airport Public transport Doctor School Smartphones are used everywhere 97% 80% 76% 64% 64% 56% 56% 55% 44% 35% 24% Google: Our Mobile Planet, May 2012

12 Allowing users to stay connected 59% ACCESS THE INTERNET ing Social Networking Search 51% 45% 41% On their smartphones at least once a day Video 24% Google: Our Mobile Planet, May 2012

13 Smartphones have become so important that 24% WOULD RATHER GIVE UP TV THAN THEIR smartphone Google: Our Mobile Planet, May 2012

14 Major access point for search 38% SEARCH ON THEIR SMARTPHONES every day Google: Our Mobile Planet, May 2012

15 Smartphones are used while multi-tasking with other media Google: Our Mobile Planet, May 2012

16 Designing the mobile User Experience Why care about mobile? Mobile design considerations Responsive web design Mobile prototyping essentials

17 _MOBILE UX MOBILE DESIGN CONSIDER- ATIONS

18 MOBILE FIRST Source:

Designing for mobile first 3 reasons to consider mobile first approach Mobile is exploding Today's smartphones are driving huge use of networked applications and Web content.

19 Designing for mobile first 3 reasons to consider mobile first approach Mobile is exploding Today's smartphones are driving huge use of networked applications and Web content. Mobile forces you to focus There simply isn't 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 use Mobile UX Designing the Mobile User Experience

20 If you design mobile first, you create agreement on what matters most. You can then apply the same rationale to the desktop/laptop version of the web site. Ethan Marcotte A List Apart

21 MOBILE WEBSITE, WEB APP OR NATIVE APP? Source: Gerry Alexis

22 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 browser Mobile UX Designing the Mobile User Experience

23 So what one should you create?

24 MOBILE CONTEXT Source: Marie Kåstru

25 The mobile context is somewhat varied

Design for partial attention and interruption One thumb, one eyeball Expectation of engagement Immersive isn t always desirable Multi-tasking and task switching People are motivated to be

26 Design for partial attention and 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 devices Mobile UX Designing the Mobile User Experience

27 SCREEN SIZE Source:

28 1024 x 768 as an agreed standard

29 Losing that much screen space forces you to focus Mobile UX Designing the Mobile User Experience

30 TOUCH TARGETS Source:

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

31 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 available Mobile UX Designing the Mobile User Experience

32 Microsoft touch guidelines

33 TOUCH GESTURES Source:

34 Touch guidance Mobile UX Designing the Mobile User Experience

35 Content over navigation Mobile UX Designing the Mobile User Experience

36 PIXEL DENSITY Source:

37 Designing for iphone 4's Retina Display Mobile UX Designing the Mobile User Experience

Guidelines for scaling to pixel density Avoid the following: Don't 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

38 Guidelines for scaling to pixel density Avoid the following: Don't 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 aren't multiples of 5px Units that aren't multiples of 5px can experience pixel shifting when scaled to 140% and 180%. Mobile UX Designing the Mobile User Experience

39 Designing the mobile User Experience Why care about mobile? Mobile design considerations Responsive web design Mobile prototyping

40 _MOBILE UX RE- SPONSIVE WEB DESIGN (RWD)

41 Rather than tailoring disconnected designs to each of an everincreasing number of web devices, we can treat them as facets of the same experience Ethan Marcotte A List Apart

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

42 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 styles Mobile UX Designing the Mobile User Experience

43 Sidebar 1 Sidebar 2 Sidebar 1 Responsive Web Design principles Desktop Tablet Smartphone Header Header Header Content Content Content Sidebar 2 Sidebar 1 Sidebar 2 Mobile UX Designing the Mobile User Experience

44 IS Responsive RWD Web Design REALLY principles THE RIGHT ANSWER? Mobile UX Designing the Mobile User Experience Source:

45 What would Jakob do? (WWJD) Mobile UX Designing the Mobile User Experience

46 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

47 Designing the mobile User Experience Why care about mobile? Mobile design considerations Responsive web design Mobile prototyping

48 _MOBILE UX MOBILE PROTOTYPING

49 Do I need to change to my design process?

50 When the rubber hits the road, what do I need to do differently?

51 The User Experience Design Process

52 Designers new to mobile don t have the domain specific skills or heuristics to lean on Rachel Hinman Mobile Frontier, 2012

53 Mobile Prototyping is ESSENTIAL

54 PROTO- TYPES ARE DECISION MAKING AIDS Source:

Prototyping Key reasons to include prototyping Communicate a design idea or experience Prototypes serve as a powerful communication tool because they are often

55 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 feedback Mobile UX Designing the Mobile User Experience

Prototyping Four whys of prototyping Explore the unknowns Provide the means to explore tangible solutions and helps designers see potential issues

56 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 work Mobile UX Designing the Mobile User Experience

57 PROTO- TYPING METHODS Source:

58 Explore ideas with low fidelity sketching Source:

59 Validate decisions with paper prototyping Source: Rachel Hinman The Mobile Frontier

60 On-device prototyping has significant benefits Source: m.clove.co.uk

61 Prototyping is no substitute for creativity and great ideas. Those come from you.

62 Designing the mobile UX Considerations, tips and techniques The mobile web is different A shift from the static environment of the PC Design for humans Understand the varied context of use Consider mobile first It pays to explore the mobile first approach Native app, web app or hybrid? What is the most appropriate for you Define constraints Understand the limitations e.g. screen size Optimise for file size and memory Less is more Pixel sizes will likely vary As will pixel density on many devices Is a Responsive Design suitable? Base this on ROI Do research and prototypes Understand your users and the experience Get something on a device asap Solve design problems in context Mobile UX Designing the Mobile User Experience

63 Thank you

64 Any questions?

Responsive Design for Web Applications R.I.T. S. Ludi/R. Kuehl p. 1 R I T. Software Engineering

Responsive Design for Web Applications S. Ludi/R. Kuehl p. 1 What is the Problem? S. Ludi/R. Kuehl p. 2 Credit: Matt Griffin What is the Problem? Mobile web access is ubiquitous One interface design does