Text vs Graphics In Design

Yuri posted an interesting article last week on using text over graphics on your website. Yuri links to a wide variety of sources including eye-tracking studies to support the case that you should stick to text and avoid graphics for the most part. While I do believe you should lean toward text where you can, I think the what’s most important is to maintain a certain balance between plain text and other visual elements on the page.

One of the sources Yuri points to is a Jakob Nielsen article about an eye-tracking study by the Poynter Institute that showed 78% of people first looked to text on a page. That sounds impressive, but the study is seven years old and things do change. Andy Rutledge has an interesting article on why eye-tracking studies and particularly those from the Poynter Institute are a complete waste of time. I can’t speak to the merits of the Poynter study, though I do agree strongly with what Andy says about design.

As I mentioned above my thoughts are that a balance between text and graphics is best. And by graphics I really mean something other than plain text on the page. It’s certainly possible to create some beautiful designs without the use of a single image. Text itself can be arranged in a way to add visual interest to the entire page. Making a page heading a contrasting color or making it bigger or providing for a healthy amount of white space are all design elements eared to enhancing the overall visual aesthetic of the page.

Examples Of Text And Graphics In Design

Take a look at Jakob Nielsen’s useit.com site as an example that heavily favors text over graphics. There are no images and very little in the way of visual interest on the page. Quite honestly it’s one of the more boring pages you’ll likely encounter on the web. The site’s content is all about usability and you would think that as someone who is concerned with usability I would spend considerable time there. Nope. I actually find the sparse look of the site causes the usability to suffer. I get to the page and I see no compelling reason to look at any one area over another.

The feeling I get upon looking at the site is cold and distant. The visual cues the page gives lead me to think that the content is going to be difficult to read and perhaps even hard to find. Take a look at the page listing all the Alertbox articles. Start scrolling down the list and ask yourself how easy it is to find any one article or what in that list makes you want to choose one link over any other. I’ll answer for you. It’s hard to find one and there’s little to make any single article stand out. You’ll have to read every link to decide which one you want, but the lack of design on the page makes it difficult to even do that.

Now look at the April Zero site of Anand Sharma. I forget how I came across it, but I bookmarked because I liked the design. The moment you get to the site your eye is drawn to a few things. The logo at the top, the main navigation links, and a graphic in the top right. Think of how quickly all that information is given to you simply by making those areas stand out from the other page elements, mainly the text. At a glance you can tell what site you are visiting as well as what the main categories of the site are. I’m not sure what the graphic at the right is meant to convey and think the design would be better without it, but imagine it as a login form or perhaps contact information that you might want to call attention to. Compare how quickly you distill this information in comparison to the useit site.

The reason the graphics on the April Zero site stand out so much and call attention to themselves is because they stand in contrast to the other elements on the page. They wouldn’t work if every page element was enclosed in a bright colored background. In that case everything would be competing for your attention. Similarly when a site is too text heavy like useit all of the text competes for your attention and it’s hard to know where to look first.

If your monitor resolution is big enough you’ll also see some of the color repeated toward the bottom of the page. If not you’ll have to scroll a little to see it. The color at the bottom help set apart the main content above it and helps to set off the text itself. Look around the site and notice how your eye is pulled toward different elements. Your eye isn’t pulled to the point where it can’t focus on what it wants, but it’s easy to find something at a glance.

The overall visual of the page is pleasing. It’s not perfect. I think the gray text toward the bottom is hard to read against the background and I think some of the content at the bottom would be better above the fold, but overall I think the design works well. It’s appealing without being too complicated. You can tell what groups of elements belong together and which ones are meant to be set apart.

The Benefits Of Text In Design

There are many benefits of reducing graphics in your web design. Graphics generally weigh more than text and code when it comes to file size. A few too many images can easily weigh down a page and cause that page to download slowly. Studies have put 8 seconds as the time you want for your page to load, perhaps 10 seconds at a maximum. More than that and you risk losing your visitor before they ever see your page.

