I've been stuck on a presentable design solution for some time now. I'm trying to simplify the UI so the user can see the ratings/score for all (Affordability, Scenery and Safety) for a specific location but also understand that this element is a button and will open a overlay with more information about that rating category.

The issues I'm encountering so far are:

  • Rating with no text: Less apparent of the specific rating type
  • Rating with no button background/border: Less apparent it's interactable

Are there any standard ways of showing this or does anyone have a design in mind that may work for this scenario? Anything suggestions would be greatly appreciated.

Figma File: https://www.figma.com/file/gBb0WUjOP900EWqVOSWBJg/App-Ratings-Decision?type=design&node-id=10-970&mode=design&t=IXMlpKKSsITlYsr5-0

(Shows a couple of my ideas, however I'm not convinced by them)

  • Please add some images of the design instead of a link to Figma.
    – jazZRo
    Commented Dec 21, 2023 at 13:17

1 Answer 1


Firstly for a rating I would recommend using an integer or a float number instead of a line mainly because it would be more convenient for the user to compare it to other locations. An example is down below.

enter image description here

Next, to indicate to user that it is actually a CTA and not just plain diagrams I would use a rectangle just like you did.

enter image description here

One more note: I'd either change the icons to be more representable to the CTA's as right now they are very subjective or even get rid of them.

enter image description here

Another option would be to use an accordion list, example down below. enter image description here

Also I'd like to mention a few reasons why I believe the second example you've shown isn't UX friendly:

  • it's recommended to use icons with text, not only icons. There are a few exceptions, for example if the meaning behind icon is universally recognized, in your case not a single icon is universal and that's why a text should be provided;
  • A line doesn't look like it belongs to the rating button.

Keep in mind that colors and font that you are currently using doesn't pass WCAG. I would recommend you choosing colors that has a better contrast.

enter image description here

  • 1
    This is very informative, I'll take these suggestions forward, thankyou.
    – Lewis
    Commented Dec 21, 2023 at 14:14

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.