Recently I've across some website and they were using this pattern. What is this pattern called? PFA image.
Add a comment
|
2 Answers
Apple UI guidelines refer to that as a "segmented control"
See: https://developer.apple.com/ios/human-interface-guidelines/ui-controls/segmented-controls/
They mostly function as tabs.
-
1
-
For reference, I've added one more design and it's not similar to segmented control.– NB4Aug 31, 2017 at 5:01
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?– NB4Aug 31, 2017 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.– ArkDeusAug 31, 2017 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.– NB4Aug 31, 2017 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.– ArkDeusAug 31, 2017 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.– ArkDeusAug 31, 2017 at 11:50