UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 706 July 27, 2011

Think Outside the Box, but Don't Forget the Box Exists

Imagine if every time you walked into a McDonald’s the menu was different, the food was different, or the prices were different. If you had to relearn McDonald’s every time you walked in, it would be less attractive as a fast food restaurant. People rely on consistency and past experience for fast decision making. Inconsistencies cause delayed responses and, in some cases, unwanted errors.

McDonald’s lovers have learned the menu through frequent visits to different McDonald’s locations (same brand, different locations). Conversely, web users learn standard web behaviors by frequent visits to different websites (different brands and markets). The more consistency there is, the easier it is for users to find their way within a single website and to move from one website to another. Deviation in standards can cause delays for users or cause unwanted user behaviors, such as abandonment in favor of other companies. However, this does not mean that creativity should be banned or that reinvention of the wheel is no longer needed. After all, today’s Mercedes looks quite different from Karl Benz’s first gasoline automobile.

Restroom signs are fun examples of how creativity and consistency can coexist. Designers often take the familiar male and female symbols and propose their own creative interpretations, offering a unique look-and-feel to a universal symbol.

Conventional and non-conventioal restroom signs

As long as it doesn’t interfere with the goal of the sign—i.e., providing a clear direction and organization—creative designs can offer great ways of uniquely conveying the message.

Macro-Level vs. Micro-Level Consistency

There are two ways of ensuring consistent design. One way is to follow well-established market standards used in other sites (or even other media). This is macro-level consistency. The other way is to establish a new set of rules that remain consistent within a specific site, which I refer to as micro-level consistency. Through the usage of graphic design fundamentals such as colors, type, shapes, layouts, and grids, designers may elect to use the macro approach, the micro approach, or a combination of the two, in order to achieve consistency. This can help build users’ trust, improve the speed of usage, enhance readability, and encourage certain behaviors and emotional responses that should result in better experiences.

Consistency through Design Fundamentals

Color Consistency

Color is interpreted by the brain faster than words and, when used correctly, serves as a great visual cue for the functions and behaviors of site elements. Web users learned to trust that blue text (whether underlined or not) is most likely a link that will lead to another page. This is a macro-level standard that has been adapted by many websites.

Google search result page showing standard use of colors for links

LaLicious, a bath-and-body product line, chose a micro approach for their website design, using the color pink for links. The usage of a different color for links does not by itself cause inconsistency. However, in this case, the pink text elements function as links only in some cases (boxed in green in the screenshot below), while in other cases the pink text is just plain text. This inconsistency creates confusion as users realize they cannot trust the message conveyed by the colors and are forced to hover over each element to determine its functionality.

LaLicious website with inconsistent use of a pink color

Zoomed-in view of LaLicious website use of color

One solution to this might be to underline links even when they’re not being hovered over. This would differentiate them from non-link pink text elements. Or the color pink could be used for links only. If there is a need to highlight certain words, a bold style could be used instead of text color to indicate emphasis.

Type Consistency

Typography is the style and arrangement of typeset matter. In communication design (with which UX design has significant overlap), the appearance of words is as important as their meaning. Type attributes such as typeface, size, spacing, margins, etc., need to be carefully planned in order to best convey a message and direct users’ attention. Users look for familiar patterns of either macro-level or micro-level consistency to quickly scan pages and complete tasks. News sites mimic newspaper type styles, using larger fonts (in many cases bold styles) for main headlines, medium-size fonts for sub-headlines, and smaller fonts for article copy. This macro approach allows quick page scanning and fast decision making as users scan content and determine what to read.

Let’s take a look Amazon, the largest online retailer in the world. Within an Amazon.com product page, there are thirteen different font treatments in the product description alone, and the full page includes additional styles. Thirteen styles are too many for users to memorize and decipher to quickly learn a system and reuse it properly. Further, the current micro system lacks visual organization, making it difficult for users to quickly scan the page.

Amazon product page

Amazon product description area with inconsistent use of font styles

Font Key (Photoshop point settings):
1. 20 point, black
2. 12 point, black
3. 12 point, blue, underline
4. 12 point, gray
5. 14 point, black
6. 18 point, red
7. 14 point, blue, underline
8. 14 point, red
9. 16 point, green
10. 12 point, black, bold
11. 12 point, green
12. 12 point blue, underline, bold
13. 12 point, red

By contrast, here is the same product as presented on eBay. Two font colors and five font sizes and styles are consistently used throughout the product description creating a clear visual path and quick information scanning.

eBay product page

eBay product description area showing consistent use of typography

Font Key (Photoshop point settings):
1. 18 point, Black, Bold
2. 12 point, gray
3. 14 point, black, bold
4. 12 point, blue
5. 10 point, black
Shape Consistency

Shapes are the building blocks of graphic design and are often used to organize and separate information. Together with type, color, grid, and layout, shapes can confer meanings and certain feelings onto page elements such as copy and images. Circular shapes, for example, will soften an overall look-and-feel, while the sharper corners of a square will appear rigid and orderly.

Shapes are often used to direct the eye through the design and keep the user’s interest while moving from one element to the next. Inconsistent usage of shapes may disorient users and interfere with their performance of tasks.

Most sites present their products using a square- or rectangular-shaped areas. This macro approach works well as it is easy to implement and serves the purpose of organization.

1-800-Flowers category page showing rectangular shape consistency

