View
2.264
Download
1
Category
Tags:
Preview:
DESCRIPTION
Slides from the third of my 3 part series classes at General Assembly in London on the 7th of August 2013. https://generalassemb.ly/education/designing-for-multiple-devices-3-part-series/london/2172 ABSTRACT This 90-minute session will focus on designing for touch across devices - including hybrids - as well as the challenges and opportunities of responsive content. We will cover how to find a balance between controlling layouts and making your products as responsive as possible. By the end of the session you'll have an understanding of: - the different ways people physically hold and interact with their devices - how hybrid devices impact design decisions - why the mobile context matters and what you need to consider - how to adapt content to device layout and orientations - using content as the basis for breakpoints rather than devices - and a framework to use as the starting point for approaching modular and responsive design from an information architect (IA) and user experience (UX) point of view
Citation preview
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
anna.dahlstrom@gmail.comwww.annadahlstrom.com
Recommended