|
05.02.07
Graphics Vs Text In Design
 By
Steven Bradley
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 reaon the page makes it difficult
to even do that. d every link to decide which one you want, but the lack of design
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.
Continue reading this article.
About
the Author:
Steven Bradley is a web designer and search engine optimization
specialist. Known to many in the webmaster/seo community by the username
vangogh, he is the author of TheVanBlog, which focuses on how to build
and optimize websites and market them online.
|