The Museum of Modern Art (MoMA) often produces small, informative websites for each of their exhibitions. The designers for their color exhibition website broke from the standard square/rectangle shaped product display (macro), presenting the color exhibit site in a unique and fresh light. Each product is presented within circular shapes, each in a slightly different size and alignment. The circular shapes were most likely designed to represent the color wheel (considering the exhibit topic) and give a softer and more playful look to the page. Further, the different size circles and alignment changes were carefully planned and achieved a fun yet organized atmosphere that is easy to navigate.

MoMA color exhibition website

Layout and Grid

Think of a grid as a plan for your page layout with one goal in mind: a seamless user experience. It provides guidelines for page content and organization, and establishes a modular structure that allows layout variations without affecting readability and consistency.

The site’s main navigation design needs a careful consideration when designing the page layout. A website’s navigation is its table of contents and one of the main cues for users about the depth of the site and their position within. It is therefore essential to create a navigation system that is easy to locate and use.

A macro-level standard is to position the main navigation either at the top of the page or on the left-hand column (for left-to-right languages, anyway).

4x4 grid displaying macro placement for navigation systems

The main navigation for MoMA homepage is placed at the bottom of their page layout (a micro approach). This causes multiple issues:

  1. A natural readers’ flow is from left to right, top to bottom. A top navigation often serves as an anchor and a starting point for a page, as well as a comfortable position for users to return to if lost. Placing the navigation at the bottom not only sends users searching for the navigation when they first encounter the page, but also forces them to keep jumping from bottom to top (navigating at the bottom, then jumping to the top of the page to view the content).
  2. Breadcrumbs and page titles were treated as a macro grid approach as they were positioned at the upper left-hand part of the page. This causes a complete visual disconnect between the main navigation, breadcrumbs, and page titles, which should all work together to serve one purpose: telling users where they are in the process.

MoMA main website, International Program

In conclusion, keep thinking outside of the box but don’t forget the box still exists.

The boundaries of convention, although invisible, have taken a while to establish, and following them will keep you on target. Communication design and UX design are about sending a message for people to read, understand, and follow. Whether you select a macro approach or design a micro system, the goals remain the same: a seamless user experience.

ABOUT THE AUTHOR(S)

User Profile

Tammy Guy is the founder of a visual design and usability consulting firm focused on strategic brand planning, creative direction and diffusion of user experience problems by applying design theory and usability best practices in a rapidly changing Web environment. Her firm provided consulting services to clients from various industries such as fashion retail, commodity retail, pharmaceutical, insurance, financial services, social networking and others. Services include product evaluation, strategy and planning, creative development and direction and usability consulting. 

 

In addition, Tammy has been a frequent guest speaker with the Nielsen Norman Group for the past few years where she teaches visual design and usability classes. 

Add new comment

Comments

19
18

I learned some thing from your: "Type Consistency" topic. Thank this post.

18
19

Great article! I especially like the moma example.

17
17

I really like this article. Another example in various shapes is Google's image search. The default used to be same size, tabular squares. Now it is a mishmash of different shaped images. I always go to the bottom of the page and change it to the bottom of the page and switch it to the basic version which, is for me, much easier to find the image I want to see and therefore, click on the site I want to visit.

20
20

This is a great article. So many sites get overloaded with too many fonts and inconsistencies. I loved how you used specific examples.

Thanks for sharing!
Craig

21
20

Thanks for the reminder. ;)

23
16

Excellent article and right in the same vein as our recent feature on Predictability here at UXmag. Not sure personally if I would have used those particular bathroom signs as an example. But it takes all kinds to make a fun world :)

20
22

Great article. MoMA bottom menu sample: I used to think in this kind of navigation placement also, for pages like blogs or where the top navigation stands for only some elements, I think that the bottom aligned navigation is better, because people are there mainly for reading articles, so the emphasis of navigation changes a little bit. In this case I also think that this layout is not preferred (as you have to navigate a lot for eg. find exhibitions, artist etc.)

ps (offtopic): hey UXmag, you can't be serious with this captcha experience, try to misspell it, I know, that it's not a frequent use case that people write it incorrectly, but you are an UX blog => these kind of failures are not allowed here :)

17
18

LOVED your post. My focus is usability and it's so refreshing to find a web developer who's really tuned in to the customer experience. Thought you might enjoy this email newsletter I wrote along the same lines: http://myemail.constantcontact.com/Is-The-User-Experience-Really-That-Important-.html?soid=1101560951997&aid=l2_7nfVCtco

19
19

Great article,
I have experienced that especially young people have a problem with the "box" - boxes of rules, standards and traditions.
I think that it's important to know the form, content and the substance of the box and its history - and that doesn't only apply to design.
If you know the "what", "why" and "how" of the box - you hopefully have a feeling when you have to walk the line and when you can or might disregard it.

25
19

For Amazon's sample I disagree somehow...

If a brand which is so popular that everyone has been browsing and using everyday, people will soon adapt to it. No need to say if that brand has become one of those standards that other brands have been trying to mimic.

But I agree that there's indeed too much type sets in Amazon's product page. And to be honest I think most people (including me) can quickly and easily scan the product's:
- price
- amount saved
- in stock or not
- deliver by when

But still, Thanks for the great article here!

16
23

Great article. Well stated.

24
17

Great article. While I do think some websites brands push them to be way out of the box, the majority of designs should be consistent with a flare of difference that stands them apart.

21
22

Great article. I'm constantly fighting the box, but putting a skeleton of a box based on comparables helps me considerably (for example, of ten competing websites, all have x-side navigation, all have x-color background, all use x-type and size of fonts, etc.