best way to put page list on item-list page

[Zhang Weiwu]

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>
<table>
<tbody>
....
</tbody>
</table>
<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 <pdoesn't seems to be appropriate and there
are no better tags I can think of for this.

[Jukka K. Korpela]

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

Scripsit Zhang Weiwu:

I know the subject line is really bad.

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

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.

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

[Previous Page] [1] [2] [3] ... [98] [99] [100] [Next
page]

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

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",
http://www.cs.tut.fi/~jkorpela/forms/qdfa.html )

<p>[Previous Page] [1] [2] [3] ... [98] [99] [100] [Next page]</p>
<table>
<tbody>
...
</tbody>
</table>
<p>[Previous Page] [1] [2] [3] ... [98] [99] [100] [Next page]</p>
>
It works fine.

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

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

The use of <pis a fairly small issue. Those aren't paragraphs, so
<divmarkup would be more appropriate. (Then you would need to consider
the issue of margins, since <divhas 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
like:

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

Only after that would I consider adding something that appends something
like

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

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/