device agnostic design - ucd2014, london 25 oct 2014
DESCRIPTION
Slides from my Device Agnostic Design talk at UCD London http://2014.ucduk.org/session/device-agnostic-design-how-to-get-your-content-to-go-anywhere/ ABSTRACT: There was a time when we did glossy page designs and when those designs were pretty much what we saw in our desktop browsers. With the introduction and rise of smartphones, tablets, phablets there isn’t one view of our designs anymore. Instead, what we create needs to be able to adapt in a way that is suitable for the device as well as where and how it’s being used. With responsive design we’ve learnt the basics of how to adapt content, interactions and layouts so that it works across devices. But with further developments in technology and screens, our content is going to go anywhere. As a result we need to move away from designing for specific devices to solutions that are device agnostic. For us as UX designers this means means letting content rather than devices guide layouts, and also increasingly moving away from designing and wireframing pages to focusing on the modules that those views are made up of. But there are other aspects to consider in device agnostic design. In this talk I walk through why device agnostic design matters, what it means and how we go about it.TRANSCRIPT
Image courtesy of Shutterstock
Device Agnostic Design How to get your content to go anywhere
by Anna Dahlström | @annadahlstrom UCD London, 25 Oct 2014 #UCD14
www.flickr.com/photos/activeside/2192411612
Before 2007 we mostly thought about pages
That was when browsers were our biggest head ache
www.flickr.com/photos/jorgeq82/4732700819
Today it’s browers & a whole bunch of devices
www.flickr.com/photos/adactio/12674602864
“ For the first time ever there are more gadgets in the world than there are people. ”
- Source: Independent
http://www.businessinsider.com/vatican-square-2005-and-2013-2013-3
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
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
We go onlineeverywhere and anywhere
www.flickr.com/photos/luigimengato/5963540855
…and theseare the game changers
https://www.flickr.com/photos/jfingas/10104822523
https://www.flickr.com/photos/bfishadow/4604166391
“ Just a giant iPhone. ”
2010Ethan Marcotte, Responsive Web Design
Now…it’s Device Agnostic Design
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
!
!
!
!
!
!
What does work on “any device” mean?
“ The site you build is not dependent on knowing what device it is being displayed on. ”
- Sarita Harbour, WDD
Image courtesy of Shutterstock
Wherehas it come from?
An evolvement of responsive design
www.flickr.com/photos/adactio/5818096043
FULL WEBSITE
FULL WEBSITE
FULL WEBSITE
Responsive sites have the same url & is basically “one site”
http://desktopwallpaper-s.com/19-Computers/-/Future
DESKTOP FULL WEBSITE
BESPOKE CUT DOWN
WEBSITE
BESPOKE CUT DOWN
WEBSITE
Bespoke mobile sites have a separate url & means maintaining different sites
http://desktopwallpaper-s.com/19-Computers/-/Future
Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
Brings us back to this…
Maintaining bespoke mobile sites is messy & costly
www.flickr.com/photos/ericconstantineau/5618576278
It means maintaining multiple technical solutions...
www.flickr.com/photos/nikio/3899114449
...and also maintaining multiple versions of your content
www.flickr.com/photos/financialaidpodcast/7598618978
Realistically that means making cuts & frustrating users
www.flickr.com/photos/bulldogsrule/187693681
Bad, bad, bad…
This is NOT what a mobile user looks like
Image courtesy of Shutterstock
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
Many of us own multiple devices
Morning Commute Work Lunch Meeting Dinner Movie
We switch between them throughout the day
www.flickr.com/photos/sixmilliondollardan/2493495506
A poor experience results in the same thing where ever it takes place
Users expect an equal & continuous experience across devices
www.flickr.com/photos/joachim_s_mueller/7110473339
DESKTOP FULL WEBSITE
BESPOKE CUT DOWN
WEBSITE
BESPOKE CUT DOWN
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future
Having separate sites does, for the most part, not make sense
DESKTOP FULL WEBSITE
BESPOKE CUT DOWN
WEBSITE
BESPOKE CUT DOWN
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future
Bespoke mobile sites: Different sites based on the device that’s used
FULL WEBSITE
FULL WEBSITE
FULL WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future
Responsive sites: The same site irrespectively of the device
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
www.flickr.com/photos/donsolo/2136923757/
It’s all about the modules baby
Define your content stacking strategy across devices & orientation.
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
Define your content stacking strategy across devices & orientation.
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
Define your content stacking strategy across devices & orientation.
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
sizes
http://foundation.zurb.com/docs/layout.php
Breakpoints & Behaviour
www.flickr.com/photos/theaftershock/2811382400
!
!
!
!
!
“ Content needs to be choreographed to ensure the intended message is preserved
on any device and at any width “
- Trent Walton
Keep the core content the same but optimise the experience, display & interactions to the device
Image courtesy of Shutterstock
http://thenextweb.com/
So that it’s carefully considered, like this
From responsive to device agnostic design
Responsive design established the principle of the same content across devices
www.flickr.com/photos/joachim_s_mueller/7110473339
But it’s brought up other problems
www.flickr.com/photos/stankus/3718835245
“ Smartphones accounted for 57.6% of total sales in fourth quarter of 2013 ” *
- Source: Gartner
www.flickr.com/photos/aforgrave/6168689222
Internet connection is still not a given
http://gizmodo.com/a-map-of-every-device-in-the-world-thats-connected-to-t-1628171291
Oh, and Internet actually sleeps…
http://www.wired.com/2014/10/internet-sleeps-night-really
Oh, and Internet actually sleeps…
http://www.wired.com/2014/10/internet-sleeps-night-really
…and not all connections are made equal
Screenshot from http://opensignal.com/coverage-maps/UK/
Adaptivedesign
Content layerrich semantic HTML markup
Presentation layerCSS and styling
Client-side scripting layer JavaScript or jQuery behaviors
www.thegrid.io
“ To get response times to a minimum, we’ve had to develop a system that loads in just the essential components of the page at the right times. Mobile-sized images download first, then when the page’s Javascript detects the browser’s capabilities, higher-resolution images get ‘loaded in dynamically.’ ” - Andrew Pipe, BBC iWonder
Context
Mobile context ≠ mobile use case The latter is about the task, the former about the total sum of the user’s mobile experience
www.flickr.com/photos/icedsoul/2486885051
Image courtesy of Shutterstockwww.flickr.com/photos/jmsmith000/3169546564
“ I used to think it merely dealt with basing responsive breakpoints on content rather than particular devices, but there’s
more to devices than the size of their screens. ”
- Trent Walton, Device Agnostic
www.flickr.com/photos/lokan/8843464852www.flickr.com/photos/jmsmith000/3169546564
“ A device-agnostic approach also takes into account infinite combinations of screen resolution, input
method, browser capability, and connection speed. ”
- Trent Walton, Device Agnostic
www.flickr.com/photos/66327170@N07/7296381856
!
!
!
!
!
!
‘ New rule: every desktop design has to go finger friendly ’
- Josh Clark
www.flickr.com/photos/intelfreepress/6837427202
www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
www.flickr.com/photos/janitors/9968676044
Impacts controls, placement & interactions
www.flickr.com/photos/jmtimages/2883279193www.flickr.com/photos/ljrmike/7675757042
We need to consider precise v.s imprecise input means
www.flickr.com/photos/vincentsl/3543888150
“ Designing for touch means designing for fingers, yes, but to be more specific, you’re really designing for thumbs. ”
- Josh Clark
Designing for multiple devices can become a bit of a minefield
www.flickr.com/photos/cayusa/534070358
We can’t always successfully tell what devices users are using
www.flickr.com/photos/adactio/6153481666
It’s about content. Not what device we’re using.
http://foundation.zurb.com/docs/layout.php
“ Get your content to go anywhere, because it’s going to
go everywhere. ” - Brad Frost
http://foundation.zurb.com/docs/layout.php
“ It is your mission to get your content out, on whichever platform, in whichever format
your audience wants to consume it. ”
- Karen McGrane
Source: http://www.prnewswire.com/news-releases/strategy-analytics-android-captures-record-85-percent-share-of-global-smartphone-shipments-in-q2-2014-269301171.html
http://foundation.zurb.com/docs/layout.php
“ Your users get to decide how, when, and where they want to read your content.
It is your challenge and your responsibility to deliver a good
experience to them. ” - Karen McGrane
device browser screen input method connection speed
Any
anytime anywhereUsed
How do we design something that can work on any device?
www.thegrid.io
“ The design adjusts to look good on every browser and every device. Automatically.”
- The Grid
It all starts with content
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
Less about pages & more focus on the building blocks that make up those views
www.flickr.com/photos/boltofblue/4418442567
Gone is the big reveal of the beautiful page designs
www.flickr.com/photos/nataliejohnson/377344806
www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666
It’s about views that will look good, & work well, across different browsers, screen sizes, device types, connections & input methods
How to go about it
1. Understand content & content stacking strategy 2. Approach design as systems of modules3. Use content rather than device based breakpoints
http://foundation.zurb.com/docs/layout.php
“ 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. ”
- Daniel MallScreenshot: www.crayola.co.uk/
www.flickr.com/photos/boltofblue/4418442567
The more you reuse, the less modules there will be to design, define & develop
www.flickr.com/photos/akrabat/9085299639
Essential for preventing ending up with too many pieces
An evolution of how we’ve always worked
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
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
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
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
Views
Home - large Home - small
Start identifying your building blocks & variations
Views
Home - large Home - small
Start identifying your building blocks & variations
Feature - large Feature - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
Feature - large Feature - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
Feature - large Feature - small
Featured products - large Featured products - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
Feature - large Feature - small
Featured products - large Featured products - small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
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
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
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
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
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
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
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
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
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
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
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
www.slideshare.net/yiibu/pragmatic-responsive-design
Work with breakpoints & tweakpoints, focus on content layout & EMS instead of px
http://foundation.zurb.com/docs/layout.php
“ Building a content-aware grid is a simple matter of
choosing the layout patterns that you want, based on breakpoints that you set
according to page content. ”
- Thierry Koblentz, Device-Agnostic Approach To Responsive Web Design
Look at what’s suitable for your content & best practice for layout principles
www.flickr.com/photos/visualpunch/7351572896
Basing breakpoints on screen sizes is a temporary work around
www.flickr.com/photos/gozalewis/3249104929
www.flickr.com/photos/adactio/6153481666
It enforces the idea that (responsive) design is about devices. It’s not.
Opt for fluid as much possible
http://foundation.zurb.com/docs/layout.php
Work with your module library and templates
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
A few final words...
Image courtesy of Shutterstock
“ Every responsive design project is also a content strategy project. ”
- Karen McGrane
www.flickr.com/photos/75905404@N00/7126146307
How we approach it depends…
DetailedIA & UX deliverablesHigh level
Brand Info or taskAim of experience
LimitedExperience in visual design teamExtensive
Less formal UX deliverables but more creatively led
UX led with more formal & extensive IA & UX deliverables
Source: Mark Bell, Dare
We have to work together across disciplines, & with clients
www.flickr.com/photos/byte/8282578241
Device agnostic design means giving up some control to ensure it works for as many devices as possible
www.flickr.com/photos/stickkim/7491816206
Ensuring that we do what’s best for our clients, our users & us as a company
Test as early as possible& then continuously
device browser screen input method connection speed
Any
anytime anywhereUsed
Content + Context is the focus
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
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
Image courtesy of Shutterstock
Thank you. Questions?@annadahlstrom | www.annadahlstrom.com