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
5. A LARGE PROPORTION OF
USAGE HAPPENS WHEN WE
HAVETIMETO KILL
2
www.flickr.com/photos/anniemole/2424372024 www.flickr.com/photos/edduddiee/4307943164
6. THE SAMETASKS ARE CARRIED
OUT ON SMARTPHONES AS ON
DESKTOPS
3
www.flickr.com/photos/frantaylor/4296536332 www.flickr.com/photos/stuckincustoms/440157748
7. USERS INCREASINGLY EXPECT AN
EQUAL & CONTINUOS
EXPERIENCE ACROSS DEVICES
4
www.flickr.com/photos/demandaj/7287174776 www.flickr.com/photos/joachim_s_mueller/7110473339
8. CORE CONTENT SHOULD REMAIN
THE SAME BUTTHE EXPERIENCE
SHOULD BE OPTIMISED
5
www.flickr.com/photos/ericconstantineau/5618576278 www.flickr.com/photos/jmtimages/2883279193
10. 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
15. 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
16. 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
24. 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
26. THE WAY WE USE
TOUCH SCREENS DIFFERS
BASED ON DEVICE BUT ALSO
ACROSSTHE SAME DEVICES
www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
27. 49% OF USERS HOLDTHEIR
PHONE IN ONE HAND
BUT HOWTHEY 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%
28. HOW WE HOLD OUR
DEVICES CHANGES
IT’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
48. SITUATIONAL CONTEXT
IMPACTS FIRMVS. LOOSE GRIP
PARTICULARLY IMPORTANT IFYOU HAVE
A SPECIFIC “ONTHE MOVE” USE CASE
www.flickr.com/photos/kalexanderson/6716348037
50. GOOD GUIDE FOR HOW
TO OPTIMISE DISPLAYTO
ORIENTATION
SUPPORT USERTASKS &
GOALS AS WELL AS
MAKETHE MOST
OFTHE SCREEN
REAL ESTATE
www.flickr.com/photos/frank3/5865336902
65. Desktop/Tablet Mobile
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related products
2 Header
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
4
Bath
section
intro
6
Types of baths
IDENTIFY COMMON ELEMENTS
AND DEFINEVARIATIONS &THE ELEMENTSTHEY ARE MADE UP OF
70. THERE IS NO RIGHT WAY
THIS IS JUST AN EXAMPLE
www.flickr.com/photos/jtravism/2417205289
71. 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 needed
www.flickr.com/photos/poetatum/3335900523
74. www.flickr.com/photos/icedsoul/3041770422
DESIGNING FOR
TOUCH
THETASK:
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
75. THE WAY WE USE
TOUCH SCREENS DIFFERS
BASED ON DEVICE BUT ALSO
ACROSSTHE SAME DEVICES
www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
76. CONSIDER REACH &
OBSCURING CONTENT
AND ADJUST NAVIGATION ACCORDINGLY
Source: Luke W - www.lukew.com/ff/entry.asp?1649
From...
...towards
77. www.flickr.com/photos/icedsoul/3041770422
DESIGNING FOR
TOUCH
THETASK:
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
78. www.flickr.com/photos/icedsoul/3041770422
CONTENT BASED
BREAKPOINTS
THETASK:
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
79. 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 needed
www.flickr.com/photos/poetatum/3335900523
80. Desktop/Tablet Mobile
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related products
2 Header
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
4
Bath
section
intro
6
Types of baths
IDENTIFY COMMON ELEMENTS
DEFINEVARIATIONS
81. www.flickr.com/photos/icedsoul/3041770422
CONTENT BASED
BREAKPOINTS
THETASK:
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
87. www.flickr.com/photos/thecaucas/2597813380
SUMMARY
FACING 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”