Communicating Importance in Design

By Jamie Knight

Design is all about importance. No really, it is! In this short article I am going to discuss how the concept of importance fits into the design through some simple visual methods you can apply to communicate importance to the user.

Many designers will worry about the message and tone of what is being communicated, either though copy, layout or imagery. While the message of the design is most important, making something a user can understand and then act on may be aim of the page.

Importance has a vital role in design when you are looking for the user to respond a certain way. With careful thought about what is, and is not important, you can get the preferred behaviour from the user and consumers of a design.

So, with all that said, I am going to do a whistle-stop tour of 3 of the tricks I use in my day to day work to draw attention to important areas of a my designs.

Method 1: The Yellow Fade

Example of the yellow box
Familiar to many web developers who make use of tools like Basecamp or Flickr, the yellow fade is a pattern used to draw the user’s attention to something important.

The yellow fade is often used with notices to indicate change. Change is an important bit of information to the user, outside of the normal structure of headings and layout devices. It works well for controls which are present for a small amount of time, or for information which the user must know before they can proceed.

If overused this method can lead to the importance being lost, in my work i tend to reserve the “yellow fade” for only positive or neutral information. Using the red fade for errors and negative information.

There seems to be two ways to implement the yellow fade, for some its a flash, and for others it may be a notice which then fades away.

Method 2: Shadows and layering

An often overlooked way to communicate importance is the shading and layering of information on the page. There are both subtle and not so subtle uses of layering to inform the user.

Example of the thickbox
For example, onthebox.com uses a “thickbox” call out to highlight to the user that something is required, either a selection of options or to log in etc. The thickbox makes use of a large dark background to further draw the focus of the user. The “Lightbox” effect is another use of less than subtle layering to communicate importance.

However, there is much more subtle ways that layering can be used. Slight transparency, overlapping and sometimes blocking out parts of a design can be used. The following image is a good example of using shadows to subtly block out a design.

Example of using shadows for importance

Method 3: Icons & emblems

Icons can be seen in one of two ways, the first way to see them is as cool little pictures around the page, the other way is to see them as little keys into the users mind! Okay, thats a little over the top, but icons have more to them then just pixels.

A good icon is something which is recognizable & relatable. You can recognize that its an icon, and you can relate its meaning to what you are doing. Icons can work on many levels and can over be used to overcome language or cultural barriers. Icons are a powerful way to enhance the importance of elements of you design.

Much of the importance icons can bring to a design problem, is due to convention. For example, the common “add” button has its entire meaning based on convention. Its a convention for the + symbol to mean add, its also a convention for positive actions to be in green. If you think about it, you very rarely see + buttons in red, or blue.

Part of this use of colour and convention add importance to that area of the design and helps communicate what the user is expected to do.

A great example of an interface almost totally reliant on icons is the iphone home screen

Final Thoughts

Looking at ways to bring the important parts of your designs to the forefront is a great way to improve the usability of your site. I could keep writing about importance but i thought it would be better to end this short article with some great resources. If you have any methods or tricks you use in your work please share them in the comments.

Resources

Pattern Tap - Pattern tap is a great resource for well designed page elements. Its a great place to see example of what works in the context of single area.

Jamie Knight

Communicating Importance in Design

Jamie is a web designing, lion loving, 20 something who resides in Somerset UK. Jamie is never seen far from his companion; lion. Outside of the world of web design, he gives presentations about autism and rides a red mountain bike!