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.

UX in Automobiles: Balancing effective UI design & driver safety

30,264 views

Published on

To view the talk, visit https://vimeo.com/113120075
To view the videos within the presentation, visit http://youtu.be/d2C3KYhqq9U

Complex interfaces have become a common feature in consumer automobiles. As these systems functionality has expanded, drivers ability to interact with so much information has grown more demanding. At this stage automotive UX design is in its awkward adolescence phase, but going forward how will designers ensure motorists can accomplish tasks while increasing driving safety?

This talk will demonstrate successful (and not-so-successful) ways that in-car designs currently happen and what we all need to be aware of in the future to create beautiful, useful designs to keep drivers informed and safe simultaneously.

Published in: Design

UX in Automobiles: Balancing effective UI design & driver safety

  1. 1. DESIGNANDSAFETY CARUYCARUIANDS AFETYCARUIDESIGN ANUIDESIGNANDS ARUSIGNANDSAFET YCARUINDSAFETYC ARUIDESIGNANDSA FETYCARUIDESIGNA
  2. 2. TO SEE VIDEOS, VIEW THE PRESENTATION ON MY YOUTUBE PAGE.
  3. 3. THANKS TO OUR VETERANS. WE APPRECIATE YOUR SERVICE.
  4. 4. MAKE SURE TO GET YOUR VETERANS DAY CAMOUFLAGE ICE CREAM FROM BASKIN ROBINS TODAY.
  5. 5. THANKS FOR COMING. I’M EXCITED TO BE HERE.
  6. 6. HI. I’M JAKE ZUKOWSKI. I AM AN ASSOCIATE CREATIVE DIRECTOR AT FROG.
  7. 7. 7 FROG’S HISTORY IS BUILT ON 40+ YEARS OF INNOVATION
  8. 8. FROG ISN’T AN AUTOMOTIVE-DESIGN FIRM …
  9. 9. motorcycle concept Voice command and haptic navigation concept Mobile devices for the car BUT WE LOVE TO INNOVATE. recharging station design In-dash digital automotive experience design Rich social mobile design
  10. 10. MY APOLOGY IN ADVANCE: MY JOB IS TO PROVOKE AND SOLVE
  11. 11. AND MAKE PEOPLE SMILE. 11
  12. 12. WE’VE BEEN DRIVING FOR DECADES NOW. HOW DO WE GET PEOPLE TO SMILE ONCE AGAIN?
  13. 13. THE HISTORY OF HMI Analog digital web phone tablet TV gaming consoles automotive hmi
  14. 14. Analog digital web phone tablet TV gaming consoles automotive hmi
  15. 15. THE BIG IDEA: PUT AN IPAD IN IT!
  16. 16. TESLA MODEL S
  17. 17. TEGRA CAR INSTRUMENT PANEL PERSONAL INFOTAINMENT ASSISTANT CONCEPT
  18. 18. MYFORD TOUCH
  19. 19. CARHOME ULTRA UNLOCKER
  20. 20. CAR HMI STARTS TO LOOK LIKE FINAL FANTASY XV
  21. 21. HOW IN THE WORLD DID WE GET HERE?
  22. 22. immersive, full attention Analog digital web phone tablet TV gaming consoles automotive hmi immersive, full attention*
  23. 23. AUTOMOTIVE DIGITAL DESIGN IS IN ITS AWKWARD TEENAGE YEARS
  24. 24. acura Analog digital web phone tablet TV gaming consoles automotive hmi digital web phone tablet consoles Converged immersive, full attention immersive, full attention*
  25. 25. WHAT IS CONVERGENCE?
  26. 26. CONVERGENCE IS MELDING WHAT’S GREAT ABOUT DIGITAL WITH WHAT’S GREAT ABOUT THE CAR.
  27. 27. CONVERGENCE IS AN EXPRESSION OF A USER EXPERIENCE THAT IS GREATER THAN ITS PARTS.
  28. 28. CONVERGENCE IS INCORPORATING DIGITAL WHILE STILL HONORING THE CONTEXT OF DRIVING.
  29. 29. DRIVING IS …
  30. 30. DRIVING IS ENJOYABLE
  31. 31. DRIVING IS DANGEROUS
  32. 32. DRIVING IS VISCERAL
  33. 33. DRIVING IS INTENSIVE
  34. 34. HOW DO WE ACHIEVE CONVERGENCE?
  35. 35. PROVIDING FUNCTION WHILE SIMULTANEOUSLY MAINTAINING SAFETY
  36. 36. HOW DO WE COMPEL SOMEONE TO KEEP THEIR PHONE IN THEIR POCKET…
  37. 37. WHILE MAKING AVAILABLE ALL THE FEATURES THEY DESIRE?
  38. 38. A CAUTIONARY TALE
  39. 39. IT’S NOT ABOUT ASKING CONSUMERS WHAT THEY WANT.
  40. 40. IT’S NOT ABOUT SOLVING PROBLEMS THAT DON’T EXIST.
  41. 41. SO, HOW DO WE BUILD EXPERIENCES THAT HONOR CONVERGENCE?
  42. 42. I WISH I HAD AN EASY ANSWER.
  43. 43. WHAT I DO HAVE ARE TRENDS AND LEARNINGS AND HOW TO DESIGN FOR THEM.
  44. 44. ONE: GETTING INPUT IS REALLY HARD
  45. 45. NOT LIKE THIS, PLEASE. THE DAKOTA PROJECT CAR
  46. 46. NOT LIKE THIS, EITHER. TESLA MODEL S
  47. 47. IF NOT KEYBOARDS, THEN IT MUST BE…
  48. 48. VOICE! NOTE: THIS IS A 2014 JAGUAR
  49. 49. SPEECH IS GROWING According to IMS Research, 55% of all new motor vehicles produced in 2019 will incorporate voice recognition, up from 37% in 2012. SPEECH HAS ISSUES Speech is not mature enough today to be seen as a completely viable alternative to more familiar text entry methods.
  50. 50. AAA RANKED CURRENT VOICE SYSTEMS ON A 5-POINT SCALE OF DISTRACTION FOR COMMON TASKS, WHERE LOWER SCORES MEANT LESS DISTRACTION.
  51. 51. THE RESULTS WEREN’T GREAT Listening to an audio book Honda Blue Link MyFord Touch Mercedes COMAND 0 1 2 3 4 5 Toyota Entune Chevrolet MyLink Chrysler Uconnect Listening to the radio Phone Call
  52. 52. THE MAJORITY OF SYSTEMS WERE FOUND TO BE INCREDIBLY DISTRACTING—MORE SO THAN HAVING A CONVERSATION ON A HANDHELD PHONE.
  53. 53. ACCORDING TO THE AP, TWO OF THE STUDY PARTICIPANTS REAR-ENDED ANOTHER CAR WHILE USING SIRI.
  54. 54. THE RESULTS WEREN’T GREAT Listening to an audio book Honda Blue Link MyFord Touch Mercedes COMAND 0 1 2 3 4 5 Toyota Entune Chevrolet MyLink Chrysler Uconnect Siri without CarPlay
  55. 55. LOOKS LIKE CARPLAY LEARNED ITS LESSONS FROM PREVIOUS DESIGNS.
  56. 56. THINGS TO LEARN FROM CARPLAY - Launching the Messages app assumes you are composing and not consuming. - Screens are laid out for function over form. - No distracting text on the screen. Ever. - No text to confirm the message you want to send. - No text when the message is read. - No preview text in the messages list view.
  57. 57. IF TYPING IN THE CAR IS A PROBLEM, GET THE DATA FROM ELSEWHERE.
  58. 58. TWO: FIND EASIER WAYS TO GET DATA
  59. 59. THE CLOUD WILL BE YOUR FRIEND
  60. 60. THINGS YOU CAN GET FOR VIRTUALLY NOTHING - Driver’s name - Driver’s social graph and pictures - Driver’s hometown - General affinities - Favorite sports teams - Frequented locations - Music tastes and preferences - Locale and currency
  61. 61. THREE: MAKE YOUR EXPERIENCE SLIPPY
  62. 62. IN MOBILE AND WEB, WE ARE TOLD TO MAKE OUR DESIGNS STICKY.
  63. 63. STICKINESS Web and mobile design is about encouraging the user to stay longer and reinforcing return visits. We can accomplish this through a number of ways: - Compelling content - Personalization of the app or website - Building communities - Adding games or challenges - Linking to other content
  64. 64. FOR THE CAR, YOU NEED TO MAKE THINGS SLIPPY. MAKE IT SCANNABLY BEAUTIFUL.
  65. 65. SLIPINESS Car design is about encouraging the user to forego attention as quickly as possible, spending as little time as possible to accomplish a task. - Clear understanding of context - Content created for glancing - Straightforward copy - Streamlining processes - Exposing all primary functionality
  66. 66. SLIPPY? IHEARTRADIO
  67. 67. SLIPPY? PANDORA
  68. 68. SLIPPY? CARPLAY MESSAGES
  69. 69. SLIPPY? PANDORA AGAIN
  70. 70. SLIPPY? THE WEATHER CHANNEL
  71. 71. FOUR: MAKE IT PERSONAL ONCE AGAIN
  72. 72. Just Kidding FUTURE OF PERSONALIZATION: CORNY DAD JOKES IN THE CAR!
  73. 73. BRINGING PERSONALIZATION AND PREFERENCE INTO THE CAR WITH YOUR PERSONAL DEVICES WILL BE THE NORM.
  74. 74. WHAT CAN YOU DO WITH PERSONALIZATION? - Storing and retrieving preferences - Remote features via an app interface - Choose music we all would like - Intelligently withhold information depending on who’s in the car with you
  75. 75. FIVE: ATTENTION IS GREATER THAN EYES
  76. 76. JUST BECAUSE YOU CAN SEE THROUGH YOUR SCREEN DOESN’T MAKE YOUR DEVICE SAFE.
  77. 77. LOOK AT HOW DISTRACTED HE IS IN HIS OWN VIDEO.
  78. 78. DON’T GIVE PEOPLE COMPLEX TASKS TO DO IN THE CAR.
  79. 79. WHAT CONSTITUTES A COMPLEX CAR TASK? - Reading an incoming text - Reviewing what the voice system caught of your speech, either in real-time or after-the- fact - Tweeting in the car - Posing for a selfie - Requiring ancillary decisions while on a phone call
  80. 80. AND NOW, A BRIEF, ANGRY RANT
  81. 81. SIX: YOU MADE EVERYTHING TOO SMALL
  82. 82. POP QUIZ!
  83. 83. QUESTION: WHAT IS THE OPTIMAL SIZE FOR TEXT DISPLAYED IN THE CAR? ANSWER: 20 ARCMINUTES
  84. 84. THERE BE TRIG HERE.
  85. 85. YES, THE ANSWER “IT DEPENDS” COULD WORK The pixel size of text, icons, and other elements depends on you knowing four things. - Screen size - Screen resolution - Distance to screen - Visual angle
  86. 86. AN EXAMPLE Let’s say a digital screen in my car that is 800 millimeters away from my eye on a 10.2” screen that displays at 1920x720. I want to have text at the NHTSA-recommended 20 arcminutes. I would need 54-pixel type.
  87. 87. ANOTHER EXAMPLE Let’s say a projector’s cast is 10 meters away from the furthest attendee, projecting a 100” image that displays at 1920x1080. I want to have text at a bit smaller 16 arcminutes. I would need 60-pixel type.
  88. 88. SEVEN: WINDSHIELD AS ANOTHER DISPLAY
  89. 89. CARS COMMUNICATING OUTWARD: VEHICLES AS NETWORKED DEVICES IS FURTHER OFF. 98
  90. 90. CARS COMMUNICATING INWARD: THE HUD HAS BEEN AROUND FOR A WHILE
  91. 91. NEAR-FUTURE TECHNOLOGY
  92. 92. FURTHER-FUTURE TECHNOLOGY
  93. 93. 1: GETTING INPUT IS REALLY HARD 2: FIND EASIER WAYS TO GET DATA 3: MAKE YOUR EXPERIENCE SLIPPY 4: MAKE IT PERSONAL ONCE AGAIN 5: ATTENTION IS GREATER THAN EYES 6: YOU MADE EVERYTHING TOO SMALL 7: WINDSHIELD AS ANOTHER DISPLAY
  94. 94. THANK YOU @JAKEZ

×