1

I have a list that consists of blocks of one or more items. For example, there are 3 blocks with a total of 5 items in the following image.

list

The user can add items, decide what items are grouped in a block, the order of the blocks and items within the blocks. There is usually only 1 item per block, and almost always 4 or less. There are usually 30-100 blocks.

What are the best user controls to provide?

My idea is that the user can perform the following actions:

  • Reorder blocks (and all the items in it)
  • Move/reorder items into blocks
  • Move/reorder items out of blocks

But I can't think of suitable controls, other than left-click-drag-drop and right-click-drag-drop, which aren't enough for the actions.

  • 1
    You've asked the question so abstractly it's hard to give you good feedback- can you explain a few more specifics about your use case? – J. Dimeo Dec 29 '17 at 3:58
  • You can think of it as a queue of actions to perform, where there can be grouped actions that executes simultaneously. – Code Dec 29 '17 at 6:19
  • Related ux.stackexchange.com/questions/112415/…. Also look at the design of Photoshop's layers palette. – Wes Toleman Jan 27 '18 at 12:27
  • Do the items act as buttons? Is the whole item considered a drag handle? – Wes Toleman Jan 27 '18 at 12:29
1

Consider: Left Click Select/Deselect Items, Right Click Reveal Context Menu

Context Menu - Wikipedia

A context menu offers a limited set of choices that are available in the current state, or context, of the operating system or application to which the menu belongs. Usually the available choices are actions related to the selected object.

The problem then becomes figuring out the appropriate menu option labels and what happens to the items after they've been acted on.

From a starting state, if I want to make my first group, I left click one or more items, right click any of them and select something like "Group Selected" from the menu.

I could use the same command to make a new group from items that are single or in other groups.

If I want to detach one or more items from a group, I left click them all, right click any and select something like "Remove From Group(s)".

Obviously there are a lot of nuances to be worked out, but you get the idea.

1

Right and left mouse click does not seem very intuitive. This might be OK if it is an application used by experts.

Possible actions should always be visible to the user. So here my thoughts:

  • Make the group more visible
  • If so, drag on the group will drag the group
  • drag on an item (inside or Outside the group) will drag the item
  • when draging a group or an item it should be visible where the drop will take place. This can be achived if the items below the drop area er moved a little downwards
  • when draging a item an the user hovers over a item which is not grouped yet, the single existing item should be shown as a group so the user can group the existing with the draged item.

I tried to put a somthing together 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.