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)


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:

    can i get the android code for it???

  2. loban says:

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

  3. Sebhelyesfarku says:

    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