I'm working on a settings screen for a web application which consists of a list of features that can be either enabled or disabled. To be able to easily distinguish features that have been enabled from disabled features I split them into two stacked groups. When a feature is enabled/disabled it fades away and disappears from one list and appears in the other one.

Here one feature is enabled with five disabled features:

enter image description here

If we enable a couple features it looks like this:

enter image description here

There will also be filtering like "Show: All/Enabled/Disabled" and sorting.

There can be anywhere between 5 to 50 of these features on this page.

Do you seen any problems with this approach, and if so, can you suggest improvements or alternatives?

  • How does the user actually enable/disable a feature? I assume there is a control that isn't shown in the above wireframe. – Matt Obee Jan 14 '13 at 21:45
  • Thanks for pointing that out. I have updated the wireframes to include the enable/disable control. – tblessander Jan 14 '13 at 21:56

I would simply put a checkbox to the left of each feature name (I'm assuming 1 feature per line per your comment to Serg's response). To reinforce the checkbox visually, I'd also use color to help indicate the checked (or enabled) state.

This seems the most direct way and avoids items moving from group to group which can be confusing.


download bmml source – Wireframes created with Balsamiq Mockups

  • Coloring is really good solution. – Serg Jan 15 '13 at 6:53
  • Thanks @obelia, I'm thinking this is probably the best solution. – tblessander Jan 15 '13 at 12:41

From my point of view there are several problems:

  1. Usually settings are grouped functionally but in your case functional groups will become broken.
  2. Toggling option state will require movement of pointing device vertically and even may require vertical scrolling.

If you still need two list and beatiful fading you can organize your list into two columns Enabled/Disabled and move items between columns. Also, list item name can be used as control itself - pressing it will toggle its state.

or maybe

  • I did consider this but the problem is that each "feature" can have names that take up most of the page width and in most cases you also need to be able to read the whole feature name without tooltips, mouseover effects etc. – tblessander Jan 14 '13 at 23:20
  • Yes, this is a problem for such solution, but this condition was not specified in question. Anyways, it's only idea which in general can't be suitable in all cases. Of course Obeila's answer is more universal as well as traditional - this idea is to support visual movement between lists. – Serg Jan 15 '13 at 6:47
  • @tblessander: Make the features multi-line items then. The side-by-side enabled/disabled columns are much to be preferred. – Marjan Venema Jan 15 '13 at 9:57

I agree with @obelia. You could also consider a mobile-style toggle to the right of each item, especially if you want to give it a tactile feel.

This dribble shot (by Jackie Tran) is a good example:

enter image description here

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.