Leverage Irregularity to Create Meaning and Importance

This is the part where I pull a bait-and-switch on you. After all this talk about consistent design and uniformity, telling you to leverage irregularity may seem a little insane. But this concept comes straight from the basics of design knowledge, and is vital to the representation of data and interface elements in an application.

Uniform and consistent design, as we've discussed, is key to helping users extract meaning from the design of an application and keeping them focused on tasks. But sometimes we need to make something stand out a bit on purpose so users realize it actually is more important than other elements, or at least different somehow, and requires additional attention. When this happens, we need to stray from the rules of uniformity.

The best way to make something stand out is to present it differently than everything else. Much like the notion of creating applications that stand out by taking a completely new approach to the completion of a common activity, irregularity is a great way to make individual elements on a single page stand out from others. And the same tools used to design uniformity and consistency can be used to make page elements unique. In fact, consistent and uniform interfaces make it possible for things to stand out. Uniqueness is the product of difference, and difference can only occur in an environment of sameness.

Rollyo uses color and dimension to make its Search box stand out from other page elements.

For example, Rollyo features a Search box on its homepage (and every other page, for that matter) because the primary purpose of the site is to allow users to search content. To make the Search box stand out, Rollyo increased the dimensions of the text field, wrapped it in a nice, colorful Rollyo logo graphic, and set the font to a much larger size than other content on a Rollyo page. The Search box is easy to spot on every page and, as a bonus, reinforces the Rollyo brand every time it appears.

Google's Search box, also readily available throughout the application, is set apart by always being displayed next to the Google logo.

Making something stand out is not complicated. It's usually a simple matter of making it stand out. (I love it when things are obvious.)

That said, there is one small thing to keep in mind. If something is meant to stand out, the element should be inconsistent enough from the rest of the interface that it appears to have been done intentionally. Small differences in alignment, coloring, and dimension may appear accidental and decrease a user's confidence. Big differences, on the other hand, make it clear that whatever was done was intentional.

Color

Color is a great way to make something stand out. It's also the simplest. When everything in an interface is blue and white, for example, a red error message sticks out like a sore thumb.

When deciding which colors to use throughout an application, reserve one or two additional colors for things that need to stand out from everything else. Just make sure the contrasting colors play well with the color palette you choose for the rest of the site. Making something stand out shouldn't mean completely disrupting your design.

Simple as that.

Since the predominant page color here is light blue, the Yahoo! Search box, which uses a slightly darker shade of blue, draws the eye right to it.

Color differences can also be very subtle. If the predominant color of a page is light blue, a page element using a slightly darker shade of blue easily distinguishes itself from the rest of the page. Subtle differences like this can be just enough to draw the user's eye to the element without being disruptive to the flow of the page. Sharper differences, however, are more effective when a page element is particularly important and must be noticed. In this case, use strong, contrasting colors.

Dimension

As I mentioned earlier in this book, Odeo.com has a gigantic registration form. Nothing else on the site is nearly as large. I'm not sure why. The size of the form fields is distracting and not at all necessary. It appears to have been made large just to avoid what could otherwise be a barren page. The registration screen has only four fields, but it takes up a good chunk of screen real estate. There's nothing else on the registration screen, so it's unnecessary to use increased dimensions to imply importance. With no other visible content, the importance is implied by default.

That said, elements that take up a lot of room are viewed as more important, mainly because they take up more room and smaller elements convey lesser importance. Dimension can define what's most important on each page by simply making an individual element stand out from the others by its size.

If you use dimension to make a page element stand out from the others, be sure to make the proportional increase in dimension consistent from page to page as well. The consistency will, again, help a user reliably know that a large element equates to an important one as she moves around the application.

If elements are sized differently each time, she may find herself wondering why, and the whole goal is to avoid this.

Interface Surgery: Surfacing the bananas in a process

Seth Godin posits in The Big Red Fez that users follow trails of clear, distinct signposts much in the same way that monkeys follow trails of bananas. In other words, if you add a button to a page that tells users exactly what you want them to do, and it meshes with what they want to do, they'll click it. It's a strange metaphor, but it does do a great job of illustrating yet another way to design the obvious. And designing page elements to stand out is exactly how we can achieve this effect.

I can't tell you whether or not Ryan Carson ever read The Big Red Fez, but he does seem to have gotten the point. He says:

We had to keep reminding ourselves that DropSend is meant to solve one problem, and one problem only: sending large fi les that you can't email.

We were constantly tempted to introduce new features, but we always said no. Thankfully, we have received many compliments on how easy it is to use DropSend, so I guess we achieved that aim.

(Of course, DropSend can be used for any file you want to store online, not just large files, but the application was designed specifically to support files too large to send by email.)

DropSend features a banana to help you get started.

Upon logging into DropSend, the basic interface shell is displayed, but in the center of the main content area is a very obvious block of text that asks if you want to Send a File or Upload a File to Your Online Storage.

This is a banana. It tells the user how to get started. It tells her what Carson Systems hopes she will do while she's logged into DropSend. It also tells her how to do what she wants to do.

Bananas are incredibly useful when you want the user to do something specific, like complete a task. For example, a user wishing to purchase a new desk chair needs to locate the chair she wants, add it to her shopping cart, enter her billing information, and confirm the purchase. This process is much easier to follow when each screen in the process uses a banana to guide her towards completion of the task.

Surfacing the bananas in a Web page is a matter of understanding what is most important on the page and then making it stand out somehow. Sometimes there may be more than one important element on a page, but in most cases, there should not be more than three or four. If there are more bananas than this, odds are the design is not as focused as it should be, and users are being given too many options.

No bananas here.

Pages containing a lot of text do not always do a great job of surfacing the bananas in a process. The intent of the screen shown here is to compel the user to learn about Godin's banana principle by reading the three pages that explain the concept and how to achieve it. But ironically, although the text explains how to do this, there is no clear and obvious path towards the completion of the task. Sure, there is a navigation element towards the top of the screen, but the goal is to get the user moving quickly and in the right direction.

The first thing we can do is convert the terms within the text that point to the appropriate pages into links.

This minor change can certainly help anyone who bothers to read the text on this page, but odds are, not many people will stick around long enough to find the links. We need to put up some big signs that explain what to do.

Links are easy to spot within large blocks of text, but this page still lacks a banana.

Bananas for everyone!

In this version, the graphical buttons indicate the actions the user should take. The new design points the user to the three pages and offers an obvious way to access each one. It also takes focus off the text.

These buttons use the same colors as the rest of the page, but since the main content area does not contain the dark green and red colors, the buttons stand out. They also stand out by appearing larger than everything else on the page. The buttons use a larger font than even the page title and logo areas of the page.

The final version of the page leverages color and dimension to make the bananas stand out.

And since the buttons now tell the user exactly what to do, we can remove the text telling the user to "use the links above to visit pages about each topic." The new, shortened version makes the block of text look even less important when compared to the buttons.

Godin's banana principle doesn't apply to everything. Portal pages and the like are not good candidates for large, clear signposts, because they are generally aimed at offering users a wide variety of options instead of just a couple. But when the mission for the company and the user is to move the user through a particular set of screens towards completion of a goal, bananas can be very effective.

Consistency and uniformity help users understand applications, derive meaning from screens, and stay on track without a lot of effort. But when it's particularly important for the user to focus on a certain page element, changes in color and dimension can be just the thing to make it pop off the page and communicate to the user what needs to be done.