Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013

Anna Dahlströmfounder byflock

www.annadahlstrom.com annadahlstrom

London 7th of August 2013 | Part 3 - AdvancedDESIGNING FOR MULTIPLE DEVICES

PART 3 of 3

I’m AnnaIA & UX DESIGNER | FREELANCE SINCE 2011

SWEDISH | IN LONDON SINCE 2006I love ‘fika’

www.flickr.com/photos/nettsu/4191824531

THIS IS PART 3 IN THE PREVIOUS TWO CLASSES WE’VE COVERED...

www.flickr.com/photos/exlibris/2552107635 www.flickr.com/photos/yahnyahn/2996454839

MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE1

MOBILE

A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILL

2

www.flickr.com/photos/anniemole/2424372024 www.flickr.com/photos/edduddiee/4307943164

THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS

3

www.flickr.com/photos/frantaylor/4296536332 www.flickr.com/photos/stuckincustoms/440157748

USERS INCREASINGLY EXPECT AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES

4

www.flickr.com/photos/demandaj/7287174776 www.flickr.com/photos/joachim_s_mueller/7110473339

CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISED

5

www.flickr.com/photos/ericconstantineau/5618576278 www.flickr.com/photos/jmtimages/2883279193

www.flickr.com/photos/nomadic_lass/5598218199www.flickr.com/photos/adactio/5818096043

YOUR MOBILE STRATEGY DEPENDS ON YOUR PROJECT, BUDGET & CURRENT TECHNICAL PLATFORM

6

www.flickr.com/photos/lastquest/1472794031

” Today's popular devices are not 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 @ONEXTRAPIXEL & @TRENTWALTON

www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/donsolo/2136923757/

LESS STATIC VIEWS & MORE MODULARITY & PROTOTYPING. NUMBER OF WIREFRAMES DEPENDS

7

www.flickr.com/photos/nomadic_lass/5598218199www.flickr.com/photos/pinkpurse/5355919491/

SKETCH, WORK COLLABORATIVELYTEST FREQUENTLY & REPEATEDLY8

Source: www.flickr.com/photos/dpstyles/3448453466

USE ANALYTICS & RESEARCH FOR YOUR PRODUCT/ PROJECT AS A GUIDANCE FOR KEY SCREEN SIZES

9

www.slideshare.net/yiibu/pragmatic-responsive-design

USING MAJOR & MINOR BREAK POINTS TO ADAPT TO SCREEN SIZES, LAYOUT & CONTENT NEEDS

10

www.flickr.com/photos/adactio/6153481666

80% of traffic in your analytics will often come from 20% of devices…seems a shame not to ensure that the site looks and works especially well on these devices.** Source: www.slideshare.net/yiibu/pragmatic-responsive-design

www.flickr.com/photos/lastquest/1472794031

BUT DIDN’T WE SAY ...” Today's popular devices are

not 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 @ONEXTRAPIXEL &

@TRENTWALTON

www.flickr.com/photos/david_a_lea/3247217194

YES WE DIDAND WE’RE ALREADY FACING TWO PARTICULAR CHALLENGES

www.flickr.com/photos/lokan/8843464852

1. TOUCH IS NO LONGER LIMITED TO SMARTPHONES & TABLETSHELLO HYBRID DESKTOP/ LAPTOPS

www.flickr.com/photos/michale/210536054

2. BREAKPOINTS BASED ON POPULAR DEVICES PUSHES US INTO A CORNERLESS FUTURE PROOF & MORE TO MAINTAIN

www.flickr.com/photos/suttonhoo22/2070700035

AGENDA 1. DESIGNING FOR TOUCH

2. UNDERSTANDING THE MOBILE CONTEXT

3. ADAPTING CONTENT TO DEVICES & ORIENTATION

4. USING CONTENT AS THE BASIS FOR BREAKPOINTS

5. EXAMPLE FRAMEWORK

6. EXERCISES

7. SUMMARY

8. Q & A

1. A LOOK ATDESIGNING FOR TOUCH

http://www.flickr.com/photos/eyesore9/3206408088/

www.flickr.com/photos/66327170@N07/7296381856

