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