Top

So the Necessary May Speak

Communication Design

Musings from the merger of medium and message

A column by Luke Wroblewski
November 3, 2005

“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
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. 

Product at Google and Speaker and Author at LukeW Ideation & Design

Silicon Valley, California, USA

Luke WroblewskiAn internationally recognized digital product design leader who has designed or contributed to software more than 700 million people use worldwide, Luke is currently Chief Design Officer for the newly launched startup Bagcheck. He is also an Entrepreneur in Residence (EIR) at Benchmark Capital and speaker and author at LukeW Ideation & Design. Before embarking on his entrepreneurial career, he was Chief Design Architect (VP) at Yahoo!, where he was responsible for product alignment and forward-looking, integrated customer experiences on the Web, mobile, and TV. Formerly Lead User Interface Designer on the platform team at eBay, Luke led the strategic design of new consumer products and internal tools and processes. He got his start at the University of Illinois, where he taught graduate interface design courses and worked as a Senior Interface Designer at the National Center for Supercomputing Applications, birthplace of NCSA Mosaic. Luke is the author of two popular design books: Web Form Design: Filling in the Blanks and Site-Seeing: A Visual Approach to Web Usability, as well many articles about digital product strategy and design. He is a top-rated speaker at conferences and companies around the world and a cofounder and former Board member of the Interaction Design Association (IxDA).  Read More

Other Columns by Luke Wroblewski

Other Articles on Information Design

New on UXmatters