How to Use Images Successfully – Web Design Usability Guide

Advertisement
They say a picture is worth a thousand words. True or not, images are an important part of any website we create. Since it is so easy to embed an image in a website (even the process of creating your own images is very easy), most websites are filled with them. There are some very good examples out there on how to deal with images in a website from different points of view, but most of the websites do not showcase positive examples. And while this is not entirely dangerous for a design, it might decrease your chances to sell, in case you have a call-to-action page, or the chances to create good reading flow. It is more a matter of details than a matter of important principles, but dealing with images should be something designers understand and apply better.

%tutke

Jakob Nielsen, the expert in webpage usability, together with his company NN/g, did an eye tracking study and concluded it with an article posted on their site, titled Photos as Web Content. Their conclusions amazed the design industry and came with great answers to questions experts weren’t able to answer before this study was done.

“Users pay close attention to photos and other images that contain relevant information, but ignore fluffy pictures used to “jazz up” webpages.” – Jakob Nielsen.

Web Design Usability Guide – Dealing with Images

Indeed, users want to see photos on websites, but they want them to be relevant. They would prefer a webpage that doesn’t have visual images rather than a webpage that has lots of photos that just make it heavy and cluttered. The key in using images on websites, according to the study, is based on a few basic ideas:

  • Image fundamentals – size, composition, quality and exposure are four important things to look for in a good image. People actually look for quality in images, even the contrast makes a huge difference.
  • Effectiveness– if the picture creates excitement or interest, then it works. It is down to three characteristics:
    • Emotional appeal – does the product in the picture look good and make the user want it?
    • Rational appeal – does the image show the benefits of the product?
    • and Brand appeal – does the picture fit your brand?
  • Transmitted message – this is about the image sending the right message to the website readers.
  • Anticipated user response – this is a bit more difficult to put into practice, but the basic idea behind it is that the picture should help decision-making and create a desire for the product. We will talk about this a bit later.

Purely decorative images tend to be ignored unconsciously by our brain. Like a radar, if the images are there only as a filler, the brain will ignore them. The study concluded that pictures and images of real people or real products are automatically categorized as important and are to be studied in detail by the human brain. If you have a personal blog, people would rather see your face than a drawing or a caricature. They want to see the face of the person communicating with them, it is a matter of trust and bonding.

If you own a company, it is a very good idea to take some time talking about the people behind it – using images. It gives a personal touch to an otherwise faceless company and people dig that. People actually want to know (or at least see) who the people are behind a company. If you can afford it, invest in a good photographer and try to stay away from stock pictures (especially from stock pictures that aren’t relevant to your content). It might cost a few bucks, but it will add a lot of value to your company website.

Several eye-tracking study show that the more detail your product images have, the better the results you will have. Yes, studio pictures of a big flat screen TV work just fine, but is just fine good enough for you? People want to see details, show them!

Quality and relevance

Below I will show you some results of different studies. You will see several websites marked with heat zones. The red areas indicate where the users’ eyes were mostly focused, while the blue areas show the exact opposite, indicating what is ignored or a turn-off for visitors.

%tutke

Eye-tracking study on Adelphia’s website

Besides the fact that it is an incredibly outdated design, you can clearly see that none of the heat zones are on images. It is because all the images embedded in their webpage are purely fillers. Had they been using relevant pictures, the heat zones might have been a bit different, but for now it shows how much of a waste of space images are on their site.

Another good example can be seen below. New York Magazine’s restaurant section has also been part of the eye-tracking study and it shows that even if worldwide known chefs are featured in images, the quality is still important. So even if the pictures are somewhat relevant, low-contrast and small size images are simply ignored. Image quality is as important is the relevance of the image being used. There has to be a balance, where quality and relevance are the two guiding principles.

NYMag, retaurant section

Eye-tracking on NY Mag’s website

Jakob Nielsen and Kara Pernice wrote an article entitled “Images as Obstacles” some years ago. The images above are courtesy of Peachpit and the amazing heads who published the study. Thank you for your tremendous work!

Guiding the user

Not many designers have a degree in psychology, therefore few of us know how the human brain works. The same eye-tracking studies show that our focus can easily be influenced and changed by images. We are obviously talking about high-quality, relevant images, not fillers. In a study called “You look where they look,” James Breeze showed how relevant images can be to the flow of a website.

He made an eye-tracking study on 106 people by using a baby diaper manufacturer’s website as an example. As you can see in the two images below, when the baby faces the visitor, most of the people tend to look at his face. Remarks including “adorable, cute, sweet and little pumpkin” were probably quite popular.

eye-tracking study

Study on a diaper website

However, when the same ad, with the same text, with the same baby, but in a different position is presented to a 106 people, the results are clearly better. Not only do the people focus mostly on the text, but you can also see increased attention to the brand and even to the small text underneath, which is a money-back guarantee disclaimer (quite important for a business, probably one of their selling points – a bummer to miss that).

baby-2

This shows how much influence a picture can have.

JCDecaux and THiNK worked together a few years ago and came up with this research which confirms the results above: the eyes of the users can indeed be guided towards key messages or elements in the presentation or the ad.

Because many ads feature beautiful models, they tend to be the focus instead of the product. Models, instead of drawing attention towards the product, steal the attention and draw it towards themselves. The study below shows how this can be fixed.

Sunsilk eye tracking

Eye-tracking on Sunsilk product.

