Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Image courtesy of Shutterstock 
Hands on tips for 
Building device agnostic UX systems 
by Anna Dahlström | @annadahlstrom...
Screenshot: Screenshot: http://www.worldometers.info/watch/world-population/
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. ”...
Designing bespoke mobile sites & 
experiences for different devices is a sure… 
www.flickr.com/photos/ericconstantineau/56...
It’s one of the reasons for 
responsive design 
www.flickr.com/photos/adactio/5818096043
http://foundation.zurb.com/docs/layout.php 
“ Design & development 
should respond to the user’s 
behaviour & environment ...
This is NOT 
what a mobile user looks like 
Image courtesy of Shutterstock
Mobile Search MoMentS 
UnderStanding how Mobile driveS converSionS 
Mobile search is always on, happening 
on the go, at h...
Many of us own 
multiple devices
“ 90% of users start a task on one device and then complete it on another. ” 
Sequential usage 
Morning Commute 
Work 
- S...
“ 90% of users start a task on one device and then complete it on another. ” 
Sequential usage 
Morning Commute 
Work 
- S...
“ 90% of users start a task on one device and then complete it on another. ” 
Sequential usage 
Morning Commute 
Work 
- S...
“ Today’s popular devices aren’t tomorrow's so 
building something which works on any device is better than 
building some...
http://foundation.zurb.com/docs/layout.php 
“ Get your content to go 
anywhere, because it’s going to 
go everywhere. ” 
-...
Hello Device Agnostic Design
“ The site you build is not dependent on 
knowing what device it is being displayed on. ” 
- Sarita Harbour, WDD 
Image co...
device 
browser 
screen 
input method 
connection speed 
Any 
Used anytime 
anywhere
An evolution of how we’ve always worked
Define views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter  search 
Feature...
Break down content further  explore layouts 
Product listing 
1 Header Nav 
2 Filter  search 
Product page 
1 Header Nav 
...
Home - large 
Header Nav 
Features 
Featured categories 
Featured products 
Footer 
1 Header Nav 
2 
Features 
3 
Category...
Break down each module into elements 
Home - large 
Header Nav 
Features 
Featured categories 
Featured products 
Footer 
...
Start identifying your building blocks  variations 
Views 
Home - large Home - small
Start identifying your building blocks  variations 
Views 
Home - large Home - small
Start identifying your building blocks  variations 
Views Modules 
Feature - large Feature - small 
Home - large Home - sm...
Start identifying your building blocks  variations 
Views Modules 
Feature - large Feature - small 
Home - large Home - sm...
Start identifying your building blocks  variations 
Views Modules 
Feature - large Feature - small 
Featured products - la...
Start identifying your building blocks  variations 
Views Modules 
Feature - large Feature - small 
Featured products - la...
Start identifying your building blocks  variations 
Feature - large Feature - small 
Featured products - large 
Single pro...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Iterate  refine across views  key templates 
Home Categories Product listing Product page 
Header Nav 
Header Nav 
Filter ...
Gradually build your module library 
Feature - large Feature - small 
1 
3 
4 
Featured products - large Featured products...
Almost the same 
as lego 
www.flickr.com/photos/toomuchdew/5243719740
Re-use  sparingly 
do bespoke modules 
www.flickr.com/photos/toomuchdew/5243719740
Re-use  sparingly 
do bespoke modules 
www.flickr.com/photos/toomuchdew/5243719740 
www.flickr.com/photos/toomuchdew/59143...
It’s about content. 
Not what device we’re using.
However…
Screenshot: https://moto360.motorola.com/
Screenshot: Screenshot: http://www.apple.com/uk/
Screenshot: Screenshot: http://www.apple.com/uk/ 
“ 
A 
n 
d 
ju 
s 
t a 
s 
the first wave of desktop apps ported to 
mob...
Responsive design has allowed us to 
adapt views  interactions
Responsive design has allowed us to 
adapt views  interactions
Responsive design has allowed us to 
adapt views  interactions
Responsive design has allowed us to 
adapt views  interactions
Each device is different. 
Make the most of it
Each device is different. 
Make the most of it
Each device is different. 
Make the most of it
Each device is different. 
Make the most of it 
Browse 
Research 
Buy  Pay 
Get notified
Each device is different. 
Make the most of it 
Browse 
Research 
Buy  Pay 
Get notified 
✓ ✓ ✓
Each device is different. 
Make the most of it 
Browse 
Research 
Buy  Pay 
Get notified 
✓ ✓ ✓ 
✓ ✓ ✓
Each device is different. 
Make the most of it 
Browse 
Research 
Buy  Pay 
Get notified 
✓ ✓ ✓ 
✓ ✓ ✓ 
✓ ✓ ✓
Each device is different. 
Make the most of it 
Browse 
Research 
Buy  Pay 
Get notified 
✓ ✓ ✓ 
✓ ✓ ✓ 
✓ ✓ ✓ 
✓
Each device is different. 
Make the most of it 
Browse 
Research 
Buy  Pay 
Get notified 
✓ ✓ ✓ 
✓ ✓ ✓ 
✓ ✓ ✓ 
✓ ✓
Each device is different. 
Make the most of it 
Browse 
Research 
Buy  Pay 
Get notified 
✓ ✓ ✓ 
✓ ✓ ✓ 
✓ ✓ ✓ 
✓ 
✓ ✓
Content + Context = 
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
Same, same …but different
! 
Your starting point should be any device. 
Then consider the role of each device - its strengths  
weaknesses, how it s...
Thank you. Questions? 
@annadahlstrom | www.annadahlstrom.com 
Image courtesy of Shutterstock
Upcoming SlideShare
Loading in …5
×

Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

