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.892 views

Category:

Design

9 download

TRANSCRIPT

  • Image courtesy of Shutterstock

    Hands on tips for

    Building device agnostic UX systemsby Anna Dahlstrm | @annadahlstrom GeekGirl London, 28 Oct 2014 #ggm

    http://www.annadahlsrom.com

  • Screenshot: Screenshot: http://www.worldometers.info/watch/world-population/

    http://www.worldometers.info/watch/world-population/

  • Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/

    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

    http://opensignal.com/reports/2014/android-fragmentation/

  • Designing bespoke mobile sites & experiences for different devices is a sure

    www.flickr.com/photos/ericconstantineau/5618576278

  • Its one of the reasons forresponsive design

    www.flickr.com/photos/adactio/5818096043

  • 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

  • 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 Retailers

    Website

    17%

    Visited a Store

    7%

    Called a Business

    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

  • Commute

    Sequential usage

    Morning Work

    90% of users start a task on one device and then complete it on another. - Source: Google

    Simultaneous usage

    +

    Multi-taskingOR

    http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

  • Commute

    Sequential usage

    Morning Work

    90% of users start a task on one device and then complete it on another. - Source: Google

    Simultaneous usage

    +

    Multi-tasking

    +

    Extending

    OR

    http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

  • Commute

    Sequential usage

    Morning Work

    90% of users start a task on one device and then complete it on another. - Source: Google

    Simultaneous usage

    +

    Multi-tasking

    +

    Extending

    +

    Complementing

    OR

    http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

  • https://www.flickr.com/photos/jfingas/10104822523

    Todays popular devices arent tomorrow's so building something which works on any device is better than

    building something which works on todays devices. - Combined wise words from @oneextrapixel & @trentwalton

    !

    !

    !

    !

    !

    !

  • http://foundation.zurb.com/docs/layout.php

    Get your content to go anywhere, because its going to

    go everywhere. - Brad Frost

  • HelloDevice Agnostic Design

  • The site you build is not dependent on knowing what device it is being displayed on.

    - Sarita Harbour, WDD

    Image courtesy of Shutterstock

  • device browser screen input method connection speed

    Any anytime anywhereUsed

  • An evolution of how weve 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

  • Almost the same as lego

    www.flickr.com/photos/toomuchdew/5243719740

    http://www.flickr.com/photos/toomuchdew/5243719740

  • Re-use & sparingly do bespoke moduleswww.flickr.com/photos/toomuchdew/5243719740

  • Re-use & sparingly do bespoke moduleswww.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

  • Its about content. Not what device were using.

  • However

  • Screenshot: https://moto360.motorola.com/

    https://moto360.motorola.com/

  • Screenshot: Screenshot: http://www.apple.com/uk/

    http://www.apple.com/uk/

  • 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 isnt just a new screen but a brand-new platform.

    - Source: Techcrunch

    http://www.apple.com/uk/

  • 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, samebut different

  • !

    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.

  • Image courtesy of Shutterstock

    Thank you. Questions?@annadahlstrom | www.annadahlstrom.com

    http://www.annadahlsrom.comhttp://www.annadahlstrom.com