martin charlier screen interaction breakfast stockholm
TRANSCRIPT
![Page 1: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/1.jpg)
How is design for IoT different?
October 2015
Designing Connected Products
With thanks to Claire Rowland
![Page 2: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/2.jpg)
2
Hello
I’m a freelance designer,co-author and co-founder.
marcharlier ltd.
![Page 3: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/3.jpg)
3
Connected products
Things we’ll see more of
![Page 4: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/4.jpg)
4
Products with extended value proposition
Digital business models
Services going physical
Device ecosystem
![Page 5: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/5.jpg)
5
Products with extended value proposition
Digital business models
Services going physical
Device ecosystem
![Page 6: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/6.jpg)
6
Product evolution
Electricity as enhancement.
![Page 7: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/7.jpg)
7
Product evolution
Connectedness as enhancement.
![Page 8: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/8.jpg)
8
Product evolution
Connectedness as enhancement.
![Page 9: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/9.jpg)
9
Products with extended value proposition
Digital business models
Services going physical
Device ecosystem
![Page 10: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/10.jpg)
10
Freemium, advertising-funded, monetising user data
Advertising or data funded products.
![Page 11: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/11.jpg)
11
Pay-per-use & Micropayments
1 LATTE (GR.) @ 3,60 3.60
1 SEAT OCCUPATION 42 MINS 0,50
Paying for actual use.
![Page 12: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/12.jpg)
12
Pay-per-use & Micropayments
Paying for actual use.
![Page 13: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/13.jpg)
13
Products with extended value proposition
Digital business models
Services going physical
Device ecosystem
![Page 15: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/15.jpg)
15
Nespreso Zenius with cellular connectivity
Nespresso is a coffee service that happens to make devices.
![Page 16: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/16.jpg)
16
New kinds of products
Amazon Echo
Physical context Entire home
Amazon Dash Amazon Dash Button
Kitchen Device
Conceptual context Anything Groceries & consumables Specific item
![Page 17: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/17.jpg)
17
New user experience model
Smartphone model
1. Find device 2.Tap home button 3.Slide to unlock 4.Enter PIN 5.Find app 6.Tell it what product 7.Tap ‘Add to basket’
Connected product model
1. Pick up device 2.Tell it what product
2000s 2010s Next
Desktop model
1. Sit down at computer 2.Boot up computer 3.Wait 4.Open web browser 5.Navigate to website 6.Wait for website 7.Login 8.Find product 9.Click ‘Add to basket’
![Page 18: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/18.jpg)
18
Products with extended value proposition
Digital business models
Services going physical
Device ecosystem
![Page 19: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/19.jpg)
19
Device ecosystem plays
This is a way to make this better.
But it needs to stand on its own as well.
![Page 20: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/20.jpg)
20
Device ecosystem plays
The battery as delivery mechanism
![Page 21: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/21.jpg)
21
Design for IoT
What’s design for IoT all about?
![Page 22: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/22.jpg)
22
Design for IoT has many facets
It’s no longer just UX and industrial design.
![Page 23: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/23.jpg)
23
Designing Connected Products
What’s different about UX for IoT?
Technology of connectivity
Product & service definition & strategy
Design methods for connected products
Industrial design & Interface types
Prototyping
Cross-device interactions
Responsible IoT design
Designing with data
![Page 24: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/24.jpg)
Value proposition
Conceptual model
Interaction model
24
From value prop to interaction model
What does it do? How does it work? How do I use it?
Images: Instructables, How It Works Daily
![Page 25: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/25.jpg)
25
Productisation
What does it do?
Why would I want it?
![Page 26: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/26.jpg)
26
A products solves a specific problem.
Nest don’t talk about connectivity, just about how it is a better smoke alarm.
![Page 27: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/27.jpg)
27
A tool puts the onus on the user
A connected socket requires the user to solve their own problem.
![Page 28: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/28.jpg)
28
A niche example from Belkin Wemo
This is a product.
- Clear benefit - Focussed context
![Page 29: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/29.jpg)
29
Mass market consumers want products, not tools.
Product Tool
![Page 30: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/30.jpg)
30
Design methods
Design can help develop and focus the value proposition early on.
![Page 31: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/31.jpg)
31
Newspaper article
Credit: Dan Hill
Press release Sketch-the-box / sketch an advert
• Can this service, idea or product be plausibly conveyed?
• Are we able to convey the idea in simple terms?
• Forces you to clearly and simply convey the value and why anyone should care.
• Can be iterated quickly.
• Why should people care? • How do you persuade them? • How can you proof your
claims?
![Page 32: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/32.jpg)
32
Conceptual model
How does it work?
![Page 33: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/33.jpg)
33
Non-connected products are conceptually quite simple.
![Page 34: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/34.jpg)
34
Connected products are more complex.
![Page 35: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/35.jpg)
35
Connected products are more complex.
Connectedness means users have to think about system models.
![Page 36: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/36.jpg)
36
Extra stuff to think about
Connects via your WiFi No hub
Connects via ZigBee Comes with a hub
Connects via ZigBee Requires a hub, but
doesn’t come with one
![Page 37: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/37.jpg)
37
Explaining the system model
Images: Lowes, Apple
You might need to explain your system model.
![Page 38: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/38.jpg)
38
Explaining the system model
Or develop a really good way to simplify it.
![Page 39: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/39.jpg)
39
Interaction model
How do I use it?
![Page 40: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/40.jpg)
40
Interusability
Cross-Platform Service User Experience: A Field Study and an Initial Framework. Minna Wäljas, Katarina Segerståhl, Kaisa Väänänen-Vainio-Mattila, Harri Oinas-Kukkonen MobileHCI’10: http://bugi.oulu.fi/~ksegerst/publications/p219-waljas.pdf
![Page 41: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/41.jpg)
41
Interusability
Composition
Consistency
Continuity
![Page 42: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/42.jpg)
42
A tale of two thermostats…
Images: Tado, British Gas
Subset of functions on device, full set in app. Mirrored functions across device & app.
![Page 43: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/43.jpg)
43
A tale of two thermostats…
Images: Tado, British Gas
Subset of functions on device, full set in app. Mirrored functions across device & app.
Hardware Simpler & cheaper to design & make. More expensive due to UI.
Iteration & updates
Quick and easy to iterate the product,app stores, developer community.
Can be tricky. Firmware updates, physical controls.
User identity Smartphone can act as proxy for user identification - analytics.
Everyone can use the thermostat, but less easy to learn about users.
Smartphone Requires charged & connected smartphone.
Works independent from smartphone.
![Page 44: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/44.jpg)
44
Interusability
Composition
Consistency
Continuity
![Page 45: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/45.jpg)
45
Consistency is a two-way street.
One one hand: Platform conventions
On the other:Consistency within your touch points
Android: Contextual menu
iOS: Separate screen
![Page 46: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/46.jpg)
46
Top priority: terminology
However different the UIs, identical functions or settings must have the same name.
Consistent use of terminology
![Page 47: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/47.jpg)
47
Consistency
Secondary colour
Typeface, terminology, accent colour Accent colour
CMF
Paper insert as a means to delay decision making.
This is hard across physical/digital development timelines.
![Page 48: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/48.jpg)
48
Consistency is a two-way street.
Platform conventions vs. System consistency
Rotate bezelTap up/down arrows
“Click”
![Page 49: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/49.jpg)
49
Interusability
Composition
Consistency
Continuity
![Page 50: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/50.jpg)
Image: Kei Noguchi via CC licence 50
Continuity
Coherent flow of interactions and data across devices.
![Page 51: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/51.jpg)
51
Hard because:
1. Latency and reliability of the network.
2. Battery powered devices that only connect intermittently.
![Page 52: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/52.jpg)
52
Has my action been executed?
Delays & interruptions mean there is a third state between on and off.
![Page 53: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/53.jpg)
53
Option 1
A little white lie to make it feel smooth. Showing the action as executed before it really has.
![Page 54: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/54.jpg)
54
Option 2
Transparency at the expense of a more complex UI flow. Communicating what is actually happening.
On
In progress
Off
![Page 55: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/55.jpg)
55
Option 2
Transparency at the expense of a more complex UI flow. Communicating what is actually happening.
Connected
In progress
Done
![Page 56: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/56.jpg)
56
Intermittent connectivity
19
2 min delay21
UIs might need timestamped data because they may be out-of-sync.
![Page 57: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/57.jpg)
57
A word of caution
![Page 58: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/58.jpg)
58
Error proof power tools
![Page 59: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/59.jpg)
59
“Guided cooking for guaranteed success”
![Page 60: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/60.jpg)
60
Reducing “time to destination”
![Page 61: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/61.jpg)
61
Smart vending machine
![Page 62: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/62.jpg)
62
Design responsibility
Connected products will reach far deeper into our everyday lives than anything before.
We should be careful what values drive them.
![Page 63: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/63.jpg)
63
Design for IoT has many facets
These were just a few of the areas your design needs to address…
![Page 64: Martin Charlier Screen Interaction Breakfast Stockholm](https://reader034.vdocuments.mx/reader034/viewer/2022051521/5872bba11a28ab523c8b7b25/html5/thumbnails/64.jpg)
64
Thank you!
@marcharlier [email protected]
www.designingconnectedproducts.com
Use code AUTHD for 50% off ebook/ 40% off print at shop.oreilly.com