2

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?

Improve this question
2
  • How does the user actually enable/disable a feature? I assume there is a control that isn't shown in the above wireframe. Commented Jan 14, 2013 at 21:45
  • Thanks for pointing that out. I have updated the wireframes to include the enable/disable control. Commented Jan 14, 2013 at 21:56

3 Answers 3

Reset to default
5

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • Coloring is really good solution. Commented Jan 15, 2013 at 6:53
  • Thanks @obelia, I'm thinking this is probably the best solution. Commented Jan 15, 2013 at 12:41
3

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

Improve this answer
3
  • 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. Commented Jan 14, 2013 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. Commented Jan 15, 2013 at 6:47
  • @tblessander: Make the features multi-line items then. The side-by-side enabled/disabled columns are much to be preferred. Commented Jan 15, 2013 at 9:57
0

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

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.