designing the mobile user experience - intergen · mobile ux – designing the mobile user...

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

Upload: others

Post on 07-Jul-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

DESIGNING THE MOBILE USER EXPERIENCE

Mark Delaney

User Experience Designer / 5 September 2012

_MOBILE UX

Page 2: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a
Page 3: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Designing the mobile

User Experience

Mobile design considerations

Mobile prototyping

Responsive web design

Why care about mobile?

Page 4: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

WHY CARE ABOUT MOBILE?

_MOBILE UX

Page 5: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

IN A

WORLD OF

THEIR

MOBILE

DEVICES

Source: Kathy Slamen Photography

Page 6: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile is growing

like crazy.

Page 7: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

PC vs. Smartphone Sales

Source: http://bkaprt.com/mf/4

Page 8: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

“Mobile phones

will overtake PC’s

as the most

common web

access devices

by 2013” Gartner Research, 2010

Page 9: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

UNDER-

STANDING

THE

MOBILE

CON-

SUMER

Page 10: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

73% OF PEOPLE SURVEYED

Google: Our Mobile Planet, May 2012

Say they don’t leave

their home without

their device

Smartphones are always with you

Page 11: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Smartphones are used everywhere

Google: Our Mobile Planet, May 2012

97%

80% 76%

64% 64% 56% 56%

55%

44%

35%

24%

At

a s

oci

al g

ath

eri

ng

Ho

me

On

th

e g

o

Wo

rk

In a

sto

re

Café

or

coff

ee s

ho

p

Rest

au

ran

t

Air

po

rt

Pu

blic

tran

spo

rt

Do

cto

r

Sch

oo

l

Page 12: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

59% On their smartphones

at least once a day

ACCESS THE INTERNET

Google: Our Mobile Planet, May 2012

51%

45%

41%

24%

Allowing users to stay connected

Emailing

Social Networking

Search

Video

Page 13: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

24% WOULD RATHER GIVE

UP TV THAN THEIR

Google: Our Mobile Planet, May 2012

smartphone

Smartphones have become so important that…

Page 14: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

38% SEARCH ON THEIR

SMARTPHONES

Google: Our Mobile Planet, May 2012

every day

Major access point for search

Page 15: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Google: Our Mobile Planet, May 2012

Smartphones are used while multi-tasking

with other media

Page 16: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Designing the mobile

User Experience

Mobile design considerations

Mobile prototyping essentials

Responsive web design

Why care about mobile?

Page 17: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

MOBILE DESIGN CONSIDER-ATIONS

_MOBILE UX

Page 18: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

MOBILE

FIRST

Source: www.flickr.com/photos/pete-karl/4637024524

Page 19: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

Designing for mobile first

■ Mobile is exploding

3 reasons to consider mobile first approach

■ Mobile forces you to focus

Today's smartphones are driving huge use of

networked applications and Web content.

■ Mobile extends your capabilities

There simply isn't room in a 320 by 480 pixel

screen for extraneous, unnecessary elements. You

have to prioritise.

Allows you to deliver innovative experiences by

building on new capabilities native to mobile

devices and modes of use

Page 20: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

“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

Page 21: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

MOBILE

WEBSITE,

WEB APP

OR NATIVE

APP?

Source: Gerry Alexis

Page 22: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

What are the differences?

■ Mobile optimised website

In case you were wondering…

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

Page 23: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

So what one should

you create?

Page 24: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

MOBILE

CONTEXT

Source: Marie Kåstru

Page 25: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

The mobile context is somewhat varied…

Page 26: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

Design for partial attention and interruption

■ Expectation of engagement

“One thumb, one eyeball”

■ Multi-tasking and task switching

Immersive isn’t always desirable

■ Human constraints

People are motivated to be productive and efficient

Varied concentration spans caused by social settings,

and ergonomic limitations of mobile devices

Page 27: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

SCREEN

SIZE

Source: www.flickr.com/photos/katerha/4592429363

Page 28: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

1024 x 768 as an agreed standard

Page 29: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

Losing that much screen space forces you to focus

Page 30: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

TOUCH

TARGETS

Source: www.flickr.com/photos/ogimogi/2223450729/sizes/l/in/photostream/

