The Power Of Visual Context In Web Design
Design | User Experience

The Power Of Visual Context In Web Design

/ by Sabina Idler

Visuals are super important in web design. We just talked about images last week and how they can help to improve the user experience of your site. A while back we discussed how infographics can help you to inform, engage, or even entertain your website visitors. And our guest author Nikolaj explained how icons can improve your web design.

But why is that? Why are visuals so important for how we perceive information and why do they have such an impact on the user experience of a website? It’s simple. Visuals deliver the context you need to communicate your messages effectively.

Here are some examples of how visual context can help you to attract visitors, to present information, and eventually to convince them of an idea or action.

1. Visual context is important

First of all, visual context is important to help your visitors make sense of the content you offer on your site. To be more precise, visuals help you to communicate a message in detail, without having to write an essay on it. Let’s take a look at three examples that demonstrate what happens if we remove the visual context from a message.

Offer information

Amazon just released their new Kindle Fire HD. On their site, they show images of the three different versions that are available together with a brief description and the price. When removing the images, like I did in the screenshot below, you have to carefully compare all three descriptions to identify the differences. And still, there is no indication if version three is bigger or smaller than the other two with 8.9”.

Photoshopped screenshot of Amazon’s new Kindle presentation.

Now if we look at the original presentation, it becomes instantly clear that version one and two are bigger than version three. Also, the images instantly show an order with the smallest on the far right, suggesting that the one on the far left must be the most advanced version. A quick scan of the prices supports this assumption. Now all there is left to do is check the difference between version one and two. That’s it. The visuals give us an instant idea of what the three versions look like and what their main differences are.

Three versions of Amazon’s new Kindle on one sight. (Source)

Show context of interpretation

When explaining a concept or idea to someone in person, it can be quite tricky to keep it to the point. We easily trail off, elaborating on minor details and trying to illustrate connections between different aspects of the concept. We try to draw a broader picture in which we can then easily place our idea, hoping to make it more clear and easy to follow. On the Web, you don’t want to go on and on to make your point. You want to be precise and make sure that people get your idea within seconds.

The visual context carries a lot of extra information. (Source)

This example shows a graphical presentation of different fields that all serve a central goal, the user experience. The different fields can easily be identified through the different colored circles that surround them. Different fields can overlap, and eventually they all come together to serve the common purpose of a better user experience. All of this information is carried by the visual context in the graphic on the left. The version on the right lacks all visual context, leaving the words flying rather unconnected and meaningless around the centered term “UX”.

Tell a story

Visuals can also put content into perspective, be it in space or time. This can add extra value to your content in many ways. For example, a selection of words that stand alone without visuals can be turned into a story, carrying tons of additional information. The web designer and consultant John Leverrier has chosen to wrap his services in a story, offering the “winning formula” for his customers’ “vision”. He uses visual context to show the process from start to end, adding different ingredients on the way.

Visual context allows you to tell stories. (Source)

When leaving out the visual context, everything from the starting point, to the different ingredients, to the “winning formula” becomes random and meaningless.

Without the visual context, the story is meaningless.

2. Visual context is appealing

Visual context is not only an important carrier for information, but also for emotions. Here are a couple of examples that show how something ordinary or even frustrating can be turned into a positive experience through appealing visual context.

Trigger actions

The rich visual context of this signup form promises a special experience. (Source)

A visual context can be a great way to attract attention and motivate your visitors to take action. In this example, the site TokyoMilk invites their visitors to sign up for their email newsletter in a very attractive way. Instead of the plain and boring form that we usually come across, they offer a rich visual context and kindly invite you to signup and “learn what the fuss is about”. Already the appearance of the signup form gives you the idea that this one is different, maybe more special than other newsletters.

Offer experiences

The visual context creates a great experience. (Source)

You can use visual context to offer your visitors more than just a plain text and a simple call-to-action. For example, Flipboard presents their application on an image of the iPad, their targeted device. This way, you already get an idea of what the app looks like in action. But not enough, they show a high quality video of a hand that actually interacts with the iPad, giving a vivid demonstration of the app and its features. At the same time, there is a red flower, slowly starting to bloom, visualizing the part of the slogan that refer to “life’s great moments”. The textual content offered on this site is very limited, but the beautiful animations are catchy and effortlessly inform you about everything you need to know about Flipboard.

Show that you care

Visual context can carry unspoken information. (Source)

The context of a website is also where you can show your visitors that you care. Visual context can carry a lot of unspoken information, revealing more than the obvious. For example, milkmonkey chose for a very nice visual for their 404 error page, showing their visitors that they put time and effort in it and that they care about the mistake. Of course you don’t want errors on your site at all, but sometimes you cannot avoid them, if external links to your site are incorrect. In case your visitors do get a 404 error, you should do your best to apologize and turn the incident into a positive experience.

3. Visual context is convincing

Visual context can underpin your messages quite effectively if used wisely. Visuals can easily evoke memories and trigger emotions. If you focus them on your message and for example on what you want your visitors to do, visuals will help you by guiding and focussing your visitors’ thoughts.

Be trustworthy

The visual context brings the quote to live. (Source)

Expertise and authority help us to trust people. Trust is very important if you want to convince people, because obviously we don’t like to listen to someone we don’t trust. The quote from Obama that you see in the image below wouldn’t be as convincing as it is, if it wasn’t for his image. The visual context brings the quote to live, making it much more real and appealing. Of course for those who do not intend to vote for Obama, it might have just the opposite effect.

Highlight your key messages

The visual context underpins the suggested equation, leaving a very unique impression. (Source)

Use visual context to highlight your messages. While we easily forget written content, we are much more likely to remember visual elements. Of course you cannot always present everything in visuals, that’s not the idea either, but sometimes you can create a visual context that supports your content. In this example, Paid to Exit combine their central values with a visual equation. While the word “work” has nothing to do with matchsticks and “passion” nothing with a gas can, the images underpin the equation, leaving a very unique impression.

Create a nice atmosphere

The visual context creates a caring and trustworthy atmosphere. (Source)

The visual context of a message can also help you to leave an impression. As I mentioned before, we are more likely to remember images than text, especially if they somehow get to us on an emotional level. The website Rainbow Nursery reflects the slogan “Welcome to Rainbow Nursery” in the visual presentation of their site. The slogan alone would be boring and meaningless. However, the visual context, which is very colorful, personal, and inviting, creates a caring and trustworthy atmosphere.


Visual context is of utmost importance. Without visuals, the Web would be a boring and at the same time more complicated place. A lot of information that can be easily carried by visuals would need thorough explanation, adding to the textual content on your website.

Visuals are appealing and attract our attention, they help us to present information, explain complex concepts, and tell stories. Visuals can help us to make life easier for our website visitors and create positive experiences for them.

| | |
Article by

Sabina Idler

Sabina is community manager, technical writer & UXer @ Usabilla. She is interested in Usability, User Experience, Design, and everything that makes the Web a better place. Follow Sabina on Twitter.

Become a writer here!

Share your thoughts

  • Jasa Pembuatan Web

    Oh my goodness! Amazingarticle dude! Thank you|Thank you so much, However I am going through issues with your RSS. I don’t know why I am unable to subscribe to it. Is there anyone else getting identical RSS problems? Anyone who| knows the solution will you kindly respond? Thanks!!

    • Sabina Idler

      Hi Jasa,

      Thanks for your feedback! I just checked and for me it works fine. I used Google Chrome. Which browser do you have problems with?

  • jasa SEO

    Hi there, You must have done a wonderful job. I’m going to unquestionably digg it along with separately advocate in order to my pals. We are comfortable they are taken advantage of this site.

Pin It on Pinterest