SlideShare a Scribd company logo
Interusability:
designing a coherent
system UX
Claire Rowland - @clurr Image: Greg Williams via Flickr
Hello :)
- Independent UX and product
consultant
- Lead author: “Designing
Connected Products: UX for the
consumer internet of things”
One person, one computer, one UI,
probably doing work, low context
Conventional usability
Image: Radio Shack via scalzi.com
Things have changed…
Mobile, specialized devices, cross-platform, multi-user, distributed,
contextual awareness, embedded in the world
Images: Withings, Made by Many, Philips, Streetline, Evrythng/Diageo, Lockitron
- The fundamental heuristics of
usability are still valid
- They relate to the capabilities
of the human brain and brains
haven’t changed
- But there are some new
concerns to take into account
…(although we haven’t)
Image: Popular Science Monthly via Wikicommons
UX for IoT: not just UI & industrial design
Images: Nest
Users have to understand systems
- Functionality and interactions are distributed across multiple
devices, often with different capabilities
- Systems are inherently harder to understand
- We are much better at thinking about things than about
relationships between things
Images: Withings
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.
Facets of IoT UX
Today we’ll look at this part:
Conceptual models
Understanding how it works
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
Non-connected products are often
conceptually quite simple
Connected products are more complex
Product images: Philips
Connectedness requires users to think
about system models
- Which bit does what?
- Where does code run?
- What fails/still works if
connectivity is lost?
It’s extra stuff to think about
Product images: LIFX, Philips, Cree
In addition to price, aesthetics and features, customers have to understand how a
product connects and whether that meets their needs.
You can explain the system model...
BERG Cloud bridge: transparent network commsLowes Iris: showing the
connection to the hub
Image: BERGImage: Lowes
…or simplify the conceptual model
…and iBeaconsAutomatic gearboxes…
Image: Estimote
What actually happensWhat the user needs to know
iBeacons
Interusability
Creating a coherent system UX
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
Composition
How functionality is distributed across devices
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
Another example:
Product images: BlueSpray, skydrop
Minimal elegance? Or missing features?
Product images: drop
Determining the right composition
- What best fits the context of use?
What do users expect?
- What devices do users already have
and what can they do?
- How much should the hardware
cost?
- How much do you need to upgrade
the system or change features over
time?
- Do you need local control if
connectivity is unavailable?
- Does the system need to work if
some devices are unavailable?
- How accurate does sensing need to
be? Product images: ring
Consistency
Appropriate consistency across UIs and interactions
“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/
What is it…
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
Continuity
Fluent cross-device interactions
What is it…
- 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 lie
Confirm 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 explicit
Images: Lowes
Intermittency
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.
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
A final thought
Good consumer UX for IoT is
surprisingly hard
We have to get this stuff right for mass
adoption
‘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
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
@clurr
claire@clairerowland.com
www.designingconnectedproducts.com
Thank you

More Related Content

PDF
Interusability: Designing a Coherent System UX
PDF
UXLx 2015: 'Designing Connected Products workshop
PDF
UX for Connected Products: EuroIA16
PDF
Direct manipulation is broken: O'Reilly Design Conference Jan 2016
PDF
Interusability: designing a coherent system UX
PDF
Interusability: designing a coherent system UX: NUX 23.10.15
PDF
UX for the internet of things: ThingsCon 150505
PDF
Getting the IoT into Tesco: Internet of things UX for the mass market - IoT 14
Interusability: Designing a Coherent System UX
UXLx 2015: 'Designing Connected Products workshop
UX for Connected Products: EuroIA16
Direct manipulation is broken: O'Reilly Design Conference Jan 2016
Interusability: designing a coherent system UX
Interusability: designing a coherent system UX: NUX 23.10.15
UX for the internet of things: ThingsCon 150505
Getting the IoT into Tesco: Internet of things UX for the mass market - IoT 14

What's hot (20)

PDF
UX Day Mannheim: UX for systems of connected products
PDF
Design for failure in the IoT: what could possibly go wrong?
PDF
UX Scotland 2018: Systems, discontinuities and thinking beyond UI: Key quest...
PDF
Martin Charlier - Designing Connected Products - raincloud.eu
PDF
Challenges and tools of multi-screen UX
PDF
Internet of things
PDF
The network as a design material: Interaction 16 workshop
PDF
Flupa UX Days 2017 : "What's diffrent about UX for IOT" par Claire Rowland
PDF
CoITus {TASK.to September 2012}
PDF
TFT13 - Ian Aitchison, Approaching the Event Horizon
PPTX
Impacts of HCI
PPTX
Current and Future Trends in Media and Information
PDF
Seminar slides
 
