2012_09_06_featured_images Design

10 Things To Know About Images In Web Design

Web standards rise continually, changing our expectations towards a website. We want to find information quickly, we want to socialize, we want to get entertained, and we want all of it to happen on a personal level. The key to designing efficient, attractive, and personal websites is the use of a wide range of engaging media.

What kind of media? Basically anything you can use on your website to convey a message, such as videos, audio, graphics, or images. While any of these can help to improve the user experience, the media you choose should be appropriate for your main target group with all their expectations, abilities and limitations. Also consider the devices people will use to access your site and technical limitations that come with it.

For example, videos can be a great way to get your visitors engaged. However, their device might not fulfill the technical requirements to watch the video. The same with audio. Imagine you offer some very informative audio tour on your site. People who are not in their office by themselves, or who don’t have their headphones at hand will most likely not listen to it.

For now let’s focus on a medium that always works to boost the user experience — if used with reason, of course: Images. Here are ten guidelines that help to get the most out of every single image on your site.

1. People prefer images over text


37% of the population are visual learners. Source

We just love images. A website without any images is boring and even with a nice design, most of us would probably prefer one with a lot of images. Why is that? There are many reasons that explain why we think images are attractive. For example, visual information is very convenient. Instead of reading a lot of text, which takes time and effort, we rather quickly scan an image or a graph. Then, images can trigger all sorts of emotions and memories, which makes them very engaging. Also, a lot of people can better memorize visual information and often it’s easier to share than written content. At last, images can cross language barriers a lot better than text can.

2. Images draw attention & trigger emotion


90 percent of all information that we perceive and that gets transmitted to our brains is visual. Source.

Images are an easy way to improve the user experience of your website. 90 percent of all information that we perceive and that gets transmitted to our brains is visual.. Images can help you to attract attention and to guide your visitor’s line of sight. They can be of great value when it comes to presenting important information. Also are images a great emotion trigger that you can use to draw your visitors in and get them engaged in your content.

3. Logos help users to orientate

The one image that you are most likely to find on any website is the company logo. The logo takes in a very special role, doing two things. First, it helps visitors to identify a website and gives them the safe feeling that they are where they want to be. Second, when showing your logo on every page of your site your visitors can be certain they have not yet left your site. Try to always position the logo in the same spot. Especially when you offer different content that requires a different site layout, it can be very valuable to offer this consistent element of recognition.

4. Limit Large Images Above the Fold


In 2010, web users spend 80% of their time looking at information above the page fold. Source

Images are great for many reasons, but make sure you don’t set their priority too high. The space of a web page that is above the fold, so the part that people can see without having to scroll, is the most valuable real estate of your site. Not because people are not willing to scroll, but because this area is the first part people see when coming to your site and you should use it wisely. Give people a reason to scroll and look at the rest of your site. If your images take an active role in this guidance, then make them as big as you want. However, make sure they don’t push more important, informative, or catchy content below the fold.

5. Use meaningful images

When using images, it is important that you know why. Don’t just use them to get rid of too much white space or because you have heard that people like them. For every image on your site, you should be able to answer two questions. (1) Why did you chose that image and not a different one? (2) Why did you place the image where you placed it, and not somewhere else? If you don’t know the answer to either one of these two questions, you should take a minute to think about it. Keep in mind that you should only use images that somehow support your content. Be it because they show some relevant information, because they proof a point you make elsewhere, or because they convey a feeling that supports your message.

6. Show real people


Dove makes very good use of images with real, down-to earth people. Source

Human images are a very effective way to get your visitors engaged. We like it to recognize any human elements on the Web. It makes us feel like we are actually connecting with other humans, not only with some coded website. Especially faces of other humans draw our attention and not only that, we even follow their line of sight. When using images with faces in your design, double check where they might attract attention to. Also, don’t fall back on stock images, but use high quality photographs of people, who really match your site’s character.

7. Background images create atmosphere

Background images are a great way to create a unique atmosphere on your site, or give your visitors an immediate impression of what your site is about. Make sure you know exactly what effect you want your background image to have on your visitors. Then implement it in your design and test it to make sure it has the desired effect. The thing with background images is that they can easily make your site look messy, for example if there is no clear distinction between background and content. Check out this collection of sites for some great examples of websites with large background images that work.

8. Don’t let graphics look like banner ads

Something you really want to avoid is to make images on your site look like banner ads. People don’t like ads and over the years they have successfully learned to ignore them. So when placing images in banner form either at the top of your site, or at the side, chances are good that people will simply not see them. In this case you case you can either not display them at all and keep your site clean, or you change their shape and position to better integrate them in your design.

9. Label Clickable Images

It has become a popular thing to use images instead of text for links. In general, this is not a bad thing because images have more potential to draw attention and usually they are also bigger, making it easier to click them. However, you should not forget to label them. While good text links are already descriptive themselves, a lot of time images are not self explanatory and therefore need labeling to tell people where they link to.

10. Ensure that Images Do Not Slow Down Your Site

Images can have a great impact on the user experience of a website. At the same time, they can slow down a site and by doing so counteract a positive experience. Luckily, Internet connections nowadays allow us to quickly load many images – if we are at home, or in our office, or in a café with high-speed Internet. However, if people access your website from mobile, or if they use a connection that does not yet meet our usual standards, it is important that you optimize your images. You can for example optimize their size, or use thumbnail images to preview larger ones.

Conclusion

While a lot of different media can be used to enhance the user experience of a website. images are still the most common and also most universal medium. We like images because they are convenient, easy to engage with and easy to memorize. If used with reason, images can attract and guide your visitors’ attention, trigger emotions, and build trust.

6 comments

  1. Bartek

    Hi Sabrina, great article. You forgot about the relationship between images and SEO, a large part of the web traffic comes from “google images”

  2. Sabina Idler

    Hi, Thanks for adding that! Google images are indeed important to mention here.

  3. 360 E-commerce bureau

    Hello Sabrina, thanks for sharing your insights. You wrote a very helpful article for my followers. I will share it. Thanks again.

  4. Hyla

    Wonderful article, thank you for sharing! However, I really have to dispute #6

    6. Show real people

    I teach a web design class and the recent over-use of humans in webpages is one thing I warn my students against.

    An example of a ‘bad’ use of humans: Citibank.com – when I go to a banking site I want my accounts I don’t want to see a happy couple eating dinner. I find this deeply annoying, as if the bank is wasting my time and trying to get me emotionally involved in something I don’t feel emotional about.

    An example of a ‘good’ use of humans: Kaiserpermanente.org
    - when I go to a health-care site and see people engaging in healthy activities, it makes me feel encouraged to be more healthy myself. I /do/ feel a more personal attachment when I am interacting with my health care service provider.

    It seems to me like so many companies have taken to slapping ‘real people’ on their websites that no one has stopped to think if they are actually beneficial in their specific industry.

    Still, this is a fantastic article and I am certainly going to refer my students to this and your other articles. Thank you for sharing!

  5. Sabina Idler

    Hi Hyla,

    Thanks for your feedback! I absolutely agree that this is an important aspect to think about! The degree of emotional engagement indeed depends on the nature of a website.

  6. Chasen

    The Dove site you referenced does apply some great visual usage (line of site and relatable people photography) However it really lacks the usage factor for labeled clickable images. The whole image should be clickable and not just the >> (arrows links).

    Great list though!

Leave a Reply

Your email address will not be published. Required fields are marked *