Home > Navigation > let users find their way through a vast amount of content? > Segmented control

Segmented control

It works like this:

A segmented control is a horizontally aligned set of segments, containing 2-5 buttons, that act as filters on a set of data by selecting them.

  1. When a user taps a button…

  2. … the tapped button remains highlighted…

  3. … and the data corresponding to the segment is displayed

Use when

Segmented controls can be used when you want to help the user find particular data without changing the current view. It works as a filter on a set of data.

You can also consider using a mode selector for dividing content into sections, but here by selecting a different section, the content is loaded.
If the control doesn't work on the same set of data, you could consider using a tab bar. When content covers a certain item, but has to be divided into different subjects, you should use module tabs.

The Good

  • It helps the user find the item he wants faster

The Bad

  • the structure of functions should be very clear, in case of confused navigation (shalley)

Examples

Appie - my purchases

1 Appie is the app of Albert Heijn, a large dutch supermarket. In its product environment the user can also find its purchases. On top is the segmented control that filters the purchases. Here the button for latest purchases is selected.

2 Here the most often purchased button is selected.

Appie - Shops

1 In Appie you can also find supermarkets. The segmented control on top helps filter out the right one. Now all supermarkets are shown on the map.

2 Here all supermarkets open after 8 p.m. are displayed.

3 Responses to Segmented control

  1. sid says:
    July 1, 2011 at 9:35 am

    can i get the android code for it???

  2. loban says:
    August 21, 2012 at 5:51 am

    Dude this is all a publicity stunt. He never intents to share code !

  3. Sebhelyesfarku says:
    January 20, 2014 at 6:43 pm

    You fuckin’ retard, why do you show apps badly ported from iOS on a site called Android Patterns? Have you ever seen the Android UI design guidelines, moron?

Leave a comment