1

I have a form that has around 3 rows with selectable cards (only about 3 to 4 options each row). We do not have a UI/UX designer and I want to adjust the UI design but do not have a good idea about what direction I would need to go in to improve this design.

Each card has an onclick method and a value that is updating a local react state form. I have tested with radio buttons, but my manager prefers the very apparent selected choice with the green background and checkbox.

I appreciate any input and guidance, I am not a UI/UX designer.

unselected

selection made

1 Answer 1

1

If the manager made the decision, there is little you can do. Although according to the image there are things that could be improved:

  • When designing use layout guides.
  • Unify measures:
    • Unify sizes in buttons with similar content. The buttons in the image have up to six different sizes and can be reduced to just 2.
    • Unify the distance between buttons. The image has three different distances and should be always the same.

layout

Nor do I think it's so necessary to follow the typical table scheme with its title and cell with content. Knowing they are items to be selected under the same concept, everything can be in the same line:

inline

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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