Cover image of this article. The article title 'Designing Visual Stories at Ameba made with AMP' and story screenshots on mobile and desktop are displayed.

Ameba launched blog ranking pages using AMP Stories this year. Our goal was to provide more attractive content for a mobile-first audience. As this AMP case study shows, the business metrics were better compared to our regular page:

  • 20% Link Click Ratio
  • 53% Story Completion Ratio
  • 1.5x Average Page Duration

The key factor of the achievement was a collaboration between designers and developers. The two types of creators helped each other, shared their experiences, and then made a beautiful stories.

Today, I am going to show you the process we develop the stories and the important points for a better user experience. An article on technical stack will be published by @RyuichSakagami later.

Improving Quality With Prototypes

The stories project began as a small team, but we have created a lot of prototypes to improve user experience for both bloggers and audience. During the period, we have learned some techniques regarding story format.

Screen shots of our prototype. Page visual design with Figma and animation prototype with Protopie.
Our prototyping cycle includes graphic design with Figma, animation design with Protopie, writing code and getting feedback through user testing.

Animations For Reading Content

At the beginning of the project, we thought better quality come from animations. We also believed that we can grab users’ hearts with the transitions. However, we soon realized that animations were not useful for reading content. Users were eager to read text as soon as possible in our user testing with various prototypes.

This shows a mistake we discovered that people do when they actually do something for the first time. For instance, when making a first presentation with Keynote app, people tend to use too many animations in their slide. This is the early prototype below. We thought the animation is tricky and blocks users to read content. Finally, we decided to remove the animations from the critical content.

There are too many animations in our early prototypes. Please ping me if you want to see more amazing animations.

Prioritizing Visual Content

Story format is a good place for visual content like images and videos. The audience can consume the content as it is in a full screen experience. On the other hand, images need to be resized in a typical list format, and it is hard to play videos in such a small area.

We think AMP Stories is one of the best formats to display a tons of visual content posted by our bloggers in an efficient way. Our challenge is always making blog entries more attractive, and then helping the audience understand the entry.

Videos can be a killer content in story format. In a story with videos, the audience can consume the content on the page without any interactions. We came up some rules for what types of visual content should be displayed in a page listed below.

  1. Automatically play videos if the entry has videos
  2. Display images if the entry has large images
  3. Display summary text as a fallback content
Three screen shots of story: video background, image background and text fallback.
Prioritizing visual content can help audience to understand the entry summary.

Turning On Auto Advanced Mode

Whether to use auto advanced mode or not depends on your site. Turning it off makes sense in most cases like news article, recipe and travel reviews. In those stories, the audience want to read content at their own pace.

But, we tried to turn on the mode to assist the audience reading our ranking content like a video experience. They can consume the content without any interactions. Of course, they also can move to another page by tapping edge side if they feel the page is taking too long.

In our stories, auto advanced duration is set to 5 seconds for a page with images and text background. For a video page, we set the video duration as auto advanced duration. This is the example of our story below.

Ameba ranking story automatically moves to the next page like a video.</

Implementations For Better User Experience

AMP Stories is an implementation on the web, so traditional techniques such as server optimization, image optimization and critical path optimization are useful. In addition to those techniques, there are some tips for “media-first” content.

Preloading Critical Resources In The First Page

AMP Stories starts displaying content after AMP scripts have been fetched and evaluated, and then starts fetching content in a page. This means that sometimes media content could not display due to network latency.

Preloading critical resources can be a good idea to help displaying them soon. In our stories, images on the first page are critical resources. The images are preloaded by link element in HTML, and can be fetched before the AMP script has been executed.

Screen shot of the network tab in Chrome Dev Tools. Critical image is fetched before AMP scripts.
You can see the resource order at the network tab in DevTools.

Reducing Data Consumption On Save Data Mode

AMP Stories tends to consume data heavily due to its full media experience. Some videos and large images can be displayed on the page. We need to take care whether the audience wants to use their data budget or not at the time.

Ameba provide “save data mode” stories. Auto advanced mode is disabled if HTTP request header has “Save-Data: on” or the URL includes “save-data=on” query. The header can be added when data saver mode is turned on in some browsers. Audience can access the stories with the query when network connection or device CPU is poor.

Ensuring Accessibility More Than Normal Page

Accessibility is a fundamental thing for the Web. Everyone can access websites with a link. Story format is new, more dynamic and more focused on visual materials compared to typical websites. But we need to ensure accessibility in the format as well.

Color contrast ratio would be a big topic for accessibility in story format. Text tends to be displayed above visual materials and it sometimes could be hard to ensure a sufficient contrast ratio due to some visual design reasons. However, we think critical text like the title should meet WCAG level AA at least. Highlighting text can be a useful technique in this case.

We guess the audience may be frustrated when they see moving materials that they do not want to see. In this case, the product team should provide a way to pause the animations. We added a stop animation button to our website. AMP team seems to add play/pause button in AMP Stories.

The user preference setting is a treasure for improving user experience. We can get the preferences from “prefer-*” rules in the media features. We can increase color contrast ratio if prefers-contrast is sWe can reduce animations if prefers-reduced-motion is set “reduce”. The AMP team is planning to apply this as animations tend to be added a lot in story format.

Screen shot of a story page. Detecting contrast ratio of the title text color with VisBug. The text has a sufficient contrast ratio: AA large and AAA large.
You can check the color contrast ratio using debugging tools like VisBug Chrome Extension, tota11y, axe or Lighthouse.
Screen shot of a story embedded in a page. The zoom in button and the stop animation button are displaying outside the story.
The stop button is added at the bottom of the story.
2008年に新卒でサイバーエージェントに入社。主にAmeba関連の開発を担当。パフォーマンス、アクセシビリティ、アーキテクチャなどWebアプリケーション品質の向上に注力している。最近の趣味は猫の写真撮り。