12,474 views

Published on

Slides from my talk at GeekGirl where the theme was 'From Web to Watch-Designing a multiplatform UX system'

http://www.geekgirlmeetup.co.uk/blog/

Published in: Design, Devices & Hardware, Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing!!!!!!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

  1. Image courtesy of Shutterstock Hands on tips for Building device agnostic UX systems by Anna Dahlström | @annadahlstrom GeekGirl London, 28 Oct 2014 #ggm
  2. Screenshot: Screenshot: http://www.worldometers.info/watch/world-population/
  3. Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/
  4. “ We have seen 18,769 distinct devices download our app in the past few months. In our report last year we saw 11,868. ” Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/ - Source: Open Signal
  5. Designing bespoke mobile sites & experiences for different devices is a sure… www.flickr.com/photos/ericconstantineau/5618576278
  6. It’s one of the reasons for responsive design www.flickr.com/photos/adactio/5818096043
  7. 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
  8. This is NOT what a mobile user looks like Image courtesy of Shutterstock
  9. Mobile Search MoMentS UnderStanding how Mobile driveS converSionS 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 go 77% 0RELOHVHDUFKHVDUHVWURQJOWLHGWRVSHFLȴFFRQWH[WV Shopping queries are 2x more likely to be in store Mobile searches drive valuable outcomes for businesses 3 of 4 mobile searches trigger follow-up actions Actions triggered by mobile search also happen very quickly of conversions (store visit, phone call or purchase) happening within an hour 55% On average, each mobile search triggers nearly 2 follow-up actions Product shopping searches have a higher number of outcomes Number of follow-up actions per mobile search 3.56 2.52 2.08 2.20 2.07 Beauty Auto Travel Food Tech 36% Continued Research 18% Shared Information 17% Made a Purchase 25% Visited a Retailer’s Website 17% Visited a Store 7% Called a Business 77% of mobile searches occur at home or work 17% of mobile searches occur on the go Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html
  10. Many of us own multiple devices
  11. “ 90% of users start a task on one device and then complete it on another. ” Sequential usage Morning Commute Work - Source: Google Simultaneous usage + Multi-tasking OR
  12. “ 90% of users start a task on one device and then complete it on another. ” Sequential usage Morning Commute Work - Source: Google Simultaneous usage + Multi-tasking + Extending OR
  13. “ 90% of users start a task on one device and then complete it on another. ” Sequential usage Morning Commute Work - Source: Google Simultaneous usage + Multi-tasking + Extending OR + Complementing
  14. “ 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. ” https://www.flickr.com/photos/jfingas/10104822523 - Combined wise words from @oneextrapixel @trentwalton ! ! ! ! ! !
  15. http://foundation.zurb.com/docs/layout.php “ Get your content to go anywhere, because it’s going to go everywhere. ” - Brad Frost
  16. Hello Device Agnostic Design
  17. “ The site you build is not dependent on knowing what device it is being displayed on. ” - Sarita Harbour, WDD Image courtesy of Shutterstock
  18. device browser screen input method connection speed Any Used anytime anywhere
  19. An evolution of how we’ve always worked
  20. Define views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Products Footer Featured categories Featured products Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Related products Footer
  21. Break down content further explore layouts Product listing 1 Header Nav 2 Filter search Product page 1 Header Nav 2 Gallery 2 Descrip-tion 3 Additional info 8 Footer Categories 1 Header Nav 2 Category 3 Category 4 Category 9 Categ 7 Categ 10 Footer 7 Prod 6 Categ 5 Categ Home 1 Header Nav 2 Features 3 Category 4 Category 6 Categ 11 Footer 6 Categ 10 Prod 9 Prod 8 Prod 7 Prod 8 Categ 6 Prod 5 Prod 4 Prod 3 Prod 10 Prod 9 Prod 8 Prod 7 Prod 14 Prod 13 Prod 12 Prod 11 Prod 18 Prod 17 Prod 16 Prod 15 Prod 19 Footer 7 Prod 6 Prod 5 Prod 4 Prod
  22. Home - large Header Nav Features Featured categories Featured products Footer 1 Header Nav 2 Features 3 Category 4 Category 6 Categ 11 Footer 6 Categ 10 Prod 9 Prod 8 Prod 7 Prod Home - small 1 Header Nav 2 Features 3 Category 4 Categ 5 Categ 6 Product 7 Product 8 Product 9 Product 10 Footer Header Nav Features Featured categories Featured products Footer Do the same across screen sizes
  23. Break down each module into elements Home - large Header Nav Features Featured categories Featured products Footer 1 Header Nav 2 Features 3 Category 4 Category 6 Categ 11 Footer 6 Categ 10 Prod 9 Prod 8 Prod 7 Prod 1 Header Nav 2 Features 3 Category 4 Categ 5 Categ 6 Product 7 Product 8 Product 9 Product 10 Footer Header Nav Features Footer Home - small Featured categories Featured products
  24. Start identifying your building blocks variations Views Home - large Home - small
  25. Start identifying your building blocks variations Views Home - large Home - small
  26. Start identifying your building blocks variations Views Modules Feature - large Feature - small Home - large Home - small
  27. Start identifying your building blocks variations Views Modules Feature - large Feature - small Home - large Home - small
  28. Start identifying your building blocks variations Views Modules Feature - large Feature - small Featured products - large Featured products - small Home - large Home - small
  29. Start identifying your building blocks variations Views Modules Feature - large Feature - small Featured products - large Featured products - small Home - large Home - small
  30. 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
  31. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Products Footer Featured categories Featured products Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Related products Footer
  32. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Products Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Related products 10 Prod 9 Prod 8 Prod 7 Prod Footer
  33. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Products Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Related products Footer
  34. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Products Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info 7 Prod 6 Prod 5 Prod 4 Prod Footer
  35. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Products Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Footer
  36. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Footer 6 Prod 5 Prod 4 Prod 3 Prod 10 Prod 9 Prod 8 Prod 7 Prod 14 Prod 13 Prod 12 Prod 11 Prod 18 Prod 17 Prod 16 Prod 15 Prod
  37. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Footer 6 Prod 5 Prod 4 Prod 10 Prod 9 Prod 8 Prod 7 Prod 14 Prod 13 Prod 12 Prod 11 Prod 18 Prod 17 Prod 16 Prod 15 Prod
  38. Iterate refine across views key templates Home Categories Product listing Product page Header Nav Header Nav Filter search Features Footer Featured categories Footer Header Nav Categories Footer Header Nav Gallery Descrip-tion Additional info Footer
  39. Gradually build your module library Feature - large Feature - small 1 3 4 Featured products - large Featured products - small Also used for: • Module REL01 - Related products Single product - large Single product- small 1 2 3 1 2 1 2 3 4 2 3 1 2 3 1 2 1 1
  40. Almost the same as lego www.flickr.com/photos/toomuchdew/5243719740
  41. Re-use sparingly do bespoke modules www.flickr.com/photos/toomuchdew/5243719740
  42. Re-use sparingly do bespoke modules www.flickr.com/photos/toomuchdew/5243719740 www.flickr.com/photos/toomuchdew/5914351500 www.flickr.com/photos/toomuchdew/5148233898 www.flickr.com/photos/toomuchdew/3792159077 www.flickr.com/photos/toomuchdew/3792972952
  43. It’s about content. Not what device we’re using.
  44. However…
  45. Screenshot: https://moto360.motorola.com/
  46. Screenshot: Screenshot: http://www.apple.com/uk/
  47. Screenshot: Screenshot: http://www.apple.com/uk/ “ A n d ju s t a s 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
  48. Responsive design has allowed us to adapt views interactions
  49. Responsive design has allowed us to adapt views interactions
  50. Responsive design has allowed us to adapt views interactions
  51. Responsive design has allowed us to adapt views interactions
  52. Each device is different. Make the most of it
  53. Each device is different. Make the most of it
  54. Each device is different. Make the most of it
  55. Each device is different. Make the most of it Browse Research Buy Pay Get notified
  56. Each device is different. Make the most of it Browse Research Buy Pay Get notified ✓ ✓ ✓
  57. Each device is different. Make the most of it Browse Research Buy Pay Get notified ✓ ✓ ✓ ✓ ✓ ✓
  58. Each device is different. Make the most of it Browse Research Buy Pay Get notified ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
  59. Each device is different. Make the most of it Browse Research Buy Pay Get notified ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
  60. Each device is different. Make the most of it Browse Research Buy Pay Get notified ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
  61. Each device is different. Make the most of it Browse Research Buy Pay Get notified ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
  62. Content + Context = www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592
  63. Same, same …but different
  64. ! Your starting point should be any device. Then consider the role of each device - its strengths weaknesses, how it supports user business needs, as well as the part it plays in delivering the experience.
  65. Thank you. Questions? @annadahlstrom | www.annadahlstrom.com Image courtesy of Shutterstock

×