VISTEON CORPORATION - Master Thesis - Detailed

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

GIANT

Snapshots from

MASTER THESIS Section 1: Project Outcome

4

Section 2: Process Highlights

27

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

2

Section 1

PROJECT OUTCOME Initial Brief

4

Console mounted 14 inch touch display

5

Differentiation the Safe from the Unsafe

6

Suggestions

7

Contextually similar interactions

10

Multitasking

12

Audio Experience

14

Navigation Experience

17

Stop & Go Traffic

20

Traffic Advisor

21

HVAC

23

Volume

25

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

3

Chapter 1 | Introduction

INITIAL BRIEF To design the user experience for a large (approximately 17 inch) centre console display with minimal or no hard controls for a (Rs 15 lakhs & above) car in urban India 2022.

Think of a large Tesla-esque centre console touchscreen in a car in India, & how would the urban India driving context affect its design.

Opportunity: The project provided an opportunity to study the user experience of touchscreens in cars, their benefits and shortcomings, and design the same for urban India. Touchscreens in cars is an emerging trend in the background of rapid innovation in HCI using multi-modal interactions such as multi-touch, gesture & voice.

Fig. 1: Tesla Model S interior with 17inch centre console touch screen display Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Challenge: The opportune project posed a challenge in the form of its requirement of user experience design methodologies & thinking, which were not then a core part of Parishrut’s academic studies at National Institute of Design. It was required of him to learn & adapt along the way to satisfy the needs his graduation project as well as the client’s expectations.

Fig. 2: Urban Indian driving context

4

Chapter 13 | Final Outcome - GIANT

GIANT – Console mounted 14 inch touch display

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

5

Chapter 13 | Final Outcome - GIANT

DIFFERENTIATING THE SAFE FROM THE UNSAFE Unsafe Safe Farther, inconveniently accessible to the driver while driving

Library

Suggestions

Unsafe Browse window

Safe Browse window

Closer, conveniently accessible to the driver at all times

Up Ahead

How can the user be better motivated of what is safe or unsafe to use or indulge in while on the road? The fundamental design of the system ensures not just separation, but aims to communicate the difference between the Safe & Unsafe through frictional UX (a deliberately inconvenient user experience).

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Suggestions further strengthen road safety at the most foundational level of the experience, by making sure the driver finds what he/she is looking for without having to browse through an entire library, driving or not.

6

Chapter 13 | Final Outcome - GIANT

SUGGESTIONS Suggestions bridge the gap between Library & the Driver, by intelligently analysing driver’s personalised history and ‘suggesting’ content that the driver may be looking for. Smartphone connectivity powers driver profile recognition as well as provides contextually augmented user history to power the Suggestions.

Fig. 163: Audio Library

Fig. 164: Audio Suggestions

Suggestions work differently for different applications. For example, in case of Audio applications, Suggestions are made to ensure Serendipity, hence Recently heard songs would show up above Frequently heard songs.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

7

Chapter 13 | Final Outcome - GIANT

…whereas in case of applications like Navigation, the system ‘suggests’ Frequently visited places on the basis of Time & Location. Here the system also accounts for Anomalies, for example, if the driver visits a Departmental Store other than the usual one more than once.

Fig. 165, left to right: Navigation Suggestions Page 1, 2 & 3.

Only 3 pages of Suggestions are shown. Anymore than that would counter the design motivation to limit the browsing to the minimum. Static scrolling (swipe once & the next page snaps into place, no inertia) further keeps manual effort (& hence, manual distraction) to the minimum.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

8

Chapter 13 | Final Outcome - GIANT

Fig. 166: Navigation Home screen with Audio application

The system further ensures safety by making sure information like ETA (while driving), which provokes drivers to go faster (as per observation) is not shown upfront. To ensure navigational awareness, the system shows Distance to Go on top.

Fig. 167: Up Ahead (Turns & Trip Information)

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

9

Chapter 13 | Final Outcome - GIANT

CONTEXTUALLY SIMILAR INTERACTIONS

Fig. 168: Navigation Home Screen

Fig. 169: Music Player Home Screen

The interaction model is similar to that of navigation maps.

Swipe/Flick/Drag to pan the map.

2 finger rotate to rotate the map.

Interaction model for Audio applications, other than Radio: Swipe - horizontally to skip between tracks, Drag to preview next Swipe – vertically to change filter category 2 finger rotate to seek time

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

10

Chapter 13 | Final Outcome - GIANT

Fig. 170: Radio Home Screen

Interaction model for Radio applications: Swipe - horizontally to skip between Stations Swipe – vertically to change filter category 2 finger rotate to seek frequency

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Fig. 171: Manual Frequency setup in Radio

This contextual similarity was designed to reduce the learning curve, given the novel nature of the interaction design which was aimed to reduce visual & manual effort to operate a touch screen interface while driving.

11

Chapter 13 | Final Outcome - GIANT

MULTITASKING

Fig. 172, left to right: Music Player Home Screen with Navigation, Navigation expanded Preview, Navigation Home Screen with Music Player.

The system accommodates 2 applications on top, one prioritised over the other. 2 fully detailed applications would have been too cognitively demanding, hence just one detailed (primary).

The driver can preview more detailed information in the secondary application by a 2 finger, drag across right edge. The same interaction, across a particular threshold, switches the secondary and primary applications.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

12

Chapter 13 | Final Outcome - GIANT

So as to make sure that the driver need not access the application drawers, the design further provides for 3 more preset applications stacked behind the secondary application like a stack of cards. These application ‘cards’ maintain their order, so that the driver can intuitively cycle through them to find a certain application without much distraction.

To cycle through the applications, the interaction is the same as that for switching, albeit across the left edge.

Fig. 173, left to right: Music Player Home Screen, App Selector

A 2 finger long tap on the secondary application reveals all the preset applications as well as the Safe Applications drawer.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

13

Chapter 13 | Final Outcome - GIANT

AUDIO – Maintain continuity of audio experience Selective Skipping provides the driver ability to find a song of his/her liking quickly & avoiding distraction caused while Browsing, by letting skip through songs in different categories. In other words, the driver can skip through all the songs, Favourites as well as Explore Genres right from the Now Playing/Home screen.

Fig. 174, left to right: Selectively skipping through All Songs, through Favourites & exploring Genres.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

14

Chapter 13 | Final Outcome - GIANT

The next step, after having the driver find a song of his/her liking (one that would resonate with his/her current mood) is to extrapolate that experience in the form of a library of similar songs. This is to further deter the user from going into the Browse window, which could be dangerously distractive while driving.

Smart Playlist, powered by song recognition & metadata based search technologies such as those from Gracenote, creates such a playlist of songs available on the currently playing songs.

Automated Smart Playlist creates itself, when a song has not been skipped by the driver for over a minute.

But mood as transient, so what if the driver skips in between an active Smart Playlist? The playlist is reset, till such a time that the driver doesn’t skip a song for over a minute when another Smart Playlist reflecting the driver’s mood is created.

Smart playlist can also be created manually, from the option in the Playlist section.

Fig. 175: Smart Playlist

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

15

Chapter 13 | Final Outcome - GIANT

What if no more ‘similar’ songs can be found on a current source?

In that case, again enabled by Gracenote’s technologies, the system can ‘probe all available audio sources’ for similar audio experiences. The driver can conveniently select one, even from one of the applications available on his/her connected smartphone.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Fig. 176, left to right: Source Probe feature maintaining continuity of audio experience across sources.

16

Chapter 13 | Final Outcome - GIANT

NAVIGATION – Prompt directional & locational awareness.

In case of navigation, the experience is designed for Prompt Directional & Locational Awareness. That starts with giving Traffic Information for route choice, as also given by the Waze Application for Android. This not just makes sure that the driver is able to make the most appropriate choice, but most importantly is aware of the upcoming driving conditions, hence avoiding anxiety and surprise.

To further tackle anxiety, the system shows an estimate as well as current position when the driver comes across heavy traffic.

Fig. 177, left to right: Traffic Info for Route Choice, Traffic Ticker Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

17

Chapter 13 | Final Outcome - GIANT

Fig. 178, left to right: Highlight Turn in Up Ahead (Turns list), Alert for Highlighted Turn upon approach.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Furthermore, the design enables the driver to highlight a particular turn up ahead. This especially helps when on a long trip, wherein most of the route is straightforward except for a few key turns.

So that the driver doesn’t miss such a turn, the system alerts the driver of an approaching highlighted turn in advance.

18

Chapter 13 | Final Outcome - GIANT

And finally, upon reaching the destination, the design informs the driver the direction & commute options to the destination, with an option to send the same to the driver’s connected smartphone. Because in the urban context, there is always a good chance that the driver may have to park further away from the actual destination.

Destination photos as well as contact information is also shown to help the user find, and locate a never visited before destination.

Fig. 179, left to right: Destination Reached window with Destination Pointer.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

19

Chapter 13 | Final Outcome - GIANT

STOP & GO TRAFFIC

Fig. 180, left to right: Facebook in Unsafe Browse window, Instagram ported from connected smarphone.

To help the user deal with stop and go traffic situations, which can give rise to intense emotions of dissatisfaction and anxiety in the driver, the system allows for a controlled indulgence. Available in the Unsafe Browse window are up to 3 preset Unsafe Applications. These may be installed in the system itself, or may be ported/projected from the connected Smartphone.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

20

Chapter 13 | Final Outcome - GIANT

TRAFFIC ADVISOR

Fig. 189, left to right: Traffic Movement alerts in same lane, Free lane on the right.

A traffic advisor stays active in the background, sensing the surrounding vehicles for movement. It’s job is to bridge the awareness gap, while the driver is absorbed in the in-car unsafe applications.

To make sure that the driver doesn’t have to switch between the browsing applications & driving suddenly, the system senses movement of the car just ahead of the one directly in front; if the former moves, the once directly ahead will take a little more time. That will give the driver time to adjust & reacquaint himself.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

21

Chapter 13 | Final Outcome - GIANT

