Fitts’s Law, Pie Menus, Gestures and a Car Touchscreen Experience

New Car Touchscreen Concept

If you absolutely MUST have a touchscreen in a car, why not explore ways to design it a bit better? Physical knobs and dials may remain the best and safest user interface in cars for years to come. But, for the features that are being placed on a screen (potentially due to demands of the marketplace), designers have an opportunity to investigate new methods of interaction to minimize driver distraction.


 

I’m not sure what UX people desire as a dream job, but I am convinced many industrial designers want to design cars. Perhaps this is an over-generalization, but I’ve seen many beautiful car sketches come to life alongside the notes taken in boring meetings.

If other designers can dream of cars, UX’ers have permission to sketch car user interfaces! An idea has tumbled around my head for a few years. I put it aside last year after seeing Matthaeus Krenn fantastic concept. Mine would never look as polished or be interactive. And yet, I have now decided to share it in the interest of critique and to explore more solutions, especially after the recent release of Apple CarPlay and Android Auto.

Touchscreens Everywhere!

If the latest car models are any indications, manufacturers are determined to keep up with trends in consumer electronics. This is not necessarily a bad thing if the user interfaces are well-designed. However, it seems that some well-intentioned manufacturers have chosen to simply replicate traditional physical controls on an LCD… skeuomorphism to the extreme.

2011 Ford MyTouchAs shown in this older Ford example, it is not uncommon to find many small buttons placed all over the display that require great accuracy in activating. Also, features may be spread across several different primary screens which force the driver to interact with their car almost like a web site.

When once manifested physically, these controls were easily accessed with a quick glance, then by feel. However, on a perfectly flat touch screen, a driver may need to spend additional time targeting the setting visually and moving their hand precisely. Each moment their eyes are not on the road creates a potentially dangerous situation.

The Road to a New Concept

My goal was to explore new interaction design sketches that could minimize the time spent looking at a touchscreen while driving. I had a few guiding principles:

  1. Use Fitts’s Law to minimize time spent visually targeting. In essence, bigger and closer things can be touched more quickly. Tog’s famous quiz on Fitts’s Law should be required reading.
  2. Require only simple gestures or hand movements. Ideally, I wanted it usable with one finger, which could also be very important for people wearing gloves.
  3. Minimize learning. Even for new users, I wanted it to be visually obvious where to touch and what to do next.
  4. Utilize muscle memory. Once introduced, I hoped to make something simple enough that common motions are easily repeated without much cognitive effort.
  5. Utilize peripheral vision carefully. This area lacks clarity and is sensitive to motion.
  6. Work well on medium-sized displays. Many cars utilize a seven to eight inch touchscreen, and it was important for the UI to work under that constraint.

The Final Result

Watch the full introduction (first 1.5 minutes) and full demonstration (second 1.5 minutes):

 

Proposal: Knowledge in the World

The first design decision visible to an observer is that the current settings, like climate and media, are nearly always visible. The goal in keeping these settings visible is to hint to the user where to touch without necessarily creating a skeuomorphic element.

Current Settings Highlighted

I believe this greatly shortens the learning curve because simply touching the screen can guide even a new user through the process. Don Norman may contrast this approach with “Knowledge in the Head” that requires a user to memorize hidden commands.

Proposal: Swipe-from-the-Edge Gestures

Many mobile and tablet operating systems allow the user to swipe onto the screen from an edge. This gesture often accesses a hidden tray user interface or causes a command like ‘back’ in the browser. I like this interaction because it takes advantage of Fitts’s Law in that the entire screen frame edge becomes a giant button that enables a very fast non-precise gesture. But, I dislike its use in many OS’s because the feature is hidden (see prior point). Therefore, in this car concept, the climate controls are already partially visible in a surrounding on-screen frame.

Swipe Example

As the user swipes onto the screen, a menu or tray slides out. The content is organized such that the driver’s finger will then either be pointing at the current setting (like temperature) or the most likely setting (such as when toggling the defroster to the opposite state). The driver can do all of this in one continuous motion and simply lift their finger to complete the change.

