Finding the right place for visuals on a website

On a screen, visuals are less noticed than text. Here are some tips for getting the most out of your visual elements.

Web users are more interested in text than images

People often assume that the best way to emphasize a visual element is to improve its contrast in relation to the rest of the page: increase the size, play with the colors or the position on the page, etc. However, a study conducted by InternetWorking in 1998 revealed that the most imposing visual elements aren’t always the ones that attract the most attention.

Thanks to research carried out by Professor Lewenstein of Stanford University, we know that users attach more importance to text than images. In 75% of cases, the first visual fixations focused on the text, and in only 25% of cases on the images!

Mapping lemonde

In 75% of cases, the first fixations focus on the text.

Most users “scan” web pages, pausing mainly on headings and short texts. There are several reasons for this behavior:

- Information searching: users only linger on the keywords they believe will help them find what they are looking for.

- The “banner blindness” phenomenon: users associate animated visuals with advertising and automatically ignore them.

- Readability: it takes 25% longer to read something on a screen than on paper.

Integrating the visual elements with the content

To be effective, any visuals used must be integrated with the text. Users will be more interested in an image if they see it as a source of information.

Integrating the visual elements with the content

Medcost incorporates graphics in the core of the article so that users take them into account.

Every visual element plays a specific role on the page. In their research work, Jared Spool and Matthew Klee of User Interface Engineering rank the four main roles of images by order of effectiveness:

1- Information

2- Navigation

3- Layout

4- Decoration

For the sake of usability, we recommend you look at each of your visual elements and ask yourself how effective it is and what information it contributes.

Images are often a source of “visual noise” and, because of this, they risk not being seen. They can also slow download times considerably, testing the patience of users.

To keep only the essential part of the image and optimize its effectiveness, you could crop the image so the focus is on the main subject, adjust its resolution, or even simplify the color palette if the image in question is a graph. But most importantly, visuals must be integrated with the text, depending on the role they play on the page.