Reordering Checkbox List on selection

Question

I have a requirement for a user story I am working on requesting that on checking a check box in a check box list, the selected items appear at the top of the list.

My gut is telling me this is confusing for users, but I would like a more "UX-y" type description to provide my Product Owner.

Answer 1

There are a variety of issues I see with that suggestion, most notably:

• Breaks Conventions: Checkboxes are a very familiar element on web-pages and that suggestions is considerably different than the very familiar and widespread convention of the list staying static and only the checkbox changing (e.g. toggled as checked/unchecked), and as Jakob Nielsen's Law of the Web User Experience states "users spend most of their time on other websites," so you'd better have a really good reason for flouting established conventions.
• Off-Page Elements: If there is any chance that the list will expand beyond the 'fold' I can't think of any way to do this interaction gracefully. The user will be presented with A)Items that disappear after they select them or B) A (likely) disruptive animation that jumps them to the top of the list, thereby removing them from the context they had been in.
• Breaks Sorting: If you have any type of sorting on the list, this movement will make the sorting either inconsistent (i.e. non-checked and checked items will sort differently), or overly convoluted (i.e. sorting overrides the checkbox at top convention, but that convention comes back when user selects another, etc.).

Answer 2

This is a classic case of a user trying to design a solution themselves, rather than just stating what problem they are trying to solve.

Ask the user what they want to achieve with this interaction.

Once you have this information you are in a better place to discuss alternate solutions.

(Asking questions is a good strategy to get someone to be open minded. Telling someone they are wrong will just make them defensive and more likely to stick with their original position.)

I strongly suspect that they want a mechanism to be able to easily find the items they have just changed.

A better solution for identifying changes would be to highlight the rows with changes in a different colour. If you have a large volume of rows (i.e. you have rows that are off the screen), you can also provide a filter that will switch the view to show only the rows with changes.

Answer 3

Alternatively, you can animate the item to move to the top - animation always conveys more information. But it's true, as it's been stated above, that it would be confusing if there are so many items that it would "disappear".

Answer 4

I suggest, that Product Owner has "good" intentions of making the selection obvious and easy-to-perceived by users.

Indeed, the pattern of dividing all the set of elements into un-selected and selected is convenient if there are a lot of elements. You can see an example:

Moving the selected checkboxes is an attempt to implement this pattern, though it's not the best.

My proposition is slightly different, please watch the mockup:

The points are:

• Duplicate selected elements in the Main area to provide quick reference to them
• Provide easy way to delete checked elements from Main area (also uncheck appropriate elements in the Checkbox area)
• Make selected elements in the Checkbox area less prominent to focus users' attention on un-checked ones