Fig. 190: Unsafe Browse features locked out from use while moving.

This window auto closes also when the user starts driving & continues to driver over a certain speed limit for a couple of minutes, indicating the stop & go traffic as cleared into a longer stretch of driveable road. Otherwise, the window only freezes, allowing the user to access the functions again when he/she stop safely (as judged by the system).

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

22

Chapter 13 | Final Outcome - GIANT

HVAC

Fig. 191, left to right: Passenger/Driver HVAC Temperature & Fan squircle when touched by the driver.

HVAC squircles support 3 functions: Change fan speed or temperature, and set auto on/off. For the former, the driver need only tap on the squircle once. For the former, the driver needs to drag along the respective edge, with a fair level of freedom; on prolonged touch, the system shows the guides to help the driver learn the new interactions.

Parishrut Bhatia, TAD 2013, Graduation project, Visteon corporation, Pune

23

Chapter 13 | Final Outcome - GIANT

Fig. 192, left to right: Increasing Driver HVAC Fan speed, New fan speed set.

Parishrut Bhatia, TAD 2013, Graduation project, Visteon corporation, Pune

After a squircle has been dragged, it comes back to its starting position.

A small timer shows the amount of time a previous or currently set change will take time to affect. This is not just to alleviate the driver’s anxiety related to how soon the climate inside the car will be comfortable, but also informs the driver how the automatic climate system works. For example, a higher fan speed doesn’t always ensure faster cooling, as shown in the increased time to desired climate reflected while changing & afterwards.

24

Chapter 13 | Final Outcome - GIANT

VOLUME Volume squircle functions exactly the same way as HVAC. The vertical axis is for increasing the volume, while dragging to the right opens up the volume mixer, which allows the driver to conveniently achieve the best audio balance towards his/her driving comfort.

Fig. 192, left to right: Volume on touch, Volume mixer

Parishrut Bhatia, TAD 2013, Graduation project, Visteon corporation, Pune

25

Chapter 13 | Final Outcome - GIANT

Parishrut Bhatia, TAD 2013, Graduation project, Visteon corporation, Pune

26

Section 2

PROCESS HIGHLIGHTS Part 1: Laying the Foundations

28

Part 2: Defining the Layout & Interaction

76

Model Part 3: Rest of the Design, 1 step at a time

93

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

27

Part 1

LAYING THE FOUNDATIONS

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

28

Chapter 2

TECHNOLOGY BASICS Contents of this chapter: 1. Display 2. Touch 3. HVAC 4. Audio Entertainment 5. Navigation 6. Internet connectivity in Indian cars 7. Smartphone Connectivity 8. App Integration 9. Smartphone Projection 10. Driver Information & Control 11. Voice Integration

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

29

Chapter 2 | Technology Basics

TOUCH Following are current touch technologies[3] & their applications: Resistive: As of 2010, resistive film represented the most widely used sensing method in the touch panel market. Such panels are called pressure-sensitive or analog-resistive film touch panels.

Capacitive: Analog-Capacitive touch panels represent the second most widely used sensing method after resistive film touch panels. This technology finds most use among smartphones & tablets, & especially so for multi-touch applications.

Infrared optical: These use multiple sensing methods. based on infrared image sensors to sense position through triangulation & works with thick gloves or even hard objects. Volvo’s 2015 XC90 employs this technology for its centre console display.

SAW: Surface acoustic wave touch panels detect the screen position where contact occurs with a finger or other object using the attenuation in ultrasound elastic waves on the surface. Its application is found mostly in ATMs & electric kiosks.

Fig. 12, left to right, top to bottom: Resistive, Capacitive, Infrared Optical & SAW touch panel technologies.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

30

Chapter 2 | Technology Basics

HVAC – Heating, Ventilation and Air-conditioning Commonly known as the ‘AC’ among Indian users, the HVAC system is one of the most important modules in the interior of a modern car, one that directly affects the comfort level of all the occupants. While most cars nowadays come with basic functionalities inbuilt, some of the following advanced features fall into the scope of a 15 lakh plus car in India.

Automatic climate control (ACC): This is a computer controlled system working in sync with sensors around the cabin that maintain a uniform climate (user’s choice) by controlling the air temperature, fan speed & air distribution. The system can be shut off & the above functions controlled individually.

Rear defogger

Automatic defogging is facilitated by use of condensation sensors, provided either A/C or heating is activated. Hyundai Sante Fe currently sold in India features this[4] & can be expected in 2022 cars as well.

Zones: The cabin can be divided into multiple zones with at least temperature, along with fan speed and distribution, can

Common fan speed control

Front defogger

Air recirculation

Temperature knob

Temperature knob

31

Automatic DRIVER ZONE

Automatic PASSENGER ZONE

Push Auto On/Off Push Auto On/Off

Air distribution

Air distribution

Fig. 13: 3-zone HVAC Module functions.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

31

Chapter 2 | Technology Basics

NAVIGATION In-car navigation can be brought into the centre console from 2 sources: 1. Inbuilt navigation with downloadable and upgradeable maps[11], 2. Through smartphone connection, for example, MapMyIndia. This system is available in Tata Motors car models like the Zest[12].

3D maps: Available for most major cities & under continuous rapid development by almost all providers. MapmyIndia’s current implementation & VW Golf R concept from CES 2015 shown respectively.

Fig. 17, left to right, top to bottom: Inbuilt Navigation, Navigation ported through Smartphone Connection, MapMyIndia’s 3D maps, 3D maps in VW Golf R Concept from CES 2015 Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

32

Chapter 3

PRODUCT STUDIES Contents of this chapter: 1. Methodology 2. Tesla – Basic Design 3. Volvo – Basic Design 4. Android – Basic Design 5. Apple Carplay – Basic Design 6. Module specific studies a. HVAC b. Entertainment c. Navigation d. Communications e. App Integration f. Driver Information & Control

g. Others Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

33

Chapter 3 | Product Studies

PRECEDENT – 2012 Tesla Model S

Display Panel: LCD, Capacitive Touch Size: 17” Aspect Ratio: 1:1.65 Pixel Density: 136ppi (1200x1920) Retina Pixel Density at comparable distance: 219ppi (Apple iMac 21.5” with 4096x2340 display)

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

34

Chapter 3 | Product Studies

PRECEDENT – 2015 Volvo XC90

Display Panel: LCD, Infrared Optical Touch Size: 9.7” Aspect Ratio: N.A. Pixel Density: N.A.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

35

Chapter 3 | Product Studies

SPECIAL CASE STUDY 1 – Android Auto

Google worked with government agencies like the National Highway Traffic Safety Administration (NHTSA) to design an interface that follows the best safety practices for computing while driving, and was hence studied as a special case during this project.

It works as a projected interface.

Applications are stored on the connected (wired) smartphone running at least Android 5.0 and data is provided on the go.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

36

Chapter 3 | Product Studies

SPECIAL CASE STUDY 2 – Apple Carplay

Carplay is Apple’s version of a projected smartphone interface for in-car dashboard systems.

It was decided to study it along with Android Auto to better understand their design through comparison.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

37

Chapter 3 | Product Studies

TESLA – Basic Design The basic design consists of a status bar that shows informative shortcuts, along with an application bar which provides one touch access to all applications. An HVAC bar lies on the lower most edge.

Between the Application bar and HVAC bar lies the application space. Up to 2 applications may be opened at once, one on the top half and the other on the lower. The positions can be switched. Each application may be maximised to take up whole of the application space.

Information Architecture Content is shallow, detailed & easy to navigate but too much detail can be confusing & distractive at times.

Interactions

Interactions are all tap based and mostly skeuomorphic in nature, especially the HVAC.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Fig. 25: Tesla’s 17 inch centre console display applications.

38

Chapter 3 | Product Studies

HVAC HVAC in the Tesla is the most familiar version of its industrial counterpart, but with only the manually controllable functions on top, like Temperature, Seat Heating and Defrosting. The rest of the functions are controlled by the auto feature of the HVAC and are recessed in a separate drawer.

Interactions are skeuomorphic.

The one in the Volvo does away with Defrosting controls on the lower, mechanical bar, leaving the digital bar extremely minimal. Each aspect of the HVAC is available in a separate expanding menu.

Notable experiences outside of cars: The Nest thermostat, a popular product in the west and used to regulate home interior environments, informs the user of the amount of time it will take to reach the desired setting. It also guides the user to choose a more environmentally sustainable setting[22].

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Fig. 29, left to right: HVAC bar in Tesla, Auto Settings drawer.

Fig. 30, left to right, top to bottom: Nest Thermostat, Eco augmentation with shown with Time-to-cool, Running status message.

39

Chapter 3 | Product Studies

3.

Fig. 31: HVAC interactions in Volvo XC90’s display

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

40

Chapter 4

CONTEXTUAL STUDIES The purpose here was to understand the context in which such a car with a large centre console display will be driven & the driving habits of the users who will be, while driving in the context of this project, be interacting with the centre console touch display.

Contents of this chapter: 1. Urban India 2. Urban infrastructure 3. Personal Mobility in Urban India 4. Driving Habits

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

41

Chapter 4 | Contextual Studies

DRIVING HABITS The following insights are sourced from Ford’s Driving Habits Survey[30] which, in India, took inputs from over 1000 drivers – both male & female – in the largest urban cities vis a vis New Delhi, Mumbai, Bangalore, Chennai, Chandigarh & Ahmedabad.

If one were to consider 6 day work weeks, then 85% spend at least 50 minutes, 49% spend at least 2 hours a day & 14% spend at least 3.3 hours behind the wheel every day.

A majority of respondents in all regions cited accidents & congested traffic as anxiety drivers.

32% Indians are stressed about hitting a pedestrian.

More than 50% go for recreational trips more than once a month. Around 28% do the same at least once a month[31].

Fig. 57, left to right, top to bottom: Time spent driving, Accident anxiety, Stressful driving context

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

42

Chapter 5

