UIEtips: Deciding When Graphics Will Help (and When They Won’t)

Jared Spool

December 1st, 2009

We got ourselves into big trouble back in 1996. In our seminal report, Web Site Usability: A Designer’s Guide, we wrote a little sentence that attracted a lot of angry emails from designers everywhere: “Graphic design neither hurts nor helps.”

We’d looked at sites that had made a huge investment in adding graphics to their sites and at sites that were almost all text. We couldn’t see a difference in the usability of either. Therefore, we concluded, graphic design didn’t play a role. Looking back, this wasn’t a shining moment in our analysis.

All that controversy, however, got us thinking. And almost 15 years later, we now know differently. From all the research we’ve conducted since, we can pinpoint many instances when good graphic design has enhanced the users’ experience.

Yet there are still instances where a positive contribution is hard to see. In today’s UIEtips, I talk about what we now know about the three different types of graphics commonly found on sites: navigation graphics, content graphics, and ornamental graphics. I’ll show you which ones help the experience and which ones hurt. Read the article Deciding When Graphics Will Help (and When They Won’t).

If you’re interested in creating great experiences using images and icons, you’ll want to check out our next UIE Virtual Seminar with Patrick Hoffman, happening this Thursday in a web browser near you.

Have you had good success with prioritizing graphics in your designs? What’s worked and what hasn’t? Share your experiences below.

