Navigation - pagination | Usability On Air

Navigation - pagination

June 14, 2008
Published by Krzysztof P.

Long content pages have always been a problem. On the one hand we would like to put on the website all its contents, on the other hand scrolling through several screens the content is not always a good option. The exceptions are blogs , where users are accustomed to use the vertical slider browser. But not today's blogs will be the topic. I would write a little bit of good examples of dealing with long content within the site.

Long content (content) occurs most frequently in the search list, where on the page should show a list of found results. In most cases we are not talking here about the results for the length of two or three screens, but with content that could take as long as the length of the visible space than a dozen browser windows.

Another example where the content presented is long, there are all kinds of pages of news, products (e-commerce applications) or the review of certain sets (files for download, a list of plugins, etc.).

The solution used in practice (and perhaps one of the better) is to use the dividing engine (portioning) to us for a few-, a dozen pages and displaying them to us individually - so called. Pagination. For subsequent pages (portions of information) usually go through a navigation bar containing links (links) to other pages.

Solutions are many. Some are better than others - as it happens in practice. Below you will present the most interesting from the standpoint of how they are implemented and the organization.

Google

Google is the first example of what I would like to quote. Most of us probably know statndardowy nawigacujny strap on search results pages in Google.

Parallel list of links, sequentially numbered. The page number currently viewing is highlighted with a different color and nieklikalny. Everything would be fine if not for the low contrast between colors and nieklikalnych clickable elements. Links have stress, which symbolizes the possibility of their clicks, and it is a good solution. For subsequent pages, we can go by clicking one of the links highlighted numeric or string "Next".

Probably noticed that there is no possibility here for quick jumps at 10, 20 etc pages, which is the obvious drawback of this mechanism. Dodarkowo clickable area of each party is very small (like the distance between them), which further impedes navigation. This is particularly evident in the number of pages increased from 20 It should here also mention the inability to transition to the first and last pages, which can be very pleasant for long lists of results.

Last page (like the first) has only one highlighted link (Previous).

Another drawback of solutions presented by Google is missing a test label link (title). Do not fail to point out tuaj distracting graphic inscription "Goooooooogle" which is really the solution does not bring anything except your next dose of chaos and blur the transparency of the interface.

Mozilla

Mozilla on the proposed additions to your Firefox browser rather interesting solution, which in comparison with Google, it is much better (although it does not ustrzegło errors).

As shown in these drawings, Mozilla took care of the health and eyesight and contrast in addition to navigation, took care of a large space between each clickable links and a large box, which incidentally highlight when you hover, which additionally has a positive effect on the perception and the perception of what we do . On the minus, however, still include the inability to fast jumps (after several results on the forward and backward) and lack of use of textual descriptions of links, as was the case with Google.

Other solutions

An interesting solution is proposed on the site such as a blog .

It is reminiscent of Mozilla's solution, however, differs some minor details and behaviors depending on the number of results. After a broader description of and commentary on all the cases I invite you to a page with article . I miss in this embodiment similar things that have not been used by Mozilla, but it is close to ideal, and minor amendments could successfully be applied in practice.

In my opinion, a good engine for pagination should meet the following recommendations:

transparency and used the distance between the elements
elements of active and inactive should be clearly marked
clickthrough area elements must be as large
the user should be able to move at any time to the first and last page of results
the user should be able to quickly jump (0 5, 10 or 20 elements) in both directions on the long lists of results
redundant elements in navigation should not be displayed
descriptions of the links should have title to facilitate navigation for people using screendreaderami
Links should have stress, which positively affects their perception of the user's perception
range and is available once a list of links to sites should be matched to the number of results - the optimal number is 3-5 results in forward and backward