Download - UX in Automobiles: Balancing effective UI design & driver safety

Transcript
Page 1: UX in Automobiles: Balancing effective UI design & driver safety

DESIGNANDSAFETY

CARUYCARUIANDS

AFETYCARUIDESIGN

ANUIDESIGNANDS

ARUSIGNANDSAFET

YCARUINDSAFETYC

ARUIDESIGNANDSA

FETYCARUIDESIGNA

Page 2: UX in Automobiles: Balancing effective UI design & driver safety

TO SEE VIDEOS, VIEW THE PRESENTATION ON MY YOUTUBE PAGE.

Page 3: UX in Automobiles: Balancing effective UI design & driver safety

THANKS TO OUR VETERANS. WE APPRECIATE YOUR SERVICE.

Page 4: UX in Automobiles: Balancing effective UI design & driver safety

MAKE SURE TO GET YOUR VETERANS DAY CAMOUFLAGE ICE CREAM FROM BASKIN ROBINS TODAY.

Page 5: UX in Automobiles: Balancing effective UI design & driver safety

THANKS FOR COMING. I’M EXCITED TO BE HERE.

Page 6: UX in Automobiles: Balancing effective UI design & driver safety

HI. I’M JAKE ZUKOWSKI. I AM AN ASSOCIATE CREATIVE DIRECTOR AT FROG.

Page 7: UX in Automobiles: Balancing effective UI design & driver safety

7

FROG’S HISTORY IS BUILT ON 40+ YEARS OF INNOVATION

Page 8: UX in Automobiles: Balancing effective UI design & driver safety

FROG ISN’T AN AUTOMOTIVE-DESIGN FIRM …

Page 9: UX in Automobiles: Balancing effective UI design & driver safety

BUT WE LOVE TO INNOVATE.

QuickTime™ and aH.264 decompressor

are needed to see this picture.

Electric motorcycle concept Voice command and haptic navigation concept Mobile devices for the car

Rich social mobile design In-dash digital automotive experience design Electric vehicle recharging station design

QuickTime™ and aH.264 decompressor

are needed to see this picture.

Electric motorcycle concept Voice command and haptic navigation concept Mobile devices for the car

Rich social mobile design In-dash digital automotive experience design Electric vehicle recharging station design

Page 10: UX in Automobiles: Balancing effective UI design & driver safety

MY APOLOGY IN ADVANCE: MY JOB IS TO PROVOKE

AND SOLVE

Page 11: UX in Automobiles: Balancing effective UI design & driver safety

11

AND MAKE PEOPLE SMILE.

Page 12: UX in Automobiles: Balancing effective UI design & driver safety

WE’VE BEEN DRIVING FOR DECADES NOW. HOW DO WE GET PEOPLE TO SMILE ONCE AGAIN?

Page 13: UX in Automobiles: Balancing effective UI design & driver safety

Analog

digital

web

phone

tablet

TV

gamingconsoles

autom

otive

hmi

THE HISTORY OF HMI

Page 14: UX in Automobiles: Balancing effective UI design & driver safety
Page 15: UX in Automobiles: Balancing effective UI design & driver safety
Page 16: UX in Automobiles: Balancing effective UI design & driver safety
Page 17: UX in Automobiles: Balancing effective UI design & driver safety
Page 18: UX in Automobiles: Balancing effective UI design & driver safety
Page 19: UX in Automobiles: Balancing effective UI design & driver safety

Analog

digital

web

phone

tablet

TV

gamingconsoles

autom

otive

hmi

Analog

digital

web

phone

tablet

TV

gamingconsoles

autom

otive

hmi

Page 20: UX in Automobiles: Balancing effective UI design & driver safety

THE BIG IDEA:

PUT AN IPAD IN IT!

Page 21: UX in Automobiles: Balancing effective UI design & driver safety

TESLA MODEL S

Page 22: UX in Automobiles: Balancing effective UI design & driver safety

TEGRA CAR INSTRUMENT PANEL

PERSONAL INFOTAINMENT ASSISTANT CONCEPT

Page 23: UX in Automobiles: Balancing effective UI design & driver safety

MYFORD TOUCH

Page 24: UX in Automobiles: Balancing effective UI design & driver safety

