IMAGE GALLERY FOR RESPONSIVE PAGES

How can design improve the image gallery in a responsive page to better engage the users and make them happy? In the next paragraphs, I’ll share my perspective on the value of curating the interaction pattern using the image gallery feature. I will pinpoint the potential pitfalls of misunderstanding this concept and highlight how the image gallery can unlock business value.

IMAGE GALLERY & USER EXPERIENCE

In the e-commerce experience, the user focuses on finding out if the item fits his/her needs. During the user journey, especially on the product detail page (aka PDP), the image gallery feature and the search experience are 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 action on the page;

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

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

1. Take care of the device’s native gestures (iOS and Android);
2. Avoid automated motion;
3. Give multiple choices for the same function (ex. activate the zoom with a double tap or tapping a clear button/link);
4. Do not provide a dead spot. During the browsing session, don’t stop the carousel at the last pictures but provide “infinite browsing” starting again from picture #1;
5. Provide 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 a goal;

LINKS TO LEARN MORE

• The Product Manager’s Playbook: A Toolkit for Building Great Products and Elevating Your Product Management Organization
• Inspired: How to Create Tech Products Customers Love
• 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;

CURIOUS ABOUT THE ARTICLE’S PICTURE?

I picked Oliviero Toscani‘s photo for this post because the way he captures life in a photo shows how powerful media can be in making people feel vibes and want to react to something.