11

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:

bulleted list depiction

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

Are there any visualizations I can/should look at so as to get some ideas? Any pointers, suggestions, screen-shots would be appreciated. If of any value, this is a Javascript/Jquery + CSS heavy front-end.

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.

Improve this question
1
  • If it were actually a bulleted list you could just change the size of the bullets.
    – JAB
    May 11, 2016 at 19:02

5 Answers 5

Reset to default
14

Your idea could work, but you will need to take care when designing it. Variable sizes can appear confusing. Breaking the balance and symmetry that often marks pleasing design.

However, it's not impossible. This experiment, called elastic lists provides an excellent example with several ideas.

Elastic lists

Get the code: Github link for elastic lists

This is a bells and whistles version. The height represents the weight of a variable (e.g. number of results). The shading represents the proportion compared to the global distribution (i.e. Higher than expected given the selected states). Its easier to see in practice. The sparklines see the change over time.

Remember this can be shown with only line heights for a simpler effect. How complex you go would depend on context. For an example of only line heigh variance see this demo for searching NY Times articles.

Another (and perhaps easier) way to show the strength of an item in a list is a thermometer style. You mentioned this might be too jarring. However the example below shows that a subtle graphic can still show a sense of proportion. Whether it fits with your design is all relative however I've used this successfully in the past.

Thermometer style list

You could add numbers to this to give absolute values.

This example has a chart like approach with colour added for emphasis.

Finally, if you wanted to keep the list itself clean this example points to an approach where the thermometer is placed as a type of bullet.

Popular ordered list

EDIT: I found a multi-lined example on Forbes.

Forbes links

Improve this answer
3
  • 6
    I like your examples. One important thing should be noted from them as well, I think: the items are sorted for their importance. I think that is something not to be overlooked.
    – André
    Jul 11, 2012 at 11:59
  • @André - Yes. The items will be sorted by priority and time of posting. The user has the option of choosing either since both are relevant and necessary/important in my context
    – PhD
    Jul 11, 2012 at 16:00
  • @Jay - Great examples. +1. However, the Tags 42 variant seems to be pleasing only on single-line items (fixed height?) whose width can vary. Unfortunately it doesn't fit the requirements. Taking a look at elastic lists right now :)
    – PhD
    Jul 11, 2012 at 16:01
3

It's hard to answer that without knowing what the general styling of your page / the context looks like. However, I have a

Simple Suggestion

I would suggest a combination of horizontal padding and opacity, like this one (rough sketch):

opacity and horizontal padding

I left the numbers in just for explanation. This will work without them. You could add a mouseover effect to the hovered element increasing its opacity, because obviously the item the user hovers is always the most important.

Also, you could pick one of horizontal padding or opacity if you think both is too much.

Other styles

You could do the same weighing of elements with:

  • color saturation
  • thickness of underlining: EDIT Example

enter image description here

  • strength of (filter) effects: EDIT Example

enter image description here

  • typographic elements (like showing bigger numbers for more important points)
  • etc.

Use combination with other elements?

Maybe there are other elements on your page the solution could be combined with to reduce clutter and intrusiveness. I think the perception of intrusiveness on the user does come from unbalanced visual weights on the page / or too many styles present. If you manage to boil it down to less elements and balanced weights, you could do almost any solution, even the ones you discarded already.

Improve this answer
5
  • Thought of the same. Maybe opacity variation would work best but not the padding. The lists are almost 4-8 sentences long and the above example is great for single-line items IMHO but not for paragraphs. If possible could you elaborate of thickness of underlining (which/what underlining) and strength of filter effects (examples appreciated)
    – PhD
    Jul 11, 2012 at 16:06
  • I added two examples, I think the underlining one is not going to work with your example (if it is 4-8 sentences, you would either have to underline on all lines or under the last line, which would look ugly). The Effect one is just an example, it can be blur, Color stuff or whatever. I think this depends hugely on the style of the rest of the page.
    – Beat Richartz
    Jul 11, 2012 at 16:28
  • You're most welcome.
    – Beat Richartz
    Jul 11, 2012 at 16:30
  • @BeatRichartz Interesting idea, however I'd be cautious about 3d / slanted effects. They can be hard to understand. Also subtler differences are hard to perceive. This is a trap some 'infographics' fall into. I understand your sentiment though of using other types of visual devices. In the end whether the user can, at first glance, understand what it means is what counts.
    – Jay
    Jul 11, 2012 at 16:34
  • 1
    @Jay Yes and No. I think the understanding of the user depends hugely on the visual context. If all of the elements on the page are matching in style, and there is a visual concept the user can understand, even complex visualizations can be perceived quite quickly. If there's a 3-D visualization next to html elements on LSD, perceiving any weight difference, however obvious it may be here, can become a difficult task. So all of the suggested solutions can be implemented in a good or a bad way, but I think in the end, this is about inspiration and not about delivering a definite answer.
    – Beat Richartz
    Jul 11, 2012 at 17:11
2

Using the line height is problematic IMO as the user cannot reliably compare them (like she would easily compare the length of stacked lines):

If the 2nd and 5th line have weights of 3 and 4 accordingly, it'll be difficult for the user to discern due to the distance between the lines (unless the height is considerably different).

Colors and shading have accessibility issues and might be different from screen to screen as well, which might cause some of them to blend together.

I'd use an element on the right (left) side of each line that's well known and easily perceived by people, enabling them to "filter" it with their mind immediately. One such example would be dice (you can use 2 if the range is larger, but I wouldn't use more than that, since people will have to start "work" at counting). Naturally you should select something that works in your own subject domain.

enter image description here

I'm sure you've considered simply showing the information ordered. It would let you use even line heights as in Jay's example, since the proximity of each two makes them comparable. But that's probably not an option.

Improve this answer
2
  • Interesting idea. I wonder how it would go down with users. Have you tried it? Personally I wouldn't make the connection easily.
    – Jay
    Jul 11, 2012 at 11:06
  • +1. Very neat and sublimely subtle. However, would ONLY work for integer weights :)
    – PhD
    Jul 11, 2012 at 16:04
1

Why don't you take a tag cloud approach?

Maintain the list format but increase the font sizes (or thickness/bold value) acording to the importance of the item.

Improve this answer
6
  • THAT is not good. Imagine if all our answers/comments had font-weights as per our reputation. Eeek!
    – PhD
    Jul 11, 2012 at 17:01
  • @PhD I wonder what specifically is not good? This approach offers scannability and in a similar vein to your original box-height example, but with the emphasis on the actual term/item as opposed to its container.
    – Tim
    Jul 11, 2012 at 17:30
  • 1
    @Tim - Maybe I'm misconstruing but it seems to imply that the entire text in each bullet have a different font-weight. These are not single one line items but paragraphs of text. It'd be extremely jarring to read each paragraph with different font-weight IMHO
    – PhD
    Jul 11, 2012 at 17:43
  • 1
    @PhD That makes sense; I certainly wouldn't want to read a full paragraph in 30 pt and the next in 10 pt... Thanks for clarifying.
    – Tim
    Jul 11, 2012 at 17:50
  • @Tim - Precisely ;)
    – PhD
    Jul 11, 2012 at 17:55
0

I haven't seen anybody suggest using indentation...

the less important ones (less weight) have greater indentation.

This allows direct comparison along the left-right plane.

Improve this answer

Your Answer

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

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