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 m@marcharlier.com

www.designingconnectedproducts.com

Use code AUTHD for 50% off ebook/ 40% off print at shop.oreilly.com