7

Situation:

I need to build a sharing control that lets you share an item with individual or multiple users.

To avoid having to select the same set of individual recipients each time I have created a Group function (managed in a separate section of the webapp), where you can assign individuals to groups so that you can then share that content with a Group instead of a list of Individuals.

Now, I don't want to just have a list where the user can select the Group they want to share with, because they may wonder who is in that group, and the only way currently to find out is to abandon the Sharing and go to the Group section of this webapp. So I'm trying to find a way to let users see who is in a group when they're choosing it, should they wish to know.

However, I'm struggling with the best sort of control that allows you to select the Group or view the list of people within that group. It's becoming a clunky dropdown+tooltip / expander mess that isn't very intuitive, scalable and unlikely to be very accessible either.

My first option was to use a hover / click to show the members as a sort of tooltip, but I don't think this is very accessible, and isn't very scalable incase the group contains 10s of items.

enter image description here

My second option was to have the list as some expanders, which is more scalable, but then makes it look like you're selecting individuals not the group as a whole.

enter image description here

Is it even going to be possible to combine both View and Select into the same control?

Improve this question
1
  • What is your primary interface - mobile, desktop or something else? Can you give more insight into that?
    – Kristiyan Lukanov
    Dec 20, 2017 at 15:37

3 Answers 3

Reset to default
12

I think you're on the right track with the second option, but the list of members just needs to look less like a selection list and more like an expanded details panel.

You could also make better use of the space where you currently show 'N members' by showing a summary of the first few members of the team. That may be enough detail to not need to expand the details at all.

enter image description here

Taking the wireframe a little further, you can easily visually separate the interactive areas; move the number of team members above the arrow; and neatly transition the arrow to a cross as the details open up.

enter image description here

Improve this answer
3
  • Hmm, I like this approach, particularly the aspect of replacing the member count with the list of members themselves. I'm not totally convinced that it looks like each item is a selectable item in its own right, and not just a way of triggering the expander. Perhaps a vertical pipe separating the chevron from the rest of the box might work, but overall it's probably a good option.
    – JonW ♦
    Dec 20, 2017 at 15:40
  • I like this idea. If you're wanting to be even more space conscious, you could do away with the expand and collapse functionality and replace it with a link after the truncated list to show the remainder of the truncated list. For example, after the three shown for "Agency Team", have a link in place of the "+9" for View 9 more... or Show all 12... or simply More... which then shows the full list inline. I've seen this pattern used with various truncated lists or paragraphs.
    – maxathousand
    Dec 20, 2017 at 20:01
  • @JonW Updated with a more visual mock-up, improving (perhaps?) the member details part of the panel.
    – Roger Attrill
    Dec 20, 2017 at 21:34
5

How often do you think a person might want to look into the group? Does it even matter? If I were part of a project with a multidisciplinary team, and thus part of one or more groups as my colleagues would be. I see two possibilities.

  1. I know which group everyone is in because I'm interested in what everyone is doing.
  2. I don't know who is in what group.

In the first scenario it's nice to have a quick overview to be certain. But not a necessity. In the second I might not even care who is exactly in the group. I don't need a single person in the group, if that was the case I would mail that person. If I would like to sent something to the designers, I just send it to the designer group. If someone who is supposed to be in there isn't in there, that is the fault of the system manager.

That being said, I do understand there are cases where it's useful to have an overview. Most likely is that I need someone from a group, but don't really remember his/her exact details. Then I could navigate to that person via the groups. I would like option #2 in that case. However, to make sure a singular group can be selected you probably need to devide the UI elements so it's clear a group can be selected.

Maybe something like this? (i just saw

enter image description here

Improve this answer
4
  • 1
    I don't expect people to regularly need to look in the group, so this is just a courtesy 'if you want to see who's in this group then you can' option. I thought about the checkbox route, but it's a single selection control (you're using it to select the single group that is the recipient of this sharing) so a checkbox suggests multichoice. Same with the users within - while I could have them individually selected, that starts to overcomplicate the control (there's a whole separate option on the page if you just want to share with one individual, where you just enter their email address).
    – JonW ♦
    Dec 20, 2017 at 10:46
  • If there's some other option than a checkbox though, then this may well work (the obvious choice would be a radiobutton, but I'm not sure putting radiobuttons into select lists is ideal. That seems a bit... confusing.).
    – JonW ♦
    Dec 20, 2017 at 10:47
  • If it's more to show, It might even not be necesary anyway. If you have the resources you could test it if the function is left out completely. Otherwise I would suggest the first option. Maybe change the view with the "info i" (black circle with lowercase i). Have it fade out when user clicks somewhere else or x seconds after user doesn't hover over the element. I agree that radio button might not really be the best scenario in this case.
    – TristanSchaaf
    Dec 20, 2017 at 10:58
  • Yeah, it may not be used, but there will be some users who just want to see who's in a group, and I want to give them the ability to do that if it's possible, simple and doesn't get in the way of the core functionality.
    – JonW ♦
    Dec 20, 2017 at 11:01
4

I asume that click on the item will start a action imediatly, so a checkbox is not an option because then it would be necessary to mark the group an then perform the action via a second click to some kind of CTA. Therfore every listitem (group) has two CTA's which should be visible.

As you state, the amount of members in a group could be large, so it would be necessary to scroll to see all the members. So a popup does not seem to be the right choice.

The accordion could be difficult to understand to, if there are a lot of members. To close the accordion again, the user would have to scroll up and find the accordion header (group).

There is a additional possibility which would help with those issues:

  • Click on the Group will start the action
  • The amount of members is displayed as a link. Click on the link will open a new screen with all the group details. In the details page is the list of all the members and sticky on the bottom a CTA which will perform the same action as if the user would have clicked directly on the group. A back button brings the user back to the group list.

This way it is no problem, to scroll the members if there are more then a few.The action is always clear an can be performed out of the detail information as well.

enter image description here

Improve this answer
2
  • This is a similar approach to the 1st option I've been toying with, but without the issue of scalability. My main criticism of it is that it's not totally clear that it's a selectable item in its own right. It's the small amount of precision that I worry about - clicking the item itself selects it, but selecting a small part of it triggers the sub-list. I want to be sure that it's clear what's going to happen when they click what it is that's it's going to do.
    – JonW ♦
    Dec 20, 2017 at 15:56
  • @JonW Just have a click anywhere do the expansion, if it's a mobile interface. For a full-size interface with a mouse, precision is notably less of an issue.
    – Delioth
    Dec 20, 2017 at 19:28

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.