mercedes-benz-silver-lightning

The UX of the Smart Car

Remember the television show of the 80s called Knight Rider? If yes, I’m sure you are picturing the uber-cool black colored Pontiac Firebird with the blinking red lights. The show was a hit, mostly thanks to the futuristic feature-packed beast of a car that assisted its undercover-cop owner in solving crimes. The car could self-drive, follow voice commands, make decisions and so much more. In today’s times, big players like Tesla Motors, Mercedes-Benz and Audi are working strongly to make cars smarter by the day, and we can see the Knight Rider car become a reality. Equipped with various sensors and complex electronic systems, cars can assist drivers with near self-driving capability. The responsibility of making decisions for safety and navigation is shifting from the driver to the artificially intelligent systems. Easy integration of software such as Android Auto and Apple CarPlay with the in-car systems allows adding the ‘Smart’ factor to almost any car. With this rapidly changing landscape where consumers are being exposed to smarter vehicles, several challenges arise, many of which can be tackled by User Experience techniques.

knight-rider

UX Challenges in Smart Cars

Driver Distraction

Infotainment systems in cars are extremely useful for viewing and controlling various settings and features as well as managing the entertainment systems. However, driver interaction with these systems can be a source of distraction. Wired connectivity of the infotainment unit with personal devices can also cause physical obstruction in some cases, not to mention the painful process of managing cables and finding difficult to access connection ports. These issues can not only be frustrating for the driver but can also cause obstruction or distractions that could lead to accidents (Reuters, Car Dashboards that act like smartphones raise safety issues, July 2015).

Trust & Confidence

With advanced systems on board, cars these days can predict collision scenarios and detect pedestrians among various other intelligent actions. When the car makes several of the decisions for you, it is quite possible that a lack of trust or confidence could creep in (Mashable, Self-Driving Cars Still Need to Earn the Public’s Trust, Oct 2017). Questions like “What if the system doesn’t work?” and “What if there is a malfunction?” are quite common when users first experience smart cars.

Tesla Autopilot Dashboard

Credit: Tesla Motors

Perceived Safety

Drivers or passengers can develop high levels of perceived safety due to the powerful and promising capabilities of smart cars. While it is a good idea to make people feel safe, it can also lead to negative results, such as drivers relying completely on the onboard systems and not paying sufficient attention during dangerous situations (Auto-ui.org, User Experience Design for Vehicles, 2012)

Driver Emotion

The driver’s emotional state is an important issue for automotive safety. Emotions affect perception and action, and hence, they are extremely relevant. Several driving behaviors are negatively affected by emotions, linking stress, anger or aggression to accidents. Frustrations arising due to poor usability of in-car interfaces and controls or difficulty navigating can also contribute heavily to a negative emotional state (Auto-ui.org, User Experience Design for Vehicles, 2012).

How UX Design is Making Smart Cars Better

User (Driver) Research

There are many contexts possible for a driver, be it a slippery drive on the rainy roads of Portland or a foggy encounter on the crests and troughs of San Francisco. If these contexts are not kept in mind while designing for smart cars, there is a high chance for the design to fail, and failure in a driving scenario could have terrible consequences. Research is hence essential, where UX Practitioners observe and interview people driving in real-world scenarios, while unveiling their pain points and understanding their behavior (Key Lime Interactive, User Research Methods for Automotive User Experience, Oct 2015).

Google, for example, conducts its research by simulating real-world scenarios and combining it with special eye-tracking sensors to understand how drivers interact with Android Auto (Android Central, This is how Google Tests the Safety of Android Auto, 2016).

Augmented Reality (AR)

Many companies these days are working on technologies and techniques to augment reality for the drivers to prevent distractions and instill a sense of confidence. This is often achieved by creating overlaying interfaces that either appear directly on the windscreen of the vehicle or appear on top of a real-time view of the environment around the car displayed on the infotainment screens. The interface elements are intentionally made translucent, allowing good visibility of the environment with minimal obstruction. UX designers make use of typography, design principles and user research to create and refine the design of the overlaying interfaces for clarity and understandability (CNET – Roadshow, Augmented Reality in the Car Steps Towards Production at CES 2017, Jan 2017).

Visualizations and graphical representations are heavily used to allow quicker recognition through peripheral vision, eliminating the need to fixate on the interface rather than on the road. These techniques also allow giving users timely feedback for any decisions made by the car’s artificial intelligence and displaying information about pre-determined decisions beforehand. This allows building trust with the user, as it eliminates the element of surprise when the car makes a decision.

An example of AR in vehicles is Harman’s LIVS concept showcased at CES 2017, which is capable of placing street signs over intersections, greatly helping drivers (Harman, HARMAN Unveils the Ultimate In-Car Experience for Intelligent, Intuitive Autonomous Driving at CES 2017, 2017).

Mercedes-Maybach-Vision-6-Cockpit

Credit: Mercedes Benz

Voice Commands & Gestures

Gestures and voice commands are powerful ways to interact with smart cars. They reduce hand-eye coordination efforts and the need for haptic feedback while using touchscreen interfaces or other controls of the car. With devices such as Google Home and Amazon Alexa in the market and assistants like Siri and Google Assistant on almost every smartphone out there, consumers are getting more comfortable with using voice commands as time passes. Gestures are like second nature to humans and it is a great idea to leverage this human trait for interaction with smart cars (Medium, Reimagining In-Car UX, Sep 2014).