Of course a good designer or developer knows how to reduce file sizes and a few graphics can easily be incorporated into a page and still have that page load quickly. Also many graphics can easily be replicated with code. For example large blocks of color can often be created in a single line of code. Even buttons and other elements that at one time had to be an image can now be create with CSS coding. As browser handling of CSS improves designers will be able to reproduce more graphics with code alone.

Another benefit to text is for search engines. Spiders and bots read text, not images, and if you want something indexed it needs to be text. Some sites will use images for page headings to ensure you can see their font, but they also ensure the search engines won’t see the text in the heading. There are ways to overcome this somewhat, such as placing the text in the alt attribute to the image, but your best to leave text as text. The only exception would be your company logo.

Design Aesthetics Are Important

Here’s an article about a Carleton University study that helps show the importance of of web design. The study found that people formed impressions of your site in as little as 50 milliseconds (1/20th of a second). One big block of text isn’t going to tell them much. An aesthetically pleasing design on the other hand can have visitors more receptive to your content before they even realize they have become receptive to it.

Beyond those first few milliseconds design leads the eye to where you want to lead it. You want your calls to action to stand out. If they don’t it’s possible people won’t see them. There’s a reason you often see ‘buy now’ presented as a button and that’s because the buttons can generate a higher conversion rate. The higher conversion rate comes from having the call to action standing apart from other page elements.

Again this isn’t to say that you need a heavy use of graphics. Much of this can be achieved with code alone. But I do think any site that aims to be successful needs to meet at least a minimum design aesthetic and often that includes some page elements that serve as eye candy for the purpose of creating some visual interest.

How Much Design Aesthetic Is Too Much?

The answer of course is it depends. I believe in the design advice of the 19th century architect Louis Sullivan who said that form should follow function. How a thing looks should be based on the purpose of that thing and its intended use.

What that means is a site meant to deliver scientific research should look different from a site showing off a photographer’s portfolio. In the case of the scientific research it’s likely that people coming to that site are less interested in the packaging of the research and more interested in the research itself. Thus it makes sense to go very light on the graphics. There might not be a need to have any graphics on that kind of page.

On the other hand a photographer’s portfolio will naturally have a lot of images. The point of the site is to show those images. Text describing the image simply wouldn’t carry the same weight or convey the same feeling. People will also make judgments about an artist by the site template around their work. You would expect that an artist’s site itself would to be a work of art. When it’s not what does that say about the artist?

Web Design from Scratch has a great article about how much aesthetic a site should have. The article The Sphere of Design takes a look at where a site should sit along the spectrum between functional richness and aesthetic richness. The Web Design from Scratch is also one of the best sites I’ve come across when it comes to design and I’d encourage anyone who wants to understand design better to read through every page on the site. It will take you a few days, but it’s worth the read.

If you read the article you’ll note it recommends that most sites should sit somewhere between the purely functional and completely aesthetic and the best sites are those that achieve the right balance in line with the goals of the site.

Summary

It’s not that either text or graphics is better than the other. The best designs are the ones that find a balance between both. A good designer can lead your eye to see what the designer wants you to see. Text stands out in contrast to the visual elements around it, just as the graphics stand out when viewed against the text. Too much of either can cause a design to appear uninspired and flat and more importantly cause the browser back button to stand out against the design.

Is text better than graphics? No. Are graphics better than text? No. Don’t think of the argument as an either or. Think of it terms of balance. A single image in the middle of a block of text adds interest to the entire page as well as adding interest to that block of text. A page with all graphics competes with itself. The best designs find the correct balance to achieve the goals of the site.

Download a free sample from my book, Design Fundamentals.

