Design Patterns – Image Gallery for responsive pages

How to improve the image gallery in a responsive page to better engage the users and make them happy ?

In the e-commerce experience, the user focus is on finding out if the item fits his/her needs. During the user journey, especially in the product detail page (aka PDP), the image gallery feature is crucial to invite the user to “push the button” and add our stuff to his/her cart.

When we decided to design the new image gallery experience, we focused on:

• providing a seamless experience across all breakpoints;
• designing a feature that could support and encourage the user to react to the call to actions in the page;

For all standard breakpoints (extra small, small, medium and large devices) most of the available space is taken by the pictures and/or the gallery image. Our goal is to provide the best experience to the user to support our guy during his buying process.

I’ve pinned some thoughts that popped up during the my design process (benchmark phase, the wireframing phase, the lo-fi mockup phase) and after a usability test:

1. Take care of the device native gestures (iOS and Android);
2. Avoid automated motion;
3. Give multiple choices for the same function (ex. activate the zoom with double tap or tapping a clear button/link);
4. Do not provide dead spot. During the browsing session, don’t stop the carousel at the last pictures but provide the “infinite browsing” starting again from the picture #1;
5. Provide a pagination or dots to handle the photo collection browsing (ex 1 of 5);
6. Check the user stats about the unique interaction proportion (ex zoom, thumbnails etc);
7. Providing the zoom on mouse over (only for desktop experience) is always a good idea. My approach is to save some space to not cover the call to actions buttons during this experience. I found the Under Armour PdP very well designed for such goal;

References

• Click here to read about this pattern on linkedin;
• Click here to read an interesting article on Smashing Magazine;
• Vimeo video about carousel (aka image gallery) advertising on instagram;