Designing For Attention

One of the most critical things to bear in mind when it comes to website design is that the website, whatever it is for, is not being designed for you. (Whoever you are.) It's being designed for the user, and very specifically, it is being designed for the user to use. So try not to get too aught up in what you think looks slick, or cutting edge, or aesthetically pleasing, and focus instead on making the site as pleasant and easy to use as possible, for as many visitors as possible. In this digital age of constant exposure to the various options that the internet makes possible, the attention economy has become very real, and the time that you have to convince a visitor to stay on your site is still dropping. According to marketing automation experts HubSpot, more than 55% of visitors spend less than 15 seconds on your site. Unless it's compelling or informative enough to keep them there. A quick scan to see if you have what they're looking for, and most of them are gone. So the first rule of your design is that you have to make sure that they notice what's important. If they don't, then it doesn't matter how much you love your own design, it hasn't accomplished its objective. Aesthetics are important, but they're only one of multiple factors that influence the effectiveness of a page, including functionality, brand recognition, intuitiveness and more.

The Visual Hierarchy

Visual hierarchy refers to the order in which elements on a web page (or app) are noticed by the user. If you only have a call to action and an image on your page, it's the visual hierarchy that determines which a user sees first. The first job of any page design, is to command the attention of the visitor. And then tell them what to do next.

Salience

Salience refers to how noticeable a specific feature, or element, is, and it is the salience of each element that will help determine the visual hierarchy of the page. Each time you get the user to focus on another element, they have taken another step toward accomplishing the goal that you wish to achieve on this page, whether it's another click, an enquiry, or a purchase. In general, salience can be controlled by use of the following elements:

Size: Should be aligned with importance - Bigger things are more important.
Contrast: Important information should be high-contrast to stand out and be easier to read.
Placement: Important information should be higher on the page where it is more likely to be seen.
White space: Increase the white space around important elements to make them stand out.
Colour: Use the most noticeable colours for the most important elements.

Build visual hierarchies by making some elements more salient, and others less salient, in order to direct the user's attention.

Salience & Colour

Colour is an effective way to manipulate the salience of any given element, and one of the first things that you should do when planning your design is put together a palette that expresses the priority of the objectives of the site. Salience can be altered by adjusting the tint and saturation of each colour, but some colours are naturally more salient than others, and you can take advantage of this to help certain elements dominate. Thus both the position of an element, and its colour should be aligned to the priority of the business goal it is intended to help accomplish. The most important things should have a high ranking in the visual priority, and they should be more salient in order to focus the most attention on them.

Achieving Your Website Objectives

Whatever you seek to achieve with your website, you need to be clear on exactly what those goals are. Once you know this, you can plan your design to ensure that the attention of the user is directed to the most important information, and led from there to the most desirable action. Remember, getting the visitor to the website is only the first step. Once they are there, you need to make sure that they are finding what they're looking for, and completing the actions that the site is designed to elicit.