PDF
Design Issues with Microsft Word
PDF
Service design for the cloud of diverse devices
PDF
Designing Microinteractions for Better UX
PPT
Human Centering Your Association and the Rise of Microinteractions
PDF
Micro Interactions
PPT
UX Day Mannheim: UX for systems of connected products
Design for failure in the IoT: what could possibly go wrong?
UX Scotland 2018: Systems, discontinuities and thinking beyond UI: Key quest...
Martin Charlier - Designing Connected Products - raincloud.eu
Challenges and tools of multi-screen UX
Internet of things
The network as a design material: Interaction 16 workshop
Flupa UX Days 2017 : "What's diffrent about UX for IOT" par Claire Rowland
CoITus {TASK.to September 2012}
TFT13 - Ian Aitchison, Approaching the Event Horizon
Impacts of HCI
Current and Future Trends in Media and Information
Seminar slides
 
Design Issues with Microsft Word
Service design for the cloud of diverse devices
Designing Microinteractions for Better UX
Human Centering Your Association and the Rise of Microinteractions
Micro Interactions
Ad

Similar to Over the Air 15: Experience design for the IoT: system UX & interusability 150924 (20)

PDF
IoT Meetup Stockholm - Designing Connected Products
PDF
The network as a design material: Interaction 16 workshop
PDF
Designing Connected Products - Web Directions 2015 Sydney
PDF
UX Design and Issues in IOT
PDF
Designing IoT
PDF
Hardware is hard(er)
PPTX
EuroIA 2016 Designing Connected Products
PDF
ThingsCon Amsterdam 2015 - Koen van Niekerk
PDF
User Experience for Internet of Things
PDF
UX for Internet of Things
PDF
Getting the IoT into Consumers' hands, Claire Rowland at IOT14
PPTX
DESIGN PRINCIPLES OF IOT iot iot principles
PDF
User Experience Design for IoT
 
PDF
2016 iot summit_guy_bieber9
PDF
When Computers are Everywhere, Will we have superpowers.
PPT
Designing Smart Things: user experience design for networked devices
PPTX
UX Design for the IoT and the Rise of Natural Interaction
PDF
Internet of Things Stack
PPTX
Fin fest 2014 - Internet of Things and APIs
PDF
UX and Security for the IoT
IoT Meetup Stockholm - Designing Connected Products
The network as a design material: Interaction 16 workshop
Designing Connected Products - Web Directions 2015 Sydney
UX Design and Issues in IOT
Designing IoT
Hardware is hard(er)
EuroIA 2016 Designing Connected Products
ThingsCon Amsterdam 2015 - Koen van Niekerk
User Experience for Internet of Things
UX for Internet of Things
Getting the IoT into Consumers' hands, Claire Rowland at IOT14
DESIGN PRINCIPLES OF IOT iot iot principles
User Experience Design for IoT
 
2016 iot summit_guy_bieber9
When Computers are Everywhere, Will we have superpowers.
Designing Smart Things: user experience design for networked devices
UX Design for the IoT and the Rise of Natural Interaction
Internet of Things Stack
Fin fest 2014 - Internet of Things and APIs
UX and Security for the IoT
Ad

More from Claire Rowland (7)

