Hi I have a place in my system where a user can select which things they want turned on or off, the image below is how it looks at the moment.

The problem is that it's very cluttered and not easy to manage.

I would like to re-design it but what design will cater for a facility like this where a user can toggle settings?

It has 3 different 'sections' or 'tabs'.

For example if 'Supplier' is switched off the toggles below will be hidden.

Are there any other designs that could work with such a feature?

I'm looking for a cleaner layout.

enter image description here

  • 4
    This is a site review and should be closed as off-topic. – Midas Apr 5 '16 at 17:03

This is another way that seems more readable and clean.

Notes: - Don't hide sections content when a section is off if the content of the section if part of the criteria to switch the section on/off.


download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    Was going to make a mockup similar to this. Using collapsible elements cleans up a lot, and making the toggles arranged more horizontal instead of vertical. Suggestion though; for clarity, edit the mockup to also have some listed (some selected, some unselected) subfeatures in the top row. Right now it looks as though toggling a feature disables/hides the subfeatures. – PixelSnader Apr 5 '16 at 15:44
  • I think this would work but you also have to consider that I have 3 tabs.. – Kieron606 Apr 5 '16 at 15:50
  • @PixelSnader I did that in the top row because it seems that not all features have sub features, am I wrong? – Alejandro Veltri Apr 5 '16 at 17:26
  • @Kieron606 To choose berteen tabs or other representation would be another analysis, more of Information Arquitecture rather than just design of componentes/interaction. The answer to both things would be too broad and would need more information of the system. – Alejandro Veltri Apr 5 '16 at 17:28

To start, justify the switches to the left, move and align their labels to the right of the switch/toggle. This will give you a much cleaner line.

keep all switches/toggles the same size.

Instead of using switches for all items, try using the "hidabled" items as check boxes.

Another thing to note, when all of your toggles/switches are hidden, people dont know what the "main" toggle will enable. Instead of hiding and showing everything. Try using a disabled/read only property on checkboxes. This will allow people to know what the initial toggle will enable/disable.


download bmml source – Wireframes created with Balsamiq Mockups

  • 2
    A danger is showing disabled controls is that they can give the illusion of an untrue system state. For example, the right 'disabled selected' implies the value is actually set and affecting the system. If that statement is true, no worries; but if the disabled values are not affecting the system they should not reflect misleading values. – Evil Closet Monkey Apr 5 '16 at 15:41
  • @EvilClosetMonkey good point. – Mark Apr 5 '16 at 15:42

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