Great UX for list selection

I just noticed that Facebook provides you with a great experience, when selecting a bunch of friends to invite them to join an event or page. This is especially dragging if you have hundreds of friends, however, Facebook came up with a few tricks to make it a very painless process.

Visual Summary

First to notice is that Facebook doesn't just provide a simple list, where one row equals one item. Instead it puts 3 items in one row, making it much faster to scroll through the whole list. This might not be the best idea for a simple text based list. In Facebook's case, however, they add a thumbnail of the profile picture to each entry, which makes it very easy for the user's eye to scan the list, even if it has 3 columns. You know how most of your friends look like, and if in doubt or in case of a strange profile picture, you can still quickly double check with the name next to it.

Filtering

The second important feature to notice is the filter drop-down menu in the top left corner and the search box right next to it. With the filter you can easily display only the friends, which belong to a certain group or region, while with the search box the displayed entries will be restricted as you type to the entered character.

An additional nifty feature are the filter options Recent Interactions and Selected, where the first one gives you your most important friends (the ones you've interacted with recently), while the second one displays all the selected user, so that you can get a quick overview before hitting the Submit button, without having to scroll through hundreds of entries again.

Selection

And the best part of it is in my opinion the way you can select entries and how selected entries are displayed. Because of the checkbox the user will immediately notice, that this is a selectable item. However, you can not only click on the checkbox itself, but also the related image and text next to it. Which makes it way easier to hit the target, rather than aiming for a little checkbox.

Also, instead of just marking the checkbox as checked, Facebook highlights the whole item with a subtle blue frame and background. Which makes it way easier to differentiate the selected from the unselected items, without having the eye constantly jumping between checkbox, image and name.

Worth noticing is that Facebook grays out users that can't be selected anymore, typically because they've already been invited before or even already joined the event.