In Part 1 of User Design Makes Sense I compared usability design as it relates to software and automotive dashboards. My point was to show that usability design is critical regardless of what tool you are creating.
Today I want to dig a little deeper and first discuss what is good design and then outline some basic concepts that underpin usability theory and practice. As before, I will relate my discussion to software and automotive dashboards.
What is Good Design?
This question can generate its own book, but I’ll keep it short. For a UI to be viewed as “good”, it must maintain a balance between being highly usable and visually pleasing. The quality of the product’s usability is determined by how much you have to think (not thinking is a good thing), while visual “pleasure” is determined by human perception as well as trends and universal values in product design.
Let’s look at this question from the point of view of software design. While creating software, design engineers can sometimes develop a UI that makes great sense to them, but horrible sense to the customer. Recently, we had a dashboard concept that we thought was visually pleasing and unique in how it managed customer workflows. However, when we user tested the product, we discovered that despite the aesthetics, our target users had no clue what to do. The interface completely flunked the “Don’t make me think” test. Consequently, we redesigned and settled on a simpler concept that was still visually sound, but performed a thousands times better (no kidding) than the first design. In the end, the UI only became good when we made the product more usable.
Automotive dashboards often demonstrate the tension between “usable” and “visually pleasing” in very obvious terms as well. Let’s look at two example dashboards:
The image on the left is a simple analog dash from “Lucy”, my beat up truck I use around the yard. It is easy to understand… the speedometer is centrally located so your eyes don’t have to search for it… it has large numbers so you can easily read it, and the lesser gauges are smaller but still easy to read. And the radio and AC, although out the picture here, are very simple to use.
The image on the right is of a 2012 model car which I rented in the past week. While visually appealing, this dash was confusing and hard to understand. The speedometer, which is the most important gauge on the dash, was on the right hand side and very hard to read because of the small MPH numbers. The digital display in the center, while interesting, did not do much that was of great use. It appeared to be customizable, but it was unclear how this was done. Finally, the radio and AC were downright confusing. It took me a number of tries to understand the radio and I am still not sure I got it right. I wasted a fair amount of time just interpreting the dashboard.
What do these two examples show besides the fact that the first is easy-to-use although visually bland while the second seeks to be visually pleasing while forfeiting good usability? They tell us that there is more going on with how we perceive What is good design? than just vague feelings of goodness and badness. What is good is directly tied to how human brains organize information and perceive the world around us. Let’s dig in a little deeper and see what we find…
We perceive the world around us based on how our brain has adapted to its environment. From back in the years when our ancestors wandered the African plains, our brains were wired to recognize movement quickly, distinguish foreground from background, or identify patterns that break from past experience. This makes us hard wired in favor of certain types of visual cues. Consequently, when creating a UI, here are a few things to consider that are rooted in our wetware:
- Consistency is important because our minds will recognize the visual cues faster if the same cue represents the same function (Example: A “Submit” button that has the same design and function throughout an app.)
- The use of white space is critical because the more information loaded into a window, the harder it is for our brains to perceive what’s important. If white space is used to break up and organize information, our brains can process the information more easily.
- Our brains organize and “unify” information by how it appears. Unity of design is communicated by how objects “fit” together or not. Unity can be represented by proximity (close together), repetition (repeating the same shapes, colors, patterns, or actions), and continuation (our eyes can be led in one direction following a pattern until another pattern disrupts them).
- Emphasis counts. Our brain organize information best by what is emphasized against a background. This function is at the core of using strong visual cues in a design… our brain is drawn towards that which stands out against the background of information.
- Past experience matters. Our brains remember what things did before and expects to see them do the same actions again. This is why consistency is so important.
- According to research, if something is seen as “attractive”, it is perceived as more “usable” (as long as it clearly fulfills its function). Simple truth: looks count although they are useless if they are only skin deep.
- It counts to design for the language you use. For English language users, we read left to right, top to bottom. As you deviate from this structure, you begin to lose people unless you manage the deviation with powerful visual cues.
The list goes on, but the point to remember is that how our brains work directly effects how we perceive and process information. It doesn’t matter whether you are building a software UI or an automotive dashboard, the results are the same every time. Go against what our brains can do, and you have bad user design. Go with it and you’ve won.