Post on 28-Jul-2015
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
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
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
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
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
Product Tool
In areas where they don’t have expert knowledge or are short on time
consumers need products, not tools
Belkin’s mobile app is good, but
a connected socket is a tool that requires users to solve their own problems
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
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
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?
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
- 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
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
- 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
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
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
- 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
Thank you@clurr claire@clairerowland.com www.designingconnectedproducts.com