At work, we often talk about the use of images in web sites, particularly in relation to their context (or lack of) to the content on the page with the image.
This issue brings out an interesting dilemma about designing web pages, which I have experienced from both sides of the table.
The Dilemma
On the one side, as a web designer, I’m often faced with the problem of the client whose idea of great copy is to provide you with three paragraphs of marketing speak that they’ve taken from some sales presentation.
And somehow you’re supposed to create an appealing home page from that.
On the other side, as the manager of a large corporate web site, I’ve been faced with internal customers who think the pages are too text-heavy. Instead they want to add some “pizzazz” or “visual interest” to their pages by sprinkling images over them like so much fairy dust.
The Designer’s View
As a designer faced with a page that is light on content, the judicious use of images can save it from looking like the text is rattling around in a sea of white space.
So, off you head to the nearest stock photo site hoping to come across the perfect image to go with your page on RFID frequencies.
I mean, there really aren’t too many other choices open to you are there?
Fix the Content?
Well, you could work with the client to improve their content, but where’s the budget and/or time in the project plan?
Sadly, the client, who probably doesn’t realize the importance of good web content, isn’t going to be too keen on expending the time and effort (and cost) involved in creating really great content.
Sub-heads Only Go So Far
So, you break up the content with sub-headings as much as you can, make as many lists as you can and throw in all the call-outs and other textual trickery that you can get away with.
But you really want that site to go in your portfolio, and so you want it to look good – after all, potential clients who are browsing your work aren’t going to be checking out how good the content is on those sites.
They just care whether or not they look good.
Bring Out the Images
The only other option left is to fill up the space by other means, and what better way than to include some images that are hopefully related to the theme of the page.
And what better images to use than those of people, preferably smiling broadly – after all (you rationalize to yourself), people will be looking at this page so surely they’ll get the connection.
I’m sure this is why so many sites have images of happy people on the phone or a laptop that mean absolutely nothing.
This is naturally a less-than-ideal situation, but one I’m sure designers face on a regular basis.
The Other View
As the manager of a content-rich web site, I see things from the side of my users. I know how task focused visitors to my web sites are. They want to find information or perform an action. And then they want to leave.
They don’t care about images, except perhaps at the periphery of their mind as they pertain to the overall design – and hence professionalism and trustworthiness – of the site. What they want is content.
Images as Content?
I don’t think of images as content unless they support the message of the text on the page.
Product images are a perfect example of good content, as are images that accompany a news story. But smiling, happy people holding a laptop or other generic object? Sorry, no.
Because images are so often misused as web page filler, many users have become blind to them. And because of this blindness, we designers actually have to be very careful when we use them to convey information.
In trying to call out some information by presenting it differently in a graphical format – say, some type of bug, badge or banner – we run the risk of making it practically invisible to some of our audience.
Even while our own customers think it makes the page look wonderful. Ironic, eh?
A Best Practice?
In my view, a best practice when it comes to the use of images on web pages is to provide a caption to go with them, so that they are explicitly tied to the content on the page.
And I don’t mean hiding the caption in the image alt attribute – put it out there on the page for all to see.
This way, if you can’t come up with an appropriate caption that you actually want people to read, you probably shouldn’t be using the image in the first place.
This approach has certainly helped me to tactfully turn down clients when they want to add an image to a page because ‘it looks pretty’.
Hear hear. Or the expect you to take the meat out of their old homemade / done by their brothers 12 year old kid website and expect magic to occur 🙂 I did this recently and took out the text from the old site, using it (at least) as place holder text in my design. I showed it to client for first time and his only 3 comments were on errors in the text! HA HA! Text which I had copied and pasted 😉
I found myself doing the same thing recently while working on a website for a printer. He specialises in bar codes so I had to get some bar code pictures to go beside the text. In case anyone had forgotten what they looked like 🙂
Another good post.
*WMW* – those are some great examples! The second one made me chuckle – I can just imagine you rooting around the web in search of the perfect bar code image!
would be good to see some actual website that would be, “best practices” in your mind. sites that you or someone else has done that exemplify good balance of content & imagery w/ image captions as part of the design…
*Carlos* – good question! I should have added a few examples to my post.
Here are a few examples of good image use from our own sites:
# “Clinical service”:www.seattlechildrens.org/our_services/clinical_services/vascular_anomalies/art_malform.asp (nothing like showing a picture of a condition)
# “History of the hospital”:www.seattlechildrens.org/home/about_childrens/history.asp (enhances the text no end)
# “Heart operation slideshow”:heartcenter.seattlechildrens.org/about/stories/williams_heart_operation.asp (not quite the same as above, but a great resource and source of comfort if your child needs to have a heart operation)
Here’s what I consider to be not so good image use:
# “Happy lady”:www.ipowerweb.com (what has she got to do with web hosting?)
# “Conference graphic on left”:www.unos.org (this will be invisible to most visitors)
# “Happy man”:dotster.com/webhosting/?campn=se_hosting (see #1 above. Web hosts are an easy target)
# “Come see our web site”:www.seattlechildrens.org/our_services/clinical_services/craniofacial_center.asp (ignoring the ugly graphic, this is invisible to a lot of users)
You don’t know how much you touched my soul with that…no, really.
I had a client coming of a very specific industry niche. Specific, as in paragliding equipment. All the content he provided me was two links.
After completing the page, he skipped my hard-worked pages to stop in the contact page, which featured just a contact form and contact info :
“What’s this? It looks like something that I made with Word. Put some moving images, now”.
*thump*
*Sugar* – we get this all the time regarding out intranet. Because it’s so templatized people with sites think it’s boring.
They just don’t get that the content is thing that is important. There’s no reason why a web page shouldn’t look just like a Word document.
For some reason, people think that when you put something online, you have to _pretty it up_ – I’ve never really understood why.