10

My app has a table containing a list of financial securities. One of the columns is the security's position in a list of all available securities ranked by performance.

For example: security XYZ is ranked 10 out of 200. The table will contain the security name ("XYZ"), a few columns containing XYZ data and then the desired icon/graph displaying its rank (10/200). (For clarification, the table contains only a few securities, not the whole list, hence the rank icon.)

At first, I thought about simply displaying it in numeric form, but the numbers could get pretty big if there are many items in the list. (Ex: 14.567 / 87.654).

My next attempt was using a horizontal progress bar (Bootstrap) where the best ranked security would have a full bar and vice-versa. The tests showed that users did not understand the bar as a rank and were confused.

Progress bar

I tried a vertical bar as well but that looked a bit awkward.

Any ideas on how this data could be displayed?

Improve this question
3
  • If it ain't broke don't fix it. A podium is a somewhat regular icon for representing ranking, but in the size of tenths of thousands it doesn't seem appropriate. I would suggest displaying the ranking as it is. I don't see how a graphical representation could distinguish items differing in one ranking in that big range. I would really consider using the numerical ranking as it is.
    – AndroidHustle
    Commented Mar 2, 2012 at 14:20
  • Could you upload a screenshot of your currrent approach? This way we could perhaps see why user would be confused about it. Showing a horizontal progress bar of some sort would actually also be my idea.
    – Bart Gijssens
    Commented Mar 2, 2012 at 14:25
  • 1
    You can also create a Balsamiq image within the question itself - use the smiley face icon when editing your question. That way people answering the question will be able to copy and edit your current image to supply their own suggestions.
    – JonW ♦
    Commented Mar 2, 2012 at 14:33

5 Answers 5

Reset to default
10

I think going iconic is only going to add vagueness and detract from the value that a number gives you. Users are pretty good at scanning a column of numbers and interpreting them.

I'd suggest keep the ranking as an integer number. Put the 'out of' in the header of the table.

If you do actually have eighteen thousand companies, then consider whether the rank number is actually useful or whether a rough comparison is all that is required - in which case maybe you only need to show a percentile ranking rather than an absolute rank.

You could always add more detailed or accurate information on hover over a row in the table if required - like when you hover over the times and dates here on Stack Exchange.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
4
  • The "out of" approach (table on left) would be great, if it weren't for the fact the each row may belong to different rankings. Therefore, the total number may vary row by row. This is also one of the reasons why I'm trying a graphic approach.
    – Luciano
    Commented Mar 2, 2012 at 15:29
  • I also though about using the percentage (table on right). My only concern is whether users will immediately understand that 1% (top ranked) is better than 100% (bottom ranked).
    – Luciano
    Commented Mar 2, 2012 at 15:32
  • 2
    @Luciano That may be more obvious if the column says "Top 1%", "Top 20%", "Bottom 20%" etc. Also it would make a lot of sense to sort by the Rank by default, which would make it much more obvious.
    – Joe Dreimann
    Commented Mar 2, 2012 at 16:15
  • I have a similar ranking display in a web app I worked on and all rankings are in percentiles. Just makes the most sense.
    – Hansi
    Commented Mar 2, 2012 at 19:50
6

You could turn the bar into a right angle triangle and stripe it to indicate position (essentially a low res bar chart or podium):

If you wanted, the triangle could be less steep the more values it represented (like a stepped podium would be). The stripe could either be be placed as if the triangle is a low res podium/bar chart (e.g., a rank of 5 out of 9 would result in a stripe half way across the baseline) or in order to split triangle volume proportional to number of securities ranked on either side.

Could provide a high res representation tool-tip style, which could include the numbers that you don't want getting in the way ("6th out of 196").

Improve this answer
5
  • Great idea. FYI, Markdown creates <p> tags automatically if you have 2 new lines in a row and <br /> tag if you put 2 spaces at the end of a line & start a new one.
    – dnbrv
    Commented Mar 2, 2012 at 21:00
  • I actually like this idea. It definitely invokes a sense of rank or podium. However, don't you think it makes more sense to invert the triangle so that the better ranked items are on a taller bar? (Like the iPhone signal bars)
    – Luciano
    Commented Mar 3, 2012 at 0:56
  • I was suggesting that higher ranked items be on taller bars (unsure how you are reading it, if not that way), but with the top ranked appearing on the left. I thought the current orientation would work better because, assuming a L to R reading, 1st comes first, 2nd second, and so on, and for me the alternative activates an association with accumulation (which does make some sense for signal strength), but that is just my subjective judgement (e.g., maybe someone else thinks of something diminishing when they see this version). Do wonder if is for repeat user (want max utility or obviousness?).
    – infoal
    Commented Mar 3, 2012 at 14:17
  • More generally, I'm wondering what the relevant use cases/scenarios are. Is percentile, or percentile range (e.g., quartile), for the ranking group adequate information (and you are right that 99% not 1% is the conventional way to report the top percentile - but do your users know this?)? Is size of, or particulars of, the ranking group relevant? I was attempting to graphically capture "rank" and "out of" visually, following your lead, but if I was working on this I would want to know more about the tasks I was trying to support than you've shared.
    – infoal
    Commented Mar 3, 2012 at 15:43
  • @infoal Interesting. I have to admit I totally missed that and assumed right-most meant better ranked.
    – Luciano
    Commented Mar 3, 2012 at 15:45
5

Maybe the downside of a a progress bar is that user will associate it with "percentage complete", which is not exactly what you are displaying. But I don't think the idea of a progress bar is bad. Maybe you just need to make it look slightly different.

For instance:

enter image description here

This is still exactly the same as progress bar, it also shows a percentage, but the association with "percentage complete" is gone. Isn't this used quite often in the financial world, e.g. by Morningstar?

Improve this answer
2
  • Yes, I definitely agree that users associate the bar with "percentage complete". The stars look promising, but it may also be associated with "ratings" or "grade" which is a slightly different concept.
    – Luciano
    Commented Mar 2, 2012 at 15:35
  • How about cell signal bars?
    – Luciano
    Commented Mar 2, 2012 at 15:46
1

If you are concerned that users aren't recognizing the numbers as rankings I would suggest adding the ordinal suffixes: 1st, 2nd, 3rd, 5th etc. These tell people "this belongs to an ordered set" more efficiently than any kind of graphic representation I can think of.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
0

@Luciano, you say in one of the comments:

My only concern is whether users will immediately understand that 1% (top ranked) is better than 100% (bottom ranked)

When you give raw numbers, you are never sure how the user is perceiving it. Therefore, I suggest if having the image/icon/picture is not mandatory, go with simple but relevant text, as mentioned in your reply, to make perfect sense to the user!

Let's say you are showing 5 of the 200 ranked securities, for the rank, you can add customized text like:

  1. In the Top 3 [top ranked]
  2. In the Top 10
  3. In the middle but rising
  4. Way back in the ranking[bottom ranked]
  5. Just made it to the ranking

You can experiment with text/colors. Again on a handheld device showing ranking out of 200, using images might be hard to read. I think even on a desktop it might still be a challenge.

The clear text approach not only gives a clear direction of the ranking, but the user might be interested in looking at the close competition.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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