Question

I’m building a user interface and I’m using ‘dots’ to indicate how many elements there are. They can be used for navigation, but that is optional. I would like to describe this element, but I don’t know how this type of element is called. ‘Dots or bullets’ sound weird and it is more than ‘navigation’ only.

I’ve included some examples of this type of user interface element (in other applications). This is a carousel:

This is a magazine app on an iPad:

Another app (mobile website?)

How is this element called? I’m looking for the right name for the Technical Design Document / other documentation. I’m programming it in JavaScript.

Answer 1

In general it’s called a Pagination Indicator. Each platform have their own name for it.

Honestly it isn’t even a real pattern, just a common imagery used in many patterns to represent a small number of pages.

You’d be best to focus on the data you intend to display. Is it pages for a book, slides of a presentation, tabs of actions etc. Then figure out how to display that and integrate a pagination Indicator in some way.

Think about the max information that needs to be displayed:

• Do you need to show more than 10? – this pager would be unsuitable
• Does the user need to now which page he is on? – swap the current page icon with a number?
• Does the user need to be able to press the icon to go to a page? – then buttons with numbers would be better.

There are many different ways to show pagination: http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/