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.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.