I have a web page with a bulleted list of items each with an associated weight i.e. level of importance. The bullets are of equal width but not necessarily of equal height. Here's a graphical illustration showing the idea:
- One way is to show small bars to the left/right of the item scaled per it's weight. It'd then look like a bar graph from top to bottom, with each item appended (or prepended) with a 'bar'. This was perceived as intrusive and disturbing so was canned.
- Another way is to 'fill the boxes' (horizontally) with the amount proportional to the weight. However, having such a background turned out to be too jarring for the user. More so, each item being of a different height, the perception wasn't uniform. Even if we did this vertically like filling a bucket, it wasn't all that great.
- A more subtle version: Having the top (or bottom) border be colored in proportional to the weight. But this landed up being confusing since since users weren't able to figure out to which item the border belonged to with ease and would tend to misconstrue it for the element above (or below) it.
Question: What would be the most non-intrusive, yet creative way to visually depict the weight of each item in place, while the list is being displayed? (It's okay if numbers are visible, but only numbers are not acceptable)
UPDATE: I'm probably going to use a combination of thermometers (i.e. progress bar like things :) across the top borders of the bullet-ed lists (each item has only the top border. The graphic above had all borders to show the size variances). I'm guessing it'll look neat and I should be able to post the finished version when I'm done. I'm thus going to be a mixture/combination of what @Jay and @Beat have listed in their posts. I'm accepting one of the answers for the sake of completeness but both together help answer my question better.