<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>EM &#187; usability</title>
	<atom:link href="http://www.ericm.ca/tag/usability/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ericm.ca</link>
	<description>Here lies random</description>
	<lastBuildDate>Sun, 31 Oct 2010 04:56:43 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Improving web usability: Page numbering systems</title>
		<link>http://www.ericm.ca/2008/01/11/improving-web-usability/</link>
		<comments>http://www.ericm.ca/2008/01/11/improving-web-usability/#comments</comments>
		<pubDate>Fri, 11 Jan 2008 07:19:09 +0000</pubDate>
		<dc:creator>Eric</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[innovation]]></category>
		<category><![CDATA[page numbers]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://ericm.ca/2008/web-development/improving-web-usability</guid>
		<description><![CDATA[Many websites today fail at providing a simple way for users to find information quickly and easily on their websites. A user will typically leave in frustration if it is difficult for them to find that specific article they read a week ago or maybe even last night if the website is updated frequently. This [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.ericm.ca%2F2008%2F01%2F11%2Fimproving-web-usability%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.ericm.ca%2F2008%2F01%2F11%2Fimproving-web-usability%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Many websites today fail at providing a simple way for users to find information quickly and easily on their websites. A user will typically leave in frustration if it is difficult for them to find that specific article they read a week ago or maybe even last night if the website is updated frequently. This can cause a decrease in the average time a user browses the website or even a decline in visitor loyalty (the amount of times a past user revisits the website). </p>
<p>In this series (hopefully I write more than one article on this topic), I will cover several ways this problem can be rectified that does not require a whole site overhaul. One of these ways is to provide an <em>easier-to-use page numbering system</em>. In the following, I will provide a few examples of both good and bad page number systems and a very simple solution to rectify the usability problem.<span id="more-16"></span></p>
<h2>Problematic page numbers</h2>
<p>To start off, I&#8217;ll give examples of very popular websites whose page numbering system is not so usable. </p>
<h4>Gmail</h4>
<p><a href="http://mail.google.com/">Gmail</a> is one of the most popular free webmails today, and not only because of their huge storage spaces. Gmail is &#8220;built on the idea that email can be more intuitive, efficient, and useful.&#8221; But this mission statement doesn&#8217;t seem to apply to its page numbering system.</p>
<div class="wp-caption aligncenter" style="width: 455px"><img alt="Gmails page numbering system" src="http://ericm.ca/images/gmail_pages.gif" title="Gmail" width="445" height="175" /><p class="wp-caption-text">Gmail&#39;s page numbering system</p></div>
<p>Gmail uses the typical &#8216;next, previous&#8217; and &#8216;oldest, newest&#8217; page-numbering system, albeit with better names: <strong class="location">Older ›  Oldest »</strong> and <strong class="location">« Newest  ‹ Newer</strong>. This is what most websites currently use. </p>
<p>Although this system really reduces the clutter of other page-numbering systems (I will discuss this in the next example), it is much too simple if you store thousands of e-mails in your inbox. This is not hard to imagine since Gmail targets those who don&#8217;t know what the delete button is (heh heh). </p>
<p>So what happens if I have 10,000 e-mails and I want to view e-mails 5,001 &#8211; 5,100? That is a lot of button clicking: <strong class="location">Older ›</strong>, <strong class="location">Older ›</strong>, <strong class="location">Older ›</strong>, <strong class="location">Older ›</strong>&#8230; This same idea can be applied to websites with thousands of news articles. <em>A user doesn&#8217;t want to do all this button-clicking to find</em> one <em>e-mail or that </em>one <em>article. And they shouldn&#8217;t have to.</em></p>
<p>The only reason why this doesn&#8217;t poise <em>too</em> much of a problem for Gmail is because of their superior searching. If you know a bit about the e-mail you&#8217;re seeking, then you can easily Google your webmail instead of sifting through a bunch of e-mails.</p>
<h4>Digg</h4>
<p><a href="http://www.digg.com">Digg</a> is a revolutionary social news site which gained enormous popularity in the past three or so years. Users submit hundreds of content to the website per day with only a small percentage making it to the frontpage (the page where articles with enough positive feedback is displayed.) </p>
<p>However, this small percentage translates to about 10 pages, or 150 brand-new articles per day. If you&#8217;re an avid Digg user, you might find that it takes 4-5 hours alone to just <em>skim </em>through all this content. A website of this size should have an intuitive page number system, because if you don&#8217;t bookmark every article you like, then you can have fun using their not-so-proficient search function.</p>
<div class="wp-caption aligncenter" style="width: 460px"><img alt="Diggs page numbering system" src="http://ericm.ca/images/digg_pages.gif" title="Digg" width="450" height="120" /><p class="wp-caption-text">Digg&#39;s page numbering system</p></div>
<p>Digg&#8217;s page numbering system is very common with news-oriented websites as well as free and open-source web software like content management systems, forums, and blogs. It has the typical &#8216;previous, next&#8217; page-numbers and several beginning and ending page numbers in-between the first and last page numbers. </p>
<p>But if you&#8217;re trying to find an article buried in the depths of the website, like page 70 or something, that is a lot of <strong class="location">Next »</strong>, <strong class="location">Next »</strong>, <strong class="location">Next »</strong>&#8230; Or what many users do, click the highest page number closest to 70 and repeat till you reach 70 (if we were to use the example from the image, this would be page 10).</p>
<h4>Google</h4>
<div class="wp-caption aligncenter" style="width: 360px"><img alt="Googles page numbering system" src="http://ericm.ca/images/google_pages.gif" title="Google" width="350" height="65" /><p class="wp-caption-text">Google&#39;s page numbering system</p></div>
<p>Even <a href="http://www.google.com">Google.com</a> suffers from this same problem. A search for the letter &#8216;<a href="http://www.google.ca/search?hl=en&#038;q=a&#038;btnG=Google+Search&#038;meta=">a</a>&#8216; returns over 12 billion results. And they don&#8217;t even have &#8216;oldest, newest&#8217; page numbers, just a couple of beginning page numbers and &#8216;next.&#8217; </p>
<p>Of course, in the case of Digg and their mod rewritten links, a more experienced web surfer could just edit the link <strong class="location">http://digg.com/page#</strong> and replace <strong class="location">#</strong> manually. But not all websites have a demographic comprising mainly of tech-savvy users and not every website has easy-to-modify URLs.</p>
<h2>The simple fix</h2>
<p>I first applied my solution to the page numbering problem in the summer of &#8217;06. The website was <a href="http://www.wiiglobal.com">wiiglobal</a> and don&#8217;t ask me what&#8217;s up with it. I lost touch with the programmer about 6 months ago so the site has pretty much spiraled off to the internet wasteland. </p>
<div class="wp-caption aligncenter" style="width: 430px"><img alt="Wiiglobals page numbering system" src="http://ericm.ca/images/wiiglobal_pages.gif" title="Wiiglobal" width="420" height="40" /><p class="wp-caption-text">Wiiglobal&#39;s page numbering system</p></div>
<p>As you can see, I don&#8217;t use the cluttered page numbering system. I use a basic &#8216;next, previous&#8217; page system and a simple text field which allows the user to <em>quickly view any page in two quick steps</em>: <strong class="location">1) type in the page number 2) hit &#8216;enter&#8217; or click &#8216;view page.&#8217; </strong></p>
<p><strong>This page number system reduces the inefficiency caused by unnecessary button-clicking by providing a user with only a few links and a single text field.</strong></p>
<p>Although I&#8217;d like to take credit for this system, I&#8217;m not sure if I&#8217;m actually the first guy to use it. I have, however, seen a lot of websites and software popping up in the recent year utilizing my system (oh look, I&#8217;m taking credit already!):</p>
<h4><a href="http://forums.invisionpower.com/">Invision</a></h4>
<p><img src="/images/invision_pages.gif" title="Invision" height="100" width="340" class="border" /></p>
<h4><a href="http://logopond.com/">Logopond</a></h4>
<p><img src="/images/logopond_pages.gif" title="Logopond" height="45" width="420" class="border" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ericm.ca/2008/01/11/improving-web-usability/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