USER STUDY Contents of this chapter: 1. Methodology 2. Tesla user Survey 3. Prospective Indian Customer Interviews 4. Personas 5. Scenarios & Observations

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

43

Chapter 5 | User Study

TESLA USER SURVEY [33][34] “If it were 1993 and it had Tetris, it might be a problem. So far, not so much.”

“In rush hour traffic jams, I've been known to be distracted by news sites on the screen.”

“They should make Angry Birds for my Model S. I should be able to flick them from the speedo to the center console screen!”

“But anything can become a distraction if you let it. There is no reason on earth why you should be searching Slacker while barrelling down the freeway at 75 MPH. Take an exist and park your car if you want to do that.”

Insight: While one driver may not be distracted owing to the lack of what attracts him most (Tetris), another may find just what he likes the most (news). Distraction is a variable of not just personal responsibility, but also content sensitization.

“There was a learning curve with all the controls as there is with any new car, but after a couple of days, I find the lack of clutter refreshing.”

“Just travelled and rented a Ford. Had dozens of buttons and switches with very cryptic labels . . . no idea what their functions were. That was distracting . . . made me really appreciate the GUI in my Tesla and the speed and ease I control the functions of the car.”

“I also find the display much more readable (maybe its my older eyes) but with this like the map, its much more readable than the 7" display in my Jeep, so I spend less time looking at it.”

“The size of the touchscreen aids readability and it's much easier to parse on the fly. Very little hunt and peck, as there is on my ICE.” “The only time it is distracting is when the text is too small, the icon is not distinctive enough or the target isn't large enough.”

“I have to put on my reading glasses and lean closer to the buttons to find the one I need from the hundreds of buttons.”

Insight:

Insight:

While hard controls certainly make a better use of muscle memory & are easier to find, users find the lack of clutter offered by a touch interface a lot more easier to live with, especially since the bombardment of complex new systems.

A larger screen makes information easier to parse when the information is designed not to be in excess, but just to be more readable & efficient. The amount of (glance) time taken to read the information reduces, increasing safety.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

44

Chapter 5 | User Study

PROSPECTIVE INDIAN CUSTOMERS INTERVIEWS Interview Guide :

Checklist ( Inside + Outside the car ):

What is important for the project?

• Activities performed just before and after driving.

A holistic scenario of experiences within or connected to the car, with a focus on technology and how it augments the user’s lifestyle.

Topics to address:

• Applications/Information that concern them the most. What is easy and what is hard to operate/access, especially when driving. Mobile devices that they own and what do they use it for.

Strategy: • If the user is extremely passionate about cars, start from there. Else start from experiences outside the car.

• Experiences first. Demographic details later.

Starters: • How has your day been so far?

• What is a usual day in their life like?

• Mobile devices and in-car technology they want to own but is not available.

• What personal or in-car devices do they own?

• Mobile devices and in-car technology they plan to own in the future.

• I would normally ask you about

• What other options were considered at the time of the car’s purchase?

• Daily life scenario.

• What are their plans/thoughts about the future purchases?

• What is their satisfaction level in terms of what is available in the market versus what they expect?

• Where do they think in-car technology could be improved?

• Comparison with hard controls versus touch.

• Phone psychology. E.g. how do they feel if it is not accessible even if completely synced.

• Age, Name, Occupation, Ownership.

• What ‘s on your memo for today?

• your car first, but tell me what cars your friends drive?

• Tell me about the time you had the most fun driving your car?

• Of all the technologies, devices you own, which one is the most dear to you?

• What device do you have with you right now?

Approach:

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

45

Chapter 5 | User Study

Interview Insights The respondents were asked what do they check on their phones just after waking up & just before sleeping so as to understand their content consumption habits.

“Emails, reports, and research.”

“After I shifted into my new home, I’ve been making some furniture on my own. I check Pinterest for ideas, then start on my own.”

“I like to keep in touch with my investments at all times.”

“When I’m home, my iPhone becomes my office…”

Content varies from person to person, and from productivity to pure exciting randomness, but there is always that one or 2 things everyone cares about.

The respondents were asked about where they like to keep their phones while they’re driving to understand their usage habits.

The respondents were asked about how could the in-car infotainment systems could be improved.

“If my girlfriend calls me while I’m travelling with family, I need to pick up my phone immediately & take the call.”

“The CarPlay is certainly easier to use in the car than any other touchscreen, but it’s just a modified interface with a few bigger targets. Not so intuitive.“

“I put my phone on the Stamina Mode, which cuts off Wi-Fi and Data network unless the phone is in my hand and I tap on it. That keeps the distracting ping pong of notifications away while I’m driving.”

“If I’m in my car at 11am on a weekday morning, with my current location being home coordinates, why can’t it route to the office on its own? Where’s the intelligence?”

“If I get a call from the hospital I’m supposed to answer it. And I never ignore a call from my parents.”

“There is not one integrated system that understands the car as well as and as much as it understands yourself.”

Even though everyone might understand that using phones is unsafe while driving, there is always a priority higher than one’s own life. Few others are able to smartly deal with it.

Intelligent, and an intuitive system that goes beyond just an adaptive mobile interface in the car, is customizable and which understands both the car and the driver equally.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

46

Chapter 5 | User Study

PERSONAS

Jagpreet Singh, 24 M – 2° PERSONA

Naveen Chitkara, 29 M

Naman Arora, 34 M

Programmer

Entrepreneur

Surgeon

Tech Aware, Experiencer

Compassionate, Innovator

Devoted, Thinker

“What we have in our pockets today is as powerful as the laptops that we owned 2 years ago. If manufacturers can cram so much high performance electronics in such a small space, I think we are missing out a lot in the cars given how much space is available there.”

“A decent touch screen car stereo costs as much as a flagship smartphone, but does only half as much and weighs 5-6 kgs!”

“My phone is always on my mind. If I get a call from the hospital I’m supposed to answer it. And I never ignore a call from my parent. For the rest, I answer and say that I’m driving will call up later.”

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

47

Chapter 5 | User Study

Supriya was selected as the primary persona, because will look for personal satisfaction in the product, which must offer her easy to understand, intelligent functionality in a good looking package.

Driving a car is an essential part of her life; she does it as much for commuting as for recreation. Her driving scenarios are varied & hence offer a lot of consideration for design.

Raman Sharma, 39 M MNC Executive Devoted, Thinker “Lets say you are starting from your home at 11 in the morning, which means you’re heading for the office. Why do you have to always punch the entire address and move forward from there?”

Supriya Mallik, 24 F – 1° PERSONA (the design must satisfy her, above all) Apparel Designer for a leading apparel sourcing solutions provider.

Passionate, Achiever “I always look forward to the driving part of the day and I love the lone time I have inside. I get to think about a lot of stuff, listen to any kind of music that I like. It’s almost meditative.”

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Jagreet was selected as the secondary persona, because he will be the point of influence for a lot many who will be seeking his advice. He does not need to drive as much as Supriya nor is he as excited about it, but he is very critical, knowledgeable.

Anything that is able to excite and satisfy them both will find adoption in most others as well.

More about Supriya on the following page…

48

Chapter 5 | User Study

SCENARIOS & OBSERVATIONS The following scenarios were made, with variations to include most common life scenarios covering important bits of the automotive experience in the day to day life of the primary persona.

• Home to office, every weekday.

• Meeting her parents for dinner.

• Puncture on the way back from work.

• Dropping off the car for service.

• Meeting her friends on the weekend.

• Weekend away with parents.

• Driving with friends on the weekend.

• Getting lost among the wilderness.

• Meeting her parents for dinner.

• Dropping off the car for service.

• Weekend away with parents.

One of the scenarios is shown, from Home to office, every weekday, is shown here…

• Getting lost among the wilderness.

One of the scenarios is shown, from Home to office, every weekday, is shown here…

Fig. 59: One of the many scenarios visualized.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

49

Chapter 5 | User Study

SCENARIO OBSERVATIONS – In General The driver’s application level usage patterns show a preference for a limited number of applications. For most part of the driving, she is multitasking between only 2 applications (Navigation & Media).

Other applications like communications become part of her drive only as the driving context varies from the usual scenarios.

One can also notice that her driving pattern is full of peaks & only some plateaus. There is a lot of acceleration to & deceleration from high speeds; she likes the excitement of it. Such a driving behaviour could lead to a dangerous, even life-threatening situation through even a little bit of distraction.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

50

Chapter 5 | User Study

Starting to Drive Control & HVAC are the most used functions when starting up.

Depending on the context, the driver might like to fire up the music before even

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

51

Chapter 5 | User Study

High-speed driving ( with rapid acceleration & deceleration) Communications over call or messages can cut into other more driving relevant notifications like those from the navigation system regarding directions or traffic updates.

Resuming the driver’s usual applications after a call.

How much detail should be shown from the user’s communication logs while driving?

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

52

Chapter 6

ERGONOMIC STUDIES Contents of this chapter: 1. Screen size & Aspect ratio 2. Touch screen operation using nondominant hand

3. Effects of display position of a visual invehicle task on simulated driving 4. NHTSA guidelines distraction

on

visual-manual

5. Cognitive Distraction

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

53

Chapter 6 | Ergonomic Studies

SCREEN SIZE & ASPECT RATIO Screen dummies were made for testing in a the following sizes: 15.6” & 17”, 21:9 Ultra Wide 15.6” & 17”, 16:9 Wide 15.6” & 17”, 4:3 15.6”, 1:1 Square

How much of each would be accessible to a 5th percentile woman was tested by overlaying each one over the centre console of a sedan car, in both vertical & horizontal orientations.

The findings were as follows: • The ergonomic study started with some dummy screen in different aspect ratios for 15.6” & 17” sizes to study the baseline accessibility for a 5th percentile female driver.

Fig. 60: Ergonomic reach study.

• 21:9 & 1:1 screens were found to be too extreme; the former especially so owing to its lower left corner intruding into the passenger’s knee room.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

54

Chapter 6 | Ergonomic Studies

