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

closed as off-topic by Devin, msp, DasBeasto, plainclothes, Graham Herrli Apr 5 '16 at 20:42

This question appears to be off-topic. The users who voted to close gave these specific reasons:

  • "Questions about Site Reviews are off-topic because questions here are expected to be relevant for a variety of people in the same situation. Reviewing a site, flow or interface only helps one person at a specific time. Instead try to ask a focused question about a particular aspect of the design that solicits solutions, not opinions." – DasBeasto, plainclothes, Graham Herrli
  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Devin, msp
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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.