Transcript
Page 1: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Image courtesy of Shutterstock

Hands on tips for

Building device agnostic UX systemsby Anna Dahlström | @annadahlstrom GeekGirl London, 28 Oct 2014 #ggm

Page 2: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Screenshot: Screenshot: http://www.worldometers.info/watch/world-population/

Page 3: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/

Page 4: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/

“ We have seen 18,769 distinct devices download our app in the past few months. In our report last year we saw 11,868. ”

- Source: Open Signal

Page 5: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Designing bespoke mobile sites & experiences for different devices is a sure…

www.flickr.com/photos/ericconstantineau/5618576278

Page 6: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

It’s one of the reasons forresponsive design

www.flickr.com/photos/adactio/5818096043

Page 7: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

http://foundation.zurb.com/docs/layout.php

“ Design & development should respond to the user’s behaviour & environment based on screen size, platform & orientation. [It’s]...a mix of flexible grids & layouts, images & an intelligent use of media queries. ”

- Smashing Magazine

Page 8: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

This is NOT what a mobile user looks like

Image courtesy of Shutterstock

Page 9: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Mobile Search MoMentSUnderStanding how Mobile driveS converSionS

3 of 4 mobile searches trigger follow-up actions

Mobile searches drive valuable

outcomes for businesses

Actions triggered by mobile search

also happen very quickly

of conversions (store visit, phone call or purchase) happening within an hour55%

On average, each mobile search triggers

nearly 2 follow-up actions

Product & shopping searches have a higher number of outcomesNumber of follow-up actions per mobile search

Mobile search is always on, happening

on the go, at home and at work

of mobile searches occur at home or work; 17% on the go77%

2.082.523.56

Travel FoodAutoBeauty Tech

2.072.20

36%

Continued

Research

18%

Shared Information

17%

Made a Purchase

25%

Visited a Retailer’s

Website

17%

Visited a Store

7%

Called a Business

