We just released a couple of small tweaks in the AMP library that can make a big difference in building a better user experience.
First, a new JavaScript method (goToSlide) supports advancing <amp-carousel> to a particular slide on user tap/click. This enables significant UX enhancements to image galleries. Second, we’ve made it easier to integrate image thumbnails into forms with <amp-selector>. These will be useful to a lot of developers in providing engaging content to users, as in image-rich journalism and e-commerce product pages.
Using the goToSlide method: Carousel with thumbnails
Until now, <amp-carousel> hasn’t supported some key interaction patterns for image galleries. How does the user know how many images are in this carousel? What if they want to jump directly to image five in a carousel of eight? How does the user even know the carousel is swipeable, if they don’t notice the arrow icon, or if it’s been hidden on the page?
The solution, for many developers and designers, is to provide image thumbnails to the user. Tapping on these thumbnails will automatically advance the carousel to a specific slide.
This is now possible in AMP, using the goToSlide method. You, as a developer, can trigger this method on user tap to advance a slide carousel to a particular slide.
Example implementation
[code language=”html”]
<!– Primary Carousel –>
<amp-carousel id="carousel-with-preview"
width="400"
height="300"
layout="responsive"
type="slides">
<amp-img src="https://example.com/path/to?image=10"
width="400"
height="300"
layout="responsive"
alt="a sample image"></amp-img>
<amp-img src="https://example.com/path/to?image=11"
width="400"
height="300"
layout="responsive"
alt="a sample image"></amp-img>
</amp-carousel>
<!– Carousel thumbnails –>
<div class="carousel-preview">
<button on="tap:carousel-with-preview.goToSlide(index=0)">
<amp-img src="https://example.com/path/to?image=10"
width="60"
height="40"
layout="responsive"
alt="a sample image"></amp-img>
</button>
<button on="tap:carousel-with-preview.goToSlide(index=1)">
<amp-img src="https://example.com/path/to?image=11"
width="60"
height="40"
layout="responsive"
alt="a sample image"></amp-img>
</button>
</div>
[/code]
If you have a lot of images, you can even put the thumbnails in a smaller scrollable carousel:
This pattern pops up all over the web—e-commerce sites may find it especially useful on product pages.
Using <amp-selector>: Forms + image thumbnails
The previous two examples focused on use cases where images are important to a story or immersive experience, but images can also be useful to help users make selections when filling out forms. Using <amp-selector> makes this markup easy and semantically consistent. As a result, users understand their form selections in context. The experience becomes more informative, engaging, and easier to accomplish.
Try it out!
To get started with <amp-selector> and the goToSlide method, you can take a look at the documentation (goToSlide, <amp-selector>), check out working examples at AMP By Example (goToSlide, <amp-selector>), and give us feedback on what’s working and what’s not in the AMP GitHub repo. We look forward to hearing from you!
Posted by Eric Lindley, Product Manager