CARHOME ULTRA UNLOCKER

Page 25: UX in Automobiles: Balancing effective UI design & driver safety

CAR HMI STARTS TO LOOK LIKE FINAL FANTASY XV

Page 26: UX in Automobiles: Balancing effective UI design & driver safety

HOW IN THE WORLD DID WE

GET HERE?

Page 27: UX in Automobiles: Balancing effective UI design & driver safety

Analog

digital

web

phone

tablet

TV

gamingconsoles

autom

otive

hmi

Analog

digital

web

phone

tablet

TV

gamingconsoles

autom

otive

hmi

immersive, full attention

immersive, full attention*

Page 28: UX in Automobiles: Balancing effective UI design & driver safety

AUTOMOTIVE DIGITAL DESIGN IS IN ITS

AWKWARD TEENAGE YEARS

Page 29: UX in Automobiles: Balancing effective UI design & driver safety

acura

Analog

digital

web

phone

tablet

TV

gamingconsoles

autom

otive

hmi

Analog

digital

web

phone

tablet

TV

gamingconsoles

autom

otive

hmi

Converged

immersive, full attention

immersive, full attention*

Page 30: UX in Automobiles: Balancing effective UI design & driver safety

WHAT IS CONVERGENCE?

Page 31: UX in Automobiles: Balancing effective UI design & driver safety

CONVERGENCE IS MELDING WHAT’S GREAT ABOUT DIGITAL WITH WHAT’S GREAT ABOUT THE CAR.

Page 32: UX in Automobiles: Balancing effective UI design & driver safety

CONVERGENCE IS AN EXPRESSION OF A USER EXPERIENCE THAT IS GREATER THAN ITS PARTS.

Page 33: UX in Automobiles: Balancing effective UI design & driver safety

CONVERGENCE IS INCORPORATING DIGITAL WHILE STILL HONORING THE CONTEXT OF DRIVING.

Page 34: UX in Automobiles: Balancing effective UI design & driver safety

DRIVING IS …

Page 35: UX in Automobiles: Balancing effective UI design & driver safety

DRIVING IS ENJOYABLE

Page 36: UX in Automobiles: Balancing effective UI design & driver safety

DRIVING IS DANGEROUS

Page 37: UX in Automobiles: Balancing effective UI design & driver safety

DRIVING IS VISCERAL

Page 38: UX in Automobiles: Balancing effective UI design & driver safety

DRIVING IS INTENSIVE

Page 39: UX in Automobiles: Balancing effective UI design & driver safety

HOW DO WE ACHIEVE CONVERGENCE?

Page 40: UX in Automobiles: Balancing effective UI design & driver safety

MAINTAINING SAFETY

PROVIDING FUNCTION

WHILE SIMULTANEOUSLYWHILE SIMULTANEOUSLY

Page 41: UX in Automobiles: Balancing effective UI design & driver safety

HOW DO WE COMPEL SOMEONE TO KEEP THEIR PHONE IN THEIR POCKET…

Page 42: UX in Automobiles: Balancing effective UI design & driver safety

WHILE MAKING AVAILABLE ALL THE FEATURES THEY DESIRE?

Page 43: UX in Automobiles: Balancing effective UI design & driver safety

A CAUTIONARY TALE

Page 44: UX in Automobiles: Balancing effective UI design & driver safety

IT’S NOT ABOUT ASKING CONSUMERS WHAT THEY WANT.

Page 45: UX in Automobiles: Balancing effective UI design & driver safety

IT’S NOT ABOUT SOLVING PROBLEMS THAT DON’T EXIST.

Page 46: UX in Automobiles: Balancing effective UI design & driver safety
Page 47: UX in Automobiles: Balancing effective UI design & driver safety

SO, HOW DO WE BUILD EXPERIENCES THAT HONOR CONVERGENCE?

Page 48: UX in Automobiles: Balancing effective UI design & driver safety

I WISH I HAD AN EASY ANSWER.

Page 49: UX in Automobiles: Balancing effective UI design & driver safety

WHAT I DO HAVE ARE TRENDS AND LEARNINGS AND HOW TO DESIGN FOR THEM.

Page 50: UX in Automobiles: Balancing effective UI design & driver safety