Page 31: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

Finger-friendly design

■ Small touch targets lead to big problems

Go small by going big

■ Pixel width of the average index finger

Small touch targets make users work harder because

they require more accuracy to hit

■ Finger-sized is ideal, but not always practical

The average width of the index finger is 1.1 to 2

cm (11 – 20 mm) for most adults

Finger-sized targets are much easier to apply on a

tablet than a mobile device because there is more

screen space available

Page 32: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Microsoft touch guidelines

Page 33: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

TOUCH

GESTURES

Source: www.flickr.com/photos/7247517@N02/1503933726//

Page 34: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

Touch guidance

Page 35: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

Content over navigation

Page 36: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

PIXEL

DENSITY

Source: www.flickr.com/photos/randomguyweird/5412716286/

Page 37: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

Designing for iPhone 4's Retina Display

Page 38: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

Guidelines for scaling to pixel density

■ Don't use smaller images that are scaled up

■ Don’t use larger images that are scaled down

Images are scaled by default, images look blurry at

140% scale on HD

■ Avoid specifying sizes that aren't multiples

of 5px

Larger images that are scaled down can show

scaling distortion and jagged edges

Units that aren't multiples of 5px can experience

pixel shifting when scaled to 140% and 180%.

Avoid the following:

Page 39: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Designing the mobile

User Experience

Mobile design considerations

Mobile prototyping

Responsive web design

Why care about mobile?

Page 40: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

RE- SPONSIVE WEB DESIGN (RWD)

_MOBILE UX

Page 41: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

“Rather than tailoring

disconnected designs to

each of an ever-

increasing

number of web devices,

we can treat them as

facets of the same

experience”

Ethan Marcotte – A List Apart

Page 42: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

Becoming responsive

■ 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

The ingredients…

Page 43: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

Responsive Web Design principles

Desktop Tablet Smartphone

Header Header Header

Content Content Content Sid

eb

ar

1

Sid

eb

ar

2

Sid

eb

ar

1

Sidebar 2 Sidebar 1

Sidebar 2

Page 44: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

Responsive Web Design principles

IS RWD

REALLY THE

RIGHT

ANSWER?

Source: www.flickr.com/photos/rohit_saxena/4873732679

Page 45: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

What would

Jakob do?

(WWJD)

Page 46: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

“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

Page 47: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Designing the mobile

User Experience

Mobile design considerations

Mobile prototyping

Responsive web design

Why care about mobile?

Page 48: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

MOBILE PROTOTYPING

_MOBILE UX

Page 49: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

“Do I need to change

to my design process?”

Page 50: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

“When the rubber hits

the road, what do I

need to do differently?”

Page 51: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

The User Experience Design Process

Page 52: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

“Designers new to

mobile don’t have

the domain specific

skills or heuristics

to lean on”

Rachel Hinman – Mobile Frontier, 2012

Page 53: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

ESSENTIAL Mobile Prototyping is

Page 54: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

PROTO-

TYPES ARE

DECISION

MAKING

AIDS

Source: www.flickr.com/photos/cannedtuna/6491204853/

Page 55: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

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

Key reasons to include prototyping

Page 56: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

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

■ Fine-tune an idea

The devil is often in the details, and

prototyping is a great way to fine-tune your

work

Page 57: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

PROTO-

TYPING

METHODS

Source: www.flickr.com/photos/21218849@N03/2829366856/

Page 58: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Source: www.netmagazine.com

Explore ideas

with low fidelity

sketching

Page 59: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Source: Rachel Hinman – The Mobile Frontier

Validate

decisions with

paper

prototyping

Page 60: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Source: m.clove.co.uk

On-device

prototyping has

significant

benefits

Page 61: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Prototyping is no

substitute for creativity

and great ideas. Those

come from you.

Page 62: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Mobile UX – Designing the Mobile User Experience

Considerations, tips and techniques

Designing the mobile UX

■ 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

Page 63: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Thank you [email protected]

Page 64: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a

Any questions?

Page 65: DESIGNING THE MOBILE USER EXPERIENCE - Intergen · Mobile UX – Designing the Mobile User Experience Becoming responsive A flexible, grid-based layout The benefits of creating a