TOUCH SCREEN OPERATION USING NON-DOMINANT HAND [36] The aim of this study was to examine the differences of operability between dominant hand and non-dominant hand in car driving context, especially in operating of touch screen of car navigation system.

In the study, each participant was set a lanekeeping task using driving simulator as the primary task. Each participant was demanded to keep 80kmph while maintaining the lane on an oval course.

During the task, each participant had to perform each of the following additional tasks: • To find the final destination using text entry (tap) as the first task; • then zooming into it from a default screen that showed the whole of Japan, using double tap as the second task; • & using pinch as the third task.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Fig. 62: Study setup, Interactions studied.

55

Chapter 6 | Ergonomic Studies

EFFECTS OF DISPLAY POSITION ON VISUAL IN-CAR TASKS ON SIMULATED DRIVING The aim of the study was to find out the effect of location and eccentricity of controlpanel displays on driving performance in relation to different levels of mental workload.

Secondary Task

Participants were seated in the mock-up of a real car and performed simulated driving on a computerized road scene that was projected onto a screen in front of the windshield.

The primary task was to keep the car in the correct lane with the steering wheel and to react to a red light by pushing the brake pedal.

The secondary task was projected onto a display at one of the seven different locations in the cockpit and varied in task load.

Two different driving conditions were chosen as follows: Primary Task Fig. 64: Placements of control panel display.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

56

Chapter 6 | Ergonomic Studies

NHTSA GUIDELINES ON VISUAL-MANUAL DISTRACTION [37] • The performance of some secondary tasks using electronic devices, like route guidance, can reduce distraction that would otherwise be high in case of using paper maps, etc..

• Interfaces such as gestures, finger drawn characters & touch screen keyboards are not recommended for manual text entry.

• The display of scrolling (either horizontally or vertically) text that is moving at a pace not controlled by the drive is not recommended.

• Static graphical & photographic images displayed for the purpose of aiding a driver to efficiently make a selection in the context of a non-driving-related task (e.g.., music) is acceptable if the image automatically extinguishes from the display upon completion of the task.

Fig. 66, left to right, top to bottom: BWM iDrive rotary selector for text input, Handwriting recognition on Volvo XC90, active typing suggestion in Android Auto

• If appropriate, these images may be presented along with short text descriptions that conform to the guidelines.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

57

Chapter 6 | Ergonomic Studies

COGNITIVE DISTRACTION The goal of the current research was to establish a systematic framework for measuring and understanding cognitive distraction in the vehicle.

The research findings were as follows: Some activities, such as listening to the radio or a book on tape, are not very distracting.

Others, such as conversing with a passenger or talking on a hand-held or hands-free cell phone, are associated with moderate/significant increases in cognitive distraction.

Finally, there are in-vehicle activities, such as using a speech-to-text system to send and receive text or e-mail messages, which produced a relatively high level of cognitive distraction.

Fig. 68, left to right, top to bottom: Activities studied to understand cognitive distraction risks.

The speech-to-text based system that was evaluated in this research, while being a perfect fidelity speech-recognition system unlike current technology was associated with a Category-3 level of cognitive Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

58

Chapter 7

REVISED BRIEF Contents of this chapter: 1. Clustered Insights 2. Keyword Ideations 3. Design theme & Revised Brief 4. Mood board

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

59

Chapter 7 | Revised Brief

CLUSTERED INSIGHTS

Insights were clustered on the basis of their relativity with each other following which the clusters were linked linearly starting from the highest level.

The clustered insights are individually presented & the high level understanding from each, spatially documented as per the above linking, is presented in the following pages.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Fig. 70: Clustered Insights

60

Chapter 7 | Revised Brief

KEYWORD IDEATIONS The first set of keywords were extracted from the clustered insights.

5 initial keywords, vis a vis, Convenient, Meaningful, Adaptable, Safe, Emotional were obtained, around which further ideation was done since Convenient related to Ease of Use but not Safety & Meaningful did not have any meaning on its own.

Together (Convenient, Meaningful & Adaptable) they also didn’t relate to Emotional.

Convenient, Contextual, Customizable were also striked out on the same lines.

Fig. 71, left to right: Keyword Ideations

The final 3 keywords finally selected were: Efficient, Adaptable & Uplifting.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

61

Chapter 7 | Revised Brief

DESIGN THEME & REVISED BRIEF Efficient. Adaptable. Uplifting.

Fig. 72: Keyword Validation

Effective must be the nature of a novel system born out of complexity & presented to a mostly novice user, by focussing on strong, basic functionality & ease of learning through contextual patterns; but Efficient refers to a system that does so while taking such factors into account such as Distraction & Comfort.

The system must also be Adaptable to the user as well as in various urban Indian driving scenarios; scenarios that present Safety & Emotion as both the challenge & an opportunity.

The user should be/feel Uplifted in each scenario, firstly in the sense of the user’s attention on open roads where safety matters the most, through quick, Effective interactions. And secondly in the sense of uplifting his/her emotional experience as well as satisfaction.

The theme was double-checked by running it through peers from various backgrounds.

Their visualisations upon hearing the 3 words together were recorded & found to be relating to, directly or indirectly, the high level understanding obtained from the clustered insights.

Revised Brief: To design such a user experience for a large (approximately 17 inch) centre console display with minimal or no hard controls for a (Rs. 15 lakhs & above) car in urban India 2022 that is Efficient, Adaptable & Uplifting.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

62

Chapter 7 | Revised Brief

MOODBOARD

Reflects upon the costs against which the experience must be effective, henceforth efficient. Costs such as Manual Distraction, Visual Distraction, Driver Comfort, technicalities such as Downward Viewing

Angle & so on, in a driving context where infrastructure is imperfect & touch display will be operated with the driver’s nondominant hand since we drive on the left side of the road.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Reflects upon how we manage multiple ‘cards’ at the same time, in a game strongly defined by the context (the cards held by the opposite player & the cards in between); as well as activities not directly relevant to the

63

Chapter 9

INTERACTION DESIGN FOUNDATIONS Contents of this chapter: 1. Features & Functional Requirements 2. Information architecture 3. Logic flowcharts

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

64

Chapter 9 | Interaction Design Fundamentals

FEATURES & FUNCTIONAL REQUIREMENTS Before designing Information Architecture & User Flows, it was required to understand & specify the functional requirements of the system.

Review of available functions: First a review of functional requirements defined for previous projects by the sponsor was done.

Looking through the list of functions, and understanding which one would be a Display-only-function, Control-only-function, or both Display-and-Control-function helped build a mental vocabulary that would help in building an architecture later.

Fig. 76: Collecting functional requirements.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

65

Chapter 9 | Interaction Design Fundamentals

What new, what better?

To come up with new features that would be relevant for this brief, & specify their functional requirements, the various aspects of the experience were brainstormed upon under application & scenario specific headings.

Selected features are presented in the following pages.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

66

Chapter 9 | Interaction Design Fundamentals

GENERAL FEATURES 2 Apps Up-Front, Quick Multitasking

1.

The system should provide for 2, user selectable preset apps for display up front.

In case of more presets, Audio & Navigation may be defined as default presets.

Differentiate the Unsafe with Friction Features unsafe to use while driving should be clearly differentiated from those features which are safe to use while driving. Additionally, Friction must be deliberately designed towards the use of unsafe features to deter the driver from indulging in them when in appropriate.

2.

Quick-Switching between unsafe apps Unsafe apps must be quick to switch between one another so that the user can make the best of his time in stop-n-go scenarios.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

67

Chapter 9 | Interaction Design Fundamentals

AUDIO - Maintain continuity of audio experience Listening ‘Suggestions’ Source-Connect While the user should be able to switch between audio sources swiftly, the system can afford to maintain the continuity of the audio experience through technologies, such as Gracenote’s, which can recognize audio playing on one source & search for similar experiences on the other.

So that the user doesn’t need to browse through his entire collection & risk his/her safety, the system can suggest listening experiences based on his/her history & contextual analysis.

For e.g., it may suggest ‘Rock Music’ in the morning while on the way to office, but ‘Country Music’ if it’s a weekend.

+ Selective Skip The user may still want to listen to songs randomly. Now a music collection may contain 1000s of songs, but only a few 100s of Albums & Artists, & much less Genres. If the users were able to skip songs through one Genre after another, they’d probably find a song that’d go with their current mood much faster & without having to browse through their entire collection.

+ Smart Playlisting Any form of suggestion or browsing should ultimately lead to a playlist of songs which resonate with the current mood of the user. This can be established through industry-wide employed technologies, such as Gracenote’s, which can create such smart playlists.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

68

Chapter 9 | Interaction Design Fundamentals

SMARTPHONE – Make the user surrender it, without feeling so Automatic, Smartphone based, Hands-free, User Authentication The user’s smartphone being the most personal & always-on-him/her device, it can be used to automatically, authenticate the user’s presence inside the car.

+ Activity Sync

+ Automatic Preferences Setup

+ Contextual Augmentation

Activities active just before unlocking the car, such as Telephony, Notification browsing, Music, can be recognized & synced to the in-car system, wherein it could be brought up as soon as the display comes on & the continuity established.

Post user authentication, automatic, preferential setup of basic system functionalities can leave some essential time for setting up audio & route guidance applications before starting to drive.

The smartphone can also store these preferences for auto-setup in another car.

Smartphone assistants like Siri & Google Now can be requested to push contextual intelligence to different applications, such as destinations. This can speed up initial user interactions to focus on the ultimate goal, that is Directions, & so on.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

69

Chapter 9 | Interaction Design Fundamentals

INFORMATION ARCHITECTURE To design the information architecture for this project, the revised design brief was referred to & thereafter designed for the following main requirements: • Differentiate Safe to use features from the Unsafe.

• Quick, effective interactions with a focus on the objective, such as Playlists, Directional Guidance, & so on.

• Design for user to user adaptability.

• Identify patterns among interactions between applications.

functional different

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

70

Chapter 9 | Interaction Design Fundamentals

