The Importance of Images in Web Design
Studies show that users focus more on information-rich photos most relevant to a website’s content and pay little or no attention to the images that do not have intellectual weight, detail, or relevancy.
Eye-tracking studies recently conducted by Jakob Nielsen revealed that there is a significant difference on users’ perception of website images. They found out that there are certain pictures that are totally ignored. This usually happens to elaborate or “fluff” images that are there solely for decoration purposes. On the other hand, other types of images are necessary elements and carefully examined by users, such as photos of real people and products (and this does not include stock photos of models).
Too many articles have been written about the pitfalls of decorative images. Unfortunately, a lot of websites give more weight to this rather than going straight to the point. Visual fancy remains the top user’s obstacles. And despite increasingly high-speed Internet connections and quick download times, most users still go for websites that deliver the information they need. This applies for both business sites, where product photos are golden in assisting users to better understand their products and compare similar items and for personal websites, where users would really want to know the people or authors behind the website. This is also the top usability guideline for blogs. The following are a few examples of the said eyetracking studies:
Product Details are good
One study conducted on two screenshots of product pages where thumbnail photos of a narrower range of products are optimized for a well-categorized page that leads to a more detailed photo of each product. It was compared with another “big name” (amazon.com) product page carrying a wide range of products that uses a standard gallery layout in order to cater the different category pages. It shows that a website page with a detailed photo of each product specific to a certain category can largely encourage and boost user interactivity and response. It proves that following the website design of “big name” websites is not always good and that businesses should always use detailed product photos that compliment their business model and products.
People Photos are good if they’re real people
Presenting a company’s image online primarily involves the inclusion of photos of the executive team so that users will know that they’re associating with real people. This has long been a guideline and though there are website that take further steps by presenting each photo and biography of the whole team, users often tend to have diminishing attention as they scroll down through longer pages.
Studies done on these type of pages revealed that users allocate more time viewing their portrait photos rather than reading team member bios, despite the fact that the bios consume more than 3 times as much webpage space. It further showed that users do not pay attention to stock photos of models.
So, the key is to present real people who are actually behind the company.
Big Photos are good whenever requested
Studies on product pages showed that users spend more time with product pages that contain detailed information about each product where there’s an option to view enlarged photos. One of the top ten website design mistakes is to provide a poorly enlarged photo whenever the user clicks the link that provides option for a larger view of a certain image. Furthermore, users do not like photos that tend to distract them from completing their tasks.
Information-rich images are good
What is common among all the examples is that users give more attention to information-rich images that display content related to what they are looking for. It further revealed that users stay away from images that are purely for decorative purposes.
The web is already flooded with fluffy images. Invest in quality photos. They’ll certainly add an additional level of engagement to your website.
To read more about these website design studies, head over to Jakob Nielsen’s Alertbox.