0

We have some design problems in our big web project, so I decided to start my journey on Stack Exchange. I want your help now, but also want to help someone else as well! :)

We have a UI Kit (which we want to transform into a working design system). There we have buttons and segmented controls. They have the same appearance and here is a problem. If we have segmented controls and buttons on the same page it's a bit confusing.

Example

So, I have a question. Is it a good usage of segmented controls or you can suggest a better solution?

  • The problem with this green in a button context in general is that it means, somehwat active, somewhat useable and somewhat clickable, its unclear what the state of the button actually is, just my opinion as a neutral user seeing those buttons for the first time – Badgy Nov 27 '18 at 13:43
  • The button used across the website, so a user knows how it works. The main problem with segmented controls. – Derek Phillips Nov 27 '18 at 13:51
  • What is Segmented? – Badgy Nov 27 '18 at 13:52
0

As I see it, your Segmented Controls are, at their core, the same as Radio Buttons: One item usually selected, perhaps none selected on first load, but after any item is clicked there is always exactly one item selected. A classic Radio Button is quite different from a classic Submit Button (or just "Button"). There are some common alternatives using the same behavior but a different look - e.g., checkboxes where exactly one item can be checked and all others always unchecked. The Segmented Controls are logically the same but fall into the designer's trap of "let's make everything look the same", which is where you are now.

If for design reasons (e.g., mandated by higher-ups) you can't truly change to a distinct "radio button-like" style, then you have a few options:

  • Size - Make the segmented controls smaller - perhaps 2/3 the height of the separate buttons. That would make it more obvious that they are strips of selections instead of other buttons.

  • Color - This is often the easiest - but most fought over by designers. So many people go for the "let's use the same colors everywhere" concept, when color can - and should - be useful. On the other hand, if you are designing for an audience that may include color-blind users (and in fact, we all should do that if designing for a large public audience) then color should not be the only method - use size, type of buttons, etc. to make things clear in other ways as well.

  • Style - Typically something "bolder" for the standalone buttons, or an outline of some sort on the Segmented Controls. But basically something to make it obvious that the control types are different.

Biggest problem with the existing design: What if there is ONLY ONE choice in the Segmented Control? Then it will look exactly like the regular Buttons and the user will either be clicking on the Segmented Control and wonder why nothing happens or NOT click on the other buttons thinking they are all the same - and either one is just not going to work well.

  • 1
    Thanks for your answer! Good points. Mostly, we use segmented controls in a few cases: 1. Switch view (from tile to list, big tile and small tile etc.) 2. As an analog to tabs (which we have in our kit too) So, we always have one item selected. If there is only one item we simply don't show controls at all. Now the problem is that we have active control same as a green button. Because it's common practice to make active control filled, as I saw in different examples. i.stack.imgur.com/FleOj.png – Derek Phillips Nov 27 '18 at 14:23
  • If there is only one item we simply don't show controls at all. is very good - but not everyone does that. The problem with segemented controls for tabs/views/etc. is that it does look sort-of like a radio type control - so it is not always clear whether "A highlighted" means "you are already on A" (which is the way tabs work) or "A highlighted" means "A is a choice and selecting a different choice will only be a selection but not change your screen" Tabs generally work best when the selected item is "connected" to the rest of the page, as is the case typically with Tabbed Browsing. – manassehkatz Nov 27 '18 at 14:30

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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