3

When showing a grid view of items for desktop and tablet screen sizes, are there any examples or suggestions of how to offer a quick view option for both mouse and touch devices? Often on websites, this is offered as a hover event which displays a modal window or overlay, or an icon/CTA with a click event. Mobile web best practices suggest that modals can be a clunky experience, and to use an inline revealing method.

A brilliant example that I've found, is Google Images. This works well when you want to use this as the primary event, and for the revealed content to then offer secondary clickthroughs like, "visit page" or "view image".

For argument's sake, let's say Google wanted to show these CTAs in the result view, and only use the 'quick view' to show a larger version of the image and other similar images. So naturally, you'd put these 2 CTAs under each image in the result list. The same functionality can be maintained on the image, however the experience is now that when the image is clicked, and a row expands to show more detail, the pointer that indicates what image you're showing detail for, is now pointing at one or both of the CTAs that are now positioned between the image that has been clicked and the expanded detail below. My opinion is that this is a bad experience, as there is now a break in the relationship on what you've clicked, and what has been show as a result.

I welcome any other examples or suggestions.

1
  • broadly speaking, the 'responsive' solution is not depend on hover in any way. As for your particular question, can you provide some wireframes/sketches for us to look at?
    – DA01
    Nov 11, 2013 at 1:01

2 Answers 2

2

You could still use a on hover trigger to show a Quick view of the products on the devices that has a mouse activated. For touch devices you could use a simple tap to open the Quick view.

I'm not so sure that modals should be avoided but I've found that this animated slide in window (that only covers one part of the screen) solution is a nice way to toggle between a product list and a Quick view.

enter image description here

0

Finding a truly responsive quick view solution is rather difficult. Most websites rely on lightboxes or hover states to reveal additional information - both of which are terrible or non-existent experiences on mobile.

To create the ideal user experience, we may have to lean on adaptive methods to implement a completely new behavior to populate the click results. (Google Image has an adaptive experience on mobile)

User Focus:

  • Absorbing module detail
  • Returning back to the list view
  • Navigating between detail items if the grid items are relevant to each other

Possible Solutions:

  • Full-page takeover may be the simplest solution for the user. An expanding page extends the page and (to your point) breaks the grid system.

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.