Summary

We want to update the system layer of amp-story both in functionality and appearance.

The visual changes will mostly consist in updating the visuals to a modernized, rounded, outlined version of the icons and remove the material design icons we currently have.

In terms of functionality, we want to improve the sound icons with better signals and new toggles:

• The sound icon will now use the video cache hasAudio signal
• The CC (closed captions) icon will be added, and will toggle the captions on the story
• The equalizer will be removed since it's redundant and it collides with the "loading spinner" icon of buffering videos.

Other changes of the system layer:

• Icons that are not needed on a page will now disappear instead of being disabled with opacity (mute, CC, pause). We've ran a UXE and found out that on pages without audio, users get confused about the icons, so we can hide the unused icons.
• Improved the scrim gradient to be taller and have a smoother gradient.
• Define the icons' sizes in a responsive way so the system layer looks good in all sizes.

Explorations (not included in I2I):

• Group icons my functionality (eg: using translucent pills).
• Position icons vertically to improve reach with fingers while one-handed.

Draft

Screenshot:

All icons:

Motivation

The current icons are material design icons but don't fit the format properly. The new set of icons behave as expected, are less confusing and look better, adding visual richness and character to the experience.

Notifications

/cc @ampproject/wg-approvers