1

Landing Page Context:

The user selects a specific date via circular charts.
Each chart represents two variables (Variable 1 and Variable 2) compared to their respective benchmarks.
    Red: Variable 1 > Benchmark.
    Green: Variable 1 ≤ Benchmark.
    Blue: Variable 2 > Benchmark.
    Green: Variable 2 ≤ Benchmark.

Landing Page:enter image description here

Details Page Context:

Includes:
    Circular charts for Instance 5.
    A "Difference" chart comparing Instance 5 to Instance 4.
Mirrored line plots and color encodings (reddish and greenish) for normal and abnormal values.
Displays percentages of normal and abnormal values in the Variables Load section for Overall, Day, and Night.

Details Page: enter image description here Problem:

In the Variables Load section:
    Labeling for Variable 1 and Variable 2 feels cluttered.
    Current hierarchy shows:
        Instance 4 on the left and Instance 5 on the right.
        Variables (Variable 1 and Variable 2) stacked vertically under each time frame (Overall, Day, Night).

Alternatives Provided (from variableLoad_alternatives.PNG):

Each alternative introduces ways to denote variable names (Variable 1 and Variable 2) but risks overwhelming the user with visual clutter.

enter image description here

Question: What is the best way to denote the names of variables (Variable 1 and Variable 2) in the Variables Load section/card while minimizing clutter?

Improve this question

1 Answer 1

Reset to default
2

I think this question is more oriented to graphic design, I also think what you need is a good graphic designer, not everyone has a notion of aesthetics, there are professionals who study and dedicate themselves to this subject.

Anyway, here are some general notes: I think the biggest problem with your design is not where to place the variable labels, but the design itself.

Rounded corners

The rounded corners are usually used in a rather random way, without taking into account that it conditions the space intended for the content. Rounded corners generate a virtual element with its corresponding axes creating virtual margins that the eye tries to follow. When this element is smaller it goes almost imperceptibly, but as it increases, it becomes more evident, further increasing the feeling of limit, something that I think your design does not need.

rounded corners

Spacing

This is very clearly seen in the poor use you make of the spaces between elements

spacing

I didn't count them all

The question is: Should I control all the spaces and their measurements?

Well, there are two answers:

  1. YES (the obvious one)
  2. Give the job to a good designer, their experience allows them to do half the work by intuition.

Hierarchy

I see four levels of hierarchy by size in the design and, in my opinion, poorly distributed with a massive and unique use of bold fonts. I would consider creating a separate document with all the hierarchy levels and later apply them to the design.

hierarchy

I would try to:

  • Unify repetitive elements
  • Place the numbers inside the bars in a unique position, avoiding the "dance" between each end of the graph
  • Optimize spaces where possible to give relevance to the graphic information
  • Look for visual associations (by shape, color or position)

variables

Improve this answer
2
  • Thank you for your detailed explanation. I will definitely re-visit spacing aspect of my design. Do you mean Overall, Day and Night should be together like Night and Day? Because Overall is combination of Day and Night. Commented Dec 27, 2024 at 18:34
  • 1
    I think you should define the internal components according to the functionality of the graph, what I put is random following the example image Commented Dec 27, 2024 at 18:36

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.