ONE:

GETTING INPUT IS REALLY HARD

Page 51: UX in Automobiles: Balancing effective UI design & driver safety

NOT LIKE THIS, PLEASE.

THE DAKOTA PROJECT CAR

Page 52: UX in Automobiles: Balancing effective UI design & driver safety

NOT LIKE THIS, EITHER.

TESLA MODEL S

Page 53: UX in Automobiles: Balancing effective UI design & driver safety

IF NOT KEYBOARDS, THEN IT MUST BE…

Page 54: UX in Automobiles: Balancing effective UI design & driver safety

VOICE!

NOTE: THIS IS A 2014 JAGUAR

Page 55: UX in Automobiles: Balancing effective UI design & driver safety

SPEECH IS GROWINGAccording to IMS Research, 55% of all new motor vehicles produced in 2019 will incorporate voice recognition, up from 37% in 2012.

SPEECH HAS ISSUESSpeech is not mature enough today to be seen as a completely viable alternative to more familiar text entry methods.

Page 56: UX in Automobiles: Balancing effective UI design & driver safety

AAA RANKED CURRENT VOICE SYSTEMS ON A 5-POINT SCALE OF DISTRACTION FOR COMMON TASKS, WHERE LOWER SCORES MEANT LESS DISTRACTION.

Page 57: UX in Automobiles: Balancing effective UI design & driver safety

THE RESULTS WEREN’T GREAT

0 51 2 3 4

Listening to an audio book

Honda Blue Link

Toyota EntuneChevrolet MyLink

Chrysler Uconnect

MyFord Touch

Mercedes COMAND

Listening to the radio

Phone Call

Page 58: UX in Automobiles: Balancing effective UI design & driver safety

THE MAJORITY OF SYSTEMS WERE FOUND TO BE INCREDIBLY DISTRACTING—MORE SO THAN HAVING A CONVERSATION ON A HANDHELD PHONE.

Page 59: UX in Automobiles: Balancing effective UI design & driver safety

ACCORDING TO THE AP, TWO OF THE STUDY PARTICIPANTS REAR-ENDED ANOTHER CAR WHILE USING SIRI.

Page 60: UX in Automobiles: Balancing effective UI design & driver safety

THE RESULTS WEREN’T GREAT

0 51 2 3 4

Listening to an audio book

Honda Blue Link

Toyota EntuneChevrolet MyLink

Chrysler Uconnect

MyFord Touch

Mercedes COMAND

Siri without CarPlay

Page 61: UX in Automobiles: Balancing effective UI design & driver safety

LOOKS LIKE CARPLAY LEARNED ITS LESSONS FROM PREVIOUS DESIGNS.

Page 62: UX in Automobiles: Balancing effective UI design & driver safety

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.

Page 63: UX in Automobiles: Balancing effective UI design & driver safety

IF TYPING IN THE CAR IS A PROBLEM, GET THE DATA FROM ELSEWHERE.

Page 64: UX in Automobiles: Balancing effective UI design & driver safety

TWO:

FIND EASIER WAYS TO GET DATA

Page 65: UX in Automobiles: Balancing effective UI design & driver safety

THE CLOUD WILL BE YOUR FRIEND

Page 66: UX in Automobiles: Balancing effective UI design & driver safety

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

Page 67: UX in Automobiles: Balancing effective UI design & driver safety

THREE:

MAKE YOUR EXPERIENCE SLIPPY

Page 68: UX in Automobiles: Balancing effective UI design & driver safety

IN MOBILE AND WEB, WE ARE TOLD TO MAKE OUR DESIGNS STICKY.

Page 69: UX in Automobiles: Balancing effective UI design & driver safety

STICKINESSWeb 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

Page 70: UX in Automobiles: Balancing effective UI design & driver safety

FOR THE CAR, YOU NEED TO MAKE THINGS SLIPPY. MAKE IT SCANNABLY BEAUTIFUL.

Page 71: UX in Automobiles: Balancing effective UI design & driver safety

SLIPINESSCar 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

Page 72: UX in Automobiles: Balancing effective UI design & driver safety

SLIPPY?

IHEARTRADIO

Page 73: UX in Automobiles: Balancing effective UI design & driver safety