‘New rule: Every desktop design has to go finger-friendly’ ** Source: http://globalmoxie.com/blog/desktop-touch-design.shtml

www.flickr.com/photos/patdavid/9391602153

” Touch has landed on the desktop “- JOSH CLARK

Touch screen laptop sales have jumped 52% in the last quarter. 5 years from now you will you not be able to buy a Windows computer without a touch screen** Source: http://www.lukew.com/ff/entry.asp?1750

Screenshot from www.currys.co.uk

www.flickr.com/photos/soyproject/6066959891/www.flickr.com/photos/jorgeq82/4732700819

CONSIDER TOUCH ACROSS DEVICES

& SCREEN SIZESNOT JUST MOBILE & TABLETS

THE WAY WE USE TOUCH SCREENS DIFFERS BASED ON DEVICE BUT ALSO ACROSS THE SAME DEVICES

www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819

49% OF USERS HOLD THEIR PHONE IN ONE HANDBUT HOW THEY HOLD IT DIFFERS

Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

ONE HAND (R: 66% L: 33%)

CRADLING (L: 79% R: 21%)

TWO HANDS

72% 28%

90% 10%

HOW WE HOLD OUR DEVICES CHANGESIT’S NOT A STATIC STATE

Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

www.flickr.com/photos/75001512@N00/162748768

” Designing for touch means designing for fingers, yes, but to

be more specific, you’re really designing for thumbs. “

- JOSH CLARK

www.flickr.com/photos/4ever30something/451088722

IMPACTS CONTROLS, PLACEMENT & INTERACTIONCONSIDER IMPRECISE (e.g. fingers) VS. PRECISE (e.g. mouse) INPUT MEANS

CURRENT APPROACH TO NAVIGATIONBASED ON THE MOUSE AS INPUT

Source: Luke W - www.lukew.com/ff/entry.asp?1649

HOW WE TEND TO INTERACT WITH HYBRIDSREST ARMS & GRAB BOTTOM CORNERS

www.flickr.com/photos/intelfreepress/6837427202

CONSIDER REACH & OBSCURING CONTENT AND ADJUST NAVIGATION ACCORDINGLY

Source: Luke W - www.lukew.com/ff/entry.asp?1649

From...

...towards

Screenshot from http://polarb.com/polls/tags/mobiledesign

”Looking at the Polar interface on a laptop can be a bit disconcerting because we’ve essentially left the middle of the page “blank”.“

- LUKE W

2. UNDERSTANDING THE MOBILE CONTEXT

http://www.flickr.com/photos/eyesore9/3206408088/

www.flickr.com/photos/icedsoul/2486885051/

MOBILE CONTEXT ≠ MOBILE USE CASETHE LATTER IS ABOUT THE TASK, THE FORMER ABOUT THE TOTAL SUM OF THE USER’S MOBILE EXPERIENCE

www.flickr.com/photos/edduddiee/4307943164

REMEMBER... THE SAME TASKS

ARE CARRIED OUT ON SMARTPHONES

AS ON DESKTOPSAS DEVICES & EXPERIENCE BECOME

MORE OPTIMISED USAGE & TASK EXECUTION IS INCREASING

MOBILE CONTEXT DIFFERS BASED ON SITUATION, ATTITUDES & PREFERENCES.

www.flickr.com/photos/hoyvinmayvin/5873697252

MOBILE CONTEXT DIFFERS THE SAME CONTEX DOESN’T EQUAL THE SAME SITUATION

http://www.flickr.com/photos/hoyvinmayvin/5873139941/

www.flickr.com/photos/icedsoul/2486885051/

OTHER ASPECTS TO CONSIDER FOR THE MOBILE CONTEXT ARE...

www.flickr.com/photos/nadiya95/7217734288/

ATTENTION SPANDATA SNACKING VS. FOCUSED USAGE

www.flickr.com/photos/arjencito/6531640463/

SIGNAL COVERAGESPEED & RELIABILITY OF THE CONNECTION

LOCATIONMOVING ABOUT VS. IN ONE LOCATION

www.flickr.com/photos/garry61/3191250682

