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

<ul><li> 1. Image courtesy of Shutterstock Hands on tips for Building device agnostic UX systems by Anna Dahlstrm | @annadahlstrom GeekGirl London, 28 Oct 2014 #ggm </li> <li> 2. Screenshot: Screenshot: http://www.worldometers.info/watch/world-population/ </li> <li> 3. Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/ </li> <li> 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 </li> <li> 5. Designing bespoke mobile sites &amp; experiences for different devices is a sure www.flickr.com/photos/ericconstantineau/5618576278 </li> <li> 6. Its one of the reasons for responsive design www.flickr.com/photos/adactio/5818096043 </li> <li> 7. http://foundation.zurb.com/docs/layout.php Design &amp; development should respond to the users behaviour &amp; environment based on screen size, platform &amp; orientation. [Its]...a mix of flexible grids &amp; layouts, images &amp; an intelligent use of media queries. - Smashing Magazine </li> <li> 8. This is NOT what a mobile user looks like Image courtesy of Shutterstock </li> <li> 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 &amp; 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 </li> <li> 10. Many of us own multiple devices </li> <li> 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 </li> <li> 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 </li> <li> 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 </li> <li> 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 &amp; @trentwalton ! ! ! ! ! ! </li> <li> 15. http://foundation.zurb.com/docs/layout.php Get your content to go anywhere, because its going to go everywhere. - Brad Frost </li> <li> 16. Hello Device Agnostic Design </li> <li> 17. The site you build is not dependent on knowing what device it is being displayed on. - Sarita Harbour, WDD Image courtesy of Shutterstock </li> <li> 18. device browser screen input method connection speed Any Used anytime anywhere </li> <li> 19. An evolution of how weve always worked </li> <li> 20. Define views &amp; key templates Home Categories Product listing Product page Header&amp; Nav Header&amp; Nav Filter &amp; search Features Products Footer Featured categories Featured products Footer Header&amp; Nav Categories Footer Header&amp; Nav Gallery Descrip-tion Additional info Related products Footer </li> <li> 21. Break down content further &amp; explore layouts Product listing 1 Header&amp; Nav 2 Filter &amp; search Product page 1 Header&amp; Nav 2 Gallery 2 Descrip-tion 3 Additional info 8 Footer Categories 1 Header&amp; Nav 2 Category 3 Category 4 Category 9 Categ 7 Categ 10 Footer 7 Prod 6 Categ 5 Categ Home 1 Header&amp; 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 </li> <li> 22. Home - large Header&amp; Nav Features Featured categories Featured products Footer 1 Header&amp; 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&amp; Nav 2 Features 3 Category 4 Categ 5 Categ 6 Product 7 Product 8 Product 9 Product 10 Footer Header&amp; Nav Features Featured categories Featured products Footer Do the same across screen sizes </li> <li> 23. Break down each module into elements Home - large Header&amp; Nav Features Featured categories Featured products Footer 1 Header&amp; Nav 2 Features 3 Category 4 Category 6 Categ 11 Footer 6 Categ 10 Prod 9 Prod 8 Prod 7 Prod 1 Header&amp; Nav 2 Features 3 Category 4 Categ 5 Categ 6 Product 7 Product 8 Product 9 Product 10 Footer Header&amp; Nav Features Footer Home - small Featured categories Featured products </li> <li> 24. Start identifying your building blocks &amp; variations Views Home - large Home - small </li> <li> 25. Start identifying your building blocks &amp; variations Views Home - large Home - small </li> <li> 26. Start identifying your building blocks &amp; variations Views Modules Feature - large Feature - small Home - large Home - small </li> <li> 27. Start identifying your building blocks &amp; variations Views Modules Feature - large Feature - small Home - large Home - small </li> <li> 28. Start identifying your building blocks &amp; variations Views Modules Feature - large Feature - small Featured products - large Featured products - small Home - large Home - small </li> <li> 29. Start identifying your building blocks &amp; variations Views Modules Feature - large Feature - small Featured products - large Featured products - small Home - large Home - small </li> <li> 30. Start identifying your building blocks &amp; variations Feature - large Feature - small Featured products - large Single product - large Featured products - small Single product- small Views Modules Home - large Home - small </li> <li> 31. Iterate &amp; refine across views &amp; key templates Home Categories Product listing Product page Header&amp; Nav Header&amp; Nav Filter &amp; search Features Products Footer Featured categories Featured products Footer Header&amp; Nav Categories Footer Header&amp; Nav Gallery Descrip-tion Additional info Related products Footer </li> <li> 32. Iterate &amp; refine across views &amp; key templates Home Categories Product listing Product page Header&amp; Nav Header&amp; Nav Filter &amp; search Features Products Footer Featured categories Footer Header&amp; Nav Categories Footer Header&amp; Nav Gallery Descrip-tion Additional info Related products 10 Prod 9 Prod 8 Prod 7 Prod Footer </li> <li> 33. Iterate &amp; refine across views &amp; key templates Home Categories Product listing Product page Header&amp; Nav Header&amp; Nav Filter &amp; search Features Products Footer Featured categories Footer Header&amp; Nav Categories Footer Header&amp; Nav Gallery Descrip-tion Additional info Related products Footer </li> <li> 34. Iterate &amp; refine across views &amp; key templates Home Categories Product listing Product page Header&amp; Nav Header&amp; Nav Filter &amp; search Features Products Footer Featured categories Footer Header&amp; Nav Categories Footer Header&amp; Nav Gallery Descrip-tion Additional info 7 Prod 6 Prod 5 Prod 4 Prod Footer </li> <li> 35. Iterate &amp; refine across views &amp; key templates Home Categories Product listing Product page Header&amp; Nav Header&amp; Nav Filter &amp; search Features Products Footer Featured categories Footer Header&amp; Nav Categories Footer Header&amp; Nav Gallery Descrip-tion Additional info Footer </li> <li> 36. Iterate &amp; refine across views &amp; key templates Home Categories Product listing Product page Header&amp; Nav Header&amp; Nav Filter &amp; search Features Footer Featured categories Footer Header&amp; Nav Categories Footer Header&amp; 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 </li> <li> 37. Iterate &amp; refine across views &amp; key templates Home Categories Product listing Product page Header&amp; Nav Header&amp; Nav Filter &amp; search Features Footer Featured categories Footer Header&amp; Nav Categories Footer Header&amp; 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 </li> <li> 38. Iterate &amp; refine across views &amp; key templates Home Categories Product listing Product page Header&amp; Nav Header&amp; Nav Filter &amp; search Features Footer Featured categories Footer Header&amp; Nav Categories Footer Header&amp; Nav Gallery Descrip-tion Additional info Footer </li> <li> 39. Gradually build your module library Feature - large Feature - small 1 3 4 Featured products - large Featured products - small Also used for: Module...</li></ul>