The design of your website should give the visitor a "road map" to help them get to the most important information.
The average person spends less than 10 seconds on a website before deciding whether to leave or stay and explore further. Within those few seconds, they are looking for cues that tell them what the site is about and how to accomplish the task they came there to do.
A well designed website will not leave this decision to chance. Websites should carefully guide the visitor’s eyes to the information that is most important. They should help visitors know where to go and what to click on. This includes having a clear call to action, whether that is to sign up for a newsletter, buy a product, or fill out a contact form. Regardless of the specific objective, the goal of the website is to lead the visitor to take that action.
Each page of the website should have a clear visual hierarchy that uses location, size, color, contrast, and other design elements to guide the visitor to the most important information on the page.
Location
Because we read right to left, top to bottom, most people’s eyes instinctively go to the top left corner of a website first. It’s not accident that this is the most common place for the company logo. Visitors want to confirm who is behind the content they see so they can put the information in the right context.
After seeing the logo, visitor’s eyes typically go to the right, then down and to the right again, in an “F” shape. However, this pattern is influenced by the size, contrast, and placement of other elements on the page.
The main image on A.A. Callisters draws attention by being much bigger than any of the other images.
Size
One of the biggest factors of establishing a visual hierarchy is the relative size of each of the elements. Bigger items will command more attention than smaller items. If everything on a page is the same size, the visitor has no road map of which items are most important. It’s important to establish hierarchy among text, images, and buttons by making the most important things the biggest and leaving the less important information small.
Storyville Coffee Company uses white headings and bright red buttons to contrast against the brown background and draw attention.
Colors
Bright colors draw the eye. A button in red or orange is going to be noticed quicker than a button that is tan or gray. However, that does not mean that you should make all of your buttons garish shades of neon. All colors should work together to form a cohesive look, but there should be certain accent colors that can be used to stand out from the rest of the information and call attention to themselves.
The search function on istockphoto.com stands out because it is a different size and color than the images surrounding it.
Contrast & Proximity
Remember that song from Sesame Street, “One of these things is not like the other….”? When something is different than the things around it, it stands out. The different elements of your website are not viewed in isolation. Whether an element is large or small, whether a color stands out or blends in depends on what is surrounding it. Something that is a different size, color, or shape than the things around it will draw the eye. Make sure that the information that you want to emphasize stands out and that the rest of the information does not unnecessarily attract attention to itself. Adding extra white space to important items can also help them stand out.
Imagery & Lines
The lines and details of the images you use can help guide the reader’s eye. Your readers will follow the direction of any arrows and lines in the design or images. Photos of people are more likely to get noticed that photos of products. Viewers will focus on the faces of the person in the photo and will look where that person is looking or pointing. You can help direct your visitors’ eyes to the content by having the person in the photo be looking or pointing toward a relevant heading or call to action.
