What's the best web design pattern for a list of people?

Question

I have a list of people. Totally around 200.

I need to display the people's name, pictures and some other information in one page. Users could sort those people by name, country and other attributes.

What's the best design pattern for this design?

Answer 1

What's the best design pattern for this design?

I also agree with @exizt. It depends on the context. What do you want to achieve? To give you a really helpful recommendation we need to understand why you want to use this people list.

This list of people you were talking about, is it the result of a search process or is it there by default?

Some examples:

• [company phone book / I want find my colleagues phone number, email …] Focus is on efficiency. Neither the employee nor the employer want to waste time with this very concrete task. Usually user starts by typing a specific name or browsing departments tree. Proposed design for the results: sortable table as Vitaly proposed. Gives you the quickest overview. Easy to scan and simple to use.

• [social network / I want to see who is using this service and if I can trust them…] Focus is on discovery and exploration. A user might not be interested in one particular person, but more in quantity or diversity of members. Also there could be corresponding business needs. Proposed design: Fluid grid view showing as much as possible thumbnails/members. You could even try more experimental view modes.

Update: Found an anti pattern today: http://re-publica.de/11/speaker

It shows how you definetley should not design a list if your audience is looking for a brief overview without searching for a specific name.

My goal: I want to get an overview about the speakers of the conference, where they came from and what qualifies them to be a speaker there.

My need: Name, recent projects plus short summary about personal milestones/achievements, picture.

Why the design fails (at least for me): Loading this page I immediately recognize that the conference might be a good one, since there are so many national and international speakers (maybe this was the most important requirement they wanted to meet). But, if I don't know the person showing just a picture and the name, doesn't tell me anything. So I end up clicking on every single picture, loading a completely new page to find out more details. This solution is neither efficient to use nor do I enjoy exploring the speakers.

Answer 2

It really depends on the context, but I'm pretty sure a table will suffice.

Answer 3

As long as the pictures are relatively small, I agree with @exizt. How small is small? I'd say that 50px for entire height of table row is a reasonable cutoff.

If pictures are large, then card view comes to mind, but I don't know of an easy way to sort that. So in that case I'd go with a master-detail relationship - a sortable table with basic textual data, and the picture with the rest of the info in some preview panel on the side or below the table. The way email clients present emails for example.

Answer 4

I would say either a ul with li elements containing vcard formatted span tags representing the Name, Address and other attributes. You could also use a definition list with a dt having the name (if that is the primary identifying info) and dd having the spans with vcard info.

Using a table for contact information is too heavy, especially if you don't have any quantitative data (how many stack overflow answers a contact submitted, for example).

Answer 5

While i would definitely go for the table, it has the advantages of inherently being sortable, serving as a filter, ... If you use some kind of excel-ish table.

Otherwise what about an accordeon? If you have little information in the top, e.g. name, birthdate, something; and fold open to see the rest?

I think i still prefer the overview of a table, in one look there is more to see.