Date post: | 07-Jan-2017 |
Category: |
Design |
Upload: | martin-charlier |
View: | 735 times |
Download: | 0 times |
How is design for IoT different?
October 2015
Designing Connected Products
Thanks to: Claire Rowland
2
I’m Martin.
I’m a freelance designer,co-author and co-founder.
marcharlier ltd.
3
Superflux / IoT Academy
A platform for IoT community projects
4rain cloud
5
Some of the contents…
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
6
It’s not just UI and ID
There are many areas design needs to address when it comes to connected products.
Value proposition
Conceptual model
Interaction model
7
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
8
Productisation
What does it do?
Why would I want it?
9
What is your product doing better?
Electricity as enhancement.
10
What is your product doing better?
Connectedness as enhancement.
11
Are you building a product or a tool?
Product Tool
12
A products solves a specific problem.
Nest don’t talk about connectivity, just about how it is a better smoke alarm.
13
A tool puts the onus on the user
A connected socket requires the user to solve their own problem.
14
A niche example from Belkin Wemo
This is a product.
- Clear benefit - Focussed context
15
Design methods
Design can help develop and focus the value proposition early on.
16
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?
17
Conceptual model
How does it work?
18
Non-connected products are conceptually quite simple.
Image: Rebecca Demarest
19
Connected products are more complex.
Image: Rebecca Demarest
20
Connected products are more complex.
Connectedness means users have to think about system models.
Images: Rebecca Demarest
21
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
22
Explaining the system model
Images: Lowes, Apple
You might need to explain your system model.
23
Explaining the system model
Or develop a really good way to simplify it.
24
Interaction model
How do I use it?
25
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
26
Interusability
Composition
Consistency
Continuity
27
A tale of two thermostats…
Images: Tado, British Gas
Subset of functions on device, full set in app. Mirrored functions across device & app.
28
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.
29
Interusability
Composition
Consistency
Continuity
30
Consistency is a two-way street.
One one hand: Platform conventions
On the other:System consistency
Android: Contextual menu
iOS: Separate screen
31
Top priority: terminology
However different the UIs, identical functions or settings must have the same name.
Consistent use of terminology
32
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.
33
Consistency is a two-way street.
Platform conventions vs. System consistency
Rotate bezelTap up/down arrows
“Click”
34
Interusability
Composition
Consistency
Continuity
Image: Kei Noguchi via CC licence 35
Continuity
Coherent flow of interactions and data across devices.
36
Hard because:
1. Latency and reliability of the network.
2. Battery powered devices that only connect intermittently.
37
Hard because:
1. Latency and reliability of the network.
2. Battery powered devices that only connect intermittently.
38
Reliability
‘It’s a bit glitchy but it’s OK, you just have to be in the room at the same time’. Actual review of a connected home system
39
Has my action been executed?
Delays & interruptions mean there is a third state between on and off.
Image: Rebecca Demarest
40
Option 1
A little white lie to make it feel smooth. Showing the action as executed before it really has.
41
Option 2
Transparency at the expense of a more complex UI flow. Communicating what is actually happening.
On
In progress
Off
42
Option 2
Transparency at the expense of a more complex UI flow. Communicating what is actually happening.
Connected
In progress
Done
43
Hard because:
1. Latency and reliability of the network.
2. Battery powered devices that only connect intermittently.
44
Intermittent connectivity
19
2 min delay21
UIs might need timestamped data because they may be out-of-sync.
45
Prototyping
Low Fi prototyping
46
Experience prototyping
Video is a great tool to prototype and explore connected products.
Useful prototyping techniques:
Media from the future Storyboards
Physical props Wizard of Oz
Video prototyping
47
These are NOT video prototypes. (These are concept videos…)
48
30 minute prototype for a connected herb garden sensor.
49
Sketch-A-Move: Slightly more elaborate. Both a demonstration and an exploration.
http://www.superflux.in/work/sketch-move
50
Sketch-A-Move: Behind the scenes
http://www.superflux.in/work/sketch-move
Capture imagination and inspire the team
Matthias Kranz, et. al http://www.eislab.fim.uni-passau.de/files/publications/2006/SketchAMove_preprint.pdf
51
Stills compositions with narration
More info: http://www.cooper.com/journal/2008/12/economizer
52
A storyboard or video prototype can guide the tech requirements
More info: http://www.cooper.com/journal/2008/12/economizer
Technology requirements
Technology requirements
Technology requirements
Technology requirements
53
Complex systems
It gets complex very quickly.
54
Interoperability
Every connected device will connect to multiple systems and services.
New connected light bulb. Connect to: • Lighting system? • Security system? • Both?
55
Interoperability
alarm video
lighting heating
temp.schedule
security
Image: Claire Rowland
56
Interoperability
alarm videotemp.schedule
schedule
security
controls
lighting baby appliancessafety
energy
smoke medicine
controls
heating
Image: Claire Rowland
57
Interoperability
Designers will need to help users (and the industry) make sense of complex systems.
Services Devices
Device groups Locations
Time User location & activities
…
58
A word of caution
59
Error proof power tools
60
“Guided cooking for guaranteed success”
61
Reducing “time to destination”
62
Smart vending machine
63
Design responsibility
Connected products will reach far deeper into our everyday lives than anything before.
We should be careful what values drive them.
64
Thank you!
@marcharlier [email protected]
www.designingconnectedproducts.com
Use code AUTHD for 50% off ebook/ 40% off print at shop.oreilly.com