19 Responses to “UIEtips: Deciding When Graphics Will Help (and When They Won’t)”

  1. Juan Lanus Says:

    It is known since a prior century that “ornamental” graphics, tipically well-derssed smiling models, are distracting. Or at least worthless. I vaguely remember having read about it, may be related to an eye-tracking test. The User has to grok the image before discarding it.
    On the other hand, a graphics designer will argue that a page with no pictures is so “useit”. And the Client will agree, maybe giving control to the designer.
    What to do? Pages need to be “rich”, don’t they?
    One solution is to set always the same image in all pages. This would ease the user’s work: after a few pages they would learn to ignore it automatically, as in banner blindness.
    This sounds silly and it is so on purpose. But it is not completelly silly. In the last project I worked the site sported different areas like tourism, education and others. Each area got it’s own heading picture.
    This way, as long as the user navigated within an area the ornamental picture remained stable and the user could ignore it safely by means of some automatic brain mechanism.
    But if they changed to another area then the picture would change (the colors were very different) and the user could raise an internal “something happened” signal. It was sort of a breadcrumb.
    Additionally, in my first interview with the Client, I spoke about clean pages (like in Boxes & Arrows) and the Client said that in their tropical country the population expects colorful pages, despite the seriousness of the Company.

  2. Michael Hughes Says:

    Good article, but I would like to see the “ornamental” category expanded to differentiate between truly just eye candy and graphics that have an emotive or branding purpose. For example, would a sad-looking puppy increase donations to a charity for animals? Let’s not dismiss those uses until we see more data that examines the “willingness to do business” as well as the usability of the site.

  3. Jared Spool Says:

    Janus,

    I’m not buying the same-image-on-all-the-pages strategy. If the goal is to lighten the text on the page, by eating up the real estate, why not just get rid of the image and use the real estate more judiciously?

    Show me where it’s written that pages need to be rich. If the image isn’t serving the needs of the user, it’s distracting. To have a random image on the page requires some sort of cognitive decision to pay attention or ignore. Why add the load?

    Of course, maybe you’re fixing the wrong problem. Instead of putting graphics on the page that are meaningless, because people need something other than the text too look at, why not rewrite the text to be more compelling, thereby not needing any random image support? Or find content graphics that support the text?

  4. Jared Spool Says:

    Michael,

    We’ve been looking at emotive qualities and branding qualities for quite a while now. We measure people’s emotive states before and after the sessions. We also measure their brand engagement before and after the sessions.

    Over the years, we’ve found many factors that increase emotions, such as happiness, empathy, and even shame. We’ve also found several concrete methods of increasing brand engagement through design.

    However, the use of ornamental graphics doesn’t do either.

    Now, the sad-looking puppy, you mention, depending on the image and the context, we might not categorize as an ornamental graphic. If we observed the user gleaning meaning from it, it becomes a content graphic. And we do see content graphics having the effects you suggest.

  5. Nick Gould Says:

    Great piece, Jared. I really like the straightforward categorization of image types. But I wonder if there are a couple of scenarios that don’t fit into any of your three buckets. Specifically, and this is a situation that is peculiar to content sites, what about images that convey the overall tone / topic of an article in order to catch a visitor’s attention, or allow them to quickly scan a page for content that interests them? For example, I look for pictures of food / wine because I like articles with that subject matter. Is this “content” imagery, or something else?

    Also, is there a type of imagery that can play a purely visual (i.e. not semantic) role by making the page easier to scan by breaking up text or alternating patterns, etc…? I realize that this is a difficult contribution to assess (except using eyetracking, of course :-) but we do know that page layouts that are overly text-heavy can be off-putting to many users. So, in this sense, maybe imagery can act in a way that could be similar to non-image graphics (lines, backgrounds, etc.).

  6. Student Loan Consolidation Help – Consolidate Your Student Debt … | Consolidation Finance Wisdom Says:

    [...] UIEtips: Deciding When Graphics Will Help (and When They Won't … [...]

  7. Ron Patiro Says:

    I agree with the logic of your explanation completely, but think there is emotional value of seeing another human being on a page (particularly with highly emotional personality types) that is not accounted for.

    I have run split tests where putting a person on the page with their gaze pointing toward the call to action has had a positive impact on page performance.

    I would love to see test results to confirm the value of ornamental graphics in your study. Great work overall, and thank you very much.

  8. Jay Harlow Says:

    @Nick, you’re on the right track. Images are content. This is basic semiotics and design theory! The distinction is in how appropriate that content is for it’s context.

    As @Juan points out, different kinds of content have different meanings based on their context. In other words, maybe a designer should focus less on what’s supposedly empirically and universally “useful”, and figure out what’s contextually relevant.

    I submit that human beings don’t subdivide their experiences into pieces like “graphics” and “content”, and any designer worth their lunch money doesn’t design that way either.

    Or, as Frank Lloyd Wright put it, “form and function are one.”

  9. Alfred Ingram Says:

    Graphic Design is not the practise of slapping graphics on content. Nor is it the art of decorating. It’s about structure, pattern and easing use. Some of the best design uses no graphics and one typeface. It is all about achieving the clients goals by enabling their customerstoachieve theirs in the best way possible with the available content, media,,financial and legal limitations. To quote Ben Shahn, “Form is the shape of content.”

  10. Samuel Says:

    RE: Ornamental graphics.

    “If we observed the user gleaning meaning from it”

    I think the question of the hour is which images provide NO meaning to a user? Even the aforementioned Carmen Electra provides a sense of celebrity taste – inherent notions of trust and belonging.

    I find categories such as Navigation and Content very useful, but I have a hard time assuming such an expansive category as Ornamental covers “everything else”. Even arbitrarily-placed images can create meaning with a user – aren’t there degrees between subconscious association and purple chairs?

  11. Julie Dirksen Says:

    Had just read about this shameless abuse of “ornamental graphics” (or maybe content graphics — they can’t seem to decide) right before I read your article.

    http://timesonline.typepad.com/science/2009/12/climate-sceptics-get-it-wrong-1.html

    and

    http://timesonline.typepad.com/science/2009/12/climate-sceptics-still-getting-it-wrong.html

  12. Tara Schnaible Says:

    An interesting article was published by SURL last month talking about this same topic. It would seem that (in this study anyway) people will put up with an unusable interface if it appears visually appealing.
    AND their impression of the site usability increases with visual appeal. This is a very compelling argument toward the idea that people respond to the site graphical design in a way that can seriously enhance an experience with/without usability.

    http://www.surl.org/usabilitynews/112/aesthetic.asp

  13. Barb Hernandez Says:

    So I think there is something missing from this conversation. There is a difference between graphic design and visual design. Simple graphic design or adding graphics can lead to the issues mentioned. Back in the day we used to talk about “gratuitous graphics” or graphics that were added just to have graphics. They had no meaning or function and often add clutter and noise that is not necessary.

    If you change the conversation to visual design, you include layout, typography, color, imagery, interaction design, animation, etc. In this case all of the visual elements work together to communicate with the user about what to do. Simple uses of color and layout can help users know where to start and how to use a Web site or piece of software. Similarly they can be used to communicate brand or elicit a response. In any event they serve a purpose.

    However, if you only talk about graphics, you miss the point. Any page or screen element should contribute to a conversation with the user about what they need to do or how the company wants to communicate with them. The rest gets back to “gratuitous graphics.”

  14. David Evans Says:

    What you really are discussing is the difference between bad design and good design. It is not a question of graphics. It is a question of design. It requires a balancing act between all three visual categories. Design is always a compromise between the designers desire to create a piece of art and the business requirement to make money. Somewhere in there is a sliding scale that all sites must finally rest on.

    The images of people shaking hands came from a stock photo house absolutely. Maybe the company did not have the budget to take a real photo shot to marry the text content into an image that Citi could actually own. Maybe the site team could not understand the need to create an image that represented the text to bring it to life. Maybe they lacked professional design skills. Or maybe they just did not care. Who knows. The art in creating images is to give the flat words life. The web is a visual medium. People skim through text and images and in a nano second need to understand the page context. If done properly text and images can lock in the understanding.

    Often times creative teams are at odds with branding. Branding will come up with a celebrity spokes persona and then say plaster this every where. Mistake. Use the personal to set up the brand position and then get rid of it and let the site guide the user through whatever they came to do.

    Neither an art nor a science, “graphic” design adds life to sites but has to be done with the skill of a water colorist not a house painter. I offer this site as a fantastic example that marries imagery with content: http://www.arcteryx.com

  15. Mike Brockington Says:

    I think that David Evans has really hit the nail on the head – adding graphics to a good functional design will not generally improve it, but to equate an image-free page with lack of design is not valid.
    That brings me to my other point though – there are many articles out there that (rightly or wrongly) state that having a picture of a smiling atractive person will engender trust. However, as with all management techniques, this really only works if they are subtle – if the user recognises an attempt to manipulate them, they will surely react negatively.

    Finally, (not least from an accessibility viewpoint) I think that any site that has to display a picture of its products instead of a description has a big problem – there is no bigger turn off for me than a site that cannot describe its own products.

  16. Richard Says:

    It’s interesting that whether an image is decorative (I prefer that to “ornamental” but for no particular reason) or content is often in the eye of the beholder. That makes it difficult to decide on how to make an image accessible. If it is purely decorative then there is no need to provide a text description for it, but if there is an element of content in it (event if that element is purely emotive for example an image of a tree on a site selling ‘natural’ products) then that does need to be made accessible, and many blind users would prefer that they had access to the information the image is trying to convey.
    I think that anyone who regularly uses the web becomes pretty much immune to most stock photos particularly very cliched businesslike images, however there may still be an emotional aspect to it that helps buy in.
    Jared, you say “If the image isn’t serving the needs of the user, it’s distracting. To have a random image on the page requires some sort of cognitive decision to pay attention or ignore. Why add the load?” It depends how you define “serving the needs of the user”, one of those needs may well be an emotional need. Here’s an example. Church websites often show stock images, but I bet that the ones that show images of real people in church or engaged in the churches activities, get more visitors, even if those images are randomised.

  17. Ron Sova Says:

    New style for newsletter is excellent. You have bridged the “email/website presentation style” gap better than anyone to date. Nice job!

  18. Daivee Says:

    Hi Jared,

    Great article. It’s a great way to demystify types of images from a usability perspective.

    However, as some of the others mentioned it would be useful to have some stats on these image categories and their uses along with type of impact on different segments of users. (Ornamental to one maybe content to another and vice versa.)

    Does accessibility play a part as well?

    Branding has a big impact on the type of images used (any marketer would swear by it). Though I agree, overdoing it will be more harmful.

    I think including stats on international Web sites where applicable would be useful in order to be fair to an international audience consuming this information.

  19. Performance Calendar » Psychology of performance Says:

    […] on this page. And we won’t like that. So it’s good to avoid clutter, too many options, decoration images of beautiful people shaking hands and so on. Less stuff will also mean less markup, images, less […]

Add a Comment