uxlx 2015: 'designing connected products workshop

66
Designing Connected Products Value, system UX and interusability UXLX 2015 Claire Rowland - @clurr (with thanks to Martin Charlier and Liz Goodman) Image: Disney Movie Year

Upload: claire-rowland

Post on 28-Jul-2015

942 views

Category:

Design


0 download

TRANSCRIPT

Designing Connected Products Value, system UX and interusability

UXLX 2015 Claire Rowland - @clurr (with thanks to Martin Charlier and Liz Goodman) Image: Disney Movie Year

Hello :)

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 Evans http://ben-evans.com/benedictevans/2014/5/26/the-internet-of-things

What examples spring to mind when you think of connected products? ?

Images: Withings, Made by Many, ecobee, Pod, Philips, Streetline, Evrythng/Diageo, Lockitron, Proteus

Consumer

Images: Emmett Tullos, Bigbelly, Smart Structures,Wikicommons, PowerOasis, OnFarm, GROUND Lab

Industrial

Visions of IoT often look like this

http://www.digitaltrends.com/home/heck-internet-things-dont-yet/

…but the reality can be more like this

‘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

It’s not just UI and industrial design

Facets of IoT UX

Image: Nissim Farim

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.

IoT is a big topic

- Non-consumer products - Hardware prototyping - Industrial design - Technology issues - Interoperability - Responsible design - Service design - Designing with data - Complex systems…

Many things we haven’t time to cover:

Michael Dumontier & Neil Farber, Inc.  Everything All At The Same Time, 2014, via richardhellergallery.com

Today is about getting a flavour of some of the challenges closest to UX

- Focus on value and system UX - Explore a couple of low-fi UX

prototyping methods for cross-platform/system design

Value propositions, or solving a tangible problem:

What does it do?

3 part diagram:

Value proposition

Conceptual model

Interaction model

What does it do? How does it work? How do I use it?

Image: Instructables Image: How It Works Daily

Mass market products should

- Solve a real problem people have (value)

- Offer a good solution (desirable, usable)

- Come at a cost (financial, effort) that feels in proportion to the value

Are we connecting some things just because we can?

Image: Vessyl

Product Tool

In areas where they don’t have expert knowledge or are short on time

consumers need products, not tools

Nest do productisation really well

Belkin’s mobile app is good, but

a connected socket is a tool that requires users to solve their own problems

This is a product

Prototyping method: Media from the Future

Exploring why, what and how

e.g. Newspaper article

Questions - Can this service, idea or

product be plausibly conveyed? - Are we able to convey the idea

in simple terms?

Credit: Dan Hill

e.g. Press release

- Forces you to clearly and simply convey the value and why anyone should care.

- Can be iterated quickly.

Amazon product development: http://www.quora.com/What-is-Amazons-approach-to-product-development-and-product-management/answer/Ian-McAllister

More on Amazon: http://brendansterne.com/2013/11/21/amazon-product-management-working-backwards/

E.g. design the box/advert

http://www.gamestorming.com/games-for-design/design-the-box/

The Brand Gap - http://www.slideshare.net/OrlandoKen/the-brand-gap-by-marty

Design the box: The WiFi connected ovenDiscuss:

-What’s the value in connecting an oven? -Who’s it for? (it doesn’t have to be for everybody) -What do they need? -What’s the context of use? -What should the value proposition be? - Identify 2 killer features/scenarios

Then design the box! 20 mins!

Image: Frog Design

Conceptual model and composition

How does it work? Which bit does what?

Composition: Distribute functionality to suit the context of use

(Nearly) all interactions via phone app Interactions mirrored on phone and thermostat

Image: Tado Images: British Gas

App vs device?

Product images: BlueSpray, skydrop

Device UIs

Images: Martin Charlier, Dacor, Amazon, MIT, Nest, Ambient Devices

On-device controls

- Users may expect on-device controls

- Hard to modify later - More expensive - Physical controls are more

accessible than smooth touchscreens

- Easier to iterate - Cheaper to develop - Phone/web UI enables

use of accessibility tools - User may not always have

phone/web access

Web/app controls

Connectivity is a factor in determining where functions ‘run’

What will still work, or stop working, if the internet connection goes down?

Prototyping method: Storyboards

How the system works in context

Storyboards

Credit: Deb Aoki Credit: Robert André

Storyboard: your two killer features, in use

Discuss:

-Which things will the user do on the phone? -Which will they do on the oven? -Which will they do on both?

Storyboard your two key interactions to show your two killer features being used, in context

20 mins!

Interusability

Designing for multiple UIs

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

“Users should not have to worry whether different words, situations or actions mean the same thing. Follow platform conventions.”

- Words, data and actions - Aesthetic/visual design - Interaction architecture: how

