How to deal with positive and negative signs next to a number in the [-1 , +1] and increment/decrement semantic?

Question

I tried to look up this topic and found something here as a side comment but nothing more.

Context

• I need to print a value in the Real numbers [-1,+1] interval.
• The Value has a semantic meaning: The closer to -1, the worse, closer to 1 is better.

Problem

• When the value is negative, I must print the - sign before it e.g., "-0.8"
• When the value is positive, I feel I should print the + sign before the number, but it feels like an increment to the user eyes (tested)

Constraint

I cannot use semantic color-coding on the printed because:

• The value is printed in a comparison grid(comparing columns), and having all cells colored will make the grid look like "carnival time" (UI issue)
• the semantic color coding is already "taken" by the increment delta (see example picture)

Remark: I'd also rather not bypass the +/- problem by tweaking the function (e.g., with normalization in the positive real numbers interval [0,1])

Visual concept

• Each card/cell is stacked horizontally for comparison
• the Value Number needs to be the focal point of the UI
• I know Right flush is not proper for numbers in a table. It works well in this grid UI (tested)

Extra challenge (UI)

• I would like (if not possible, I'll drop this) to show a reference that tells the users that the value is in the interval -1 to +1. But hosting this info as well makes the UI jammed with info. I've tried a few concepts, but when displayed in a grid, they undermine the readability and clarity of the comparison .

I'm trying a different approach (don't mind the crown icon):

But the more I try, the more I feel I want to drop this extra info.

Let me know what you think about it. Thank you so much for your attention and participation.

Mike

Answer 1

If the symbols used in a graph provide perceptual meanings that can be misleading, there is no possible solution except to eliminate them or find graphical alternatives. Two solutions:

1 - Reduce the level of relevance in visual perception of the symbol by contrasting size and / or color so that it loses its meaning in reference to the number and becomes its own entity:

If the design of the symbols is systematized, perceptually they can be interpreted as part of the same graphic group, separating them even more from their meaning in direct relation to the number (Gestalt law of similarity).

2 - Redefine the graph's metric symbology using other types of symbols to represent worst / best.

Example with alternative font:

---

Example with html arrows:

←1 –––––––– 0 –––––––– 1→

---

Example with html symbols:

◄ 1 –––––––– 0 –––––––– 1 ►

Answer 2

I think showing the visual refrence at the interval is a bit of on overkill as it crowds the UI and has exactly the same information as the number. The only way I'd vote for doing that if it would be really in the background, not taking my cognitive abilities in looking at that when I don't want it. You could have a separate more graphical view (kind of reports) where you could then show some visualization within two-dimesnional space (x = time, y = [-1; 1]).

I would not change the "-" for any arrows or something else as those will confuse most people while everybody is familiar with the concept of a minus sign.