Improving web usability: Page numbering systems

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).

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 easier-to-use page numbering system. 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.

Problematic page numbers

To start off, I’ll give examples of very popular websites whose page numbering system is not so usable.

Gmail

Gmail is one of the most popular free webmails today, and not only because of their huge storage spaces. Gmail is “built on the idea that email can be more intuitive, efficient, and useful.” But this mission statement doesn’t seem to apply to its page numbering system.

Gmails page numbering system

Gmail's page numbering system

Gmail uses the typical ‘next, previous’ and ‘oldest, newest’ page-numbering system, albeit with better names: Older › Oldest » and « Newest ‹ Newer. This is what most websites currently use.

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’t know what the delete button is (heh heh).

So what happens if I have 10,000 e-mails and I want to view e-mails 5,001 – 5,100? That is a lot of button clicking: Older ›, Older ›, Older ›, Older ›… This same idea can be applied to websites with thousands of news articles. A user doesn’t want to do all this button-clicking to find one e-mail or that one article. And they shouldn’t have to.

The only reason why this doesn’t poise too much of a problem for Gmail is because of their superior searching. If you know a bit about the e-mail you’re seeking, then you can easily Google your webmail instead of sifting through a bunch of e-mails.

Digg

Digg 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.)

However, this small percentage translates to about 10 pages, or 150 brand-new articles per day. If you’re an avid Digg user, you might find that it takes 4-5 hours alone to just skim through all this content. A website of this size should have an intuitive page number system, because if you don’t bookmark every article you like, then you can have fun using their not-so-proficient search function.

Diggs page numbering system

Digg's page numbering system

Digg’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 ‘previous, next’ page-numbers and several beginning and ending page numbers in-between the first and last page numbers.

But if you’re trying to find an article buried in the depths of the website, like page 70 or something, that is a lot of Next », Next », Next »… 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).

Google

Googles page numbering system

Google's page numbering system

Even Google.com suffers from this same problem. A search for the letter ‘a‘ returns over 12 billion results. And they don’t even have ‘oldest, newest’ page numbers, just a couple of beginning page numbers and ‘next.’

Of course, in the case of Digg and their mod rewritten links, a more experienced web surfer could just edit the link http://digg.com/page# and replace # manually. But not all websites have a demographic comprising mainly of tech-savvy users and not every website has easy-to-modify URLs.

The simple fix

I first applied my solution to the page numbering problem in the summer of ’06. The website was wiiglobal and don’t ask me what’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.

Wiiglobals page numbering system

Wiiglobal's page numbering system

As you can see, I don’t use the cluttered page numbering system. I use a basic ‘next, previous’ page system and a simple text field which allows the user to quickly view any page in two quick steps: 1) type in the page number 2) hit ‘enter’ or click ‘view page.’

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.

Although I’d like to take credit for this system, I’m not sure if I’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’m taking credit already!):

Invision

Logopond

Related posts:

  1. Browsing a single website with multiple logins
  2. WordPress 2.9.1 HTTP error
  3. Prevent Blogger from resizing images
  4. ‘Link’ feature in media players
  5. Using 2 or more different sidebars in WordPress
This entry was posted in Articles and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

3 Comments

  1. Posted January 11, 2008 at 3:51 am | Permalink

    Yeah, you have some valid points. I have also found Gmail to be very crap when I tried to navigate to older mails. Scalability is a big issue for them, especially because they offer such enormous storage space. However, I think they rely a lot on their search, like you mentioned.

    Nice site, love the black.

    VA:F [1.9.1_1087]
    Rating: 0 (from 0 votes)
  2. Eric
    Posted January 12, 2008 at 3:06 am | Permalink

    Thanks. :)

    VA:F [1.9.1_1087]
    Rating: 0 (from 0 votes)
  3. fain182
    Posted April 15, 2008 at 11:01 am | Permalink

    exactly what i was searching …
    cool article!

    VA:F [1.9.1_1087]
    Rating: 0 (from 0 votes)

Post a Comment

You must be logged in to post a comment.