best way to put page list on item-list page

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I know the subject line is really bad. Here is the real question: we
have a web application that lists 1200 products. The web page present
only 12 products at once, if you wish to see the next 12 products, click
next page or the page index. This is a very common case.

e.g. (use fixed-width font for the following)

             [Previous Page] [1] [2] [3] ... [98] [99] [100] [Next page]
Product A     $2000 (after tax)  Product A Description Goes Here
Product B     $2000 (after tax)  Product B Description Goes Here
Product C     $2000 (after tax)  Product C Description Goes Here
Product D     $2000 (after tax)  Product D Description Goes Here
Product E     $2000 (after tax)  Product E Description Goes Here
Product F     $2000 (after tax)  Product F Description Goes Here
Product G     $2000 (after tax)  Product G Description Goes Here
Product H     $2000 (after tax)  Product H Description Goes Here
Product I     $2000 (after tax)  Product I Description Goes Here
Product J     $2000 (after tax)  Product J Description Goes Here
Product K     $2000 (after tax)  Product K Description Goes Here
Product L     $2000 (after tax)  Product L Description Goes Here
             [Previous Page] [1] [2] [3] ... [98] [99] [100] [Next page]

The question is, how to best organize HTML for such page.

I stared with this solution:

<p>[Previous Page] [1] [2] [3] ... [98] [99] [100] [Next page]</p>
<p>[Previous Page] [1] [2] [3] ... [98] [99] [100] [Next page]</p>

It works fine. I just wonder if there are better ways to organize this?
My question is the use of <p> doesn't seems to be appropriate and there
are no better tags I can think of for this.

Re: best way to put page list on item-list page

Scripsit Zhang Weiwu:

Quoted text here. Click to load it

It's a good attempt at a descriptive line, though somewhat difficult to

Quoted text here. Click to load it

Such cases commonly originate from a database search, and they are
commonly handled much the way you tentatively present:

Quoted text here. Click to load it

That's common (even Google does that, in a sense), but it's _bad_

What the user needs is a link to the next page and a link to the index
page. These should appear after the 12 (or whatever) items on the page,
after those items and before anything else. It is highly questionable
whether any other of those links is useful or just irritation.

Think about the user behavior. He sees, or sometimes listens to, the 12
items. That's the information proper, and only after reading that or at
least glimpsing over it does it normally make sense to consider any
forward links. And then you want the "next" links, or sometimes the
index link.

When would anyone go to the previous page (as opposite to the Back
button, which is a different issue and part of browser's UI)? When would
he jump to page 42, without having any idea of what might be there? Once
in a century maybe. Well, _some_ people love to jump to "random" result
pages, so _maybe_ you could have those 1,2,3... links as a separate
chunk _after_ anything else.

Think about a person who cannot use a mouse (for whatever reason). Is he
pleased when he has to to TAB TAB TAB TAB a hundred times (maybe
literally) to reach "Next page"?

(Here I'm mainly paraphrasing what I have written in
"Query systems: Design for All approach", )

Quoted text here. Click to load it

Not for many values of "work" and "fine".

Quoted text here. Click to load it

The use of <p> is a fairly small issue. Those aren't paragraphs, so
<div> markup would be more appropriate. (Then you would need to consider
the issue of margins, since <div> has no default margins, but this is
easily handled using CSS.)

But here redundance is not useful, and there are far too many links.

I'd suggest starting with

<div><a href="...">Next page</a></div>

and then perhaps (if possible - this requires a little programming, to
dynamically generate the correct numbers) enhancing this into something

<div class="next">
Next page: <a href="...">products 13 to 24</a>.<br>
This is page 1 of 100 of <a href="index.html">our product info</a>.

Only after that would I consider adding something that appends something

All pages: [1] [2] ... [100]

Jukka K. Korpela ("Yucca")

Site Timeline