<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Improve the Web</title>
  <subtitle>Search Engine Optimization, Usability and Design How Tos and Advice</subtitle>
  <link rel="alternate" type="text/html" href="http://www.improvetheweb.com/use-text-instead-graphics-your-website"/>
  <link rel="self" type="application/atom+xml" href="http://www.improvetheweb.com/node/87/atom/feed"/>
  <id>http://www.improvetheweb.com/node/87/atom/feed</id>
  <updated>2007-08-22T20:54:59-05:00</updated>
  <entry>
    <title>Use text instead of graphics on your website</title>
    <link rel="alternate" type="text/html" href="http://www.improvetheweb.com/use-text-instead-graphics-your-website" />
    <id>http://www.improvetheweb.com/use-text-instead-graphics-your-website</id>
    <published>2007-05-09T08:18:04-05:00</published>
    <updated>2007-08-22T20:54:59-05:00</updated>
    <author>
      <name>Yuri</name>
    </author>
    <category term="Web design" />
    <summary type="html"><![CDATA[<p>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).</p>
<p>But reality is that what works isn't what people, who barely know anything about web design, think to work.</p>
    ]]></summary>
    <content type="html"><![CDATA[<p>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).</p>
<p>But reality is that what works isn't what people, who barely know anything about web design, think to work.</p>
<h2>Eye-tracking research</h2>
<div style="float:right;clear:left;">
<script type="text/javascript">
digg_url = 'http://digg.com/design/Use_Text_Instead_of_Graphics';
</script><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script><script>reddit_url='http://www.improvetheweb.com/use-text-instead-graphics-your-website'</script><script>reddit_title='You can drastically improve your website by using text (with CSS) instead of graphics.'</script><script language="javascript" src="http://reddit.com/button.js?t=2"></script></div>
<p>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</p>
<ul>

<li><a href="http://www.useit.com/alertbox/20000514.html">are first drawn to text (78%)</a></li>

<li>spend way more attention on text (many times more, judging by the eyetracking heatmaps from the studies, linked to from this article)</li>

<li>remember and <a href="http://www.poynterextra.org/eyetrack2004/main.htm#9">can recall more textual information</a>, than otherwise</li>
</ul>
<p>Of course, all those thorough studies have many more points to add. Let's look at them a bit more closely.</p>
<h2>How people read web pages</h2>
<h3>The F-pattern or the golden triangle eye movement pattern</h3>
<p>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 <a href="http://www.useit.com/alertbox/reading_pattern.html">F-pattern</a>, or the <a href="http://www.eyetools.com/inpage/research_google_eyetracking_heatmap.htm">golden triangle</a> (whichever you prefer).</p>
<p>It means that the most important information should be presented first, in the top-left part of the screen.</p>
<p>If you <a href="http://www.poynterextra.org/eyetrack2004/viewing.htm">look at how people view pages</a>, you'll see that they also view the main part of the page, but <a href="http://www.ojr.org/ojr/stories/070312ruel/">neglect the huge banner</a>, too.</p>
<p>Graphic blindness comes from the fact that people have learned to <a href="http://www.useit.com/alertbox/banner-blindness.html">avoid advertisements</a> (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.</p>
<h3>People scan pages</h3>
<p>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.</p>
<p>For the website developers, it means that the site text should be crafted for the Web: shorter, punchier headlines, shorter paragraphs, lists, subheadings, etc.</p>
<p><a href="http://www.ojr.org/ojr/stories/070312ruel/">Read the latest study results and see the example here</a>.</p>
<h3>What attracts visitors?</h3>
<p>Of course, it is known that something bright and screaming can attract one's attention. It is natural. Such things could be:</p>
<ul>

<li>a large headling and a blurb (piece of text) with the relevant words</li>

<li>a large image, related to the page topic</li>

<li>a close view of a face (connected with the page, preferrably)</li>
<li>photos of intimate parts of the body</li>
<li>editorial content to learn from</li>
</ul>
<p>Also, faces and images <a href="http://www.poynterextra.org/eyetrack2004/photos.htm">do attract attention</a>.</p>
<p>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).</p>
<h2>How to get the content noticed?</h2>
<p>If you want people to read what you write or otherwise pay attention to your website, you'll need to:</p>
<ul>
<li><a href="http://www.improvetheweb.com/focus-on-the-customers-the-people-and-the-value">know your audience</a></li>
<li><a href="http://www.improvetheweb.com/overdeliver">provide absolute value</a> to the visitors, such as <a href="http://www.improvetheweb.com/quality-content">quality content</a></li>
<li>use text whenever possible</li>
<li><a href="http://www.improvetheweb.com/how-to-format-text-content-on-your-website">make the text readable</a></li>
<li><a href="http://www.improvetheweb.com/when-use-graphics-your-site">use ads and graphics sparingly</a></li>
</ul>
<p>Nothing new or unexpected about getting people to pay attention what you have to offer: <a href="http://www.improvetheweb.com/providing-value-to-build-a-business">provide unique value</a> and they'll love you.</p>
<p>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</p>
<h2>About eye tracking</h2>
<p>Eye tracking isn't the only solution to the problem. It can only <a href="http://experiencedynamics.blogs.com/site_search_usability/2004/12/eyetracking_stu.html" class="bb-url">guide the Web developers to understand</a> how people surf websites. <a href="http://www.uie.com/brainsparks/2006/06/13/eyetracking-worth-the-expense/">Some even believe</a> that eye tracking isn't that useful.</p>
<p>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.</p>
<h2>Conclusions from the eye tracking research/studies</h2>
<div style="float:right;clear:left;">
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script><script language="javascript" src="http://reddit.com/button.js?t=2"></script></div>
<p>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 <a href="http://www.improvetheweb.com/create-a-small-business-website-on-a-small-budget/">business website</a> owner to think deeply about using text.</p>
<p>However, there are even more advantages of using text on websites.</p>
<h2>Other implications for text use</h2>
<p>Text has <a href="http://webdesignfromscratch.com/effective_text.cfm">more benefits</a>, 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.</p>
<h3>To improve website speed</h3>
<p>When a website is build primarily of text (such as this one), <a href="http://www.improvetheweb.com/how-to-optimize-site-speed/" class="bb-url">it loads much faster</a>, than the one, which uses</p>
<ul>

<li>excessive images, graphics</li>

<li>JavaScript (for menus, including various stat tracking scripts, such as Google Analytics)</li>

<li>table-based layouts (which are twice larger in file size, than the ones <a href="http://www.strictlycss.com/">built in CSS</a>)</li>

<li>internal code (not placed in external CSS, JS, etc files and linked to) </li>

<li>sound and video on the page (especially without transcripts, which hurts <a href="http://www.improvetheweb.com/how-to-gain-a-competitive-advantage-with-an-accessible-website/">accesibility</a> - if you do use audio/video, don't auto-launch it and have a button to turn it on/off)</li>
</ul>
<p>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.</p>
<p>Another, more important factor, is <a href="http://www.uie.com/articles/download_time/" class="bb-url">how well visitors can find what they want</a> on the website.</p>
<h3>To get more search engine traffic</h3>
<p>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.</p>
<p>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 <a href="http://www.improvetheweb.com/how-to-conduct-your-keyword-research-and-make-your-seo-more-efficient/" class="bb-url">use words people use to describe it and place them properly</a>.</p>
<p>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.</p>
<p>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 <a href="http://www.improvetheweb.com/the-long-tail-of-search" class="bb-url">long tail phrases</a>.</p>
<h2>Conclusions</h2>
<p>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.</p>
<p>In that respect, it is of primary importance to <a href="http://www.improvetheweb.com/how-to-format-text-content-on-your-website/">format the text for the Web</a> to make it readable and <a href="http://www.improvetheweb.com/how-to-write-for-the-people/">write it for the people</a>.</p>
<p>An alternative to graphics, white space and carefully styled with CSS text can replace most graphics (especially text in images).</p>
<p>Something to think about, right?</p>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script><script language="javascript" src="http://reddit.com/button.js?t=2"></script>    ]]></content>
  </entry>
</feed>