www.flickr.com/photos/adactio/6153481666

THE SCREENSMALL, MEDIUM, LARGE & OF COURSE TOUCH OR NOT

POSTURE & GRIPHOW WE SIT/ STAND AS WELL AS INTERACT WITH THE DEVICE

www.flickr.com/photos/helga/3545310740

4. ADAPTING CONTENT TO DEVICES & ORIENTATION

http://www.flickr.com/photos/eyesore9/3206408088/

www.flickr.com/photos/chicitoloco/8468592748/in/photostream/

POSTURE, GRIP & ORIENTATION VARIESBASED ON THE CONTEXT & THE USE CASE

www.flickr.com/photos/edduddiee/4307943164

SITUATIONAL CONTEXT IMPACTS FIRM VS. LOOSE GRIPPARTICULARLY IMPORTANT IF YOU HAVE A SPECIFIC “ON THE MOVE” USE CASE

www.flickr.com/photos/kalexanderson/6716348037

CERTAIN ORIENTATIONS ARE BETTER FOR CERTAIN TASKSE.G. LANDSCAPE WATCHING VS. PORTRAIT READING

Reading Watching Typing

GOOD GUIDE FOR HOW TO OPTIMISE DISPLAY TO

ORIENTATIONSUPPORT USER TASKS &

GOALS AS WELL AS MAKE THE MOST OF THE SCREEN

REAL ESTATE

www.flickr.com/photos/frank3/5865336902

THREE MAIN APPROACHES FOR ADAPTING TO ORIENTATION

RE-POSITION REVEAL/ HIDESCALE

5. USING CONTENT AS THE BASIS FOR BREAKPOINTS

http://www.flickr.com/photos/eyesore9/3206408088/

THE WEB IS AFTER ALL ABOUT CONTENTNOT WHAT DEVICE WE ARE USING

XXXXXXXX

www.flickr.com/photos/mirafoto/494444094

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

- BRAD FROST

AIM TO MAKE IT MORE FUTURE “PROOF” MOVE AWAY FROM SPECIFIC DEVICES

www.flickr.com/photos/byte/8282578241

USE NATURAL BREAKPOINTS BASED ON CONTENT LAYOUTRATHER THAN FOCUSING ON DEVICES

www.flickr.com/photos/sharynmorrow/127184319/

www.flickr.com/photos/visualpunch/7351572896/

LOOK AT THE DETAILS & BEST PRACTICE LAYOUT PRINCIPLESWHAT’S SUITABLE FOR THE CONTENT

NOT WITHOUT CHALLENGES

BUT, CHALLENGES ARE MEANT TO BE OVERCOME

www.flickr.com/photos/jdhancock/3521006248

www.flickr.com/photos/nikio/3899114449/

” By default the web has no optimal width, optimal height, optimal font-sizes or optimal anything really. “

- EDWARD O'RIORDAN

www.flickr.com/photos/soundslogical/4255801733/

” The web has always been fluid; we’ve just wasted a good number of years forcing fixed

pixels onto an inherently responsive framework. “

- ELLIOT J STOCKS

www.flickr.com/photos/donsolo/2136923757/

BRINGS US BACK TO MODULARITY

LESS FIXED VIEWS & MORE FOCUS ON THE BUILDING BLOCKS THAT MAKE UP

THE VIEWS

BREAKPOINTS & TWEAKPOINTSFOCUS ON CONTENT LAYOUT & EMS INSTEAD OF PX

www.slideshare.net/yiibu/pragmatic-responsive-design

THE SAME WITH COLUMNSOPT FOR FLUID AS MUCH POSSIBLE

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

www.flickr.com/photos/boltofblue/4418442567

KNOW YOUR BUILDING BLOCKS & WHEN TO USE THEMHOW TO RE-USE & ADAPT TO CONTENT VARIATION & SCREEN SIZE

Desktop/ Tablet Mobile

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

3 Nav

7Related products

2 Header

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

4Bath

section intro

6Types of baths

IDENTIFY COMMON ELEMENTSAND DEFINE VARIATIONS & THE ELEMENTS THEY ARE MADE UP OF

