You are here

Use text instead of graphics on your website

Nowadays, it seems that every site owners knows how his site should look like: visually appealing, with a large amount of graphics (or even Flash) and, of course, with plenty of images of people, preferrably women, preferrably barely clothed (or naked).

But reality is that what works isn't what people, who barely know anything about web design, think to work.

Eye-tracking research

Numerous eye-tracking studies, done by multiple large research companies (many of which having been researching website usability for a while), have shown that, though humans are sometimes attracted to graphics, they also

Of course, all those thorough studies have many more points to add. Let's look at them a bit more closely.

How people read web pages

The F-pattern or the golden triangle eye movement pattern

The first and the simplest disovery from eye tracking is that people read from top and left sides of the page. Big news, eh? In the industry, it is called the F-pattern, or the golden triangle (whichever you prefer).

It means that the most important information should be presented first, in the top-left part of the screen.

If you look at how people view pages, you'll see that they also view the main part of the page, but neglect the huge banner, too.

Graphic blindness comes from the fact that people have learned to avoid advertisements (also called banner blindness), and the more graphics and ads themselves resemble ads (placed outside of the content, graphics with huge fonts, photos and people), people are less likely to look at them.

People scan pages

The top-left eye movement pattern also suggests that people scan pages, not read them. They are drawn to what interests them, then they scan it the first words of the heading or sentence and move on to the next.

For the website developers, it means that the site text should be crafted for the Web: shorter, punchier headlines, shorter paragraphs, lists, subheadings, etc.

Read the latest study results and see the example here.

What attracts visitors?

Of course, it is known that something bright and screaming can attract one's attention. It is natural. Such things could be:

  • a large headling and a blurb (piece of text) with the relevant words
  • a large image, related to the page topic
  • a close view of a face (connected with the page, preferrably)
  • photos of intimate parts of the body
  • editorial content to learn from

Also, faces and images do attract attention.

As you can see from the heatmaps from the link above, though images do get people to look at them, the text attracts much more attention (the redder the area, the more it was viewed).

How to get the content noticed?

If you want people to read what you write or otherwise pay attention to your website, you'll need to:

Nothing new or unexpected about getting people to pay attention what you have to offer: provide unique value and they'll love you.

If you use ads, make them blend with the design, though find a balance not to offend your visitors by unexpectedly leading them off your website

About eye tracking

Eye tracking isn't the only solution to the problem. It can only guide the Web developers to understand how people surf websites. Some even believe that eye tracking isn't that useful.

However, in some situations, such as determining whether to use graphics and what to use, eye tracking can provide answers and clues to some questions that arise during the website improvement process.

Conclusions from the eye tracking research/studies

So, as you can see, the eye tracking studies have clearly shown that people prefer text over images and also use it more efficiently, than images. This thing alone should make any reasonable web designer or business website owner to think deeply about using text.

However, there are even more advantages of using text on websites.

Other implications for text use

Text has more benefits, other than simply driving visitors' attention to itself, other than spending time and energy on graphical elements that don't contribute to understanding of the page.

To improve website speed

