3

So i have a list of things and each list item has primary information and supplementary information.

One of the data items in the supplementary information is a count. The user may choose to interact with the list items based on this count but it is NOT the only driver. (For example in a list of posts, the number of comments received on the post.)

I propose that this count be displayed on the top right hand corner of the div displaying the list item. The count would be in pale color with a reddish background hue.

Sometimes list items just need to be classified (e.g. this list item has been favourited by you, and thus we should put a star on the top left corner).

What are the pros/cons of such a display. Can someone please point me towards examples where this has been implemented? Someone's blog entry or something where i can get design ideas? Examples?

This is in context of a CSS driven web page.

Update: Explaining my own list item is very domain specific and tedious (and i'm not sure i have the clearance to do so). Feel free to answer with guidance on what questions to ask before one should employ such a UX so the reader can make their own conclusion for their context.

|improve this question
  • 4
    If you tell us what these "things" are that you're listing we'll be able to help you better. Right now you're asking whether putting a number in a list and attracting attention to it with visual design is a good idea. Perhaps it is, perhaps it isn't - we can't really tell you without some more context. – Rahul Jul 26 '11 at 14:49
  • Thanks Rahul. Sorry if the question is too generic but I am not seeking opinion on my very domain specific list item and it's count (thats why i haven't described what the list is of). I also don't want to limit the discussion to "display of comment count on a list of posts" context. Your answer could help the reader guide what questions we should ask ourselves before employing such a UX or not. Examples/Blog would help. – Aditya Sanghi Jul 27 '11 at 9:58
  • The problem is that this design is so broad that we can't really comment on the ups and downs without knowing what you're trying to do. SE sites have counters on list items but they're very different than, say, a list of blog posts with comment counts. The former is designed explicitly for scanning, the latter may not want to distract people. See what I mean? – Rahul Jul 27 '11 at 12:55
1

Here are some examples, one from wordpress admin:

wordpress admin

and one from a redesigned version of wordpress admin (called Executive Admin):

executive admin

that display supplementary count information in a list item.

|improve this answer
1

The meta information for questions and answers on stackexchange (what you're looking at right now!) might be a relevant example. Rating and number of favourites are displayed at the top left of the container. User and his reputation is displayed at the bottom right.

When choosing where to locate a number, it is important to consider in what order the various things you display to them will be most useful. Information that drives the decision to continue reading (e.g. rating of the answer on stackexchange) tends to fit best on the top/left side. Things that may be an afterthought (e.g. on stackexchange, now that I've read this answer, I wonder how credible the author is?) work well towards the bottom or towards the right side.

I'm not sure what the name of this test is - if someone can tell me I'd greatly appreciate it. Stand very far away from your UI so that you can barely tell what it is, and slowly walk closer. As you get closer and more and more details become visible. The order in which things appear should make logical sense based on how useful it is at each stage of an interaction with the UI. This is why we make headings large and bold, and smaller details like the time of posting small and slightly greyed out, for example.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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