www.flickr.com/photos/florianric/7263382550/

JUST ANOTHER WAYOF APPROACHING THINGS

BASING BREAKPOINTS ON SCREEN SIZES

ISN’T WRONGBUT IT’S A TEMPORARY WORK AROUND

www.flickr.com/photos/gozalewis/3249104929

6. A LOOK AT EXAMPLE FRAMEWORK

http://www.flickr.com/photos/eyesore9/3206408088/

www.flickr.com/photos/byte/8282578241

ANY SCREEN SHOULD BE YOUR STARTING POINT** OF COURSE IT DEPENDS ON YOUR PROJECT

THERE IS NO RIGHT WAYTHIS IS JUST AN EXAMPLE

www.flickr.com/photos/jtravism/2417205289

STEPS FOR APPROACHING RESPONSIVE & MODULARITY 1. Define target audiences & key user journeys

2. Identify goals & content needs (user & business)

3. Identify key pages

4. Identify the content & functional requirements for each key page

5. Across all pages identify common content module types, e.g. featured product

6. Re-visit, list & prioritise the content for each page

7. From this Identify the variations that are needed for each content module type

8. Lay out the content modules across key pages (mobile or desktop first)

9. Work through layout and content stacking strategy across devices

10. Define templates for the content module types (variation & across devices)

11. Iteratively work through your pages & adjust modules & variations as neededwww.flickr.com/photos/poetatum/3335900523

www.flickr.com/photos/jdhancock/4354438814

DON’T FORGET TO TEST & ITERATESKETCH AS MUCH AS POSSIBLE FIRST AND WORK COLLABORATIVELY

www.flickr.com/photos/icedsoul/3041770422

7. TIME TO...PRACTICE

www.flickr.com/photos/icedsoul/3041770422

DESIGNING FOR TOUCHTHE TASK:A big news site have approached you to advice on what they need to consider for making their site more touch friendly across devices, including touch laptops/ desktops.

What main changes or considerations do you recommend for the them to make their home page more touch friendly?

10 MINUTES

EXERCISE ONE

THE WAY WE USE TOUCH SCREENS DIFFERS BASED ON DEVICE BUT ALSO ACROSS THE SAME DEVICES

www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819

CONSIDER REACH & OBSCURING CONTENT AND ADJUST NAVIGATION ACCORDINGLY

Source: Luke W - www.lukew.com/ff/entry.asp?1649

From...

...towards

www.flickr.com/photos/icedsoul/3041770422

DESIGNING FOR TOUCHTHE TASK:A big news site have approached you to advice on what they need to consider for making their site more touch friendly across devices, including touch laptops/ desktops.

What main changes or considerations do you recommend for the them to make their home page more touch friendly?

10 MINUTES

EXERCISE ONE

www.flickr.com/photos/icedsoul/3041770422

CONTENT BASED BREAKPOINTSTHE TASK:The same news site have asked you to look at doing their new responsive site but base the breakpoints on content rather than devices. They’ve particularly asked you to look at the following pages:

• Home page• News story without video• News story with video• Video with feed (social media & live updates)

How do you suggest laying out the content and break it out so that it is modular?

10 MINUTES

EXERCISE TWO

STEPS FOR APPROACHING RESPONSIVE & MODULARITY 1. Define target audiences & key user journeys

2. Identify goals & content needs (user & business)

3. Identify key pages

4. Identify the content & functional requirements for each key page

5. Across all pages identify common content module types, e.g. featured product

6. Re-visit, list & prioritise the content for each page

7. From this Identify the variations that are needed for each content module type

8. Lay out the content modules across key pages (mobile or desktop first)

9. Work through layout and content stacking strategy across devices

10. Define templates for the content module types (variation & across devices)

11. Iteratively work through your pages & adjust modules & variations as neededwww.flickr.com/photos/poetatum/3335900523

Desktop/ Tablet Mobile

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

3 Nav

7Related products

2 Header

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

4Bath

section intro

6Types of baths

IDENTIFY COMMON ELEMENTSDEFINE VARIATIONS

www.flickr.com/photos/icedsoul/3041770422

