After driving my new 2016 Toyota RAV4 for a week, the one thing I keep noticing is how difficult the user interface is. Difficult is relative, of course. It’s not that I can’t figure out how to change my radio channel or look up the weather or use the GPS. But when driving a 4000 pound vehicle, the need to look away from the road for a second longer than necessary can be a problem. And I find myself glancing back and forth between the road and the display multiple times just to accomplish fairly simple tasks like finding a radio station that I haven’t yet preset.
In the coming weeks I will attempt to improve some of the problems I see. This is for myself only as a quick design experiment and is by no means an official redesign with extensive user testing or approved by Toyota. On to the experiment…
First off, I’ll start with the root of my frustration, the weather app. It happens to be the first thing I noticed after I got the car. It is certainly not and should not be the most important part of a car’s interface but the fact that it stood out so much to me was an indication of greater issues. And in general, what I’ve found to be the general theme of my disdain for this interface is the lack of hierarchy. Along the same lines, here are a few more immediate complaints about this portion of the UI.
Original Interface for the Weather App
Buttons are hard to find.
Touch screens are nice but there is no tactile feedback. If button areas aren’t clearly noticeable and too small to hit on the first try they are sub-optimal. In this case, there are 3 buttons on the screen. The current weather is highlighted. But while driving, it takes a fraction of a second to figure out that “3 Day” and “6/12 Hour” are other options and that the box around the ‘snow showers’ icon is not an indicator of something to be pressed.
Now, I don’t feel that getting a 3 day weather forecast while merging onto a busy highway is a standard use case, but I’m sure someone has done it. And again, this is just the first example of what I consider to be poor button design choices throughout.
The font sizes and weights are similar with no real hierarchy of information.
In the image above, for example, almost everything is the same size. What I would think is the first thing I’d like to know about the weather – the actual temperature and general weather description, are the smallest elements of the screen. Sure there’s a bright blue image of some sort of precipitation that stands out but I still have to take more than a glance to decipher it and read above it that there are, in fact, snow showers. Dead center and in the largest font are the labels for what I consider secondary information at best; Humidity, Wind, and Feels Like.
For those of you who are yelling at me to just look out my window while I drive to see that it’s snowing, I’m with you. But it’s a nice little feature to have maybe on a long road trip. And if it’s going to be a part of the interface, it better still be designed with thought and efficiency like any of the more often used features.
Mockup of my first version of the same interface with easier to locate buttons, better hierarchy of information, better contrast and simplified larger graphics to see at a glance rather than taking your eyes off the road longer than necessary to sort through information.
In my solution I focused on simplicity and a word I just made up, “glance-ability.” Most of the time when I look up weather on my phone or during the news I care about 2 things; ‘How hot/cold is it?’ and ‘Will it rain?’ So I made those 2 items front and center. I don’t think my icon for snow above is ideal but the idea is to show a large icon that’s simple and has good contrast so a quick glance is all that’s necessary. The same goes for the temperature. One fast look and I think both pieces of information come across.
If I really want some more detail about the humidity and wind and UV index, it’s still there. It is a bit smaller but I tried to give greater contrast to the actual data rather than the labels.
Lastly, there are the button areas. I’ve placed them all on the left side of the screen and given them a bit of height for a larger target area. Also being along the physical edge of the screen with a bevel allows the driver to leave their hand anchored and move a finger down to the next button. This avoids the scenario I’ve found myself in trying to gauge both the x and y-axis of the target area with failed attempts at hitting any button. And because it bothered me the more I looked, I added the clock into the header with the other boilerplate icons. If I want to watch the weather the whole time I’m driving, I would still like to know what time it is.
Sketch of my weather app solution
Part 2 will get into more important features like navigation and music control.