functionality is organised - Interaction logic: how tasks

are structured, the types of control used

http://www.nngroup.com/articles/ten-usability-heuristics/

Consistency

Consistency != making everything the same

This: “Users should not have to worry whether different words, situations or actions mean the same thing.“

…may be in tension with this: “Follow platform conventions.” Image: Made by Many

Top priority: terminology

However different the UIs, identical functions must have the same name

Images: British Gas

Follow device platform conventions…

- …

Android contextual menu iOS separate screen

Images: Spotify

- e.g. Nest

A touchscreen does not need a fake bezel

A thermostat does not have to pretend to be an iPhone

Images: Nest

…be true to the device

Aesthetic styling

“Click”

Nest use visual and audio cues to tie the thermostat and phone app together

Images: Nest

Interaction architecture need not be the same- The logical structure of UI

features and controls is likely to be platform dependent

- Different features may be prioritised on different devices

- Devices with limited UIs may need deeper hierarchies Legacy hardware UIs may be less than ideal

(e.g. confusing modes) but that need not restrict other device UIs

Prototyping method: Experience prototyping

How the system works in context

Paper prototypes and enactment

Credit: D-LABS

- Not just functionality… but what is it like to use the product?

- Act out interactivity… someone can be the devices/products

Wizard of Oz

- Not just functionality… but what is it like to use the product?

Credit: Ericsson Labs, Marcus Nyberg

- A (hidden) human plays the role of the system or technology. - The user can experience and react to a product concept even

though its technology is unproven.

User experiencing the prototype. Behind the scenes triggering based on user action.

Prototype: the oven and app UIs

Split team into two - Half are responsible for the app design - Half are responsible for the oven controls - How you collaborate is up to you

Prototype the UIs to support your key interactions. - Think about consistency across the UIs… what should/should not be consistent?

- Don’t just draw UIs… act out interactions

30 mins!Image: Alfred Lui

Continuity

Designing for the spaces between devices

Continuity

- The flow of interactions and data in a coherent sequence across devices

- Continuity helps the user feel as if they are interacting with the service, not a bunch of separate devices

Image: Kei Noguchi via CC licence

Continuity is not always about seamlessness… it often means handling interstitial states gracefully

Some technical context: - Some IoT devices have batteries and only connect intermittently

to conserve power. In conventional UX we assume devices are mostly connected, but many IoT devices may spend more time offline

- Networks are subject to latency (esp. the internet) and reliability issues. People have mental models that help them understand this online, but delays and failures might feel strange in physical objects

Image: New Wave DV

Latency and reliability

BERG Cloudwash prototype

Interactions won’t always be smooth and immediate

We expect switches to work like this- The switch both confirms the

user action and shows the state of the lamp

- But in reality, latency and reliability issues mean this can’t be guaranteed over a network

- The user can’t tell whether their action has been executed or whether it’s in progress

Option 1: the white lieConfirm action, backpedal if something goes wrong

Instagram do this

The photo is already shown as ‘liked’, even though the instruction is still being sent

Option 2: be transparent

- Acknowledge action, show that it is in progress

- Confirm only once it’s done

WeMo Switch does this subtly

Lowes Iris is more explicitImages: Lowes

And here’s another challenge…

If you’ve used physical controls that represent state, how do they reflect changes made via the digital UI?

You may need to use different types of physical control

Conventional dimmer Connected dimmer

…ones that don’t reflect state, or can be updated digitally with motors or displays

Intermittent connections can be an issue

19

2 min delay21

When some devices that only check into the network occasionally, there may be conflicting information about the status of the system. Data/actions may need to be timestamped.

Safety critical/urgent

Messages must get through quickly

Status information needs to be updated frequently, and clearly indicate how old it is

Need to know when instructions have been received and acted upon

Low touch/non-critical:

Assume it’s working unless notified of a problem

OK if data or instructions take time to get through (as long as they are timestamped)

Senior safety/intruder alarm

Energy monitorLightingBaby monitor

The ‘right’ approach depends on context

Images: MyLively, Efergy

Prototyping method: Experience prototyping

Designing for continuity

- Your oven has mains power, so it can connect over WiFi

Let’s assume…

- There will still be times when the home internet is temporarily down, or the user’s phone loses connectivity.

- Instructions may sometimes take a few seconds to get through, or occasionally go missing

…but…

Exercise

Discuss:

- What’s the impact of losing connectivity? Is it merely frustrating for the user, or might there be other problems (e.g. safety)?

- How will you handle minor delays and failures? - Do the physical controls you have chosen still work when the user

changes something on the phone UI?

Revisit your prototype and make any design changes needed to improve the experience of continuity

20 mins!Image: Matt Biddulph

2 mins per team

Share your concepts

Thank you@clurr [email protected] www.designingconnectedproducts.com