Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question

5 Answers 5

up vote 1 down vote accepted

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.

share|improve this answer
1  
Thanks! I totally agree with "depends on the context" –  Don Li Apr 12 '11 at 14:00

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

share|improve this answer
    
"Table" is what I thought at first, but like you said it depends. Too many columns makes it hard to read rows from one end to the other, even if they are zebra-striped. And then the photos part means you probably can't make "thin" rows, so the sorting might need to be something better than "click the table header", as you may only see 2-3 rows at a time. –  Wesley Murch Apr 8 '11 at 23:44
1  
Zebra-stripped tables are actually worse for reading (as Tufte points out). As for the height of the rows, I think it will be ok, as long as you vertically align cell data to center. –  exizt Apr 9 '11 at 0:42

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.

share|improve this answer

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).

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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