ITERATION 3 – Recapturing the experience on a functional level

The third & final iteration was performed with the brainstorms, persona & mood board in the background. The focus was on capturing the desired experience in how the functions (on Post-Its) would be

organized & ordered. Strong patterns were sought among applications. Patterns found for applications were subsequently adapted or modified for other parts of the system such as comfort & connectivity.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

71

The final step towards the information architecture was defining the top level experience & structure.

SAFE, ALWAYS ON Features which must always be around, & which are safe to use.

SAFE, SWITCHABLE

Home

Features which are necessary but secondary to the primary task of driving the car & are safe to use.

UNSAFE, SWITCHABLE Features which are not safe for use while driving, but are necessary either from technical concerns (System) or user’s concerns (Productivity & Entertainment)

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

72

Chapter 9 | Interaction Design Fundamentals

FINAL INFORMATION ARCHITECTURE – Top level Up Front

1 Interaction Away

2 Interaction Away

1.1 Driver Notifications 1.2 Phone Notifications 1.3 Tell-Tale Shortcuts 1.4 Driver Notifications & Controls 1.4.1 Controls

1.5 HVAC Primary Controls & Information

1.4.2 Dismissed Driver Notifications

1.4.3 Quick Links

1.6.2 Priority Communications

1.6.3 Link to Unsafe Options (Full Featured Telephony)

1.5.1 Secondary Controls

1.6 Telephony & Network Information

1 HOME

1.6.1 Emergency Communications

Safe, Always on Safe, Switchable

1.7 Primary Application – Preset 1 1.7.1 Full Featured Interface

1.7.2 Exception Handling

1.7.3 List

1.7.4 Browse

1.8 Secondary Application – Preset 2 1.8.1 Essential Interface

1.8.2 Exception Handling

1.8.3 List

1.8.4 Background Application (Presets 3,4,5)

1.7.4.1 Link to Unsafe Options (Full Featured Browsing)

Unsafe, Switchable

1.9 Connected & System Applications 1.9.1 Application Interface/Space

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

1.9.2 Browse

1.9.3 Connected User & Device

1.9.4 System

73

Chapter 9 | Interaction Design Fundamentals

Structural patterns

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

74

Chapter 9 | Interaction Design Fundamentals

LOGIC FLOWCHARTS Basic Operation WhileBasic information architecture defined how Operation Start all the functions were organized in the system, Logic Flow Charts were explored to understand how the user will journey through the information to complete a task.

Both of these together would define the fundamental experience.

For example, the following features of the audio experience, discussed during the scenario study, were explored in terms of the information flow.

Start

#Safe to use while driving

#Safe to use #UnSafe to use while driving while driving

Screen

Start/ System End Decision

Screen System Process

#UnSafe to use while driving

Skip Next/Previous

Skip Next/Previous

Now Playing

Now Playing

Select source

Start/ End

Voice Search

• Basic operation (Suggestions): How is the basic need of differentiating the safe features from the unsafe features, & Audio Suggestions How do I help the user find what he suggestions, in #1. the basic #1. How do I help thereflected user find what he would like to listen to without needing to would like to listen to without needing to access the complete library? operation of library? the system? access the complete

No Select source

More

#2. What happens after the userSelected selects an Audio #2. What happens afterMaybe the user selects an • Source Probe: one source audio?

Must hecannot keep skipping or browsing audio? Must he keep skipping or browsingthereafter? ensure thereafter?that the user’s current mood is satisfied through relevant audio. This feature ensures that similar audio can be conveniently found on other sources. Audio Selected

No Voice Search

Audio Suggestions Safe?

Audio Selected

More

Audio LibrarySafe? & Audio Settings

Audio Selected

Audio Library & Audio Settings

Audio Selected

Audio Selected

Fig. 77: Audio suggestions for safety.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

75

System Decision

Part 2

DEFINING THE LAYOUT & INTERACTION MODEL

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

76

Chapter 10

LAYOUT & INTERACTION MODEL IDEATION Contents of this chapter: 1. Layout – Stage 1

2. Interaction Model – Inspiration 3. Interaction Model – Part 1, HVAC 4. Interaction Model – Part 2, Primary App, Music 5. Interaction Model – Part 3, Secondary App 6. Interaction Model – Part 4, Tertiary App 7. Interaction Model – Final

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

77

Chapter 10 | Layout & Interaction Model Ideation

LAYOUT – Ideation While ideating for the layout, following were some of the floating concerns on my mind: • Space for 2 apps & how they relate to each other as well as the user.

• HVAC – Placement of driver & passenger controls relative to driver & passenger respectively, & relative to each other.

• Placement of related information together, like Driver Information and Driver Controls • How placement closer to the edges & corners, or away from them would impact the experience.

• Differentiating Safe from Unsafe • Not requiring to look at the screen to access most used and/or critical information

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

78

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

79

Chapter 10 | Layout & Interaction Model Ideation

INTERACTION MODEL - Inspiration Most touch display systems in cars have “tap” as the dominant interaction.

A tap on a touch screen isn’t as efficient as a swipe, as we found in during the research.

Moreover, all interactions with a touch screen require some amount of visual attention which would not be too safe while driving. As opposed to physical controls, muscle memory would allow the user to access them without much visual guidance.

Fig. 79, left to right, top to bottom: Too many tap interactions, Laptop touchpad, Swipe/Flick interaction.

So I wanted to base the interaction model on a touch interaction that can be performed with less visual distraction and with gross gestures like swipe.

The most relevant inspiration seemed to be that of a (laptop) touchpad. We perform gross gestures like swipe, that don’t always have a definite starting point. Some gross gestures employ the edge, for example, swiping along or across it.

And most importantly, we perform all these interactions without taking our eyes off the context, the screen.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

80

Chapter 10 | Layout & Interaction Model Ideation

The display in the scope of this project is much larger than the usual touchpad. How can we translate the same kind of interactions to such a display?

At first, I could imagine having separate areas on the screen, each of which would work as a separate touchpad for a different set of related functions.

Moreover, these areas would be sufficiently sized and differentiated, so that in the course of his/her interactions with it over a period of time, muscle memory could guide his/her hand to the respective area to perform a function. Use of muscle memory in this way, could reduce visual distraction significantly.

So then, how would functions be mapped to such gross gestures like swipe? To understand the same, I decided to tackle 3 main aspects, one by one, as follows.

Fig. 80, left to right, top to bottom: A large touchscreen with many touchpad like sections.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

81

Chapter 10 | Layout & Interaction Model Ideation

INTERACTION MODEL – Part 1, HVAC The concerns for the HVAC were as follows: • How not to disturb the basic layout concept beyond the displacement of the lower right content (networking/Phone) as well as focus on the experience of dialling down the temperature & increasing the fan speed.

• How to map functions to gross gestures like swipe?

• How can the user know where to touch on the screen to adjust HVAC settings, without having to look at the screen?

• Differentiating Driver and Passenger HVAC controls so that the driver can access the desired ones without much visual distraction.

• Which functions can be prioritised, with respect to specific Indian needs, & which ones can be recessed?

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

82

Chapter 10 | Layout & Interaction Model Ideation

Could it be possible to interact with both Fan Speed & Temperature from the same touch point? Perhaps, if the user could interact with one by swiping on a vertical axis, and with temperature on the horizontal axis?

With that part decided, it was time to see where the rest of the functions would be shown, by sorting & grouping them.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Fig. 81: Prioritising HVAC functions.

83

Chapter 10 | Layout & Interaction Model Ideation

Only the functions on the first level would be available to the user, while for the rest would be recessed in a drawer while showing status messages on top.

I decided to stack the controls on the lower left side, with the driver side controls in the middle & within comfortable access to the driver.

The passenger side controls would be farther away, still comfortably accessible.

This way, the lower right corner could be left open to explore Connectivity options as sketched in the layout idea.

Fig. 82, left to right: HVAC options 1,2 (selected) & 3.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

84

Chapter 10 | Layout & Interaction Model Ideation

INTERACTION MODEL – Part 2, Primary App, MUSIC For the Music applications, I considered two different models for reference.

DJ’s context, where it’s more about resonating with the mood of the listeners.

The first one was the conventional model found in our personal music devices, wherein we skip between tracks.

And I felt that the music experience inside the car is closer to the user trying to establish a mood for the drive, that continues through the entire duration.

The second is the turntable, especially in the

Towards that goal, the first and foremost thing is to assist the user to find the song of his liking, or one that would resonate with his mood, as quickly as possible, so that he doesn’t need to ‘Browse’ for it and risk getting too distracted.

Fig. 83, left to right, top to bottom: Conventional audio interactions, Pacemaker’s DJ interactions Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

85

Chapter 10 | Layout & Interaction Model Ideation

Music App active, random titles playing

Selective Skip + Selective Skip & Browsing:

Start/ End

Selective Browsing

During the flow exploration, I Figured that one of the ways make sure that the user is not too distracted, visually or manually, is to allow him/her to skip through songs through the entire collection selectively.

System Decision

System Process

Skip Next/ Previous wthin selected Category

Now Playing

Select Category (Title, by Default) Set Album as current Category

What that means is that instead of skipping songs randomly, as it usually happens, the user can skip songs through albums, artists and genres selectively. For example, skipping #Skipping songs through different categories from through artists would mean that the next Now Playing screen song would play from any of the other #Browsing artists except the one that is playing rightCollection through Suggestions for different Categories now.

That would ensure that the user goes through multiple kind of ‘moods’ using a simple function as skip, increasing the probability of him/her finding a song that resonates with his/her mood without needing to ‘Browse’.

Screen

Set Artist as current Category

Set Genre current Category

Set Title as current Category

Browse Reset Queue, Load songs filtered by Category into Queue

Load Suggestions for selected Category

Set Album as current Category

Set Artist as current Category

Set Genre current Category

Set Title as current Category

Voice Search

Audio Suggestions

Select Category (Title, by Default)

Select a song, or all songs under a category

