bulding device agnostic ux systems - generate london, 23 sep 2016
TRANSCRIPT
Building device agnostic UX systemsby Anna Dahlström | @annadahlstrom GENERATE LONDON, 23 SEPTEMBER 2016 Image from Creative Bloq
We always hoped for snow on the morning of Christmas Eve (‘Julaftons morgon’ in Swedish)
Shutterstock
Shutterstock
…or ‘Julafton moron’ as auto correct would have it
Shutterstock
We always hoped for snow on the morning of Christmas Eve (‘Julaftons morgon’ in Swedish)
This is what Christmas in my hometown usually looks like
https://www.flickr.com/photos/sigfridlundberg/6755434225/
The snow didn’t arrive but Santa did
https://www.flickr.com/photos/38446022@N00/4866804674/
Not the actual model I got
There was a lot of Lego
https://www.flickr.com/photos/clement127/19093561751/in/album-72157640172443564/
Mum Dad
MeDavid
JohanSara
Martin
https://www.flickr.com/photos/j_regan/6454379951/in/photostream/
The people at Lego are very, very clever
Source: Google
Source: Google
Source: Google
Source: http://gizmodo.com/303370/lego-iphone-already-pre-bricked-out-of-the-box
https://www.flickr.com/photos/boltofblue/4418442567/in/photostream/
Only when it’s needed do they create bespoke pieces
We tried to keep the Lego pieces organised but..
https://www.flickr.com/photos/meddygarnet/3871865379/
This is the most exciting time
None of these existed when I moved to London 10 years ago
“Just a giant iPhone”
Source: Screenshots apple.co.uk + oculus.com
https://www.flickr.com/photos/125026780@N05/28847382404/
https://www.flickr.com/photos/quattrovageena/2664049226/
“ Every once in a while, a revolutionary product comes along that changes everything. ”
- Steve Jobs
Smart homes are the new smartphones
Screenshot fromThe Next Web http://thenextweb.com/insider/2015/12/23/2016-predictions-for-iot-and-smart-homes/#gref
Screenshot: Minority Report
Screenshot: Minority Report Source: https://www.corning.com/cala/en/innovation/a-day-made-of-glass.html
Screenshot: Her
https://www.flickr.com/photos/seryo/3035815376/in/photostream/
“ Get your content to go anywhere, because it’s going to go everywhere. ”
- Brad Frost
Screenshot: Minority Report Source: https://medium.com/@maxbraun/my-bathroom-mirror-is-smarter-than-yours-94b21c6671ba#.ndwoxzamc
https://www.flickr.com/photos/websummit/15089463204/
A boundless future where content flows from one “device” to another
Source: Duo Skin
Screenshot: https://blog.intercom.com/the-end-of-apps-as-we-know-them/
“ The idea of an app as an independent destination is becoming less important, and the idea of an app as a publishing tool, with related notifications that contain content and actions, is becoming more important. ” - Source: The End of Apps As We Know Them
…everywhere
https://www.flickr.com/photos/paradoxicallystrange/8077764591/in/photostream/
There are around 7.8bn conncted devices on earth
- GSMA’s Real-time tracker
Source: Open Signal http://opensignal.com/reports/2015/08/android-fragmentation/
The big reveal of the page design is gone
https://www.flickr.com/photos/s-e-f/6455978889/
It depends
https://www.flickr.com/photos/tunggul/9011104633/
44% of the world’s population were connected to the internet at the end of 2015 - Source: Mobile Connectivity Index
“ You get shit done… while you get shit done. ”
- Buzzfeed
http://randytsang.com/blog/2010/04/ipad-review-revolutionising-the-way-we-consume-media-in-small-ways/
device browser screen input method connection speed
Any
anytime anywhereUsed
“ The site you build is not dependent on knowing what device it is being displayed on. ”
- Sarita Harbour, WDD
Image courtesy of Shutterstock
How can we not do a wireframe for every page?
https://www.flickr.com/photos/avlxyz/15633960313/
Little did I know…
https://www.flickr.com/photos/44949218@N02/17941113065/
In reality it’s not too different from building lego
https://www.flickr.com/photos/mwboeckmann/3275537425
www.flickr.com/photos/ulfk/7976687420
We’ve been doing modular design for a long time
This is Lund Cathedral in my hometown. It’s nearly 900 years old
There’s been a need for modular design for a long time
https://www.flickr.com/photos/kullez/5897887693/
I grew up 15 mins, by foot,
from here
Magic and ‘stop’ all in one
https://www.flickr.com/photos/wlodi/3085157011
The majority will be sad, just like Wall-e
https://www.flickr.com/photos/meddygarnet/3871865379/
This guy hasn’t realised it, yet
If we’re not careful we’ll be swimming in pieces
https://www.flickr.com/photos/wwworks/2472230611
Sooner or later you’ve got to clearn up the mess
https://www.flickr.com/photos/clement127/28800579010/
It’s always been about building blocks and grids
www.flickr.com/photos/dahlstroms/4411448782/
Fluid FixedFixed Fluid
www.flickr.com/photos/theaftershock/2811382400
“ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width. ”
- Trent Walton
To really do that we need to know our building blocks
xxxxwww.flickr.com/photos/ulfk/7976687420
We need to know what we’re building
https://www.flickr.com/photos/fallentomato/24818009379/
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 page
1 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
Pretty much the same as lego
www.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
The key to making it happen is working together across disciplines
https://www.flickr.com/photos/levork/3760382453/
…and with clients
Pussle vs Lego
It’s really about going back to basics
www.flickr.com/photos/dahlstroms/4411448782/
Responsive design has allowed us to adapt views & interactions
Each device is different. Make the most of it
Browse
Research
Buy & Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓
✓ ✓ ✓✓ ✓
✓
1. Take 2 pieces of A4 paper 2. Fold one in half and rip it into two pieces 3. Continue until you have 5 uniquely sized pieces of paper, the intact A4 piece of paper included 4. Consider their physical size to be the size of the screen you’re designing for 4. Sketch your main pages and views onto each one
https://www.flickr.com/photos/skynoir/8825832242/
1. Consider any device your starting point 2. Define key pages/ views and your (content) templates 3. Approach it like lego, not a puzzle 4. Sketch and rip up paper 5. Collaborate across disciplines
In summary
https://www.flickr.com/photos/tunggul/9011104633/ http://randytsang.com/blog/2010/04/ipad-review-revolutionising-the-way-we-consume-media-in-small-ways/
This is the future
It’s a sweetspot somewhere in the middle between this…
https://www.flickr.com/photos/petaqui/8789580419
…and this…
https://www.flickr.com/photos/artisticrichmond/2716147621/
We can all do our bit
https://www.flickr.com/photos/brickresort/6823916051/in/photostream/
Thank youannadahlstrom.com| @annadahlstrom eepurl.com/bZxppz Image from Creative Bloq