2

I am designing a webpage which has product details as follows:

enter image description here

Each of the specification is supposed to have a quick single-line definition which the user can view. For eg, if the user wants to know what is No Claim Bonus, they can read about it. What would be the best way to do this? Adding a '?' icon in front of each specification is too distracting, simply hovering over the titles would be annoying during hover-by-mistake and will also be a problem when the site opens in mobile view. Any help is appreciated. Thank you.

Improve this question
2
  • You want something that tells there is more info (instead of relying on hover discovery) but you say "Adding a '?' icon in front of each specification is too distracting". Do you refer to that specific symbol or to any other symbol/text?
    – Alvaro
    Commented Feb 1, 2017 at 11:41
  • Thank you Alvaro, for taking up my question. I mean to say that having a '?' icon in front of each of hospitalization, cover amount, no claim bonus etc will be very repetitive and distracting. Also, I want to show a quick definition here itself, more like a tool tip, not that "there is more info".
    – user2537399
    Commented Feb 1, 2017 at 11:45

1 Answer 1

Reset to default
1

The information could be shown:

  • Information is shown per item
  • Information is shown for all

The element to be interacted with could be:

  • The item itself
  • An specific element inside or outside the item

The basic interactions could be:

  • Click or tap
  • Hover, which doesn't have a reliable equivalent in touch devices

In your case and given your concerns I think a good idea would be to hide the interactable element behind a hover interaction. So basically when the user hovers each item an icon appears inside of it that when clicked displays a simple Popup with a definition. It can be dismissed by a second click in any place. In the case of touch devices it is more tricky, so either you show the icon directly, you display a message above that says "tap any element to see it's definition", or you hide item info buttons behind a single button (this last one is too complex, though).

Improve this answer
3
  • Thank you for your answer. Do you mean something like this: s23.postimg.org/udpiu6yyz/…
    – user2537399
    Commented Feb 1, 2017 at 12:27
  • @user2537399 Exactly :) Although in that example it looks like the Popover is showing on a second hover. I would rather show it on click and once it is visible it is dismissed clicking on it or when a second click outside is made.
    – Alvaro
    Commented Feb 1, 2017 at 12:31
  • Yes, I'd show the popover on click. On phones however, I'll have to show 'tap to view definitions'. I think your solution is quite good, thanks, I'll wait for a few more suggestions before accepting your answer although I don't see many ways in which this can be handled.
    – user2537399
    Commented Feb 1, 2017 at 12:36

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.