0

Visualize a web app with a list of users (more specifically, circular user avatars without names) displayed at the left side (1/3rd of the screen), and a details section (remaining 2/3rds) at the right. Upon clicking a user's avatar, the avatar gets highlighted, and their details appear on the right side. There's also a search field where you can search for a particular user, and the search field has to be reset in order to display the whole list.

Now it's time to create a functionality where user needs to select multiple people (avatars) from the left side (please consider the search functionality as well, a user might need to search and select someone). What should be the best way to go about it?

iUsman
  • 28
  • 4
  • What is the multi-select for, showing the details of multiple users? – jazZRo Feb 21 '16 at 09:10
  • Good point, sorry I forgot to mention that. By selecting one member, not only you can see their details but also send them a message. By Selecting multiple members, we might show some common details of all the selected members as well as send them all a message. – iUsman Feb 22 '16 at 06:41

2 Answers2

1

I think a good solution would be to place the user's name or username next to their avatar. If you click on their name, the details can appear and if you click on their avatar, a toggle effect could occur to visualize a selection/deselction. Once more than one user is selected, a button should appear to move to the next action with the selected users.

It makes sense to display the users names since you will probably use them for the search field.

tlaverdure
  • 111
  • 2
  • That's a good idea, reminds me of the gmail app on android, it also has a similar interaction. – iUsman Feb 22 '16 at 06:42
1

Well on a DEVICE you hold-down-long to begin multiselection.

On desktop you should simply have a checkbox next to each icon - it's incredibly obvious and clear.

When you have a chance to be obvious and clear - go for it!

Fattie
  • 1,173
  • 1
  • 8
  • 17
  • This seems to be a good option! The only thing I'm concerned about is, wouldn't the checkboxes seem redundant? – iUsman Feb 22 '16 at 06:42
  • Well, to select more-than-one, you do need checkboxes: I don't think they're redundant. I'm talking on desktop here. – Fattie Feb 22 '16 at 12:10