2

Background: I have a list of elements in a browser which each are a numerical distance away from the same origin point. I want to give a visual hint to quickly give a feeling for how far a list-item is away from the origin. My Idea for that was to use color and opacity rgba(15,15,15,0.5), where the closest List Item is a 1 (rgba(15,15,15,1)) and those further away have an opacity of 1/distance (e.g. 1/5 rgba(15,15,15,0.2)).

I can set the opacity by directly setting style with javascript li.setAttribute("style", `background-color:rgba(15, 15, 15,${1/distance*0.9 + 0.1}`); But that kills my CSS for li.#hover { background: lightgrey} since inline style trumps the style declared in the css file. So I use text-color. In addition, I need to define the styling in Javascript as opposed to the css file, which feels out-of-place, towards organizing my CSS.

My list are topics, which have a numerical distance to another topic: enter image description here

  1. is the closest, 2-5 are mid-distance, 6-7 are furthest away.

Questions: How should I style a data-based numerical gradient in CSS? Is there a better way than background-color and opacity? Do I have to do this with JavaScript, or can I somehow do this in *.css ([data-] attributes won't work)? Does anyone know an example of such data-based gradients used elsewhere?

I really like the idea of having the visual hint for distance for easy list-scanning, but my solution just feels shoddy. Both visual-design wise, and coding-wise.

Improve this question
2
  • are these elements interactive? Is this a map where they would see the selected point? And are these categories surfaced to the user in any way? Where do they live in relation to the view?
    – Mike M
    Commented Jul 29, 2021 at 3:09
  • In the End the data is a graph-structure, and by clicking on a list item, you move to that point in the graph, which in turn has a list of "reachable neighbors" sorted by distance. The distance is not categorized, but a continuous value. The distance value is calculated by a complex algorithm and should not be made understandable to the user. It's a black-box that should be taken at face-value by the user.
    – Rafael Emshoff
    Commented Jul 29, 2021 at 12:42

3 Answers 3

Reset to default
2

I understand what you want to do and at first glance, it does make sense however after thinking about it deeply I would advise you against it. Colours & Font Weights have significant meaning to your users. Yes, a gradient might do well to communicate "distance" to a user and "level of importance" however you also need to consider visibility.

You could set the start colour and end colour for your gradient thereby ensuring that you don't have any hard-to-read text at the end of the list or a minimum and maximum opacity.

enter image description here

My problem is you indicated that each list item is clickable. I wouldn't recommend that approach in this case because the muted text gives no indication at all to the user that the text is clickable, I would suggest you make use of labels and icons to signify importance or relevance to the user in this case. These are just quick examples but maybe you can work around something like this:

enter image description here enter image description here enter image description here

Also consider using underlined text or your primary colour, something that indicates each item is a link or text button.

Improve this answer
1

One idea is to write out the distance to a topic as a similarity score or percentage. This number could also be visualised using a bar graph or radial gauge.

Color can be used too but shouldn't be the only way to communicate information.

topic similarity using color, text and bar

Improve this answer
0

why not just say it above the list?

enter image description here

Color and tone are open to alot of interpretations. You're also dealing with a potentially busy and dense graph.

If you have a title showing both what these items are and how they are sorted, it's clearer. The items as they are now styled prompt questions about why some are gray, and some are not. If they are all 'reachable' why are some gray?

Opacity changes in text also bring up accessibility issues and are just generally harder to see.

Improve this answer
1
  • Yea, but I really want there to be a feeling for distance. Like in the top list items, you can realize that the origin has something to do with Product Management. The 4th point is related to communication, which still might be kind of on-topic. But the fifth is about Machine Learning, so the connection will be weak at best, but perhaps in some weird way useful. In my data this list can be long, and I have no idea how many degrees of distance there may be. I want to visualise this for the user to decide for themselves what may be useful for them. The title text alone is insufficient.
    – Rafael Emshoff
    Commented Jul 29, 2021 at 15:11

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.