When a website is build primarily of text (such as this one), it loads much faster, than the one, which uses

  • excessive images, graphics
  • JavaScript (for menus, including various stat tracking scripts, such as Google Analytics)
  • table-based layouts (which are twice larger in file size, than the ones built in CSS)
  • internal code (not placed in external CSS, JS, etc files and linked to)
  • sound and video on the page (especially without transcripts, which hurts accesibility - if you do use audio/video, don't auto-launch it and have a button to turn it on/off)

Though website loading speed isn't the only factor that influences conversions, it is one of the most important ones, considering that visitors start to leave, when the page loads slower than in 8 seconds.

Another, more important factor, is how well visitors can find what they want on the website.

To get more search engine traffic

As you might know, the search engines primarily work with text. Sure, they can crawl JavaScript, Flash and even collect information about images (from the alt attributes and their surroundings), but the primary source is text.

When you use text mostly, the search engines have better chances at categorizing your site properly and showing it to its visitors. Especially, if you use words people use to describe it and place them properly.

Thus, as you might guess, the more text you have on your site, the more visitors you'll be getting from the search engines, which can only help a website.

Text specially helps, when used in logos, slogans and homepages. This way, the most important information is available to the search engines and your homepage is more likely to come up for a series of long tail phrases.

Conclusions

Though relevant, clear images can draw visitors' eyes to it, the text, containing the information the people were hunting for, draws much more attention. That is why text should be the cornerstone of the web page design, not graphics (which it seems to be right now). Especially, when text can boost search engine traffic and conversions greatly.

In that respect, it is of primary importance to format the text for the Web to make it readable and write it for the people.

An alternative to graphics, white space and carefully styled with CSS text can replace most graphics (especially text in images).

Something to think about, right?

Topics: 

Comments

You use a table for non tabular data.

Good and sound information as only Jakob Nielsen could deliver it.

Tongue in cheek aside, I think you bring up some very good points that are especially poignant for publishers of development information and other straightforward types of information.

However, I do think that appropriate graphs and other "visual" ways of representing data can make information much more digestible. In that vein, I could see some ways to improve the readability (and scannability) of this very article . . . and BLOG.

And I do find it interesting that the only graphics you have on this page are digg.com related .

At any rate, thank you for your article,

WebGyver

and your article is NOT an example of good formatting... it is pretty hard to read.

Maybe if the world was full of pundits and professors that would be apt. Since most people have the attention span of a five year old, I'll hang on to my relevant pictures.

I'm curious why a variable-width column of text is used for the main body? Wouldn't it be less tiring on the eyes to have shorter line lengths, leading to not so much effort put into horizontal optical tracking?

2000 eye study still apply? Interesting.

One takes in and "gets" images much faster than text so of course they are going to linger and spend more time on the text.

Let's go one by one:

1. The theme wasn't designed by me. As soon as I get around to creating one, I'll create a purely CSS-based theme. I don't like using tables for anything but tabular data, too.

2. WebGyver, there is, indeed, a necessity to determine the balance for a particular website. As I have said in this and another article I wrote about using graphics, some sites just absolutely need those graphics, high resolution close-up photos and such.

The key point is here that the graphics (or any media) should be used only when absolutely necessary - to improve readers/visitors convenience.

3. I'd like to know what makes the article hard to read. Too wide, I hear?

When I had only one page on the site, I did have the width slightly less than it is now. I'll see what I can do to improve.

Any more hints to make the article/blog more readable?

That being said, I'd like to say that I did try to make the article readable. And it is more comprehensible, than most of the web-published one-paragraph, small-font text. I'd figure the article is kinda long (and wide :) ), which makes it hard to read?

4. The key point here is using necessary graphics. Mostly, there are a lot of distractions on pages (such as many visual effects), which don't help much. If the image is relevant to the page and helps to improve understanding, of course it should be used.

5. Yes, right now, the only graphics I use are the social bookmarking buttons and my photo (which isn't well connected after yesterdays/todays insurge of visitors).

Thank you for commenting, all, feel free to point out how I can make the article/blog more readable.

I especially appreciate the data that tells 78% of users are more drawn to text than images and other graphics. That's an excellent Nielsen find. One thing if you wouldn't mind is if you could back up the claim on how external styles and scripts help load a page much faster. There are some studies done by Yahoo! which say that embedded script and css is faster on the single page hit, however you only win on the subsequent page hit. That practice is done on the Y! homepage for obvious reasons (which they did some other studies on how often users come to your site with an empty cache). All very interesting stuff. Nevertheless, thanks for bringing these tips all to the light of day again :)

Best,
Dustin Diaz

I think the readability could be improved by reducing the font size. It's still too big. Somewhere I read* that a small font size on a websites makes it much easier to read. Check this out by using CTRL-mousewheel.

*) forgot where

Well, the reason why external files are supposed to help is that, when they are in the page, each visitor loads a page with all the insides. If the files are external, then they are cached.

Of course, if every page is cached, then, indeed, using most of the code in the page and caching it might work (if you cache blocks, not entire dynamic pages, which refresh often, anyway).

The premise with Yahoo seems to be the last case: they are probably using page cache and don't need extra HTTP requests. I'll try to find the piece, but the general consensus seems to place CSS/JS in external files for not too high traffic websites.

Pretty amazing about the font size. You know, there was a study, identifying the most readable font. It appeared to be Verdana 12px (or equivalent, since we may not use px for fonts).

I'll try reducing the font size to 10-11px and see what happens. Although making the page narrower seems a more feasible suggestion. Options to change font size on the site might work, too, I guess.

