6

I'm looking for an intuitive way to let a user group elements together, a bit like Photoshop's 'Link Layers' - but preferably without popup menu.

Right now I'm thinking about the following:

enter image description here

The idea is that you can drag the elements to another group and they will be automatically linked. When you want to break the link you drag it to the bottom. No clue if people will get this - I still need to user test it.

But before I try that, I want to explore some alternatives. Are there any established standards for this or really well done examples in other programs or web apps?

I've seen a few answers below, but I think the most important difference is that there is no clear label for these groupings; it's more like linking.

End result

After @nightning's answer. Note that the labels on top are descriptions of the state of the group - not labels that uniquely identity the group.

enter image description here

Improve this question
7
  • I don't understand your screen like this. Where do you drag Group G from? Are all the elements already visible at start or you drag them from somewhere else?
    – Leths
    May 23, 2016 at 15:09
  • There are all visible from the start. The start situation in this case would be that all the groups are linked together like A,B,C, but then also D,E, and G (forgot F)
    – Dirk Boer
    May 23, 2016 at 15:31
  • 1
    This is going to depend a lot on what being "linked" actually means in your context. Is it just simple grouping? (If so, why the insistence on there being no label for each group?) Does the order matter? (Your design strongly suggests that it does.) Are links commutative, i.e. if A is linked to B and B to C, does that mean A is automatically linked to C? Can a single item be linked to more than one group?
    – Daniel Beck
    May 23, 2016 at 15:52
  • 2
    I think you need to define clearly the interaction that takes place when you drag elements together to link them. But as a suggestion I think clicking on the link icon/button is more intuitive for unlinking.
    – Michael Lai ♦
    May 23, 2016 at 22:41
  • Hi @DanielBeck, it's a bit out of scope to tell the whole context, but I think the most closely related would be the link layers concept of Photoshop. Where you can link layers together and all these layers move when you move one. Order does not matter. A, B and C are indeed all linked together in this example.
    – Dirk Boer
    May 24, 2016 at 8:49

3 Answers 3

Reset to default
4

The proposed solution with a link symbol in your diagram may give a false impression that these items are chained together sequentially. Since a link is usually a 1 to 1 connection.

To de-emphasize the possibility of naming groups, maybe provide an alternate way of grouping items?

Some ideas:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1
  • Best ideas are the simplest one.. Great work! I went for option 2 - and I'll post the results later. Thanks
    – Dirk Boer
    May 26, 2016 at 22:17
1

Google+ had introduced some interesting concepts of showing/linking Groups/People in a circle like this:

enter image description here

Hope this helps!

Improve this answer
1
  • Hi @Name, thanks for your answer. I think the biggest difference is that in this case there are no clear labels for the groupings. Think about Linking layers in Photoshop. So there is no clear 'parent' entitiy.
    – Dirk Boer
    May 23, 2016 at 14:43
0

If you are trying to group things, try showing a expand and collapse sign + - and indent them with the first group.

Improve this answer
1
  • Hi @Fasih, thanks for your answer. I think the biggest difference is that in this case there are no clear labels for the groupings. Think about Linking layers in Photoshop. So there is no 'parent' entitiy.
    – Dirk Boer
    May 23, 2016 at 14:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.