In numbers, this research shows even clearer results. On the initial ad (left), there is very little focus on the brand and the product – actually only 6% of the people looked at it. However after the ad was manipulated and tested again, more people looked at it. No less than 84% of the people looked at the product and the brand (even the logo at the bottom) after it was modified. This is a 14X viewer increase, which, in my opinion, is a huge difference.

The right images can help designers guide user’s eyes. If models are used, make them look towards the product image, the logo (brand) or the text. This will increase the product awareness and have the desired effect.

Images Need a Purpose

Images can not only guide the user’s focus, but also explain a lot about the product in just few seconds – better than words could describe it. An extremely well-known example is Square, a smartphone application that allows you to accept credit card payments through your mobile phone or tablet by using a small device.

square

The product is described in so many ways by a simple image

As you can see in the image above, the visitors understand many things about the product in just a few seconds. After looking at this picture they already know how the card reader attaches to the device, how big it is, what devices it works with (it also works with Android, but it is quite difficult to show that too), how to swipe the credit card and what appears on the screen of the device when the card is swiped. Lots of long, boring paragraphs would have to be written (and obviously read by the visitors) in order to understand this information. Instead, a picture says it all. This is a classic, brilliant example of effective use of images!

Another good example is showed below, how Apple sometimes advertises their MacBook Air product. We all know it’s small, light and beautiful. Well if you didn’t know it, you’ll get the idea in a millisecond by looking at the minimalistic ad below.

macbook air ad

Macbook Air simple, yet effective image advertising

Trust is Key

In case you have an online shop, keep in mind that trust is crucial. Nobody will buy a needle on the internet if they do not trust the seller. The reason why Amazon and eBay are popular is because, besides the fact that they are huge worldwide brands and offer different money-back guarantees, they also have many different security features. Shoppers trust them and they know that if the seller is not going to deliver the product, the company will take care of it. If you own an online shop, make sure clients trust you.

What does this have to do with images? Well it’s simple. Trust can be achieved through images according to a study on landing pages conversion rates made by Paras Chopra.

building trust

Building trust is incredibly important when dealing with online visitors

It was incredible to hear about this online shop selling Brazilian and Caribbean paintings. A slight change meant an increase in their conversion rate of more than 95%, from 8.8 to no less than 17.2. How? Instead of showing thumbnails of the paintings, they showed thumbnails of the artists that made them. The quality of the paintings was never a problem, but the fact that they did not trust the shop was. By simply showing the faces of the artists, visitors realized they were buying from real people like themselves.

Chopra talks about another user who has an online portfolio. By just replacing the contact icon with his own picture, he increased the conversion rate by 45%, from 3.7 to 5.5. His conclusions were that visitors can spot stock photos right away and tend not to believe them. They create an emotional connection with faces they see online.

Optimization

To end this article, I also want to mention some technical aspects of using images in websites, without getting into too much details. First I want to mention how important optimization really is.

According to data from February the 15th, 61.9% of a webpage is filled with images, with the average size of a webpage being 1.29MB. Images are heavy and take a lot of time to load. They are dangerous for users’ browsing flow. According to Jakob Nielsen, a one-second response time is the limit for users feeling that they are freely navigating the command space without having to unduly wait for the computer.

webpage size stats

Average Webpage Size – 15th February 2013

Before we upload images on 1WD, we always get them through Photoshop’s Save for Web Devices function, where you can decrease the size of the picture without decreasing the quality too much. Smush.it is a free online tool that does the same, and there is also a WordPress plugin made for it. Do either one of those before uploading your images and the total size of your website will decrease, which means faster loading times and less frustrated users.

Width and height

The last technical aspect I want to talk about is the necessity of mentioning the width and height of an image in the HTML markup. The reasoning behind this is simple. A webpage will always load the text first, then the images. But because of this, until the images are completely loaded, their position is marked with a small, blue question mark thumbnail. While the image is loading, this small thumbnail expands to the full size of the picture, which disrupts the reading flow if users already started reading the text. By expanding, the thumbnail will also move other elements in the website that the user might be focusing on – and this makes many visitors go bananas.

By declaring the height and width of an image in the HTML markup, you can be sure that the thumbnails (which will still exist), will appear right from the start at the full size of the picture – this means that while the picture is loading, it will just fill up the big thumbnail, instead of expanding it. It is a small detail, but a nice touch.

Width and height to images

However, some people consider this an old technique and with the emergence of mobile browsing, not very effective at all. I tend to agree. Therefore use this only when your framework is responsive and don’t forget to resize the images for different screen resolutions. You don’t want a picture with a width of 700 pixels on a screen 640 pixels wide.

Bottom line

Using images the right way is crucial if you want to have a successful website, especially when your goal is conversion. As you have seen in the examples above, bad images are a turn-off for visitors and they will ignore them. However, if you manage to find the right pictures and insert them in the right places, they can do wonders for you, as they did for some others.

It is also important to keep in mind that images are not always the solution for your website’s problems. Sometimes your website shouldn’t even have any images. Testing is important in this matter. I will put together an article about A/B testing for you in the coming months and will teach you not only how to use it, but more importantly, what to use it for and what you can get out of it. Until then, though, stay tuned for other amazing pieces here on 1WD.

Now it’s your turn to hit the keys. Do you have other usability tips or questions? Have you encountered issues with the matters discussed above? How did you solve them and what were the results? We would love to hear from you.

Advertisement
How to Use Images Successfully – Web Design Usability Guide | manda | 4.5
%d bloggers like this: