Top
Design

So the Necessary May Speak

Communication Design

Musings from the merger of medium and message

A column by Luke Wroblewski
November 3, 2005
  12 Comments

“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

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.

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.

Champion Advertisement
Please become a patron of UXmatters by subscribing on Patreon.
Continue Reading…

“The ability to simplify means to eliminate the unnecessary so that the necessary may speak.”—Hans Hofmann

Consider the simple table in Figure 1. 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.

Figure 1—A simple table
Simple table

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 in Figure 2.

Figure 2—The table without its background color and borders
Table without background color and borders

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 in Figure 3.

Figure 3—The redesigned table
Redesigned table

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 in Figure 4.

Figure 4—The redesigned content
Redesigned content

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. 

In Information Design

Luke Wroblewski

Product Director at Google

Speaker and Author at LukeW Ideation & Design

Silicon Valley, California, USA

Luke WroblewskiBefore joining Google, Luke was CEO and cofounder of Polar and Chief Product Officer and cofounder of Bagcheck. He is the author of three popular Web-design books—Mobile First, Web Form Design, and Site-Seeing: A Visual Approach to Web Usability—in addition to many articles about digital-product design and strategy. He was also the founder of LukeW Ideation & Design, a product strategy and design consultancy. Luke is a top-rated speaker at conferences and companies around the world, and was a cofounder and former board member of the Interaction Design Association (IxDA).  Read More

Other Columns by Luke Wroblewski

Other Articles by Luke Wroblewski

Other Articles on Information Design

New on UXmatters