Workshop on designing for consumer IoT, covering value, designing the system UX/interusability, and handling network issues such as latency/reliability and intermittent connections.
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
UXLx 2015: 'Designing Connected Products workshop
1. 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
3. 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
7. Visions of IoT often look like this
http://www.digitaltrends.com/home/heck-internet-things-dont-yet/
8. …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
11. 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.
12. 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
13. 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
16. 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
23. 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
24. 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/
25. 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
26. Design the box:
The WiFi connected oven
Discuss:
-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
28. 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
31. 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
32. Connectivity is a factor in determining
where functions ‘run’
What will still work, or
stop working, if the
internet connection
goes down?
35. 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!
36. 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
37. “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
38. 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
43. 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
45. 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
46. 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.
47. 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
49. 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
50. 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
52. 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
53. Option 1:
the white lie
Confirm action, backpedal if
something goes wrong
54. Instagram do this
The photo is already shown as
‘liked’, even though the
instruction is still being sent
55. Option 2:
be transparent
- Acknowledge action, show
that it is in progress
- Confirm only once it’s done
58. And here’s another challenge…
If you’ve used physical controls that represent state, how do they
reflect changes made via the digital UI?
59. 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
60. Intermittent connections can be an issue
19
2 min delay
21
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.
61. 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
63. - 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…
64. 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