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

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

Post on 05-Dec-2014

2.953 views

Category:

Design

2 download

Embed Size (px)

DESCRIPTION

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/

TRANSCRIPT

  • 1. Image courtesy of Shutterstock Hands on tips for Building device agnostic UX systems by Anna Dahlstrm | @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. Its 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 users behaviour & environment based on screen size, platform & orientation. [Its]...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% 0RELOHVHDUFKHVDUHVWURQJOWLHGWRVSHFLFFRQWH[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 Retailers 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. Todays popular devices arent tomorrow's so building something which works on any device is better than building something which works on todays 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 its 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 weve 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...