Successfully reported this slideshow.

Interusability: designing a coherent system UX



Loading in …3
1 of 49
1 of 49

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Interusability: designing a coherent system UX

  1. 1. Interusability: designing a coherent system UX Claire Rowland @clurr Thingscon Amsterdam 2015
  2. 2. “This is more than a UX book; it covers all of the critical design and technology issues around making great connected products.” DAVID ROSE, ENCHANTED OBJECTS “As a grizzled veteran of several campaigns within the matter-battle of the Internet of Things, I was pleasantly surprised to find the number of times this book made me pause, think, and rethink my own work (and that of others).A very valuable addition to the canon of design thinking in this emerging area.” MATT JONES, GOOGLE “Connected products are a unique beast. Designing this type of product well takes lots of iterations & user testing.This book takes you through the paces.We keep one on the shelf at Highway1 for our IoT companies.”
  3. 3. Visions of IoT often look like this
  4. 4. …but the reality is often new ways to fail ‘It’s a bit glitchy but it’s OK, you just have to be in the room at the same time’.
  5. 5. It’s not just UI and industrial design
  6. 6. 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
  7. 7. 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.
  8. 8. Facets of IoT UX
  9. 9. Facets of IoT UX
  10. 10. Conceptual models How does the system work?
  11. 11. 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
  12. 12. Non-connected products are (usually) conceptually simple
  13. 13. Connected products are more complex Product images: Philips
  14. 14. Connectedness requires users to think about system models - Which bit does what? - Where does code run? - What fails/still works if connectivity is lost?
  15. 15. 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.
  16. 16. You can explain the system model... BERG Cloud bridge: transparent network commsLowes Iris: showing the connection to the hub
  17. 17. What actually happensWhat the user needs to know …or simplify the conceptual model
  18. 18. Interusability Creating a coherent system UX Cross-Platform Service User Experience:A Field Study and an Initial Framework. Minna Wäljas, Katarina Segerståhl, KaisaVäänänen- Vainio-Mattila, Harri Oinas-Kukkonen MobileHCI’10:
  19. 19. Composition How functionality is distributed across devices
  20. 20. Distribute functionality to suit the context of use (Nearly) all interactions via phone app Interactions mirrored on phone and thermostat Image: Tado Images: ecobee
  21. 21. In app, on device, or both? Product images: BlueSpray, skydrop
  22. 22. Minimal elegance? Or missing features? Product images: drop
  23. 23. Consistency Appropriate consistency across UIs and interactions
  24. 24. “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 What is it…
  25. 25. “Users should not have to worry whether different words, situations or actions mean the same thing. Follow platform conventions.” Consistency != make everything the same “Users should not have to worry whether different words, situations or actions mean the same thing.“ (Jakob Nielsen) but also “Follow platform conventions.” Image: Made by Many
  26. 26. Top priority: terminology However different the UIs, identical functions must have the same name (Images: British Gas)
  27. 27. Follow device platform conventions… be true to the device A touchscreen does not need a fake bezel A thermostat does not have to pretend to be an iPhone Images: Nest
  28. 28. Aesthetic styling “Click” Nest use visual and audio cues to tie the thermostat and phone app together Images: Nest
  29. 29. 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 arcane, but that need not restrict other device UIs
  30. 30. Continuity Fluent cross-device interactions: designing for the network
  31. 31. 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
  32. 32. 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
  33. 33. Latency and reliability BERG Cloudwash prototype Cross-device interactions won’t always be smooth and immediate
  34. 34. 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
  35. 35. Option 1: 
 the white lie Confirm action, backpedal if something goes wrong
  36. 36. Instagram do this The photo is already shown as ‘liked’, even though the instruction is still being sent
  37. 37. So does Hue… Let me think about that… nope
  38. 38. Option 2: 
 be transparent - Acknowledge action, show that it is in progress - Confirm state change only once it’s done
  39. 39. Chrome Web Lab’s stretchy blobs Image: Domus
  40. 40. WeMo Switch does this subtly
  41. 41. Lowes Iris is more explicit Images: Lowes
  42. 42. 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.
  43. 43. Safety critical/urgent Low touch/non-critical Senior safety/intruder alarm Energy monitorLightingBaby monitor How acceptable is uncertainty? Images: MyLively, Efergy
  44. 44. Fuzzy & timely or precise but old [Flossie: is here! [11.32] Mr Pickles was here at 15.02 Mr Pickles is around here now
  45. 45. Networked physical UIs If you’ve used physical controls that represent state, how do they reflect changes made via the digital UI?
  46. 46. 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
  47. 47. Communicate the system model or simplify the conceptual model Distribute functionality between UIs to suit the context of use Appropriate consistency between UIs Design for the network as well as the touchpoints Physical UIs no longer stand alone and may need to evolve
  48. 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, formerVP of Apple
  49. 49. Want a book? Tweet @clurr and say I want DCP First 3 win! @clurr | Or use code AUTHD for 50% off ebook/ 40% off print at