SLIPPY?

PANDORA

Page 74: UX in Automobiles: Balancing effective UI design & driver safety

SLIPPY?

CARPLAY MESSAGES

Page 75: UX in Automobiles: Balancing effective UI design & driver safety

SLIPPY?

PANDORA AGAIN

Page 76: UX in Automobiles: Balancing effective UI design & driver safety

SLIPPY?

THE WEATHER CHANNEL

Page 77: UX in Automobiles: Balancing effective UI design & driver safety

FOUR:

MAKE IT PERSONAL ONCE AGAIN

Page 78: UX in Automobiles: Balancing effective UI design & driver safety
Page 79: UX in Automobiles: Balancing effective UI design & driver safety

FUTURE OF PERSONALIZATION: CORNY DAD JOKES IN THE CAR!

Just Kiddin

g

Page 80: UX in Automobiles: Balancing effective UI design & driver safety

BRINGING PERSONALIZATION AND PREFERENCE INTO THE CAR WITH YOUR PERSONAL DEVICES WILL BE THE NORM.

Page 81: UX in Automobiles: Balancing effective UI design & driver safety

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

Page 82: UX in Automobiles: Balancing effective UI design & driver safety

FIVE:

ATTENTION IS GREATER THAN EYES

Page 83: UX in Automobiles: Balancing effective UI design & driver safety
Page 84: UX in Automobiles: Balancing effective UI design & driver safety

JUST BECAUSE YOU CAN SEE THROUGH YOUR SCREEN DOESN’T MAKE YOUR DEVICE SAFE.

Page 85: UX in Automobiles: Balancing effective UI design & driver safety

LOOK AT HOW DISTRACTED HE IS IN HIS OWN VIDEO.

Page 86: UX in Automobiles: Balancing effective UI design & driver safety

DON’T GIVE PEOPLE COMPLEX TASKS TO DO IN THE CAR.

Page 87: UX in Automobiles: Balancing effective UI design & driver safety

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

Page 88: UX in Automobiles: Balancing effective UI design & driver safety

AND NOW, A BRIEF, ANGRY RANT

Page 89: UX in Automobiles: Balancing effective UI design & driver safety

SIX:

YOU MADE EVERYTHING TOO SMALL

Page 90: UX in Automobiles: Balancing effective UI design & driver safety

POP QUIZ!

Page 91: UX in Automobiles: Balancing effective UI design & driver safety

QUESTION: WHAT IS THE OPTIMAL SIZE FOR TEXT DISPLAYED IN THE CAR?

ANSWER: 20 ARCMINUTES

Page 92: UX in Automobiles: Balancing effective UI design & driver safety

THERE BE TRIG HERE.

Page 93: UX in Automobiles: Balancing effective UI design & driver safety

YES, THE ANSWER “IT DEPENDS” COULD WORKThe pixel size of text, icons, and other elements depends on you knowing four things. - Screen size - Screen resolution - Distance to screen - Visual angle

Page 94: UX in Automobiles: Balancing effective UI design & driver safety

AN EXAMPLELet’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.

Page 95: UX in Automobiles: Balancing effective UI design & driver safety

ANOTHER EXAMPLELet’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.

Page 96: UX in Automobiles: Balancing effective UI design & driver safety

SEVEN:

WINDSHIELD AS ANOTHER DISPLAY

Page 97: UX in Automobiles: Balancing effective UI design & driver safety
Page 98: UX in Automobiles: Balancing effective UI design & driver safety

98

CARS COMMUNICATING OUTWARD: VEHICLES AS NETWORKED DEVICES IS FURTHER OFF.

Page 99: UX in Automobiles: Balancing effective UI design & driver safety

CARS COMMUNICATING INWARD: THE HUD HAS BEEN AROUND FOR

A WHILE

Page 100: UX in Automobiles: Balancing effective UI design & driver safety

NEAR-FUTURE TECHNOLOGY

Page 101: UX in Automobiles: Balancing effective UI design & driver safety

FURTHER-FUTURE TECHNOLOGY

Page 102: UX in Automobiles: Balancing effective UI design & driver safety

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

Page 103: UX in Automobiles: Balancing effective UI design & driver safety

THANK YOU

@JAKEZ