Reset Queue, Load new songs according to selection

Songs according to the user s liking playing, without having to browse the entire collection.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Fig. 84: Selective Skipping

86

Chapter 10 | Layout & Interaction Model Ideation

Here is when I started sketching to realise the UI that the user would actually interact with.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

87

Chapter 10 | Layout & Interaction Model Ideation

Going forward with option 2, as it presented the opportunity to realise contextual similarity with Navigation/Maps application that would also be a part of the system.

That means using swipe gestures in 2 dimensions; single finger swipes to pan, 2 finger rotate, and pinch to zoom in and out.

So the user could skip tracks by swiping leftright, and change the category through which he was skipping (through songs list, artists, albums or genres) by swiping updown.

He/she could seek by performing a two finger rotate.

The user could open the sources window by pinching to zoom, which would work as a shortcut along with a redundant tap to open button.

And all of these functions would work by performing the respective interactions anywhere on the screen, just like in a Navigation application like Google Maps.

Repeat, Shuffle, Playlist & Browse, could be

Fig. 85: Visualizing the music application.

the tap buttons. Playlist & Browse could probably also be accessed by swiping across the left edge.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

88

Chapter 10 | Layout & Interaction Model Ideation

Note: Telephony is visible on the lower bar along with HVAC & volume because while ideating, I felt that it be would be relevant to put it along with HVAC and Volume as all of them are essential to the ‘in-car comfort’ of the driver.

Fig. 87: Final visualization with Volume.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

89

Chapter 10 | Layout & Interaction Model Ideation

INTERACTION MODEL – Part 3, Secondary App This exploration defined the quintessential transition levels taking into account both the driving condition and user.

Fig. 89: Final transitions between primary and secondary applications.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

90

Chapter 10 | Layout & Interaction Model Ideation

INTERACTION MODEL – Final Basic interactions: 1. Large spaces & Medium spaces. Single finger, swipe interactions that must start within the space but can end anywhere.

1.

1.

2. Small spaces. Single finger, swipe interactions mapped to 2 different functions on 2 different axis. The space moves along the finger during the interaction, & moves back to its anchored location afterwards.

3. Conventional tap buttons. They can exist on their own. They can be integrated with the small spaces, such that the whole space also acts as a tap button.

They can be places in certain strategic locations in the large spaces.

3.

2.

3.

1. Single tap & Long tap to be used.

Fig. 93: Main interactions to control functions.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

91

Chapter 10 | Layout & Interaction Model Ideation

Switching between applications: 1. Double finger swipe. Starts anywhere within the space that needs to be expanded. When the finger reaches the edge along the swipe, the edge moves along. a. If the edge moves beyond the threshold, the transition is permanent. b. If the edge doesn’t move beyond the threshold when the user releases it, it goes back to its initial position.

This is used to preview.

1b. Threshold`

Fig. 94: Interactions to switch between primary & secondary applications, and to access Browse.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

92

Part 3

REST OF THE DESIGN, 1 STEP AT A TIME

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

93

Chapter 11

INTERACTION DESIGN Contents of this chapter: 1. Layout – Stage 2 2. HVAC – Stage 2 3. Primary App – Home Pages 4. Browse & List – Music 5. Browse & List – Navigation, Browsing Destinations 6. Browse & List – Navigation, Route guidance active 7. Browse & List – Navigation, Destination reached 8. Browse & List – Phone 9. Driver Notifications & Control 10. Voice & Search

11. Stop & Go traffic Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

94

Chapter 11 | Interaction Design

LAYOUT – Stage 2 In this stage, the focus was to finalise the layout. The primary concern here was to make sure that the basic content is logically organized & is convenient to access. Over that, it was important to make sure that safe & unsafe information is separated, that the design signifies which information is unsafe to access while driving.

06:33 PM

In Option 2, Browse is accessed from the left side, whereas List is accessed from the right side. They could both be accessed through a single finger swipe across the edge, as well as their respective buttons (for redundancy, & for starters).

Driver Shortcuts

06:33 PM

MONDAY November 2

Driver Shortcuts

List

List Item

Secondary App Space

Browse

HVAC PrimaryFunction

Driver Zone: Temperature & Fan

HVAC Secondary Function Status

HVAC Primary Function

List Item

Optional Function

List Item

Optional Function

List Item

Optional Function

List Item

Optional Function

Quick Settings

Browse

Primary App Space

Primary App Space

Passenger Zone: Temperature & Fan

HVAC PrimaryFunction

Passenger Zone: Temperature & Fan

Volume

HVAC Secondary Function Status

List

List Item

Secondary App Space

How are Browse & List organized?

In Option 1, they are both organized on (& hence, accessed from) the right side. Maybe by tapping on their specific buttons. Maybe one of them could be accessed by a single finger swipe across edge. Maybe both could be accessed by a swipe across edge, one with a single finger swipe & the other with a double finger swipe.

MONDAY November 2

Driver Zone: Temperature & Fan

HVAC Secondary Function Status

Phone Status

HVAC PrimaryFunction

Volume

HVAC Secondary Function Status

Phone Status

Fig. 95, left to right: Home Page & Safe Browse Option 1.

Fig. 96, left to right: Home Page & Safe Browse Option 2 (Selected).

06:33 PM

MONDAY November 2

Driver Shortcuts

06:33 PM

MONDAY November 2

Driver Shortcuts

#Imagine browsing destination options, which could show up alongside on the map.

List Item #In this case, the Secondary App maintains visual presence so that any important information is not missed out.

Secondary App Space

#This circle in the Primary App Space represents the main visual/ Primary App Space manual features of the app.

Optional Function

Browse

HVAC PrimaryFunction

HVAC Secondary Function Status

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

List Item Optional Function

List Item Optional Function

#However, the Secondary App is offset towards the (unsafe, inconvenient) side so as to denote that this is not the optimum state for Optional driving.

Function

List Item Optional Function

Optional left Function

Optional Function

Volume

Secondary App Space

#Hit the plus icon for full featured browsing.

HVAC PrimaryFunction

HVAC Secondary Function Status

Driver Zone: Temperature & Fan

#This circle in the Primary App Space maintains its visual presence.

List Item

Optional Function

List Item

#List & related Optional Functions hide from view here, leaving only the most essential functions.

List Item

List

Passenger Zone: Temperature & Fan

Primary App Space

Quick Settings

Volume

HVAC PrimaryFunction

HVAC Secondary Function Status

Passenger Zone: Temperature & Fan

HVAC PrimaryFunction

Driver Zone: Temperature & Fan

HVAC Secondary Function Status

95

Chapter 11 | Interaction Design

HVAC – Stage 2 How would the rest of the functions be placed around the circles?

06:33 PM

The priority here was to make sure that any additional functions shown upfront, other than the temperature & fan, & volume controls are easy, quick to access without requiring the driver to take his/her eyes off the road too much.

For that, I needed large buttons, and some sort of a tangible guide that the driver could depend on for locating the functions, such as an adjacent edge, perhaps with markers like those on the J & F keys on computer keyboard. If the buttons could separate the circles from one another, it would make it easier to interact with them as well by making sure that input for one is well spaced out and differentiable from the other.

Option 1 visualizes the most ideal layout towards that goal.

MONDAY November 2

Driver Shortcuts

Secondary App Space

Secondary Function

Secondary Function

#This circle in the Primary App Space represents the main visual/ ` features of the app. manual Connectivity & System Applications

BROWSE

LIST

06:33 PM Secondary Function

MONDAY November 2

Driver Shortcuts

Secondary Function

Secondary App Space

Secondary Function

Secondary Function

#This circle in the Primary App Space represents the main visual/ ` features of the app. manual Connectivity & System Applications

06:33 PM

MONDAY November 2

Secondary Function

LIST

Secondary Function

Driver Shortcuts

Secondary App Space

BROWSE

Secondary Function

Secondary Function

#This circle in the Primary App Space represents the main visual/ ` features of the app. manual Connectivity & System Applications

BROWSE

Option 2 places emphasis on separation of the circles from each other with at least a button in place, and on ease of access of Volume and Driver HVAC circles.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

LIST

Secondary Function

Secondary Function

Fig. 106, left to right, top to bottom: HVAC layout options 1, 2 & 3.

96

Chapter 11 | Interaction Design

were more conveniently placed.

Moreover, using the same space as the primary application, would make it easier to signify certain interactions, such as swiping from the left to access the rear climate.

Secondly, how could I better signify the interaction for Temperature & Fan Speed to the user?

This could have been done later in the Visual Design phase, but I wanted to make sure that it was visually feasible, because otherwise I would be running the risk of a major redesign later on.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

97

Chapter 11 | Interaction Design

PRIMARY APP – Home Pages This section is regarding the upfront (home pages) of the applications; how would they look and work like?

that by making sure that if the user learns one application, then he/she can apply the same learning in the rest of the applications.

The main concern was to make sure that there is a high level of contextual similarity. I felt that the design was going in a direction where there would be a higher then normal learning curve, and I wanted to compensate

To bring in that contextual similarity, I decided to make home pages for 4 applications together – Music, Analog Tuner, Digital Tuner & Navigation.

My endeavour was to align the rest of the

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

applications with the interaction pattern of the Navigation application, as mentioned earlier, using the basic interactions like swipe up, down, left, right, anywhere on the screen, and 2 finger rotate.

Browse and List (e.g.. playlist) would be accessed from through a swipe across the left & right edges respectively.

98

Chapter 11 | Interaction Design

Selective Skip Selective skipping was meant to help the user find a song of his liking, or the one that would resonate with her/her mood, as quickly as possible and without the need to ‘Browse’.

During ideation in this phase, I felt that being able to skip selectively through All Songs, Albums, Artists, Genres would not be effective enough, as they don’t really represent an emotive need.

Instead, I felt that the categories should be All Songs, Favourites, Genres. In other words, if the user is not able to find anything likeable while skipping through all of the available songs, then there is an option to browse through his/her favourites, and still if he/she can’t find anything then there is the option to browse through genres.

