Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Post on 05-Dec-2014
2954 Views
Preview:
DESCRIPTION
Transcript
Image courtesy of Shutterstock
Hands on tips for
Building device agnostic UX systemsby Anna Dahlström | @annadahlstrom GeekGirl London, 28 Oct 2014 #ggm
Screenshot: Screenshot: http://www.worldometers.info/watch/world-population/
Android fragmentation, Screenshot from OpenSignal 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
Designing bespoke mobile sites & experiences for different devices is a sure…
www.flickr.com/photos/ericconstantineau/5618576278
It’s 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 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
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 Retailer’s
Website
17%
Visited a Store
7%
Called a Business
0RELOH�VHDUFKHV�DUH�VWURQJO\�WLHG�WR�VSHFLȴF�FRQWH[WV�
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
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
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
https://www.flickr.com/photos/jfingas/10104822523
“ 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. ”
- Combined wise words from @oneextrapixel & @trentwalton
!
!
!
!
!
!
http://foundation.zurb.com/docs/layout.php
“ Get your content to go anywhere, because it’s 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 we’ve 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
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
It’s about content. Not what device we’re using.
However…
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 isn’t just a new screen but a brand-new platform. ”
- Source: Techcrunch
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 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
top related