For instance, BMW allows drivers to use gestures to accept in-car phone calls and control the music volume. Even several voice commands exist to perform vital tasks that drivers are highly likely to perform, such as navigation (Medium, 5 Car UX Design Trends, Aug 2015) (Carnation Software, BMW Owner’s Manual).

UX Designers incorporate these interaction methods to reduce cognitive load on the drivers and allowing a more natural and usable way to perform actions and increase driver confidence. Maybe one day we can finally say goodbye to blindly and clumsily hunting for knobs in some corner of the car.

Conclusion

Many significant advances in the merged automotive and digital fields have been made and will continue well into the foreseeable future. Consumers have also become more immersed in the digital landscape, and their needs and demands are advancing exponentially. With increasing competition and easier access to advanced technology, it is essential for manufacturers to ensure top-notch in-car UX to maintain their position in the market. We might still be a long way from a time when every vehicle would be self-driven with the most advanced and intelligent systems on board, but it is quite intriguing to imagine new ways humans would interact with these marvels and how UX professionals would carve the in-car experience.

Design Critique: IMDb Android App

IMDB - Design Critique - Intro Image

 

Introduction

IMDb or Internet Movie Database is a popular online database of information related to movies, TV shows, video games, awards, and events. The database comprises of information on production crew and cast, summaries, synopses, reviews and ratings, which millions of registered users consume daily. As per Google Play Store, there are over 100 million users of the app on the Android platform!

 

Android App by IMDb: Well-designed?

The IMDb Android app’s design language has evolved slowly and has recently adopted Material Design. While some design decisions made across the app are backed by strong logic and can be applauded, few flaws can also be uncovered in the design. Here are some of the key findings

Failed to scroll on the home screen: Encountered a gulf of execution

Upon launching the app, a scrollable newsfeed-like interface is presented. With a goal – ‘find a good movie’ in mind, there is an immediate intent to explore the landing screen. The mind creates a plan to scroll for exploration. However, due to an obtrusive advert that blocks the lower ~10% of the screen (which happens to be the most usable area of the display), scrolling fails, as the swipe is registered on the advert’s overlay element, rather than on the app’s interface (Fig. A). This creates a gulf of execution as the intended action could not be executed.

IMDB - Design Critique - GIF Scrolling issue

Fig. A: Ad overlay blocks interaction

Recommendation: Embedding the advert in the app’s main interface, rather than having it as a static overlay, will eliminate the obstruction and bridge the gulf of execution, thereby improving the design (Fig. B). An alternate solution would be to substantially reduce the height of the advert to decrease the probability of the user’s thumb landing on it.

IMDB - Design Critique - Fig B

Fig. B: Ad embedded in the app’s interface no longer blocks interaction

Swiping between tabs is disabled: A logical constraint

With increasing importance being given to design, several Android apps have greatly improved their overall quality and conformance to the Material Design guidelines. The ‘easy to understand’ navigation of the IMDb app makes it an excellent example of this. Labels such as ‘Home’, ‘Movies’, ‘TV’ etc. are straightforward and map very well with users’ potential goals.

Navigation tabs are seen in several popular apps such as Messenger, Twitter etc. and users are well versed with the interaction patterns associated with them (For instance, switching between tabs can be achieved by swiping left or right in the tab container) However, when it comes to the IMDb app, tabs cannot be swiped across (Fig. C). But why though?

IMDB - Design Critique - GIF Tab swipe disabled

Fig. C: Tab swipe is blocked to eliminate error due to horizontal scrolling lists

It is important to note that there are several horizontal-scroll lists in the app (Eg. ‘Most popular movies’ in Fig. C) that encourage exploration by swiping left or right to reveal more list items. Having the same gesture for swiping between tabs can cause a conflict and make the interface error prone (users might want to scroll through the list, but might end up switching tabs or vice-versa). The designers of the app have, therefore, intelligently made use of Donald Norman’s principle of constraints by disabling ‘swipe to switch tabs’, so that users do not fall prey to making these errors.

Unable to find articles about awards or events: Poor discoverability

As stated by Donald Norman – “Two of the most important characteristics of good design are discoverability and understanding“, it is very important to ensure that features or functions that the user desires are discoverable. The IMDb app, while mostly working well in this regard, does seem to fail in a particular scenario. With the goal of ‘reading articles about awards or events’ in mind, tapping on the ‘Awards & Events’ tab seems logical, but the landing screen only displays videos at the top with no indication of any other information. On revisit, however, articles suddenly appear below the video-container (Fig. D). So, what went wrong?

There was lack of feedback to indicate that the app is loading up list items below the video. There were also no signifiers present, to indicate that there is a list of articles present (maybe in the form of a heading label or a container). These factors lead to poor discoverability of the feature, resulting in failure to achieve the goal of finding articles about events or awards.

IMDB - Design Critique - GIF Awards and Events not found

Fig. D: Poor discoverability of articles about Awards and Events

Recommendation: Improving discoverability can be achieved by fixing the root causes of the problem: i.e. improving feedback, and providing strong signifiers. A loading / in-progress spinner can be added for feedback, and a container along with a heading label (such as ‘Articles’) can be included below the video-container to indicate the upcoming content. (Fig. E)

IMDB - Design Critique - Fig E

Fig. E: Improved discoverability by adding signifiers (title ‘Articles’ or displaying a container) and feedback (loading spinner)

 

Conclusion

In light of the above, it is clear that even though IMDb is the world’s most popular database related to movies, TV shows etc., and their Android app is quite well-designed, robust and effective, a few design flaws still plague the interface. Making improvements to these potential flaws is sure to greatly enhance the experience for users.

 

IMDb Logo