Other audio related applications could also work in the same manner, with categories that let you browse through the entire collection, through favourites, and if available, genres.

Music Player

Analog Radio

Swipe anywhere; left to right or right to left:

Swipe anywhere; left to right or right to left:

Skip songs

Next/previous station

Swipe anywhere; up to down or down to up:

Swipe anywhere; up to down or down to up:

Selective skip (change category for skipping through music)

Selective skip (change category for skipping through stations)

2 finger rotate anywhere on the screen:

2 finger rotate anywhere on the screen:

Seek bar

Set frequency manually

Tap buttons:

Tap buttons:

Shuffle, Repeat, Source Probe & Favourite

Band, Manual Seek, Source Probe & Favourite

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

99

Chapter 11 | Interaction Design

Digital Radio

Analog Radio

Digital Radio

Swipe anywhere; left to right or right to left:

Swipe anywhere; left to right or right to left:

Swipe anywhere; left to right or right to left:

Next/previous station

Next/previous station

Next/previous station

Swipe anywhere; up to down or down to up:

Swipe anywhere; up to down or down to up:

Swipe anywhere; up to down or down to up:

Selective skip (change category for skipping through stations)

Selective skip (change category for skipping through stations)

Selective skip (change category for skipping through stations)

2 finger rotate anywhere on the screen:

2 finger rotate anywhere on the screen:

2 finger rotate anywhere on the screen:

Set frequency manually

Set frequency manually

Set frequency manually

Tap buttons:

Tap buttons:

Tap buttons:

Band, Manual Seek, Source Probe & Favourite

Band, Manual Seek, Source Probe & Favourite

Band, Manual Seek, Source Probe & Favourite

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

100

Chapter 11 | Interaction Design

BROWSE & LIST - Music What do Browse & List represent in the context of the driving experience?

Browse should be the feature that the user should browse as few a times as possible, maybe even just once or twice, while driving. The information available in Browse should define the rest of the driving experience. For example, a sound track that resonates with the user’s present mood.

List, on the other hand, takes care of ‘what comes next’ in that experience once after it has been defined. For example, the playlist, through which the user would now be listening through.

Browse The primary concern was to help the user find not the experience that the driver is looking for, but the beginning of it. It maybe a track, or a radio station, or a destination.

And how to do so without too much visual or manual interaction?

Here, in case of Music, instead of showing the conventional view of the media library, Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

101

Chapter 11 | Interaction Design

06:33 PM

MONDAY November 2

Driver Shortcuts

Song Title

Secondary App Space

Artist Album

All Songs

Favourites Explore Genres Connectivity & System Applications

Music

Playlist

00:15

theBhatiaPhone

Rear Climate On

A/C On

Fig. 109, left to right: Home Page, Safe Browse Options 1 & 2 (Selected).

06:33 PM

But the crucial part here was how the user will interact with Suggestions & filter through the categories.

Hence, in Option 2, I decided to use the rest of the space & create separate columns for Filter & Suggestions.

Option 1 didn’t seem to make it all too clear.

There were too many complications.

Moreover, I felt that the user would not need the essential functions of the home screen like Skipping, while browsing, since he/she would be interested primarily in redefining the whole experience.

Filter would work the same way it does on the home screen, that is, by swiping up and down to change the categories. Although in the browse window, the user would need to swipe up and down to change filter only in its specific column, as opposed to swiping anywhere on the home page for the same.

MONDAY November 2

Driver Shortcuts

Back

06:33 PM

MONDAY November 2

Driver Shortcuts

Sources

Suggestions

Filter

Suggestions

New Settings

All Filter

Secondary App Space Change App

Song Title Artist . Album

All All

Albums

Song Title

Source Secondary App Space

Artist Album

Songs

Recent

Albums

Play

