Preferences Need No Inferences

I decided to write this post when I came across a website with a background image in its homepage and the header part of each internal page! And not just any image, but children's hand-drawn ones (a skeuomorph of children's drawing notebook). Although a trend out of fashion, I'd like to use this opportunity to explain why this isn't such a good idea from both usability and technical points of view. In rare cases the background image is actually the content. Those cases are not factored in this post.

Usability

A research paper titled "Attention web designers: You have 50 milliseconds to make a good first impression!"¹ talks about 3 studies that were conducted to find out how quickly people form an opinion about web page visual appeal.

    In the first study, participants twice rated the visual appeal of web homepages presented for 500ms each. The second study replicated the first, but participants also rated each web page on seven specific design dimensions. Visual appeal was found to be closely related to most of these. Study 3 again replicated the 500ms condition as well as adding a 50ms condition using the same stimuli to determine whether the first impression may be interpreted as a 'mere exposure effect' (Zajonc 1980). Throughout, visual appeal ratings were highly correlated from one phase to the next as were the correlations between the 50ms and 500ms conditions. Thus, visual appeal can be assessed within 50ms, suggesting that web designers have about 50 ms to make a good first impression.

Although sensory (visual design) and the first good impression are highly correlated, but in order to get the visual design right you need to think about what the visual design is actually presenting. Visual design is where the arrangement of interface elements such as content and navigation (skeleton) is presented. And skeleton presents a much more abstract aspect of your website; interaction design. Interaction design, I believe, is best explained by Jesse J. Garrett in his excellent book called "The Elements of User Experience".

    Any time a person uses a product, a sort of dance goes on between the two of them. The user moves around, and the system responds. Then the user moves in response to the system, and so the dance goes on.
....
But every dancer will tell you that for the dance to really work, each participant must anticipate the moves of the other.

Putting this in the context of 50 ms rule, visual design ought to be clear enough for user to quickly figure out the first or the next move. To know how, is beyond this post. Suffice to say that typography, choice of colors, consistency, and contrast are the elements of visual design to which you need to pay close attention.

Using background images will limit your choice of colors throughout the page to a great degree. It will also distract user's attention from the major tasks made available to him (e.g.: navigation menu, call to action boxes) to figure out the next move. Another word, it decreases the contrast of those tasks. However, if the image is not in the background then it can be cleverly placed and used as a mean to increase the contrast of major tasks with a lot less distraction. Let's consider Skype as an example.

Skype - An example of using image to increase the contrast of major tasks

The image in Skype's homepage isn't designed to captivate user's attention but to redirect it to important elements of the page:

1. Navigation bar on top with major tasks for users who have used Skype before
2. The "Join" circle (with the help of big blue circle) to, I guess, emphasize an important goal and increase the chance of conversion
3. And the immediate element below the image ("Learn about Skype") for users who have an idea what Skype is but haven't used it before and want more information. In this case, the page that follows "Learn about Skype" link does the justice. 

Moreover, the image is toned well and is not distracting.

Above picture shows Skype's homepage in a PC browser. The image below, however, shows how it looks like in tablets and smart phones.

Skype uses Responsive Web Design

Note the design uniformity and the emphasis on "account creation" goal. Interestingly, “Buy Skype Credit” is chosen to be one of the visible elements in this mode. Perhaps their analytic data shows smartphone users are more interested in making long distance phone calls (Skype To Go) or using Skype’s Wi-Fi hotspots both of which require Skype credit.


Technical

If you are using HTML5 along with scalable vector graphics, you are probably fine. Looking at IE's HTML5 score card (being the lowest and thus the least supportive of HTML5) it can be seen that SVG is supported.
But that's a big "if". Using HTML5 limits your browser and device support. So if you have to support broader (not necessarily older) set of browsers² then it's likely that you can't use HTML5. As a result, you need to select an image big enough that looks relatively sharp in all possible (or acceptable) resolutions which means heavier pages. It also have to look right in different orientations.

---

<sup>1. GITTE LINDGAARD, GARY FERNANDES, CATHY DUDEK and J. BROWN - Human Oriented Technology Lab, Carleton University, Ottawa, Canada - Behaviour & Information Technology, Vol. 25, No. 2 ↩
2. Your Mental Model (or any derived artifact) could clue you in on how IT-savvy you users are and consequently what sort of devices or browsers they might use. Or you might've already profiled the existing users (e.g.: Google Analytics). ↩</sup>