Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UXLx 2015: 'Designing Connected Products workshop


Published on

Workshop on designing for consumer IoT, covering value, designing the system UX/interusability, and handling network issues such as latency/reliability and intermittent connections.

Published in: Design

UXLx 2015: 'Designing Connected Products workshop

  1. 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
  2. 2. Hello :)
  3. 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
  4. 4. What examples spring to mind when you think of connected products? ?
  5. 5. Images: Withings, Made by Many, ecobee, Pod, Philips, Streetline, Evrythng/Diageo, Lockitron, Proteus Consumer
  6. 6. Images: Emmett Tullos, Bigbelly, Smart Structures,Wikicommons, PowerOasis, OnFarm, GROUND Lab Industrial
  7. 7. Visions of IoT often look like this
  8. 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
  9. 9. It’s not just UI and industrial design
  10. 10. Facets of IoT UX
  11. 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. 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
  13. 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
  14. 14. Value propositions, or solving a tangible problem: What does it do?
  15. 15. 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
  16. 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
  17. 17. Are we connecting some things just because we can? Image: Vessyl
  18. 18. Product Tool In areas where they don’t have expert knowledge or are short on time consumers need products, not tools
  19. 19. Nest do productisation really well
  20. 20. Belkin’s mobile app is good, but a connected socket is a tool that requires users to solve their own problems
  21. 21. This is a product
  22. 22. Prototyping method: Media from the Future Exploring why, what and how
  23. 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. 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: management/answer/Ian-McAllister More on Amazon:
  25. 25. E.g. design the box/advert The Brand Gap -
  26. 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
  27. 27. Conceptual model and composition How does it work? Which bit does what?
  28. 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
  29. 29. App vs device? Product images: BlueSpray, skydrop
  30. 30. Device UIs Images: Martin Charlier, Dacor, Amazon, MIT, Nest, Ambient Devices
  31. 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. 32. Connectivity is a factor in determining where functions ‘run’ What will still work, or stop working, if the internet connection goes down?
  33. 33. Prototyping method: Storyboards How the system works in context
  34. 34. Storyboards Credit: Deb Aoki Credit: Robert André
  35. 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. 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. 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 Consistency
  38. 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
  39. 39. Top priority: terminology However different the UIs, identical functions must have the same name Images: British Gas
  40. 40. Follow device platform conventions… - … Android contextual menu iOS separate screen Images: Spotify
  41. 41. - 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
  42. 42. Aesthetic styling “Click” Nest use visual and audio cues to tie the thermostat and phone app together Images: Nest
  43. 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
  44. 44. Prototyping method: Experience prototyping How the system works in context
  45. 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. 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. 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
  48. 48. Continuity Designing for the spaces between devices
  49. 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. 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
  51. 51. Latency and reliability BERG Cloudwash prototype Interactions won’t always be smooth and immediate
  52. 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. 53. Option 1: 
 the white lie Confirm action, backpedal if something goes wrong
  54. 54. Instagram do this The photo is already shown as ‘liked’, even though the instruction is still being sent
  55. 55. Option 2: 
 be transparent - Acknowledge action, show that it is in progress - Confirm only once it’s done
  56. 56. WeMo Switch does this subtly
  57. 57. Lowes Iris is more explicit Images: Lowes
  58. 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. 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. 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. 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
  62. 62. Prototyping method: Experience prototyping Designing for continuity
  63. 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. 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
  65. 65. 2 mins per team Share your concepts
  66. 66. Thank you @clurr