Users need to view/act on a lineair ordered set of items.


Allow users to go to the next and previous task or object by clicking on 'next' or 'previous' links


Use when

Users need to navigate a linear order list of objects. Objects can be images, Search Results or a number of tasks that are part of a Shopping Cart or a Booking. When the number of objects is large, Stepping works as a secondary navigation aid, for example as part of Paging. In other situations such as in a Wizard, stepping is actually the main task navigation.


The 'next' link takes the users to the next item in the sequence while the 'previous' link takes them on step back. Place a 'next' and 'previous' link close to the object it belongs to, preferable above the object so that users do not have to risk to scroll to them. Make sure the next/previous links are always present in the same place so that users that are clicking through a list do not have to move the mouse-pointer. The 'previous' link is placed on the left, and the next link on the right, at least for western cultures.

Naturally, the 'next' or 'previous' link is only present when there actually is a next/previous item. So if the user starts at the beginning, there is no 'previous' link and there should not be a 'next' link at the end of the list. The labels 'next' and 'previous' can be extended with a further specification of what there is to find next, e.g "next image", "next page" etc.

Think about using a thumbnail image when using stepping as part of an Image Browser. Consider using Action Button when the users is navigating through an important task where the next and previous links need more attention than usual.


Stepping is one of the most basic ways to navigate. It enforces the linearity by using the labels next and previous. Combining a thumbnail image with a navigation link gives the users information where they are going to before actually doing so. Both longer link labels and including a thumbnail lead to an Enlarged Clickarea, hence making it easier to select them.

More Examples

At, images can be browsed using stepping. The links are always in the same fixed position allowing easy repeated clicking.

plml logo


1 comment has been added to this pattern.

Jewe, 7th April 2010
In larger collections (like stock gallerys), a keyboard navigation (left right arroe i.e) is a huge relief.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below