Unfortunately, in either way (font too small or too large), I won't be able to determine the reason why people have left the page: due to frustration or fast reading. Any ideas about this/

Edit: this survey identified that the most readable fonts are Arial 12pt and Verdana 10pt. I'll play with them some time and see what happens.

Thanks for the heads up!

That was painful. Reading this.

Maybe magazines and newspapers and books should eliminate images and graphics also? Yeah, that makes sense. We should eliminate illustrations, graphics, maps and photos, while we are at it I think we should only really allow one typeface online also.

You post is ridiculous and reminds me of the style periodicals were displayed in the early 1800's.

I'm not sure what it is, but the page looks a bit untidy. Perhaps it's the use of headlines. You don't get a feeling that "Other implications for text use" is a headline for the 4 sub sections. It just looks like an out of place slightly larger headline.

Perhaps you could try to distinguish better between the different headlines? Either by text style or colour

I guess I'll need to repeat this: using relevant graphics is encouraged. Right now, however, most websites use just about anything they think will impress their readers (banners, Flash and such), which visitors simply don't notice.

Thanks for the tips about the headlines. I'll look into that.

I think that the bold blue font that you use for the links make it look untidy. See if you can change that, and what the effect is.

Doh. Just noticed that the links in the content area are, indeed, bold. So are the navigation links. Thanks for pointing this out.

I think your page could be made more readable were to you adjust the line height larger, 1.4em or something similar if you are using fixed height (px/pt) font. Separating the lines helps one focus on the line one is currently reading.

Also, it may be that I am reading the page after you had reduced the font size but for me, it is too small. :-()

Well. Verdana 12pt was large, indeed. Maybe you are using a large screen resolution? I guess I need to setup a font size switcher (might take a while, though).

Luckily, font is specified with em or %, so you can change it with your browser.

I think link height is set to 150%, which is equal to 1.5em (I think). When I tried increasing line height earlier, it seemed like jumping from line to line was hard (extra eye movement, unnatural). I'll see if adjusting it some will help, but I don't think this is the only solution.

Right now, I need more education on readability to further improve the layout. Currently, it is as good as I can make it, unfortunately. While it is better than 99.9% of most sites, making this site readable is a must, it seems.

Thank you for your feedback.

Average time spent on a new website by a new user is 15-20 seconds. Most of that time is spent quickly scanning and clicking to get a feel for the entire site as quickly as possibly. Stumble, Digg, Reddit, etc. do not help the situation.

Graphics pull visitors in. Content is what keeps them coming back. If that content is news, blog or helpful information, such a tech tips, money tips, tutorials, etc. then of course text is important. I'd like to see someone try such a site withOUT text!

On the other hand, small business sites work best with graphics and little blurbs which describe the entire service "in a nutshell."

It is a fact that people do NOT like to read online, unless they are already at a specific site which they have predetermined they WANT to read.

PS. Perhaps you made all these points. Perhaps I foolishly agreed with you while claiming you are "wrong."

If this is the case, that proves my point. I scanned your blog with the golden triangle / f pattern. Without graphics or blurbs to keep my attention, I hastily surmised what the message was and left my comment. Too much reading for me.

Hi, Nate.

Unfortunately, the goal of this blog is to educate people, but not to entertain. I might get some design from Chris Pearson some day, but until then, the site will look as it is.

I can't think of many graphical elements to support the site subject, too. I could enable images for Digg/Reddit/Del.icio.us buttons under posts, of course (since the Digg-effect has passed).

Your point about 15-20 seconds sort of proves my point, too. Let's take a basic site home page for example. If you have all graphics there (or text in graphics), there isn't much information to consume and visitors will need to click through to learn more. Instead, they could have learned the most important stuff from a quick text description. Read more about building a home page here.

If a small business sells something that needs to be shown, there's no argument that they need to use images.

Likewise, it is very hard to convert a visitor to a reader if the graphics are totally irrelevant (pictures of smiling images, for example, which are abundant).

Since you didn't read to the end, it means you may not be interested in the topic. Then again, this very article is indeed quite long. As I said earlier, I don't think there can be any meaningful graphics for this site (unless it is spiders or something).

If you read the last link, you'll see that every site needs a balance. And while this site's balance is currently what you see, most business websites will need something more visually appealing (a themed logo/design, photos, at least)

