Using Visual Simplicity in User Interface Design

This article will look at visual simplicity. Visually, the Google search page, the portal for many to the web, is about as simple as a user interface gets.

Compare the Google’s UI to Craiglist. The obvious difference is that the Craigslist UI is visually busier, more cluttered, more complicated.

This is somewhat ironic, because vast complexity resides behind Google’s search box. Google predicts your typing, interprets your query, and using information gathered by its web crawlers, processed by its indexer, and filtered for spam, serves up a series of links, ranked by relevance to your search, all within a fraction of a second.[1] Craigslist, on the other hand, is an elaborate collection of hyperlinks that is not nearly as complex behind the scenes.

Complexity behind the scenes doesn’t need to translate to a complex UI. The previous article in this series looked at the overall organization of an application or web site. In this article, we’ll look at the design of the pages or screens themselves, and ways that user interface designers can move pages or screens closer to a Google level of simplicity.

Does It Seem Simple?

In many ways, simplicity is largely perception. Proxies such as mouse clicks or time required to accomplish a task may give one an idea of how simple an interface is, but you can’t directly measure simplicity; instead, people subjectively evaluate simplicity and know it when they see it.

First impressions matter. If a UI is visually simple, people will be inclined to think it is simple, and are likely to approach it more optimistically. Instead of being initially discouraged, they think, “This won’t be so hard.” To the uninitiated, Craigslist can initially be visually intimidating. Google, on the other hand, communicates simplicity, and is much more inviting.

What makes an interface look simple?

Google obviously relies on use of white space and minimized visual noise. Craigslist, on the other hand, is visually very busy.
Important information should be placed where we are most likely to first look. Google places the key UI element, the search box, front and center. Google also places the most relevant search results at the top of the list, as discussed in Part 3. In a similar way, web site designers place the most important information “above the fold,” meaning at the top of the page, above the region that is hidden until the viewer scrolls. Compare what’s at the top of an Amazon.com page to what’s at the bottom. What is most important?

Important information can also be emphasized by design. Information in a contrasting color, that is bolded, or that is in a larger font stands out and attracts the eye. Craigslist does this by shading headings such as community and personals.
Follow conventions, so information appears where users expect to find it. Login/logout links are typically in upper right. Clicking on your name, also typically in the upper right, lets you access your account. Shopping cart icons are also generally in the upper right as well, as is the search box. Tabs (or similar navigation links) are often across the top. Many sites follow these conventions; note, for example, how similar the layout of E*TRADE’s banner is to Amazon’s banner (above).

Google even uses humor. The image on their search page, known as the Doodle, changes and is frequently topical or amusing, and may even be an Easter egg leading to a game. While this doesn’t necessarily contribute to simplicity, it does make the UI a little more inviting and fun. This Doodle, for example, was in celebration of Jim Henson’s 75th birthday.[2]

Hiding Complexity

UI designers can also manage complexity by hiding information that users do not need to see. You probably have several pages open in your Web browser right now, and the browser tabs help you organize your workspace and hide pages you don’t need to see at the moment. Note that Craigslist doesn’t make much of an attempt to hide complexity: there are many links visible on the page. One could image an alternative interface with tabs for community, personals, housing, etc., and a much cleaner interface.

There are other ways to hide complexity:

Pop-ups are a common technique, and are often used to define terms. Colored text or an unobtrusive dotted underline indicates that a definition is just a click or mouse hover away, if you would like to see it. That’s the key: the definition is hidden from the uninterested. Here’s an example from an online course.

An accordion is a user interface widget that is functionally similar to tabs (clicking on an accordion heading expands a section and often collapses other sections). Adobe Lightroom uses accordions to organize the picture editing controls. The accordion provides an additional benefit, as the order of the groups matches the order in which the edits should be performed in each module (a sequential organization, just like the tabs across the top of the Lightroom interface, as discussed in Part 3).

Entire content areas can be collapsed. YouTube comments are an example of this; they are normally hidden because most users just want to watch the video.
Wizards hide complexity by breaking a task into steps and showing those steps one at a time as they sequentially guide users through the entire task. Here is an example from the file manager Directory Opus. Note that wizards also provide the opportunity to document and explain the process, further simplifying for the user.

There Are Limits

Sometimes interfaces remain inscrutable. This example is from the music player foobar2000, which is a plug-in for generating playlists. After a few minutes of looking at this UI, many will just give up.

Why does this dialog box seem so complex? Most obviously, it does not leverage a mental model. I am making a smart playlist, and I may have an expectation of how that process should work. Based on that expectation, I can make the assumption that the Filter determines what is in the playlist and the Sort determines the order of the playlist, but I do not know what I am grouping. Worse, Group is in the upper left and is thus most prominent (because that’s the origination point when we start to read). So the first thing the user likely sees is the most confusing element. Finally, I apparently need to master some sort of syntax to specify grouping, filtering, and sorting and I don’t know that syntax, which adds to the cognitive load.

As we conclude this series with this example, it provides a good opportunity to again emphasize the importance of mental models. Your UI should be based on an established mental model, such as task-specific model (Adobe Lightroom) or a convention-based model (your UI follows established conventions that users are familiar with). Your organizational and navigational scheme follows from this model, and your visual design further removes complexity. That’s the path to simplifying complexity.

Dr. Craig Rosenberg is an entrepreneur, human factors engineer, computer scientist, and expert witness. You can learn more about Craig and his expert witness consulting business at www.userinterfaceexpertwitness.com