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

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

Post on 21-Apr-2017

10.894 views

Category:

Design

11 download

Embed Size (px)

TRANSCRIPT

<ul><li><p>Image courtesy of Shutterstock</p><p>Hands on tips for </p><p>Building device agnostic UX systemsby Anna Dahlstrm | @annadahlstrom GeekGirl London, 28 Oct 2014 #ggm </p><p>http://www.annadahlsrom.com</p></li><li><p>Screenshot: Screenshot: http://www.worldometers.info/watch/world-population/</p><p>http://www.worldometers.info/watch/world-population/</p></li><li><p>Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/</p><p>http://opensignal.com/reports/2014/android-fragmentation/</p></li><li><p>Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/</p><p> We have seen 18,769 distinct devices download our app in the past few months. In our report last year we saw 11,868. </p><p>- Source: Open Signal</p><p>http://opensignal.com/reports/2014/android-fragmentation/</p></li><li><p>Designing bespoke mobile sites &amp; experiences for different devices is a sure</p><p>www.flickr.com/photos/ericconstantineau/5618576278</p></li><li><p>Its one of the reasons forresponsive design</p><p>www.flickr.com/photos/adactio/5818096043</p></li><li><p>http://foundation.zurb.com/docs/layout.php</p><p> 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. </p><p>- Smashing Magazine</p></li><li><p>This is NOT what a mobile user looks like</p><p>Image courtesy of Shutterstock</p></li><li><p>Mobile Search MoMentSUnderStanding how Mobile driveS converSionS</p><p>3 of 4 mobile searches trigger follow-up actions</p><p>Mobile searches drive valuable </p><p>outcomes for businesses</p><p>Actions triggered by mobile search </p><p>also happen very quickly</p><p>of conversions (store visit, phone call or purchase) happening within an hour55%</p><p>On average, each mobile search triggers </p><p>nearly 2 follow-up actions</p><p>Product &amp; shopping searches have a higher number of outcomesNumber of follow-up actions per mobile search</p><p>Mobile search is always on, happening </p><p>on the go, at home and at work</p><p>of mobile searches occur at home or work; 17% on the go77%</p><p>2.082.523.56</p><p>Travel FoodAutoBeauty Tech</p><p>2.072.20</p><p>36%</p><p>Continued </p><p>Research</p><p>18%</p><p>Shared Information</p><p>17%</p><p>Made a Purchase</p><p>25%</p><p>Visited a Retailers </p><p>Website</p><p>17%</p><p>Visited a Store</p><p>7%</p><p>Called a Business</p><p>Shopping queries are 2x more likely to be in store</p><p>Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html</p><p>77% of mobile searches occur at home or work </p><p>17% of mobile searches occur on the go </p></li><li><p>Many of us own multiple devices</p></li><li><p>Commute</p><p>Sequential usage</p><p>Morning Work</p><p> 90% of users start a task on one device and then complete it on another. - Source: Google</p><p>Simultaneous usage</p><p>+</p><p>Multi-taskingOR</p><p>http://services.google.com/fh/files/misc/multiscreenworld_final.pdf</p></li><li><p>Commute</p><p>Sequential usage</p><p>Morning Work</p><p> 90% of users start a task on one device and then complete it on another. - Source: Google</p><p>Simultaneous usage</p><p>+</p><p>Multi-tasking</p><p>+</p><p>Extending</p><p>OR</p><p>http://services.google.com/fh/files/misc/multiscreenworld_final.pdf</p></li><li><p>Commute</p><p>Sequential usage</p><p>Morning Work</p><p> 90% of users start a task on one device and then complete it on another. - Source: Google</p><p>Simultaneous usage</p><p>+</p><p>Multi-tasking</p><p>+</p><p>Extending</p><p>+</p><p>Complementing</p><p>OR</p><p>http://services.google.com/fh/files/misc/multiscreenworld_final.pdf</p></li><li><p>https://www.flickr.com/photos/jfingas/10104822523</p><p> Todays popular devices arent tomorrow's so building something which works on any device is better than </p><p>building something which works on todays devices. - Combined wise words from @oneextrapixel &amp; @trentwalton </p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p><p>!</p></li><li><p>http://foundation.zurb.com/docs/layout.php</p><p> Get your content to go anywhere, because its going to </p><p>go everywhere. - Brad Frost</p></li><li><p>HelloDevice Agnostic Design</p></li><li><p> The site you build is not dependent on knowing what device it is being displayed on. </p><p>- Sarita Harbour, WDD </p><p>Image courtesy of Shutterstock</p></li><li><p>device browser screen input method connection speed</p><p>Any anytime anywhereUsed </p></li><li><p>An evolution of how weve always worked</p></li><li><p>Define views &amp; key templates</p><p>Header&amp; Nav</p><p>Products</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured products</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Footer</p><p>Additional info</p><p>Related products</p></li><li><p>Break down content further &amp; explore layouts</p><p>1 Header&amp; Nav2 Filter &amp; search</p><p>Product listing</p><p>1 Header&amp; Nav</p><p>2Gallery</p><p>2Descrip-</p><p>tion</p><p>8 Footer</p><p>3Additional info</p><p>Product page1 Header&amp; Nav</p><p>2Category</p><p>3Category</p><p>4 Category</p><p>9Categ</p><p>7Categ</p><p>10 Footer</p><p>Categories</p><p>7Prod</p><p>6Categ</p><p>5Categ</p><p>1 Header&amp; Nav</p><p>2Features</p><p>11 Footer</p><p>Home</p><p>3Category</p><p>4 Category</p><p>6 Categ</p><p>6 Categ</p><p>10Prod</p><p>9 Prod</p><p>8Prod</p><p>7Prod</p><p>8Categ</p><p>6Prod</p><p>5 Prod</p><p>4Prod</p><p>3Prod</p><p>10Prod</p><p>9 Prod</p><p>8Prod</p><p>7Prod</p><p>14Prod</p><p>13 Prod</p><p>12Prod</p><p>11Prod</p><p>18Prod</p><p>17 Prod</p><p>16Prod</p><p>15Prod</p><p>19 Footer</p><p>7Prod</p><p>6 Prod</p><p>5Prod</p><p>4Prod</p></li><li><p>Home - largeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured products</p><p>Featured categories</p><p>1 Header&amp; Nav</p><p>2Features</p><p>11 Footer</p><p>3Category</p><p>4 Category</p><p>6 Categ</p><p>6 Categ</p><p>10Prod</p><p>9 Prod</p><p>8Prod</p><p>7Prod</p><p>1 Header&amp; Nav</p><p>2Features</p><p>10 Footer</p><p>3 Category</p><p>4 Categ</p><p>5 Categ</p><p>6 Product</p><p>7 Product</p><p>8 Product</p><p>9 Product</p><p>Header&amp; Nav</p><p>Features</p><p>Footer</p><p>Home - small</p><p>Featured categories</p><p>Featured products</p><p>Do the same across screen sizes</p></li><li><p>Break down each module into elements</p><p>Home - largeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured products</p><p>Featured categories</p><p>1 Header&amp; Nav</p><p>2Features</p><p>11 Footer</p><p>3Category</p><p>4 Category</p><p>6 Categ</p><p>6 Categ</p><p>10Prod</p><p>9 Prod</p><p>8Prod</p><p>7Prod</p><p>1 Header&amp; Nav</p><p>2Features</p><p>10 Footer</p><p>3 Category</p><p>4 Categ</p><p>5 Categ</p><p>6 Product</p><p>7 Product</p><p>8 Product</p><p>9 Product</p><p>Header&amp; Nav</p><p>Features</p><p>Footer</p><p>Home - small</p><p>Featured categories</p><p>Featured products</p></li><li><p>Views</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Views</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Feature - large Feature - small</p><p>Views Modules</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Feature - large Feature - small</p><p>Views Modules</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Feature - large Feature - small</p><p>Featured products - large Featured products - small</p><p>Views Modules</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Feature - large Feature - small</p><p>Featured products - large Featured products - small</p><p>Views Modules</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Feature - large Feature - small</p><p>Featured products - large</p><p>Single product - large</p><p>Featured products - small</p><p>Single product- small</p><p>Views Modules</p><p>Home - large Home - small</p><p>Start identifying your building blocks &amp; variations</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Products</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured products</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Related products</p><p>Footer</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Products</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Related products10</p><p>Prod9 </p><p>Prod8</p><p>Prod7</p><p>Prod</p><p>Footer</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Products</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Related products</p><p>Footer</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Products</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>7Prod</p><p>6 Prod</p><p>5Prod</p><p>4Prod</p><p>Footer</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Products</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Footer</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Footer</p><p>6Prod</p><p>5 Prod</p><p>4Prod</p><p>3Prod</p><p>10Prod</p><p>9 Prod</p><p>8Prod</p><p>7Prod</p><p>14Prod</p><p>13 Prod</p><p>12Prod</p><p>11Prod</p><p>18Prod</p><p>17 Prod</p><p>16Prod</p><p>15Prod</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Footer</p><p>6Prod</p><p>5 Prod</p><p>4Prod</p><p>10Prod</p><p>9 Prod</p><p>8Prod</p><p>7Prod</p><p>14Prod</p><p>13 Prod</p><p>12Prod</p><p>11Prod</p><p>18Prod</p><p>17 Prod</p><p>16Prod</p><p>15Prod</p></li><li><p>Iterate &amp; refine across views &amp; key templates</p><p>Header&amp; Nav</p><p>Footer</p><p>Filter &amp; search</p><p>Product listing Product pageCategoriesHomeHeader&amp; Nav</p><p>Features</p><p>Footer</p><p>Featured categories</p><p>Header&amp; Nav</p><p>Footer</p><p>Categories</p><p>Header&amp; Nav</p><p>GalleryDescrip-</p><p>tion</p><p>Additional info</p><p>Footer</p></li><li><p>Gradually build your module library</p><p>Feature - large Feature - small</p><p>Featured products - large Featured products - small</p><p>Single product - large Single product- small</p><p>Also used for: Module REL01 - Related products</p><p>1</p><p>3</p><p>4</p><p>1</p><p>2</p><p>3</p><p>1</p><p>2</p><p>1</p><p>2</p><p>3</p><p>4</p><p>2</p><p>3</p><p>1</p><p>2</p><p>3</p><p>1</p><p>2</p><p>1</p><p>1</p></li><li><p>Almost the same as lego</p><p>www.flickr.com/photos/toomuchdew/5243719740</p><p>http://www.flickr.com/photos/toomuchdew/5243719740</p></li><li><p>Re-use &amp; sparingly do bespoke moduleswww.flickr.com/photos/toomuchdew/5243719740</p></li><li><p>Re-use &amp; sparingly do bespoke moduleswww.flickr.com/photos/toomuchdew/5243719740</p><p>www.flickr.com/photos/toomuchdew/5914351500</p><p>www.flickr.com/photos/toomuchdew/5148233898</p><p>www.flickr.com/photos/toomuchdew/3792159077</p><p>www.flickr.com/photos/toomuchdew/3792972952</p></li><li><p>Its about content. Not what device were using.</p></li><li><p>However</p></li><li><p>Screenshot: https://moto360.motorola.com/</p><p>https://moto360.motorola.com/</p></li><li><p>Screenshot: Screenshot: http://www.apple.com/uk/</p><p>http://www.apple.com/uk/</p></li><li><p>Screenshot: Screenshot: http://www.apple.com/uk/</p><p> 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 isnt just a new screen but a brand-new platform. </p><p>- Source: Techcrunch </p><p>http://www.apple.com/uk/</p></li><li><p>Responsive design has allowed us to adapt views &amp; interactions</p></li><li><p>Responsive design has allowed us to adapt views &amp; interactions</p></li><li><p>Responsive design has allowed us to adapt views &amp; interactions</p></li><li><p>Responsive design has allowed us to adapt views &amp; interactions</p></li><li><p>Each device is different. Make the most of it</p></li><li><p>Each device is different. Make the most of it</p></li><li><p>Each device is different. Make the most of it</p></li><li><p>Each device is different. Make the most of it</p><p>Browse </p><p>Research </p><p>Buy &amp; Pay </p><p>Get notified</p></li><li><p>Each device is different. Make the most of it</p><p>Browse </p><p>Research </p><p>Buy &amp; Pay </p><p>Get notified</p></li><li><p>Each device is different. Make the most of it</p><p>Browse </p><p>Research </p><p>Buy &amp; Pay </p><p>Get notified</p></li><li><p>Each device is different. Make the most of it</p><p>Browse </p><p>Research </p><p>Buy &amp; Pay </p><p>Get notified</p></li><li><p>Each device is different. Make the most of it</p><p>Browse </p><p>Research </p><p>Buy &amp; Pay </p><p>Get notified</p></li><li><p>Each device is different. Make the most of it</p><p>Browse </p><p>Research </p><p>Buy &amp; Pay </p><p>Get notified</p></li><li><p>Each device is different. Make the most of it</p><p>Browse </p><p>Research </p><p>Buy &amp; Pay </p><p>Get notified</p></li><li><p>Content + Context =</p><p>www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592</p></li><li><p>Same, samebut different</p></li><li><p>!</p><p>Your starting point should be any device. Then consider the role of each device - its strengths &amp; weaknesses, how it supports user &amp; business needs, </p><p>as well as the part it plays in delivering the experience.</p></li><li><p>Image courtesy of Shutterstock</p><p>Thank you. Questions?@annadahlstrom | www.annadahlstrom.com</p><p>http://www.annadahlsrom.comhttp://www.annadahlstrom.com</p></li></ul>