PDF
"Siri, did I leave the oven on?" UX for the connected home (updated for IA Su...
PDF
(now an old version) The Web and Beyond: "Siri, did I leave the oven on?" Mun...
PDF
Updated: Design beyond the glowing rectangle (Polish IA Summit 2011)
PDF
Fjord: Digital Nomads white paper
PDF
Design beyond the glowing rectangle - EuroIA2010
PDF
Psychology Of Creativity - London IA 30.03.10
PDF
Over the Air: Inspiration/Outspiration panel slides
"Siri, did I leave the oven on?" UX for the connected home (updated for IA Su...
(now an old version) The Web and Beyond: "Siri, did I leave the oven on?" Mun...
Updated: Design beyond the glowing rectangle (Polish IA Summit 2011)
Fjord: Digital Nomads white paper
Design beyond the glowing rectangle - EuroIA2010
Psychology Of Creativity - London IA 30.03.10
Over the Air: Inspiration/Outspiration panel slides

Recently uploaded (20)

PDF
Urban Design Final Project-Context
PDF
SEVA- Fashion designing-Presentation.pdf
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
PDF
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
PPTX
areprosthodontics and orthodonticsa text.pptx
PPTX
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
PPTX
Implications Existing phase plan and its feasibility.pptx
PPTX
mahatma gandhi bus terminal in india Case Study.pptx
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
PDF
The Advantages of Working With a Design-Build Studio
PPTX
6- Architecture design complete (1).pptx
PDF
Interior Structure and Construction A1 NGYANQI
PPTX
12. Community Pharmacy and How to organize it
PPTX
An introduction to AI in research and reference management
PPTX
HPE Aruba-master-icon-library_052722.pptx
PPTX
building Planning Overview for step wise design.pptx
PDF
Urban Design Final Project-Site Analysis
Urban Design Final Project-Context
SEVA- Fashion designing-Presentation.pdf
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
areprosthodontics and orthodonticsa text.pptx
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
DOC-20250430-WA0014._20250714_235747_0000.pptx
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
Implications Existing phase plan and its feasibility.pptx
mahatma gandhi bus terminal in india Case Study.pptx
BRANDBOOK-Presidential Award Scheme-Kenya-2023
The Advantages of Working With a Design-Build Studio
6- Architecture design complete (1).pptx
Interior Structure and Construction A1 NGYANQI
12. Community Pharmacy and How to organize it
An introduction to AI in research and reference management
HPE Aruba-master-icon-library_052722.pptx
building Planning Overview for step wise design.pptx
Urban Design Final Project-Site Analysis

Over the Air 15: Experience design for the IoT: system UX & interusability 150924

  • 1. Interusability: designing a coherent system UX Claire Rowland - @clurr Image: Greg Williams via Flickr
  • 2. Hello :) - Independent UX and product consultant - Lead author: “Designing Connected Products: UX for the consumer internet of things”
  • 3. One person, one computer, one UI, probably doing work, low context Conventional usability Image: Radio Shack via scalzi.com
  • 4. Things have changed… Mobile, specialized devices, cross-platform, multi-user, distributed, contextual awareness, embedded in the world Images: Withings, Made by Many, Philips, Streetline, Evrythng/Diageo, Lockitron
  • 5. - The fundamental heuristics of usability are still valid - They relate to the capabilities of the human brain and brains haven’t changed - But there are some new concerns to take into account …(although we haven’t) Image: Popular Science Monthly via Wikicommons
  • 6. UX for IoT: not just UI & industrial design Images: Nest
  • 7. Users have to understand systems - Functionality and interactions are distributed across multiple devices, often with different capabilities - Systems are inherently harder to understand - We are much better at thinking about things than about relationships between things Images: Withings
  • 8. 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.
  • 10. Today we’ll look at this part:
  • 12. 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
  • 13. Non-connected products are often conceptually quite simple
  • 14. Connected products are more complex Product images: Philips
  • 15. Connectedness requires users to think about system models - Which bit does what? - Where does code run? - What fails/still works if connectivity is lost?
  • 16. It’s extra stuff to think about Product images: LIFX, Philips, Cree In addition to price, aesthetics and features, customers have to understand how a product connects and whether that meets their needs.
  • 17. You can explain the system model... BERG Cloud bridge: transparent network commsLowes Iris: showing the connection to the hub Image: BERGImage: Lowes
  • 18. …or simplify the conceptual model …and iBeaconsAutomatic gearboxes… Image: Estimote
  • 19. What actually happensWhat the user needs to know iBeacons
  • 20. Interusability Creating a coherent system UX 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
  • 21. Composition How functionality is distributed across devices
  • 22. 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
  • 23. Another example: Product images: BlueSpray, skydrop
  • 24. Minimal elegance? Or missing features? Product images: drop
  • 25. Determining the right composition - What best fits the context of use? What do users expect? - What devices do users already have and what can they do? - How much should the hardware cost? - How much do you need to upgrade the system or change features over time? - Do you need local control if connectivity is unavailable? - Does the system need to work if some devices are unavailable? - How accurate does sensing need to be? Product images: ring
  • 27. “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/ What is it…
  • 28. 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
  • 29. Top priority: terminology However different the UIs, identical functions must have the same name Images: British Gas
  • 30. Follow device platform conventions… - … Android contextual menu iOS separate screen Images: Spotify
  • 31. - 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
  • 32. Aesthetic styling “Click” Nest use visual and audio cues to tie the thermostat and phone app together Images: Nest
  • 33. 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
  • 35. What is it… - 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
  • 36. 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
  • 37. Latency and reliability BERG Cloudwash prototype Interactions won’t always be smooth and immediate
  • 38. 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
  • 39. Option 1: 
 the white lie Confirm action, backpedal if something goes wrong
  • 40. Instagram do this The photo is already shown as ‘liked’, even though the instruction is still being sent
  • 41. Option 2: 
 be transparent - Acknowledge action, show that it is in progress - Confirm only once it’s done
  • 42. WeMo Switch does this subtly
  • 43. Lowes Iris is more explicit Images: Lowes
  • 44. Intermittency 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.
  • 45. 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
  • 46. A final thought Good consumer UX for IoT is surprisingly hard
  • 47. We have to get this stuff right for mass adoption ‘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
  • 48. 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