uxspain 2017 ux for systems of networked...
TRANSCRIPT
![Page 1: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/1.jpg)
UXSpain 2017
UX for systems of networked things
Claire Rowland @clurr
with thanks to Helen Le Voi /@hlevoi and Martin Charlier /@marcharlier Image: Jacopo Werther
![Page 2: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/2.jpg)
![Page 3: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/3.jpg)
•Product/UX strategy consultant
•Specialising in IoT, particularly connected home/energy management
•Lead author of Designing Connected Products
Hola :)
![Page 4: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/4.jpg)
Who here:
• Works on software products/services?• Works on products/services with a physical/hardware component?• Owns some connected products or uses them in everyday life?• Would like to work on connected products?
![Page 5: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/5.jpg)
My grandfather could probably have told you how many electric motors he owned. There was one in the car, one in the fridge, one in his drill and so on.
My father, when I was a child, might have struggled to list all the motors he owned (how many, exactly, are in a car?) but could have told you how many devices were in the house that had a chip in.
Today, I have no idea how many devices I own with a chip, but I could tell you how many have a network connection. And I doubt my children will know that, in their turn.
Benedict Evanshttp://ben-evans.com/benedictevans/2014/5/26/the-internet-of-things
![Page 6: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/6.jpg)
33 billion Devices will be connected by 2020
Ref: Strategy Analytics
![Page 7: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/7.jpg)
Images: Emmett Tullos, Bigbelly, Smart Structures,Wikicommons, PowerOasis, OnFarm, GROUND Lab, Nomi, Helium,
[replace]
Industrial
![Page 8: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/8.jpg)
Images: Withings, Made by Many, ecobee, Pod, Philips, Streetline, Evrythng/Diageo, Lockitron, Proteus, Thington, Brita, Hi-Park
Consumer
![Page 9: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/9.jpg)
You don’t have to be a hardware engineer or industrial designer to work in connected products
Images: Nixdorf, Seymourpowell
![Page 10: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/10.jpg)
Software is a big part of connected products Your energy consumption is
20% higher than this time last year, because it’s colder
The lamp turned on at 8pm
You left your oven on when you went out. Do you want to turn it off?
There’s smoke in your house!
There’s an intruder! I’m turning the camera on
Your solar panels are generating 4kW
Your fridge is developing a fault
I see you’re coming home. Shall I set the temperature to 21C?
![Page 11: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/11.jpg)
Thanks to British Gas
There are an increasing number of opportunities to work with software and services enabled by connected hardware
![Page 12: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/12.jpg)
http://www.digitaltrends.com/home/heck-internet-things-dont-yet/
Shiny visions of the future…
![Page 13: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/13.jpg)
…but the reality is often new ways to fail
‘It’s a bit glitchy but it’s OK, you just have to be in the room at the same time’. Actual review of the Wink hub
![Page 14: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/14.jpg)
Images: Owlet, August, InTouch, Tesla
…and “a bit glitchy” could have very serious consequences
![Page 15: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/15.jpg)
When we talk about design for IoT…
We tend to focus on industrial and UI design
![Page 16: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/16.jpg)
Designing the parts separately won’t result in a great experience
Designers need to create a coherent UX for the whole system
Cross-Platform Service User Experience: A Field Study and an Initial Framework. Minna Wäljas, Katarina Segerståhl, & colleagues, MobileHCI’10: http://bugi.oulu.fi/~ksegerst/publications/p219-waljas.pdf
![Page 17: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/17.jpg)
Facets of connected product UX
Screen layout. Look and feelMost
visible
Least visible
Conceptual modelHow should users think about the
system?
InterusabilityInteractions spanning multiple
devices with different capabilities
UI/visual design
Platform designTechnology enablers spanning
products/services
Industrial designPhysical hardware: capabilities and
form factor
Interaction designArchitecture and behaviours per
service, per device
Service designHolistic experience across digital and
non-digital touchpoints
ProductisationAudience, proposition, objectives, functionality of a specific service
![Page 18: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/18.jpg)
Facets of connected product UX
Screen layout. Look and feelMost
visible
Least visible
Conceptual modelHow should users think about the
system?
InterusabilityInteractions spanning multiple
devices with different capabilities
UI/visual design
Platform designTechnology enablers spanning
products/services
Industrial designPhysical hardware: capabilities and
form factor
Interaction designArchitecture and behaviours per
service, per device
Service designHolistic experience across digital and
non-digital touchpoints
ProductisationAudience, proposition, objectives, functionality of a specific service
![Page 19: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/19.jpg)
Which bit does what?Composition: distributing user-facing functionality across devices
(Nearly) all interactions via phone app Interactions mirrored on phone and thermostat
Image: Tado Image: ecobee
![Page 20: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/20.jpg)
Key actions on the device…
… the same actions, but more control and additional features, in app.
![Page 21: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/21.jpg)
..or a special set of features offloaded to the app so as not to get in the way of the main experience
![Page 22: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/22.jpg)
How do the devices connect? Apparently similar products can work in different ways
![Page 23: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/23.jpg)
Which code runs where? When parts of the system things lose connectivity or power, what stops working?
It depends on the system model
![Page 24: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/24.jpg)
Appropriate consistency across UIs? Terminology is the most basic example.
However different the UIs, identical functions must have the same name
Images: British Gas
![Page 25: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/25.jpg)
How can devices/UIs feel like a family?
Images: Nest
“Click”
Nest use visual and audio cues to tie the thermostat and phone app together
![Page 26: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/26.jpg)
At an absolute minimum:
Images: British Gas
Identical functions must have the same name
![Page 27: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/27.jpg)
We don’t (yet) expect Things to behave like the Internet
The average consumer is going to find it very strange when objects take time to respond, or lose instructions
Image: Nissim Farim
![Page 28: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/28.jpg)
Latency and reliability: delays and glitches
[Video: Philips Hue over local WiFi vs 4G connection]
![Page 29: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/29.jpg)
90 second delay
Intermittent connectivity
Images: British Gas
Sometimes parts of the system take time to connect and sync
![Page 30: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/30.jpg)
Intermittent connectivity (and latency)
[Video: British Gas Hive heating controller]
![Page 31: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/31.jpg)
Delays and glitches can undermine the value of the product
…………………………..
“Oh, never mind”
[ding dong]
Nicolas Calderone via macsources.com
![Page 32: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/32.jpg)
We can no longer sustainthe illusion of direct manipulation
![Page 33: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/33.jpg)
We can’t always create seamless user experiences in IoT
We need to handle delays and uncertainties gracefully
![Page 34: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/34.jpg)
Option 1: The optimistic white lie
Pretend it’s worked.
Backpedal if it goes wrong.
![Page 35: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/35.jpg)
Instagram does this
The photo is already shown as ‘liked’, even though the phone OS tells us that the instruction is still being sent
![Page 36: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/36.jpg)
Let me think about that…
…nope
Images: Philips
So does Philips Hue
Pretend it’s worked.
Backpedal if it goes wrong.
![Page 37: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/37.jpg)
Option 2: Be truthful and transparent
![Page 38: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/38.jpg)
Some people really spell it out
Images: Lowes
![Page 39: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/39.jpg)
Safety critical/urgent
Messages must get through quickly
Always communicate what’s actually happening
Low touch/non-critical
OK if data or instructions take time to get through
User can assume it’s working until notified of a problem
The ‘right’ approach depends on context
Images: MyLively, Efergy
![Page 40: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/40.jpg)
Data: fuzzy and timely or precise but old?
[Flossie: is here! [11.32]
Mr Pickles was here at 15.02
Mr Pickles is around here now
![Page 41: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/41.jpg)
It’s about interconnections, and the experience of the system
Images: MyLively, Efergy
![Page 42: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/42.jpg)
Tesler’s law of the conservation of complexity:
As you make the user interaction simpler you make things more complicated for the designer or engineer
Larry Tesler, former VP of Apple
![Page 43: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/43.jpg)
Gracias!
![Page 44: UXSpain 2017 UX for systems of networked thingsuxspain.com/blog/wp-content/uploads/2017/05/UXSpain-170511-16-… · Facets of connected product UX Screen layout. Look and feel Most](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5ee10be1ad6a402d666c1210/html5/thumbnails/44.jpg)
First 3 to tweet @clurr with
I want a book #UXSpain win a paperback
@clurr | [email protected] www.designingconnectedproducts.com
Or get 50% off the ebook from shop.oreilly.com using code AUTHD