` Artists

Source New Sources Connectivity & System Applications

Album Title Artist 15 songs . 35:12 minutes play time.

Source

Recent Sources

Source

Artist . Album

Artist . Album

Genres

Favourites Explore Play All Genres

Connectivity & System Applications

Playlists Settings

All

Play

Artist

Album Title Album

Artist 15 songs . 35:12 minutes View

Play All

All Songs

SongFavourites Title

ArtistExplore . Album Genres

Source

Playlist

Song Title

Song Title

Music

All Songs

#The titles in the main section (Pins/ Suggestions) could line up horizontally with the title on the home screen.

Song Title

Artist . AlbumTitle Song

Song Title

Playlist

Artist . Album

Playlist Title 15 songs . 1 hour 50 minutes

Source

00:15

Music

Play

Favourites Source

00:15

All

Source

View

Play All

Song Title Artist . Album

theBhatiaPhone

Rear Climate On

A/C On

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

theBhatiaPhone

Rear Climate On

A/C On

102

Chapter 11 | Interaction Design

BROWSE & LIST – Navigation, Browsing Destinations Guidance to How do navigation SuggestionsGuidance work to Destination from Destination from differently from audio Suggestions.

Suggestions

Open Navigation Suggestions

Start/ End

Open Navigation

#Safe to use

#UnSafe to #Safe use to use

Screen

Navigation Settings

In more tangible terms, navigation suggestions would lay a larger emphasis on frequented destinations, albeit contextually, than recent destinations. Contextually here Add Destination means that on a Friday evening, the nearby Lounge & Bar maybe the more frequented destination or type of destination than Home.

Selection Made

Destination Trip or Trip?

Destination

Destination

Frequent Route?

Frequent Route?

Add Destination Route Planning

Screen

System System Process Decision

Address Search & Input, Destination & Trips Library, Navigation Settings

Selection Made

Destination or Trip?

No

System Decision

#UnSafe to use

while driving while driving while driving while driving In the previous chapter, I explained how Browse & List features were designed for the No No #Which all filters? #Which all filters? audio experience. While designing the same Voice Search Voice Search #Addresses + POIs shown in #Addresses + POIs shown in Fuel/Park Fuel/Park for Navigation experience, it was important Suggestions & how?

Suggestions & how? to consider the relevant differences between Address Search & Destination & Trip Input, Destination & Destination & Trip More Safe?

Yes More Safe?

Yes itself and music experience.

Suggestions Trips Library, Suggestions

My understanding of the users’ navigational needs said that it is about the same, repetitive experience on a day to day scenario, unless you’re on a weekend trip.

Even then, it is much less about serendipity as compared to audio experience.

Start/ End

Yes No

Route Planning

Navigate

Navigate

Guidance

Guidance

Trip

#Start a ticker, that goes with the#Start best route choice user s route choice according to user s a ticker, thataccording goes withtothe best preferences. The ticker disappearspreferences. if the user isThe checking out differentif routes. ticker disappears the user is checking out different routes.

Even then, the best route could beEven displayed on top, somewhere. then, the bestor route could be displayed on top, or somewhere.

This Yes way, an extra interaction is reduced.

This way, an extra interaction is reduced.

#How about an I m feeling Lucky!#How switch thatan I m feeling Lucky! switch that about takes the route less known, around different POI s? takes the route less known, around different POI s?

Fig. 121: Fundamental navigation experience.

Where recents would need emphasis is, when a certain anomaly arises. For example, Guidance active.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Guidance active.

103

System Process

Chapter 11 | Interaction Design

going to a different departmental store more than once, than the usual (& hence frequented) one.

option to start guidance, so as to reduce user input and therefore distraction.

But in some cases as those of Friday evening, serendipity needs to be laid a high emphasis on. The user might get bored of a certain ‘fun’ related location after many repeated visits. At that time, it is important to suggest something different, albeit along

Furthermore, frequency needs to be taken note of especially one a certain route is highly frequented. For example, Home to Office and vice versa, for which Suggestions shows the Route option, with a one touch 12:20 PM

MONDAY November 2

MONDAY

MONDAY

Shortcuts 2 06:22Driver PM November

Source

Filter

Pins

Filter

Frequented

Library Maps

Destination Song TitleName Address Local Artist Album

Address State

New

5.1 kmLibrary 21 mins

Maps

New

Locations

Destination Name

5.1 kmLocations

Address Local Address State

21 mins

All Songs Google Maps Connectivity & System Applications

Routes Recent

Interests

Google Maps Favourites to Destination Name Connectivity Explore Genres & System fastest via Location Applications Recent 5 min

21 mins Playlist

Long press to Drive

Other routes

Interests

Interest Category Route 66

Route 66

00:15Nearby 13 options Popular from 5.1 km,Music 21 mins

Music

Quick Settings

Quick Settings View

theBhatiaPhone

5.1 kmRoutes

Rear Climate On

theBhatiaPhoneA/C

On

Rear Climate On

Pins

Source Suggestions

#Suggestive Time to go home? questions rather than directions?

to Destination Song Title Name

Filter

5.1 kmLibrary

fastest via Location Maps 21 mins Artist To comes up only 5 min Album when the user is New Long press to Drive located Other nearroutes the Locations from address & has frequented a Dining Out today? particular route.

If that route isAll notSongs the Google Maps fastest, Destination it Favourites shows Name 5.1 km another route.

Connectivity Explore Genres Address Local 21 minsRoutes System 3 days back Last&visited Applications Recent Playlist Popular from … if it is a subjective category. Interest Eg Category Interests 13 options restaurants.

In thisNearby Popularalso from 10 km, Route 1 hr 1266 mins case, it could show only ETA.00:15 View From...if it is an objective category.

Eg fuel station.

FrequentedIn this case, it could show only distance.

Recently visited should be visible here so thatA/C the user theBhatiaPhone On learns about it.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Pins So then, while Suggestions would handle the task of Figuring out the user’s probably Driver Shortcuts

Shortcuts 2 12:20Driver PM November

Source Suggestions

with the Route to the preferred bar. But since the new ‘different’ location would be hard for the system to judge, it can suggest looking into the relevant Interest category.

Music

Quick Settings

Rear Climate On

13 options Nearby Pins Suggestions Popular from 5.1 km, 21 mins View #Suggestive questions rather than directions?

Frequented

#Suggestive questions rather than directions?

Song Title

To comes upArtist only when theDestination user is Album Local located Address near the Address State from address.

The 2nd address line Destination shows contextual Address Local information in Songs case All Address State of local addresses.

Favourites

Name

5.1 km

To comes up only when the user is located near the from address & has frequented a particular route. If that route is not the fastest, it shows another route.

21 mins

Name

5.1 km 21 mins

Explore Genres

to Destination Name

Popular from … ifvia it isLocation fastest a subjective category.

Eg 5 min restaurants. In this case, it Other couldroutes also show only ETA.00:15

5.1 km 21 mins

Long press to Drive

From...if it isCan’t anfind what you’re looking for? for it, or stop the car to Browse more. objective Search category.

Eg fuel station. In this case, it could show only distance.

Recently visited should be visible here so thatA/C the user On learns about it.

Playlist

Popular from … if it is a subjective category.

Eg restaurants. In this case, it could also show only ETA. From...if it is an objective category.

Eg fuel station. In this case, it could show only distance.

Fig. 122, left to right: Navigation Recently visited Suggestions page 1, should be visible here so that the user learns about page 2it.& Page 3.

104

Chapter 11 | Interaction Design

06:22 PM

Destination Overview

MONDAY November 2

Driver Shortcuts

Back

A destination that has never been visited before or visited very less, would require more attention from the user for identification. Certain other information may also be needed, so as to make a decision whether or not to head in its direction.

Destination

Driver Shortcuts

Back

Destination

Destination Name

Address Local Address State Coordinates X, Coordinates Y

Address Local Address State Open today till 10:00 PM

Connectivity & System Applications

#Frequently visited: if visited a lot. #Last visited: If visited a few times #Never visited before.

Last visited 3 days back

to Destination N... fastest via Location

1 hr 21 mins 10.2 km

Connectivity & System Applications

Other routes

fastest via Location

Nearby

Parking 13 options Nearby Popular within 5 mins, 1 km

Rear Climate On

10.2 km

3 other routes

Drive

Nearby

Parking 13 options Nearby Popular within 5 mins, 1 km

View

theBhatiaPhone

1 hr 21 mins

5 min

#Suggests the most Scenic or the Fastest or the most Frequented route depending on situation like location and day/night.

Drive

+91 9999 999 999

Last visited 3 days back

to Destination N...

5 min

#Suggests the most Scenic or the Fastest or the most Frequented route depending on situation like location and day/night.

For all of the above, I ideated on the information that would be needed, as well as how to present it, in terms of priority of information and level of detail. It was important to show all important information and links on the first page itself, along with giving cues to the user regarding the availability of Nearby options on the second page.

MONDAY November 2

Destination Name

#Frequently visited: if visited a lot. #Last visited: If visited a few times #Never visited before.

For example, is complete address along with coordinates required on top? How important is information regarding the opening & closing times? The option to call the place?

And sometimes, when users cant find a particular destination, they search another known location nearby or a whole area, and then use the Nearby option.

06:22 PM

View

A/C On

theBhatiaPhone

Rear Climate On

A/C On

Fig. 125, left to right, top to bottom: Destination Information options 1, 2 & 3, & Selected option.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

105

Chapter 11 | Interaction Design

Full navigation library The full navigation library breaks up the list into its individual constituents, Destinations & Routes, similar to the media library, and

allows the user to access all the wealth of information available.

The system shows the library of the currently active primary application, so if in

case an audio application would have been active, this option would have shown the full audio library for that application.

Fig. 129, left to right: Navigation Safe Browse & Unsafe Browse contents.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

106

Chapter 12

VISUAL DESIGN Finally, it was time to move on to another challenge, to visualize what the system will finally look & feel like. But more importantly, it also involved Figuring out exactly how to visually communicate the intended interactions to the driver.

Contents of this chapter: 1. Fonts 2. Grid 3. Theme Ideation

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

107

Chapter 12 | Visual Design

FONTS For making sure that the fonts selected are appropriate to the user experience requirements in the automotive context, related studies were referred to. One of them pointed out the typography requirements as follows.

• open space inside the letterforms to prevent from blurring their shapes

•

ample space between the letterforms to prevent them from clashing or blurring together

•

highly distinguishable shapes to prevent 'at a glance' ambiguity

•

varied horizontal proportions to add distinguishing characteristics

Taking into consideration the overall requirement low ambient brightness, some humanist fonts were demoed in a grey-onwhite format, and tested for glanceability while at a distance of an arm’s length.

Open Sans was consistently easiest to read in all font styles and considerably small sizes, and was hence selected.

Fig. 148: Font requirements for automotive context.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

108

Fig. 149: Testing fonts for legibility in required formats.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

109

Chapter 12 | Visual Design

GRID Defining the grid, or the final layout was the first and foremost task before adding the rest of the content or ideating on a theme.

In this phase, pixel perfect spaces were allotted to the to-be elements of the design.

The most important element to design first was the squircle.

The squircle The shape of the secondary application was also explored here. Conceived as a circle, it was later realised that the shape go along well with the interaction model, which is based on interactions with left, right and lower edges; there are no edges in a circle!

A circle also constrains the layout and amount of information inside it, a square is far more accommodating.

Fig. 150, left to right, top to bottom: Squircle references, Options 1&2, & final iteration.

What the circle did best was to allow for a visual contrast, or in other words, visual differentiation, which was of advantage here since both the HVAC and Secondary app circles have slightly different roles and interactions than the rest of the design.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

110

Chapter 12 | Visual Design

Consequently, I decided to get the best of both through a squircle.

The final shape had to be accommodating, with 4 differentiable edges, like a square, but with a very apparent roundness for visual contrast with the rest of the design.

All the rest After the squircle, the process for the rest of the elements focussed on making sure that touch targets were sized as per need, as well as making sure that the spaces are well proportioned visually.

While ideating with wireframes, understanding the content and flow was paramount. Here in this process, pixel perfection was paramount.

The final grid/layout follows on the next pages.

Fig. 151, left to right, top to bottom: Creating basic spaces, Chasing Pixel perfection in shapes & spaces.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

111

Fig. 152: Home Page.

Fig. 153: List View.

Fig. 154: Unsafe Browse.

Fig. 155: Safe Browse.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

112

Fig. 156: Secondary App notification.

Fig. 157: Primary App or Driver notification.

Fig. 158: Driver notifications & Control Centre page 1.

Fig. 159: Driver notifications & control centre page 2.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

113

Chapter 12 | Visual Design

THEME IDEATION Now it was time to think about look & feel, as well as how to visually communicate the intended interactions. Here is where I started looking for inspirations, as well as references to expand my visual library.

Spotify was a major inspiration towards maintaining a low ambient brightness in the design.

Where else in life are we attracted to swipe or drag our fingers on a surface?

How to indicate two different types of interactions on the same surface (swipe & drag, & tap, in the primary app space)?

Perhaps through multiple layers signifying multiple interaction models, one over the other?

It was also important to make sure that important information requires only a glance from the user to capture.

Fig. 160, left to right, top to bottom: Spotify desktop application, Finger swiping/dragging instances.

Next page. Fig. 161: Visual inspirations.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

114

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

115

Option 1: Material Design inspired cards, layered one on top of the other, corresponding to different categories of functions & their respective interactions.

Option 2: 3 specific layers with different interactions.

Top most holographic layer: swipe/drag interactions of primary app, along with floating secondary app, HVAC & Volume spaces.

‘Sandwiched’ Middle layer: Tap interactions of HVAC & DNC, along with tap boundaries signifying tap button areas.

Lower most layer: Tap interactions of primary & secondary apps, while the album art communicates the top layer’s swipe interaction.

Bounding the tap buttons was to emphasize their large area over the contained icon.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

116

The previous iteration was shown to some people who were unfamiliar with the concept so far. They could work out the tap buttons, but the swipe actions were still not as clear.

I needed another interaction model for the swipe interactions.

This is when the analog camera film model came to mind. The film, as seen, always ‘travels’ from one side to the other horizontally.

The above said model was translated into visual adaptations.

Fig. 162: Camera Roll feed

Option 1 Top layer: floating secondary app, HVAC & Volume spaces Middle layer: Swipeable layer Lowermost layer: Tap buttons, but what about the tap interactions of the primary app?

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Option 2: Top layer: floating secondary app, HVAC & Volume spaces Middle: same as before, tap buttons of HVAC and HDC Lowermost layer: Tap interactions of primary & secondary apps, while communicating the top layer’s swipe interactions.

117

Taking forward option 2, and populating the rest of the details.

Taking forward option 2, and populating the rest of the details.

3 levels of white over greyish background are used here. The faintest whites correspond to tap buttons. The brightest 2 correspond to the holographic, swipe-able layer.

The red towards the left indicates ‘caution’, indicating the unsafe nature of Browse function.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

118

Next step was to visualize the ‘lists’ in the Browse window. The priority was to emphasize the large tap areas over the contents as the target.

Option 1: top and bottom edges sandwich the contents.

Option 3: No boundaries, black backgrounds. The underlying blacks further enhance the contrast in the interest of legibility, while maintaining the red theme of the Browse window.

Option 2: Complete bounding boxes.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Note: the Unsafe Browse window towards the left would have dark grey (& not red) background, as indicated. This is because it can only be accessed when the system judges it to be safe.

119

The final iteration used a mix of option 2 and 3, so as to make sure the user is aware of the large size of the target areas as well as ensure legible contrast, respectively. Finally, is also where I started exploring how to give touch feedback.

Option 1: Using black & white to differentiate ripple like effect, which persists even after the interaction.

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

Option 2: Letting the contents differentiate the single (e.g.. song) items from group (e.g.. album) items.

Feedback comes from a simple exaggeration of the button itself; extended, brighter border filled darker black.

120

That’s all

Thank you

Parishrut Bhatia | TAD 2013 | Graduation Project | Visteon Corporation, Pune

121