Slides from the second of my 3 part series classes at General Assembly in London on the 31st of July 2013.
https://generalassemb.ly/education/designing-for-multiple-devices-3-part-series/london/2172
ABSTRACT
This follow-on session will build onto the guiding principles covered in the previous class, taking a closer look at:
- the common challenges faced when designing for multiple devices and how to address them
- content strategy and hierarchy across devices
- app structures and navigation patterns for responsive design
- how to test both responsive sites and apps
2. I’m Anna
IA & UX DESIGNER | FREELANCE SINCE 2011
SWEDISH | IN LONDON SINCE 2006
This is me at my favourite place, Knäbäckshusen in Skåne, Sweden
Photo curtesy of my sister
3. www.flickr.com/photos/suttonhoo22/2070700035
AGENDA
1. RECAP ON PART 1
2. COMMON CHALLENGES
3. CROSS DEVICE CONTENT
STRATEGY & HIERARCHY
4. RESPONSIVE NAVIGATION
5. APPS STRUCTURE &
NAVIGATION
6.TESTING APPS &
RESPONSIVE SITES
7. EXERCISES
8. SUMMARY
9. Q & A
6. A LARGE PROPORTION OF
USAGE HAPPENS WHEN WE
HAVETIMETO KILL
2
www.flickr.com/photos/anniemole/2424372024 www.flickr.com/photos/edduddiee/4307943164
7. THE SAMETASKS ARE CARRIED
OUT ON SMARTPHONES AS ON
DESKTOPS
3
www.flickr.com/photos/frantaylor/4296536332 www.flickr.com/photos/stuckincustoms/440157748
8. USERS INCREASINGLY EXPECT AN
EQUAL & CONTINUOS
EXPERIENCE ACROSS DEVICES
4
www.flickr.com/photos/demandaj/7287174776 www.flickr.com/photos/joachim_s_mueller/7110473339
9. 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
BUT WHY?
” 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
11. “ 1,057 different mobile devices accessed
The Guardian beta site yesterday (including
one person on a zune!)” *
* Source: The Guardian
16. WHAT SCREEN SIZES &
RESOLUTIONS SHOULD I
DESIGN FOR?
USE ANALYTICS FOR GUIDANCE &
DESIGN FORTHE MOST
COMMON ONES
Source: www.flickr.com/photos/dpstyles/3448453466
17. 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
18. HOW DO I DEFINE
MY BREAKPOINTS?
BASE IT ONTHE MOST IMPORTANT SCREEN SIZES &
ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS
www.slideshare.net/yiibu/pragmatic-responsive-design
19. HOW DO I DEFINE
MY BREAKPOINTS?
BASE IT ONTHE MOST IMPORTANT SCREEN SIZES &
ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS
www.slideshare.net/yiibu/pragmatic-responsive-design
20. HOW DO I DEFINE
MY BREAKPOINTS?
BASE IT ONTHE MOST IMPORTANT SCREEN SIZES &
ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS
www.slideshare.net/yiibu/pragmatic-responsive-design
21. HOW MANY DEVICES
SHOULD ITEST ON?
AS MANY AS POSSIBLE BUT PRIORITISE
BASED ONYOUR AUDIENCE
www.flickr.com/photos/nomadic_lass/5598218199
24. “ Content needs to be choreographed to
ensure the intended message is preserved
on any device and at any width ”
-TRENT WALTONwww.flickr.com/photos/theaftershock/2811382400/
27. Screenshot: www.crayola.co.uk/
“ With thousands and thousands of pages
on the Crayola site, it wasn’t efficient to
wireframe every single page and state.We
created a system of components that could
be assembled in different configurations to
accommodate the unique content needed
for each type of page.” *
* Source: http://danielmall.com/work/crayola/
29. UNDERSTANDTHE CONTENT
ACROSS DEVICES & PAGES
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
Ad3
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
Desktop/ tablet Mobile
30. 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 BUT RE-USE AS MUCH AS POSSIBLE
31. DON’T JUST WORK
WITH COLUMNS
THINK OFTHE NARRATIVE
OFTHE PAGE
www.flickr.com/photos/garrettc/6260768486/
33. MOBILEVS. DESKTOP FIRST
•START LARGE OR SMALL
WHAT EVER WORKS BEST FORYOU
•ABOUT CONTENT, PRIORITISING &
CONSIDERING HOW IT WILL WORK
ACROSS DEVICES
34. KNOW WHAT
YOU DESIGN FOR
IT MAKES IT EASIERTO FIT
ALLTHE PIECESTOGETHER
www.flickr.com/photos/songzhen/4893025042
35. IDENTIFY WHAT
YOU CAN RE-USE
TO MEET OTHER REQUIREMENTS
ACROSS SCREEN SIZES AND PAGES/VIEWS
www.flickr.com/photos/songzhen/4893025042
39. A CLOSER LOOK AT
‘RESPONSIVE NAVIGATION PATTERNS’
by Brad Frost.*
Source:
http://bradfrostweb.com/blog/web/responsive-nav-patterns
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
40. SIMPLE NAVIGATION
TOP NAV OR “DO NOTHING”
KEEPSTHE NAVIGATION ATTHETOP
THETOGGLE
HIDES NAVIGATION ITEMS IN A MENU
THE LEFT NAV FLYOUT
MENU ITEMS ARE ACCESSED FROM ATRAY SLIDING IN
A selection of Responsive Navigation
Patterns by Brad Frost (thank you!)
41. http://skinnyties.com/
TOP NAV OR “DO NOTHING”
KEEPSTHE NAVIGATION ATTHETOP
PROS
Simple to implement
Less design &
development
implications
CONS
Not scalable
Potential height issues
Via Brad Frost (thank you!)
42. PROS
Optimises screen use
Recognised from apps
Scalable
CONS
Possible animation
performance
problems
Javascript dependent
THETOGGLE
HIDES NAVIGATION ITEMS IN A MENU
http://www.smashingmagazine.com/
Via Brad Frost (thank you!)
43. Images from Barack Obama via Brad Frost
PROS
Space generous
Recognised nav
pattern from apps
CONS
More advanced and
doesn’t work on all
devices
THE LEFT NAV FLYOUT
MENU ITEMS ARE ACCESSED FROM ATRAY SLIDING IN
Via Brad Frost (thank you!)
44. COMPLEX NAVIGATION
THE MULTITOGGLE
NESTED NAVIGATION GROUPED UNDER A MENU
RIGHTTO LEFT
THE NEXT LEVEL NAVIGATION SLIDES IN RIGHTTO LEFT
SKIPTHE SUB-NAV
NEXT LEVEL NAVIGATION IS DISPLAYED ONTHAT LEVEL
A selection of Responsive Navigation
Patterns by Brad Frost (thank you!)
45. COMPLEX NAVIGATION
PRIORITY+
DISPLAYSTHE MOST IMPORTANT & HIDESTHE REST UNDER ‘MORE’
THE CAROUSEL+
A CAROUSEL WITHTHE PARENT CATEGORIES & SUB-NAV BELOW
A selection of Responsive Navigation
Patterns by Brad Frost (thank you!)
46. THE MULTITOGGLE
NESTED NAVIGATION GROUPED UNDER A MENU
Barack Obama - image via Stephanie Riegerhttp://thenextweb.com/
PROS
Scannable
Scalable
CONS
Animation
performance
Javascript dependent
Via Brad Frost (thank you!)
50. Image from Intel, via Brad Frost
PROS
Easy to navigate
Suitable for touch
CONS
Doesn’t display all
parent categories at
once
Less good for non-
touch devices
Not suitable for multi-
level sub-navs
THE CAROUSEL+
A CAROUSEL WITHTHE PARENT CATEGORIES & SUB-NAV BELOW
Via Brad Frost (thank you!)
52. DEFINETYPES OF NAVIGATION
PRIMARY, SECONDARY,TERTIARY AS WELL AS
FOOTER & CROSS LINKING
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
60. Source: http://developer.android.com/design/patterns/new-4-0.html
BASIC iOS
NAVIGATION
CONSISTENT ACROSS
VERSIONS
NAVIGATION BAR
Enables navigation through the app
hierarchy. Holds the back button,
controls for managing screen content &
the title of the screen.
BACK BUTTON
Should always take the user one step back
from where they came from & be descriptive.
TAB BAR
Can often be customised. Holds the main
sections of the app.
‘MORE’ TAB BAR ITEM
Used to hold & provide access to all other
sections of the app that don’t fit in the tab bar.
Content area
MoreItemItemHome Item
iPhone 12:15 PM
APP NAME
More Customise
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
Item
Item
Item
Item
Item
Item
Item
Item
MoreItemItemHome Item
61. Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID
NAVIGATION
DIFFERENT BETWEEN
VERSIONS. IN ICE CREAM
SANDWICH:
NAVIGATION BAR
For devices that don't have the
hardware keys. Holds 'Back', 'Home'
and 'Recents'
ACTION BAR
Holds the most important action buttons for
your app (3 + overflow menu)
UPVS. BACK BUTTON
The Up button is used to navigate up one level
based on the hierarchical structure of the site.
Back is used to navigate back one step from
where you came from & as such works in
reverse chronological order.
79. www.flickr.com/photos/icedsoul/3041770422
MODULAR DESIGN
THETASK:
You've been asked to develop a responsive
site for a small furniture store for summer.
They sell indoor tables (dinner, kitchen, sofa
tables) as well as outdoor tables.They are an
independent store and want to inform users
about their store.
Identify a number (not all) main content
modules you’d imagine that the site would
need and define them for smartphone and
desktop.
15 MINUTES
EXERCISE ONE
80. UNDERSTANDTHE CONTENT
ACROSS DEVICES & PAGES
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
Ad3
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
Desktop/ tablet Mobile
81. 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 BUT RE-USE AS MUCH AS POSSIBLE
82. www.flickr.com/photos/icedsoul/3041770422
MODULAR DESIGN
THETASK:
You've been asked to develop a responsive
site for a small furniture store for summer.
They sell indoor tables (dinner, kitchen, sofa
tables) as well as outdoor tables.They are an
independent store and want to inform users
about their store.
Identify a number (not all) main content
modules you’d imagine that the site would
need and define them for smartphone and
desktop.
15 MINUTES
EXERCISE ONE
83. www.flickr.com/photos/icedsoul/3041770422
RESPONSIVE
NAVIGATION
THETASK:
You've been asked to develop a responsive
site for a small furniture store for summer.
They sell indoor tables (dinner, kitchen, sofa
tables) as well as outdoor tables.They are an
independent store and want to inform users
about their store.
Define how the navigation will work for
desktop and mobile.
10 MINUTES
EXERCISE
TWO
84. SIMPLE NAVIGATION
TOP NAV OR “DO NOTHING”
KEEPSTHE NAVIGATION ATTHETOP
THETOGGLE
HIDES NAVIGATION ITEMS IN A MENU
THE LEFT NAV FLYOUT
MENU ITEMS ARE ACCESSED FROM ATRAY SLIDING IN
A selection of Responsive Navigation
Patterns by Brad Frost (thank you!)
85. DEFINETYPES OF NAVIGATION
PRIMARY, SECONDARY,TERTIARY AS WELL AS
FOOTER & CROSS LINKING
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
86. www.flickr.com/photos/icedsoul/3041770422
RESPONSIVE
NAVIGATION
THETASK:
You've been asked to develop a responsive
site for a small furniture store for summer.
They sell indoor tables (dinner, kitchen, sofa
tables) as well as outdoor tables.They are an
independent store and want to inform users
about their store.
Define how the navigation will work for
desktop and mobile.
10 MINUTES
EXERCISE
TWO
87. www.flickr.com/photos/icedsoul/3041770422
COMPLEX
RESPONSIVE
NAVIGATION
THETASK:
After the successful table store project
you've been asked to develop a responsive
site for a large furniture store in time for
summer.They sell indoor as well as outdoor
furniture and frequently have offers and
products they want to push.They group
products by room (e.g. kitchen but also by
category (e.g. storage) and sub-category (e.g.
food storage).
Define how the navigation & including sub-
navigation will work for desktop and mobile.
15 MINUTES
EXERCISE
THREE
88. COMPLEX NAVIGATION
THE MULTITOGGLE
NESTED NAVIGATION GROUPED UNDER A MENU
RIGHTTO LEFT
THE NEXT LEVEL NAVIGATION SLIDES IN RIGHTTO LEFT
SKIPTHE SUB-NAV
NEXT LEVEL NAVIGATION IS DISPLAYED ONTHAT LEVEL
A selection of Responsive Navigation
Patterns by Brad Frost (thank you!)
89. COMPLEX NAVIGATION
PRIORITY+
DISPLAYSTHE MOST IMPORTANT & HIDESTHE REST UNDER ‘MORE’
THE CAROUSEL+
A CAROUSEL WITHTHE PARENT CATEGORIES & SUB-NAV BELOW
A selection of Responsive Navigation
Patterns by Brad Frost (thank you!)
90. www.flickr.com/photos/icedsoul/3041770422
COMPLEX
RESPONSIVE
NAVIGATION
THETASK:
After the successful table store project
you've been asked to develop a responsive
site for a large furniture store in time for
summer.They sell indoor as well as outdoor
furniture and frequently have offers and
products they want to push.They group
products by room (e.g. kitchen but also by
category (e.g. storage) and sub-category (e.g.
food storage).
Define how the navigation & including sub-
navigation will work for desktop and mobile.
15 MINUTES
EXERCISE
THREE
92. www.flickr.com/photos/thecaucas/2597813380
GUIDING
PRINCIPLES
MOBILE DEVICES ARE USED ANYWHERE
& EVERYWHERE
A LARGE PROPORTION OF USAGE
HAPPENS WHEN WE HAVE TIME TO KILL
THE SAME TASKS ARE CARRIED OUT
ON SMARTPHONES AS ON DESKTOPS
USERS INCREASINGLY EXPECT AN
EQUAL & CONTINUOS EXPERIENCE
ACROSS DEVICES
CORE CONTENT SHOULD REMAIN
THE SAME BUT THE EXPERIENCE
SHOULD BE OPTIMISED
93. www.flickr.com/photos/thecaucas/2597813380
COMMON
PROBLEMS
NUMBER OF WIREFRAMES
DEPENDS ONYOUR PROJECT, BUDGET &
TEAM AS WELL AS WHO IS BUILDING IT
VISUAL DESIGN
LESS STATIC DESIGNS, MORE MODULARITY
& PROTOTYPING
SCREENSIZES & BREAKPOINTS
USE ANALYTICS FOR GUIDANCE & DESIGN
FORTHE MOST COMMON ONES
WHAT TO TEST ON
AS MANY AS POSSIBLE BUT PRIORITISE
BASED ONYOUR AUDIENCE
IMAGES & ICONS
AS FLEXIBLE AS POSSIBLE
95. www.flickr.com/photos/thecaucas/2597813380
RESPONSIVE
NAVIGATION
RESEARCH DIFFERENT
APPROACHES
KNOWYOUR OPTIONS &THE PROS &
CONS FOR EACH
BASE IT ONYOUR PROJECT
ASSESS HOW MANY LEVELSTHAT ARE
NEEDED & REVIEW APPROACH ACROSS
DEVICES BUT ALSO WHAT GOES IN
WORK WITH DIFFERENT TYPES
IT'S NOT JUST ABOUTTHE MAIN
NAVIGATION BUT ALSO SUB-NAVIGATION,
SEARCH, IN PAGE LINKS &THE FOOTER
BE CONSISTENT
USE SAYINGVISUAL CUES & CONSIDER
NAVIGATION ACROSS ALL PRODUCTS
96. www.flickr.com/photos/thecaucas/2597813380
APP
STRUCTURES &
NAVIGATION
BASE ON PROJECT & PLATFORM
IDENTIFYYOUR MAIN SECTIONS & KEEP
DIFFERENCES IN STRUCTURE & UI
GUIDELINES BETWEEN PLATFORMS IN MIND
SKETCH BEFORE WIREFRAMING
WORKTHROUGHYOUR SCREENFLOW,
NAVIGATION & CONTENT ACROSS SCREENS
VALUE FROM FIRSTVIEW
AVOID USINGTHE HOME SCREEN AS A
STEPPING POINT
BEST PRACTICE & INSPIRATION
FORTYPICALTASK FLOWS & SCREENS
97. www.flickr.com/photos/thecaucas/2597813380
TESTING APPS &
RESPONSIVE
SITES
TESTING APPS
BOTH STRUCTURE, NAVIGATION,
INTERACTIONS &TRANSITIONS
TESTING RESPONSIVE SITES
DOTHIS AS EARLY AS POSSIBLETO ENSURE IT
ACTUALLY WORKS INTHE BROWSER
TESTING IN THE BROWSER
BY RESIZINGTHE BROWSER WINDOW OR
DESIGNING & CREATING PROTOTYPES
USING EMULATORS
ALLOWSYOUTOVIEW HOWYOUR SITE IS
DISPLAYED ACROSS DEVICES & ORIENTATIONS
98. www.flickr.com/photos/thecaucas/2597813380
TESTING APPS &
RESPONSIVE
SITES
ON ACTUAL DEVICES
TEST ON AS MANY AS POSSIBLE.THE BEST
REPRESENTATION BUT CAN BE EXPENSIVE.
INVEST IN KEY DEVICES & POOLTOGETHER
TO SHARE DEVICES
TESTING WITH USERS
TEST EARLY & FREQUENTLY. DEFINEYOUR
AUDIENCE,TEST CASES, OBJECTIVES &
IDENTIFY SPECIFIC CROSS DEVICE SPECIFIC
EXPECTATIONS & LIMITATIONS
110. The bridge between Sweden & Denmark, as seen in”The Bridge” - www.flickr.com/photos/dahlstroms/4411448782/
Thank you!
QUESTIONS?
annadahlstrom
annadahlstrom
anna.dahlstrom@gmail.com
www.annadahlstrom.com