13 comments

  1. That’s some good post about balance, Steve.

    I did look at April Zero and found that their graphics can be created with CSS only, by only getting rid of gradient colors (their lower part, with black background and grey text, is completely unreadable, though – maybe web designers should learn usability?).

    I guess I’ll be posting the answer in my post :)

    Cheers.

  2. Thanks Yuri. And I do agree if you can create a the effect of graphic with code you should. All developers should look to lighten their files in any way they can. I do think the April Zero site could benefit from using white text instead of gray in the lower part too.

    For me it’s mostly about creating a balance between the different elements on the page. That doesn’t necessarily require an actual image, but it can.

    Images do help to draw the eye though. Think of the AdSense technique that’s no longer allowed of placing images directly next to the ads. It’s a technique that’s always worked well, because the eye is drawn to the image and then the ad links.

  3. Yeah, there’s no argueing that images attract attention. But what they attract attention to? To text or to links :)

    For example, I am for using 3D product/e-book cases for downloads and, possibly, related icons next to some secondary navigation links.

    I’ll probably conduct test the efficiency of text (blue, underlined) and graphical download buttons, too, sometime.

  4. To be honest with you, I just read your summary, which makes a lot of sense.

    Had you included some imagery in your post I would have been more inclined not to skim. Funny that you don’t use images yet talk of balance being all important. ;)

    Nice summary though, I fully agree.

  5. Don’t you love the irony David? I was thinking the same thing about the lack of images in this post from the moment I clicked the publish button. I was on my way out last night and in a bit of a hurry so I didn’t take the time to make images. My bad.

    If I get some time tonight or tomorrow I will add some in there. I thought it kind of funny though that I wrote a post on how important graphics are and then didn’t use any.

  6. Thanks for the resource on color. I’m always looking for more about the meaning of colors and the emotions they convey and appreciate another article on the topic.

    Funny Adam. How could we have this conversation and not have spam come up at some point. I agree with you that you have to make sure the text is in place first. Ultimately I think it’s your content that keeps people coming back. But don’t overlook the packaging. You still need to get people to read your content a few times before you gain their loyalty and like it or not the package will help get them to read.

    And if you want someone to click on a button or give you their email address your design can nudge them in that direction.

    But yes content first and I think the ideal is to find the right balance for your site.

  7. That should be a three-axis graph, with the z-axis being “spammy BS.” That way, we get a true sphere between functional vs. aesthetic vs. black noise.

    I personally tend to side with Yuri; make sure the textual content is in place first and then slowly make it pretty afterward. There is a balance point between the two, but if I have to choose between pretty and functional, I always choose functional.

  8. For search engine rankings its a good idea to use text because search engines can read that. If your using images, make sure to try and reduce them to the smallest size possible without losing none of its quality. Also, make sure to use keywords in the alt tags, something a lot of indivduals miss out on.

  9. I agree that images really ease text-weary eystrain and increase the likelihood that the content you’re presenting actually gets read. In the graphics industry, we call this “air.” Something needs more air, or has too much air, etc.

  10. Absolutely Sheila. I know I’m often guilty of not having enough air, this post being an example, but that air can really ease reading. An image here, a little space there, can help get your content read which is why you write it after all.

  11. That’s really interesting Pita. I hadn’t thought of the cultural angle at all and I suppose that’s part of me being a product of the culture I grew up in. Even though I didn’t use them in this post I do think images add a lot to content. I had been thinking of it more as a way to break up text blocks, but you make a really good point.

    Visual learning would not only make images more important, but also make it more important to find the right image to reinforce your message.

    Thanks for bringing it up.

  12. I havent heard about the cultural angle to this issue (text vs image). Like some of us come from cultures (South Pacific, Fiji in my case) where text was introduced only just over 100 years ago. Few own a library and teachers had to force students to read even what some of us thought were good storybooks. The traditional way of learning was through seeing and doing what the expert canoe builders or mat weavers were doing. Colours, shapes, audio and non-verbals were and still are important. Learning was visual (images rather than text) and kinesthetic.
    I find it rather unfair that people want to get rid of images or graphics in text because those in my view cater for these cultures that read them better than text. My Grandmother from the village couldnt read the newspaper but she amazingly could tell alot by just looking at the pictures. I dont know how she did it. Maybe by looking at the setting, non-verbals etc. etc.

Leave a Reply

Your email address will not be published.

css.php