0

This design is a combination of the previous designer’s work and some additions I made a year ago. I can’t quite pinpoint what’s wrong, but something feels off. Also, I’m confused about why there’s a green bar on the side of the cards. Feel free to give me your honest feedback—I’m just looking to improve and understand how to make this better. I can’t go into too much detail about its purpose, but any advice would be appreciated.enter image description here

UPDATE:

I made the changes suggested in the comments. Thank you for all the help! I feel like this design is more usable and easier on the eyes. Any other suggestions I am more then open too.

enter image description here

Improve this question
1
  • I don't think this question should be closed, this is not a site review for sure. The OP is presenting a general problem of visual hierarchy, as I can see it, which is relevant to many other use cases. Commented Jan 25 at 10:38

2 Answers 2

Reset to default
0

The green bar is trying to communicate that a section is "all together". The problem is that the cards are so light and close together (and designed so similarly), you can't quickly determine the boundaries of each section by scanning.

Try a light gray page background instead of white. And inside each card, lose the gray stripes for section headers, which feel heavier than the main Header 1 on each card.

Improve this answer
2
  • 1
    Thank you @lzquierdo 🙌🏻. Your help was much appreciated and so nice of you to take time to write it out. I couldn't make the background gray because of where this sits on the page (gray on gray). But I took the suggestion and made the header gray instead to help solve the grouping the green bar was attempting to do. Deleted the gray on the H2 headers and cleaned up the spacing. I'm a lot happier with it now. Thank you! Commented Jan 23 at 17:02
  • That looks so much better! Commented Jan 23 at 17:54
0

enter image description here

It's two buttons next to each other. I personally feel this as ambiguous: I'd prefer to decide on one action at a time or one group of actions (e.g. "OK/ Cancel are two actions, but they belong to one group).

The header background code be stronger, given that there are indicators and buttons in it, which steal from its visual weight and create cognitive dissonance with visual hierarchy.

Improve this answer
3
  • I totally understand your concern about the two buttons being next to each other. My solution was to space them out significantly to reduce confusion. Since this page is set up the way it is, the buttons need to be on the card header to minimize clicks. As for the header color, it’s part of our design system and is used consistently across the web app. It’s a great point, and I’ll keep it in mind when I get around to updating it. Thanks for your input! 🙏🏻 @drabsv Commented Jan 24 at 15:57
  • 1
    I'd rather increase the chevron visual weight, to demonstrate that it belongs to the header, that is, it belongs to visual hierarchy level 1, while anything else, inside the header should be of lower visual hierarchy level. Differentiation in visual weight, should make it easier for the user to figure out quickly the purpose of each one of those teo CTAs. Commented Jan 25 at 10:28
  • 1
    "As for the header color, it’s part of our design system" - I can guess, it is present as simple header in the design system kit, not crammed with so many strong elements inside? That is, in this particular case, the design system header should not be your reference, since this is a special type of header, never planned in the design system on the first place, isn't it? You should rather insist that this be added as a new element to the design system. Commented Jan 25 at 10:35

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.