I am currently developing a website where I have very limited space for a lot of information. However, it doesn't pass my tests of user experience.

How could I make this more understandable to use?

1. Initial state

Initial state

2. Hover state

Some extra information shows up, once you click it the information expands.

Hover state

3. Clicked state (toggle)

The window expands/collapses

Clicked state

  • Probably worthwhile keeping in mind that hover does not work for touch devices. Commented Apr 12, 2017 at 19:57
  • You're unfortunately leaving a lot of interpretation to the user. At this rate, this would then enable your users to start hovering on EVERYTHING to see what would expand and what wouldn't. If you want something to do something, be very direct about it.
    – UXerUIer
    Commented May 12, 2017 at 12:26

2 Answers 2


I would remove the on hover state and add a clickable indication that there are more features to load on click or tap in the normal state:

enter image description here

(Forgive me the image being imperfect, there should not be the outline around the text, and probably there should be more white space, but I am limited to Skitch at the moment.)


Here is how an other popular (dutch) webshop does it (bol.com). Try adding a button so the user knows it can click on it.

enter image description here

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.