0RELOH�VHDUFKHV�DUH�VWURQJO\�WLHG�WR�VSHFLȴF�FRQWH[WV�

Shopping queries are 2x more likely to be in store

Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html

77% of mobile searches occur at home or work

17% of mobile searches occur on the go

Page 10: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Many of us own multiple devices

Page 11: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Commute

Sequential usage

Morning Work

“ 90% of users start a task on one device and then complete it on another. ”

- Source: Google

Simultaneous usage

+

Multi-taskingOR

Page 12: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Commute

Sequential usage

Morning Work

“ 90% of users start a task on one device and then complete it on another. ”

- Source: Google

Simultaneous usage

+

Multi-tasking

+

Extending

OR

Page 13: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Commute

Sequential usage

Morning Work

“ 90% of users start a task on one device and then complete it on another. ”

- Source: Google

Simultaneous usage

+

Multi-tasking

+

Extending

+

Complementing

OR

Page 14: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

https://www.flickr.com/photos/jfingas/10104822523

“ Today’s popular devices aren’t tomorrow's so building something which works on any device is better than

building something which works on today’s devices. ”

- Combined wise words from @oneextrapixel & @trentwalton

!

!

!

!

!

!

Page 15: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

http://foundation.zurb.com/docs/layout.php

“ Get your content to go anywhere, because it’s going to

go everywhere. ” - Brad Frost

Page 16: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

HelloDevice Agnostic Design

Page 17: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

“ The site you build is not dependent on knowing what device it is being displayed on. ”

- Sarita Harbour, WDD

Image courtesy of Shutterstock

Page 18: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

device browser screen input method connection speed

Any

anytime anywhereUsed

Page 19: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

An evolution of how we’ve always worked

Page 20: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Define views & key templates

Header& Nav

Products

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured products

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Footer

Additional info

Related products

Page 21: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Break down content further & explore layouts

1 Header& Nav2 Filter & search

Product listing

1 Header& Nav

2Gallery

2Descrip-

tion

8 Footer

3Additional info

Product page1 Header& Nav

2Category

3Category

4 Category

9Categ

7Categ

10 Footer

Categories

7Prod

6Categ

5Categ

1 Header& Nav

2Features

11 Footer

Home

3Category

4 Category

6 Categ

6 Categ

10Prod

9 Prod

8Prod

7Prod

8Categ

6Prod

5 Prod

4Prod

3Prod

10Prod

9 Prod

8Prod

7Prod

14Prod

13 Prod

12Prod

11Prod

18Prod

17 Prod

16Prod

15Prod

19 Footer

7Prod

6 Prod

5Prod

4Prod

Page 22: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Home - largeHeader& Nav

Features

Footer

Featured products

Featured categories

1 Header& Nav

2Features

11 Footer

3Category

4 Category

6 Categ

6 Categ

10Prod

9 Prod

8Prod

7Prod

1 Header& Nav

2Features

10 Footer

3 Category

4 Categ

5 Categ

6 Product

7 Product

8 Product

9 Product

Header& Nav

Features

Footer

Home - small

Featured categories

Featured products

Do the same across screen sizes

Page 23: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Break down each module into elements

Home - largeHeader& Nav

Features

Footer

Featured products

Featured categories

1 Header& Nav

2Features

11 Footer

3Category

4 Category

6 Categ

6 Categ

10Prod

9 Prod

8Prod

7Prod

1 Header& Nav

2Features

10 Footer

3 Category

4 Categ

5 Categ

6 Product

7 Product

8 Product

9 Product

Header& Nav

Features

Footer

Home - small

Featured categories

Featured products

Page 24: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Views

Home - large Home - small

Start identifying your building blocks & variations

Page 25: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Views

Home - large Home - small

Start identifying your building blocks & variations

Page 26: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Feature - large Feature - small

Views Modules

Home - large Home - small

Start identifying your building blocks & variations

Page 27: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Feature - large Feature - small

Views Modules

Home - large Home - small

Start identifying your building blocks & variations

Page 28: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Feature - large Feature - small

Featured products - large Featured products - small

Views Modules

Home - large Home - small

Start identifying your building blocks & variations

Page 29: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Feature - large Feature - small

Featured products - large Featured products - small

Views Modules

Home - large Home - small

Start identifying your building blocks & variations

Page 30: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Feature - large Feature - small

Featured products - large

Single product - large

Featured products - small

Single product- small

Views Modules

Home - large Home - small

Start identifying your building blocks & variations

Page 31: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Iterate & refine across views & key templates

Header& Nav

Products

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured products

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Related products

Footer

Page 32: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Iterate & refine across views & key templates

Header& Nav

Products

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Related products10

Prod9

Prod8

Prod7

Prod

Footer

Page 33: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Iterate & refine across views & key templates

Header& Nav

Products

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Related products

Footer

Page 34: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Iterate & refine across views & key templates

Header& Nav

Products

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

7Prod

6 Prod

5Prod

4Prod

Footer

Page 35: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Iterate & refine across views & key templates

Header& Nav

Products

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Footer

Page 36: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Iterate & refine across views & key templates

Header& Nav

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Footer

6Prod

5 Prod

4Prod

3Prod

10Prod

9 Prod

8Prod

7Prod

14Prod

13 Prod

12Prod

11Prod

18Prod

17 Prod

16Prod

15Prod

Page 37: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Iterate & refine across views & key templates

Header& Nav

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Footer

6Prod

5 Prod

4Prod

10Prod

9 Prod

8Prod

7Prod

14Prod

13 Prod

12Prod

11Prod

18Prod

17 Prod

16Prod

15Prod

Page 38: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Iterate & refine across views & key templates

Header& Nav

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Footer

Page 39: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Gradually build your module library

Feature - large Feature - small

Featured products - large Featured products - small

Single product - large Single product- small

Also used for: • Module REL01 - Related products

1

3

4

1

2

3

1

2

1

2

3

4

2

3

1

2

3

1

2

1

1

Page 40: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Almost the same as lego

www.flickr.com/photos/toomuchdew/5243719740

Page 41: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Re-use & sparingly do bespoke moduleswww.flickr.com/photos/toomuchdew/5243719740

Page 42: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Re-use & sparingly do bespoke moduleswww.flickr.com/photos/toomuchdew/5243719740

www.flickr.com/photos/toomuchdew/5914351500

www.flickr.com/photos/toomuchdew/5148233898

www.flickr.com/photos/toomuchdew/3792159077

www.flickr.com/photos/toomuchdew/3792972952

Page 43: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

It’s about content. Not what device we’re using.

Page 44: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

However…

Page 45: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Screenshot: https://moto360.motorola.com/

Page 46: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Screenshot: Screenshot: http://www.apple.com/uk/

Page 47: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Screenshot: Screenshot: http://www.apple.com/uk/

“ And just as the first wave of desktop apps ported to mobile were underwhelming and replaced by mobile-first applications, so will companies quickly realize that it isn’t just a new screen but a brand-new platform. ”

- Source: Techcrunch

Page 48: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Responsive design has allowed us to adapt views & interactions

Page 49: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Responsive design has allowed us to adapt views & interactions

Page 50: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Responsive design has allowed us to adapt views & interactions

Page 51: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Responsive design has allowed us to adapt views & interactions

Page 52: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Each device is different. Make the most of it

Page 53: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Each device is different. Make the most of it

Page 54: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Each device is different. Make the most of it

Page 55: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Each device is different. Make the most of it

Browse

Research

Buy & Pay

Get notified

Page 56: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Each device is different. Make the most of it

Browse

Research

Buy & Pay

Get notified

✓ ✓ ✓

Page 57: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Each device is different. Make the most of it

Browse

Research

Buy & Pay

Get notified

✓ ✓ ✓

✓ ✓ ✓

Page 58: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Each device is different. Make the most of it

Browse

Research

Buy & Pay

Get notified

✓ ✓ ✓

✓ ✓ ✓✓ ✓ ✓

Page 59: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Each device is different. Make the most of it

Browse

Research

Buy & Pay

Get notified

✓ ✓ ✓

✓ ✓ ✓✓ ✓ ✓

Page 60: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Each device is different. Make the most of it

Browse

Research

Buy & Pay

Get notified

✓ ✓ ✓

✓ ✓ ✓✓ ✓ ✓

✓ ✓

Page 61: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Each device is different. Make the most of it

Browse

Research

Buy & Pay

Get notified

✓ ✓ ✓

✓ ✓ ✓✓ ✓ ✓

✓ ✓✓

Page 62: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Content + Context =

www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592

Page 63: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Same, same…but different

Page 64: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

!

Your starting point should be any device. Then consider the role of each device - its strengths & weaknesses, how it supports user & business needs,

as well as the part it plays in delivering the experience.

Page 65: Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Image courtesy of Shutterstock

Thank you. Questions?@annadahlstrom | www.annadahlstrom.com


Top Related