4

Recently I've across some website and they were using this pattern. What is this pattern called? PFA image.

enter image description here

enter image description here

6

Apple UI guidelines refer to that as a "segmented control"

enter image description here

See: https://developer.apple.com/ios/human-interface-guidelines/ui-controls/segmented-controls/

They mostly function as tabs.

  • 1
    Ah! That makes sense :) – DPS Aug 30 '17 at 8:27
  • For reference, I've added one more design and it's not similar to segmented control. – NB4 Aug 31 '17 at 5:01
0

My guess is that you won't find a precise name because it's not standard at all and it is quite "complex" in your second screenshot. It's basically a composition of several patterns.

For me, it is a radio menu with an unorthodox style (no radio, "|" separators). The radio menu controls some data, and you have feedback when you select an option. Or you could call it a button group with the latest option clicked highlighted. But in term of interaction, the "mental reference" is a radio menu (select one option at a time).

Wiring some actions to sort the data in the panel is independant of chosing the pattern used to control it.

EDIT : Regarding other answers, I want to add that it is not tabs, since there is no panel controlled by the "options", and that "Segmented control" is clearly something from the mobile world. To be understood by the majority of people, I would not use this term. Regarding the fact that it can't be radio buttons, please remember that the paradigm behind radio menu is just "Choose only one option amongst several ones". Which is what is shown here. Segmented Controls refers to a particular design and implementation of that interaction (just google it and you will see that it looks the same on every platform).

  • It doesn't necessarily function as a radio button. Can it function as a tab as well right? – NB4 Aug 31 '17 at 10:34
  • From what I see on your screenshot, it is not a tab, though it's only a screenshot and not the "live" version. But given the "Group by" label, it should not be a tabs pattern. Why ? Because the tabs pattern is associated with navigation, and not action. "Group by" is an action. If it is a tab, it's misleading. – ArkDeus Aug 31 '17 at 11:39
  • I'm in the process of designing a view. So I'm doubtful whether this pattern can function as tabs & what is this type of pattern called. When I click on option2 the content corresponding to option 2 will be displayed similar view for option 1 & option 2. – NB4 Aug 31 '17 at 11:42
  • Then it's not tabs, because it's not about navigation or layout but sorting items. I hope you can see the difference, tell me if it's not clear in your mind. – ArkDeus Aug 31 '17 at 11:45
  • But the problem is not "naming" the pattern. UX isn't that much about patterns, it's about designing good interactions, and patterns are the way of doing this. But this is a particular case so you can't simply resolve it with a pattern. That's why the name is not so important. That's what I'm trying to tell you since the beginning. If the name is so important, what you show us here is mentally close to "radio menu", that's all. – ArkDeus Aug 31 '17 at 11:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.