Btw, here's the proof that people like to read online. In short, it says that my blog is read and an average time on site was 5 minutes.

Only three digg buttons. Overkill? Attention-whore.

Well, the only reason I placed them is that so Diggers would have an easier way to digg the article. The buttons were placed so that regardless of position on the page, the visitor would have a chance to use it without scrolling.

I don't seek attention, granted the Digg traffic isn't very targeted (I admit, I've got a couple of good readers from there). This article wasn't aimed at Digg (and other social sites) in any way. The only purpose of this post is to educate people about building websites.

Judging by the attention it got on social sites, however, it seems that social site people seemed to like the article, too.

Thank you for visiting.

Wow your site is horrible example of all-text. You are the reason people go toward high level of images. Please consider a design change for the sake of the web.

As I have mentioned previously, I will be texting a visual layout sometime later (as soon as I get to do A/B theme testing and tracking with Drupal, that is).

Thank you for your comment.

The benefits are easy to understand and they are non-interpretable: http://webdesignfromscratch.com/effective_text.cfm

Knowing these, I think that we [the web designers] can find compromises by using both. I work always having S.E.O. in front of my eyes, so the importance of these recommendations are well-known.

Good to see a web designer that understands the benefits of SEO. However, text is not just about SEO, it is about people.

I'd first put function before form and add imagery only after determining the necessary amount of relevant images. It means graphical design, aimed at a specific target audience, too.

Yuri--I've posted over 1,000 photos on my site, yet I agree with your comments about not using too many pictures.

I have an English as a Second Language website and the images work as visual prompts for language development. If I had a different kind of site, I wouldn't use as many photos.

But...for the past six months or so, I've noticed a marked decline in negative comments about how the photos are slowing down the site. I understand that about 15% of dial up users per year are switching to DSL, cable, etc. I think that we are turning a corner on this issue, but since I work with so many photos, I enjoy seeing all text.

Hi, Christina

I agree that more and more people are using broadband. However, the rate of broadband adoption is still around 50-70% in the US and much less in other countries. So we are still not completely allowed to hog the bandwidth.

Not to mention, on high traffic websites, page (and image) sizes still play a large role in site performance.

If you want to make your site faster, you can compress your images and do some other things, too. I'm still working on an article about improving website performance, which might help you, too.

I am sorry, but in the spam hunting frenzy, I had deleted your comments. It appears I have acquired a reflex to delete comments, so I have to overcome it I guess.

That's why I have briefly read the comments (sadly).

Christian, Jacob Nielsen had posted quite a bit on the use of animation. I believe the link was this:
www.useit.com/alertbox/9512.html

Lisa, what do you mean, "correct"? Use of text and graphics is mostly determined by the target audience as I have written previously in another article.

The thing is, however, that using text instead of graphics allows the visitors to understand the information easier, largely, because they have learned not only to ignore banner ads, but also graphic ads and graphics, because:
- they have learned that graphics often bear no meaning (irrelevant to the page)
- randomly placed graphic ads, placed by savvy marketers, taught people to ignore randomly placed graphics

That's why the only way to actually draw attention to an image and use to its full potential is to use a image, relevant to the context.

Allow me to point to another eye tracking research that you might have already read:
http://www.ojr.org/ojr/stories/070312ruel/

As for reading this article, it should mostly relate to text formatting. I did all I could, though I admit there can be done something about making headlines more distinct and such. Sadly, I don't have time for this right now (a tailor without a suit, eh?).

But still the formated text is more readable than most text available online. Perhaps the article was too long?

If you tell me what you'd fix in text formatting, site layout here, I'd be eternally grateful.

Sadly, recovering your comments is impossible without opening this site to the risk of extinction (again). I didn't delete them, because I didn't like them, but because I selected the wrong option (sorry again).

Thank you for commenting :)

Your website is ugly and all of this is only bullshit, there's nothing bad about using some images to give som life to your website!!...

Thank you for a very constructive comment, Anon. Give life to the website? But wouldn't observing life distract the visitor from getting value from the text?

Your entire article contradicts itself in about 19 different places. Please post a revised article that is not only visually appealing, but can hold people's attention (which, ironically happens to be the main point of this article) without the contradictions.

With love and regards,

A concerned member of your local community.

Add new comment