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;


2 thoughts on “Design Patterns – Image Gallery for responsive pages”

  1. I’ll dig into it very soon. It’s avery interesting topic to find best experience on mobile as the screen is not that big, and we want our user to have the best view on our pictures.

    1. Hi Sébastien
      yes it’s an interesting topic because is related to the emotional phase of the user journey.
      When a user is browsing picture he’s making an idea about the object and if he needs or he wants!
      I’m looking forward to have your feedbacks 😉

Leave a Reply

Your email address will not be published. Required fields are marked *