Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
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 '13 at 1:01

1 Answer 1

up vote 1 down vote accepted

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.