CONTENT BASED BREAKPOINTSTHE TASK:The same news site have asked you to look at doing their new responsive site but base the breakpoints on content rather than devices. They’ve particularly asked you to look at the following pages:

• Home page• News story without video• News story with video• Video with feed (social media & live updates)

How do you suggest laying out the content and break it out so that it is modular?

10 MINUTES

EXERCISE TWO

www.flickr.com/photos/icedsoul/3041770422

ADAPTING TO DEVICE ORIENTATIONTHE TASK:For the same news site, define how the content could change for the following pages based on device orientation:

• News story with video• Video with feed (social media & live updates)

10 MINUTES

EXERCISE THREE

CERTAIN ORIENTATIONS ARE BETTER FOR CERTAIN TASKSE.G. LANDSCAPE WATCHING VS. PORTRAIT READING

Reading Watching Typing

THREE MAIN APPROACHES FOR ADAPTING TO ORIENTATION

RE-POSITION REVEAL/ HIDESCALE

www.flickr.com/photos/icedsoul/3041770422

ADAPTING TO DEVICE ORIENTATIONTHE TASK:For the same news site, define how the content could change for the following pages based on device orientation:

• News story with video• Video with feed (social media & live updates)

10 MINUTES

EXERCISE THREE

http://www.flickr.com/photos/martinteschner/4569495912/

8. TOSUMMARISE

www.flickr.com/photos/thecaucas/2597813380

SUMMARYFACING NEW CHALLENGES WITH TOUCH HAVING MOVED BEYOND SMARTPHONES & TABLETS

HOW WE HOLD OUR DEVICES DIFFER AND IMPACTS DESIGN DECISIONS BUT WE NEED TO ACKNOWLEDGE THAT OUR GRIP CHANGES

ORIENTATION & TASK CAN BE A GOOD GUIDE FOR CONTENT LAYOUT

CONTENT IS WHAT WE SHOULD FOCUS ON, BOTH FOR BUILDING VIEWS & DEFINING BREAK POINTS

RE-USABLE MODULES & DESIGNING FOR ANY SCREEN MAKES US MORE FUTURE “PROOF”

www.flickr.com/photos/st3f4n/4387291247

9. FOR THE ROADSOME TAKE AWAYS

www.flickr.com/photos/st3f4n/4387291247

DEVICE INTERACTIONwww.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.phphttp://globalmoxie.com/blog/desktop-touch-design.shtmlwww.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/?goback=%2Egde_79272_member_226720034

www.flickr.com/photos/st3f4n/4387291247

MULTI DEVICES & TOUCH INPUTwww.lukew.com/ff/entry.asp?1649http://www.lukew.com/ff/entry.asp?1721http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php

Examples:http://polarb.com/polls/tags/mobiledesign

www.flickr.com/photos/st3f4n/4387291247

MORE RESPONSIVE DESIGN READINGhttp://www.netmagazine.com/opinions/designing-browserhttp://www.businessinsider.com/html5-vs-apps-why-the-debate-matters-and-who-will-win-2012-11http://ia.net/blog/responsive-typography-the-basics/http://daverupert.com/2013/04/responsive-deliverableshttp://alistapart.com/article/future-ready-content

www.flickr.com/photos/st3f4n/4387291247

BREAKPOINTShttp://www.lukew.com/ff/entry.asp?1714http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-wonhttp://stephanierieger.com/on-designing-content-out-a-response-to-zeldman-and-othershttp://www.markboulton.co.uk/journal/theinbetweenhttp://adactio.com/journal/6044/http://seesparkbox.com/foundry/there_is_no_breakpoint

www.flickr.com/photos/st3f4n/4387291247

AND MORE ON BREAKPOINTShttp://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/www.slideshare.net/yiibu/pragmatic-responsive-designhttp://alistapart.com/article/designing-for-breakpointshttp://dmolsen.com/2013/03/05/media-query-less-design-content-based-breakpoints-tweakpoints/

www.flickr.com/photos/dahlstroms/4411448782/

Thank you!QUESTIONS?

annadahlstromannadahlstrom

[email protected]