Change shape of indicator

How to use it

When showing indicators that represent a series of selectable items, change the shape of whichever indicator represents the "current" item.

When to use it

Techniques like changing the colour or highlighting the currently selected item can have problems, especially for people with accessibility needs, like colour blindness. Changing the shape means that the "current" item is much easier to spot quickly.

In the carousel example below, several dots each represent a slide. The current slide is represented by a "widened" dot, but it's worth keeping in mind that you could change the shape in all sorts of ways. Also consider how you might do this with, for example, a standard horizontal menu of text items - how do you change the shape of a menu item in a navigation bar?

What to watch out for

The shape change should be obvious enough that it's noticebale, but not so different that someone doesn't think it belongs to the series it's a part of. The rounded corners were kept for the longer, selected item in the example below so that people can tell that the dots are related to it.

Examples