1

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

|improve this question
  • Probably worthwhile keeping in mind that hover does not work for touch devices. – greenforest Apr 12 '17 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. – Majo0od May 12 '17 at 12:26
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.)

|improve this answer
1

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

|improve this answer

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.