Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
1. Image courtesy of Shutterstock
Hands on tips for
Building device agnostic UX systems
by Anna Dahlström | @annadahlstrom
GeekGirl London, 28 Oct 2014 #ggm
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. It’s 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 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
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%
0RELOHVHDUFKHVDUHVWURQJOWLHGWRVSHFLȴFFRQWH[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 Retailer’s
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
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. “ 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. ”
https://www.flickr.com/photos/jfingas/10104822523
- Combined wise words from @oneextrapixel @trentwalton
!
!
!
!
!
!
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
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
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 REL01 - Related products
Single product - large Single product- small
1
2
3
1
2
1
2
3
4
2
3
1
2
3
1
2
1
1
40. Almost the same
as lego
www.flickr.com/photos/toomuchdew/5243719740
41. Re-use sparingly
do bespoke modules
www.flickr.com/photos/toomuchdew/5243719740
47. Screenshot: Screenshot: http://www.apple.com/uk/
“
A
n
d
ju
s
t a
s
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
64. !
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.