2012_01_featured_background_images Design

How Full Page Background Images Affect The User Experience

The user experience of a website has gained quite some importance in the last couple of years. A website is expected to be functional, reliable, and efficient nowadays. Besides these basics, it also needs to be engaging and fun. In order to stand out from your competitors and to make a lasting impression, you need to offer your visitors an experience worth remembering. You need to make sure they actually enjoy your website.

There are many ways to improve the overall experience for your website visitors. For example, you can use icons, or mascots, and make sure you have an effective navigation menu.

Another way to make your website stand out is through full page background images. Here are 5 examples that show how background images can improve the user experience.

Storytelling

Storytelling in web design has been around for a while. The idea is to wrap certain information in a personal and engaging story. Users should no longer have to read big chunks of plain text. Instead, they should be offered information in an appealing and possibly interactive way. Storytelling allows your visitors to quickly grasp the essential message on your website.


Background images can help you tell stories about your product. (Source)

You can apply storytelling to your website in different ways. An effective way that will certainly grab your visitors’ attention is the use of big background images. In this example, the website of Square uses a background image to tell a story about their product: The square reader allows you to accept credit cards anywhere. Even though the image is partly blurry, it shows the square reader in action on a busy weekly market. This doesn’t only explain how to put the product to work, but also demonstrates its flexibility.

Descriptions

No matter what the purpose of your website or product is, you have to be clear about it. When people visit your site for the first time, chances are good they are looking for something. It is your task to make sure they either find it, or quickly see that they need to keep looking elsewhere. Descriptive content is essential to make clear what you do or don’t do, and what you do or don’t offer.


Use background images to underpin your central points. (Source)

Background images can help to bring across your central message to help visitors understand the purpose of your site. In this example, the website of PayPal shows a big background image of a lake setting with two people sitting on a landing stage, taking in the peaceful view. The image does not only convey tranquility and trust, it also demonstrates the point made in the copy to the left: PayPal is safe online banking. Wherever, whenever you want.

Engagement

Engagement is important for any website. No engagement means your visitors will leave before they even give your site a chance. In order to get your visitors engaged, you need to make sure to grab their attention the moment they first set eyes on your site. Once you have their attention, do something with it. For example, you can guide their line of vision, invite them to get in touch with you, or take any other action.


Background images help you to attract your visitors’ attention. (Source)

In this example, the limited depth of focus of the background image draws immediate attention to the feet in the middle of the page. The position of the feet and the angle in which they are tilted to the left guide the visitor’s line of vision to the main headline of the site: Relaxation from head to toe. It becomes instantly clear what this website is all about.

Motivation

Almost any website has some sort of call-to-action; a goal of what the people behind a website want their visitors to do on their site. This can be anything, such as the sign up for a community, the creation of an account, or the purchase of a product. The call-to-action and how effectively you manage to funnel your visitors towards it, is essential for the success of your website. Knowing how to motivate your visitors can make all the difference.


Background images help you to guide your visitors in their decisions. (Source)

Background images can help you to appeal to your visitors and guide them in their decisions. In the example of the site airbnb, the background image shows a very unique and inviting renting place. The image changes sequentially, showing a wide variety of different places. The call-to-action is positioned in the middle of the screen, right on top of the big visual. Visitors are triggered by the possibilities of the suggested places, motivating them to start their own search for a place in their area of interest.

Personalization

Personalization plays an increasingly important role on the web. People want to be unique and have their very own, individual style. Personalization of clothing, gadgets, or even websites helps us to define and communicate that style. At the same time, we become attached to personalized things. This personal attachment can be of extreme value for your brand, or website.


Background images are effective emotion triggers. (Source)

Background images can be a powerful tool to create a personal relationship with your website visitors. Visuals are very effective triggers for emotions, bounding people to your site. For example, Google allows you to personalize their site by setting a full page background image of your choice. This doesn’t add to the functionality of the site, or even the quality of the search results, but it makes me smile every time I use Google to research something.

How it works

You see, full page background images can be a great way to describe your product, back up your central points, or engage your visitors. But how does it work? Check out this article on perfect full page background images and learn how to implement a background image on your website that:

  • Fills entire page with image, no white space
  • Scales as needed
  • Retains image proportions (aspect ratio)
  • is centered on page
  • Does not cause scrollbars
  • Is as cross-browser compatible as possible
  • Isn’t some fancy shenanigans like Flash

Good luck!

Your thoughts?

These are only five examples of how background images can affect the user experience. What are your experiences with background images? Do you have more examples? Or maybe tips when to avoid them? Let us know what you think.

6 comments

  1. Katerina ( Trelad Real Estate Agency Ukraine)

    Thank you for artcile! When I were using full page background- I made this becouse of way how to show Kiev best! But after this article understand real aim of this!

  2. Leona Poehler

    I put in tabs at top of blog and had to redo background
    new background doesn’t show on home page or last page “ramblings”
    Do you have any idea on how to fix that?

  3. Iain

    Full page backgrounds are an emerging trend, personally I love them as it gives the website some real impact

  4. El En

    Excellent article.
    I love full image backgrounds especially in some website categories such as hotels,travelling and more

  5. Himanshu Vyas

    Thanks a lot for this article. Before that I didn’t have the knowledge of the “Power of Background image.”

  6. Sergiu

    I really like this article. It is said that an image is worth a 1000 words, I know it is a cliche to say it in this context, but it is true and with this post we can quantify it.

Leave a Reply

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