Though carefully structured organizational systems and well architected interactions are key components of effective interface designs, it is ultimately the presentation of an interface—layout, look and feel—that tells users what a product has to offer and how they can make use of it.
As a result, creating usable and engaging interactive products is dependent on our ability, as designers, to communicate with our audience. The better at communicating we are, the easier it is for our audience to understand our messages and intentions and the easier it is for them to use and appreciate the products we design.
“When you design an interactive product, you are creating the setting for thousands of conversations, which will be spoken between product and person.”—Marc Rettig
Interactive products, by their very nature, tend to be complicated. They allow us to create and control large amounts of information and enable many unique interactions. As a result, there’s a natural tendency for interface designs to over-communicate, or establish multiple forms of dialogue and vocabularies within a single application or interaction. Complicated concepts require more explanation, right? Not always.
“The ability to simplify means to eliminate the unnecessary so that the necessary may speak.”—Hans Hofmann
Consider the simple table below. It’s telling you about a certain set of data points and their corresponding values. The problem is that excessive visual noise and redundant content obscure the values themselves—arguably the most important elements within the table. It’s hard to concentrate on the values, because the background color and the thick borders continually compete for your attention. The varying thicknesses of the table and cell borders actually make them even more distracting. In other words, the table itself is talking louder than the data it’s trying to communicate.
Our first inclination, therefore, might be to reduce the table’s volume by removing its background color and dark borders. This gives us the table here.
The values and their labels are now clearly the focus of the conversation, but this design requires a lot of bouncing back and forth between the labels and the values to understand what the table is telling us. We’re not being told anything about the relationship of the values until we take the time to read each one. We’ve also lost the message that this is a unified set of data. Once we remove the border, there’s no visual grouping of the elements in the table, so our table may blend in with other items on the page—depending on their visual treatment, of course.
In order to communicate the relationships among the labels and the data in our table, let’s bring back some of the visual elements we just took away. This time, however, we’ll use only the minimal amount of visual contrast necessary, as shown below.
The light, single-pixel border we added has just enough visual weight to group the content in our table, without being visually distracting. The light background color meaningfully groups related content within the table—such as the numbers of admissions and numbers of discharges over various time spans—without introducing multiple visual elements like the borders between the rows of the table we had before. We also reduced the contrast of the table header, which was getting undue attention.
Things are looking pretty good, but we can do even better. By eliminating redundant content—such as the repeated phrase Number of—and putting the visual emphasis on the values we care about rather than on their labels, we can simplify the design of the table even further, as shown below.
In our final table design, the visual elements are just noticeable enough to group related content without distracting from it. We’ve made the labels within the table easier to scan by removing redundant content and emphasized the values through the use of bold type.
Through this rather simple example, we’ve seen how we can reduce both visual design and content elements to the minimum amount necessary for effective communication. Clear, concise design is a key factor in the success of all user interfaces, especially when you consider the amount of information we’re all required to parse in today’s digital world. Design so that the necessary may speak.