Proposal: Pie Menus

Allowing the driver to access the media controls by touching anywhere in the middle of the display also takes advantage of Fitts’s Law due to the size of that area. The use of a “pie menu” builds on muscle memory. As soon as the pie menu appears, simply dragging up, down, left, or right initiates a consistently placed function that is easy to learn. Continuing to drag will then allow the user to highlight a new setting. (Forgive me for not making my pie menu circular!)

pie-642-128

Proposal: Draw “I”s and “L”s

As seen in the prior two points, every gesture is a simple matter of touching the screen and sliding a single finger in one direction followed (optionally) by a 90 degree turn to adjust a value. In other words, the driver’s finger is basically following an I- or an L-shaped path, but in various orientations. This is similar to some mouse gestures that are available as plug-ins on desktop browsers.

But, what about?   (addressing feedback)

I make no claims that this concept is perfect. In fact, I believe the best solution is probably a hybrid of an improved touchscreen as well as physical controls and voice controls. I have a continued great fondness for knobs and dials!  No doubt, many designers at car companies probably have drawers full of ideas similar to mine that were rejected for very valid reasons.

  • Matthaeus Krenn‘s concept. I very much like his concept. By enabling the whole screen to be a touch zone, it makes even better use of Fitts’s Law! However, I was concerned that it required too much learning because some of the gestures were non-obvious. Also, some of the gestures required multiple fingers which may create ergonomic issues.
  • GPS or phone features. My concept does not cover every feature in the car. Instead, I am showing a set of ideas that can be applied or rearranged as necessary. For example, if listening to Pandora, swiping left from the pie menu could allow a driver to thumbs-up or thumbs-down a current song. Or, if a turn is coming up, the map can occupy the largest portion of the screen instead of the music to provide more clear directions. Quick access to the phone could replace the clock.UI Main Map
  • Haptics and sound feedback. These have the potential of improving any touchscreen system. In my video above, I play a scaled musical note going higher or lower in pitch as the user drags in that respective direction.
  • The bevel around the screen. As shown in the left image below, the plastic around many touchscreens is not flush with the display surfaceface. This may make it difficult to swipe from the edge. The designer could turn this into a positive by placing some form of tactile element or dot in that bevel to help the driver find a natural starting point blindly. In the future, I see trends in industrial design pointing towards a more tablet-like experience (i.e., Mercedes!) where the LCD is more integrated or flush with the surface as shown on the right below.Touchscreen old and new example
  • Potholes?!?  Living in Michigan, I fully understand that craters in the road could make smooth gestures problemsome. I would propose a very small debounce time that if the finger left the screen but returned quickly (.5 sec?), the flow of the interaction would not be interrupted.

 

Drive safely!

As no formal user-centered design process was followed in this work (an unusual position for me to be in), I certainly welcome your feedback and critique. While many of us may not dream of designing car user interfaces, I believe it is always beneficial for professionals to share their thoughts when possible. I look forward to seeing your own. Thanks for visiting.

 

Comments (3) Add yours ↓
  1. Ying Hu

    This is awesome! Nice job and animations! I’m a big fan of Fitts’ law! I will also take consideration of the physical location of the screen. In my new van, the touchscreen is to the right hand side, and I sometimes find it difficult to aim accurately and touch the zones to the far right. I think you already implied it in your design with more frequent used feature positioned on the left of the screen.

    February 12, 2015 Reply
    • Brandon Satanek

      Thanks for the kind feedback! You do raise an interesting point also related to Fitts’s Law: the most frequently used options should be biased to the left side of the display which is “closer” to the driver and quicker to hit. This would be true of either physical or digital controls.

      February 12, 2015 Reply
      • Ying Hu

        On a second thought, maybe the touch target to the right side far from user could be intentionally designed to be BIGGER than those on the left or near side? Just a thought.

        February 12, 2015 Reply

Your Comment