[amp-story] Add a way to put the emphasis on the unmuted button

[edoudou]

Description

We would like to add an animation to put the emphasis on the unmuted button when the story is muted.

https://user-images.githubusercontent.com/4236706/178031584-d298bdb2-11ee-4153-a734-5ac8cf130ebd.mp4

The problem is, the button position is not fixed. So I cannot place it behind.

There sould be a way to position an element behind the unmuted button using a css selector (class, attributes, etc)

Alternatives Considered

Alternative, add an amp-attribute to add an animated image behind the unmute icon.

Additional Context

We could imagine other options, like a toggle to activate or not an animation pre-determined.

[edoudou]

@jshamble has an UI / UX been decided yet ? We could help on the implementation if needed.

[adamshwa]

Wow! This could be a really nice addition, any chance to see it moving forward? Or just sharing with us the CSS, so we could use amp-experiment on real traffic?

[mszylkowski]

I've talked with our UX designer, and in short, we don't strongly feel that adding hints to the sound icon would benefit most stories. I'll outline below the reasons:

• Adding more focus to the system layer reduces the focus onto the page content (if the content is captivating, users will unmute the stories).
• Depending on the page design, this could clutter the design more or make the icon less noticeable (because of the increased noise in the background and the lower contrast to the background).
• Indicators can be added onto the page in different ways (we did it for this demo) without interfering with the system layer UI. We allow you to hide these indicators already if the audio was unmuted (like in that demo) with CSS, and the indicators can be customized to fit the style of the page better.
  • In native platforms (including Google Search for mobile systems) the sound icon is not present because stories play at the volume that the device is configured at. The "muted" CSS on personalized hints would work with this nicely in these platforms because it would hide the hints as if the story was unmuted.
• It's not in-line with the current UI for the system layer to hint users to click the sound icon, and it's also a tough decision to allow hinting at the sound icon but not the share icon or captions icon for instance (we don't believe that hints are teaching users how to do sth, because in our tests we've seen that people that wanted to unmute stories were able to do so without issues).

[edoudou]

We understand all that but we still think this could be a great benefice for some of our contents. Do you think this could evolve to a new feature that would be to help programmers finding where the button is to permit to code such behavior themself ? Today, this is not possible as the position of the button might change if you add a close button to the right for example.

Could be achieved through CSS variables, a dedicated layer, or any other idea.

[edoudou]

Also, in response to this point

It's not in-line with the current UI for the system layer to hint users to click the sound icon, and it's also a tough decision to allow hinting at the sound icon but not the share icon or captions icon for instance (we don't believe that hints are teaching users how to do sth, because in our tests we've seen that people that wanted to unmute stories were able to do so without issues).

We have had this feedback from different users. Most of the time, there are used to in app experiences, and just try to increase the volume of their device. Those feedbacks are what drive us to imagine this emphasis in the first place.

[mszylkowski]

Stickers (tenor, lottie, giphy) that creators can add to their stories to emphasize if they have sound could be a great way of signaling users to unmute their stories (you could suggest this from the tool if you see that a story has a video with sound for instance). Benefits of this are:

• Stickers don't rely on system layer icons/positioning to show
• Creators can select whatever sticker fits their story better (and position it as desired) so the customization options are better
• Creators will know that the sound hint is being added to the story
  • Creators already easily understand the tradeoff of having extra stickers on the page and how that affects the design
• We already have an API to hide them if the story is unmuted

Signaling to devs where the buttons are might not be as good of a solution because there are many assumptions that can change over time, mostly around the flexibility of changing the system layer and issues with trusting all creation tools to implement this correctly:

• If the CSS var was not defined (or set to 0 when the story doesn't show the sound icon) then whatever animation is implemented by the creation tool could appear in the top left corner of the story (where x=0 and y=0).
• The icon size can change at some point (either for some screen sizes or all) and that would make the animation not sized or positioned correctly. We could add CSS vars for sizing but creation tools might not be able to test whether their animations would adapt correctly to different sizes.
• If we at some point update the UI so the sound icon is outside the page, this feature cannot be used any more (and might lead to issue 1 if it's not hidden correctly).
• Adding the CSS vars would allow tools to add sound hints to all pages, which can get users tired of stealing focus away from the page content.
• It can lead to inconsistencies if different tools implement their sound hints differently (especially if it's being made to look like a system layer design).

[edoudou]

First of all, I have to say that to me, most of the problems that required "trusting all creation tools to implement this correctly" are not real problems. I know google wants to constraint lots of thing to ensure a good quality story, but you still have to trust the tools/devs at some point. Even more, amp as a validation system to ensure that.

Also :

Stickers (tenor, lottie, giphy) that creators can add to their stories to emphasize if they have sound could be a great way of signaling users to unmute their stories (you could suggest this from the tool if you see that a story has a video with sound for instance).

Yes, stickers are a solution, but not the only one, the idea is to have other solution available to us. Stickers does not permit us to show where is button to unmute. We already have the sticker to put behind the button but we can place it accurately behind.

If the CSS var was not defined (or set to 0 when the story doesn't show the sound icon) then whatever animation is implemented by the creation tool could appear in the top left corner of the story (where x=0 and y=0).

You could set it to some negative value so most of animations would just not be visible if the dev did not implement it well.

Adding the CSS vars would allow tools to add sound hints to all pages, which can get users tired of stealing focus away from the page content.

Yes but it might be something good also, if videos does not start at page 1. Once again, I think you need to trust creation tools on this one.

It can lead to inconsistencies if different tools implement their sound hints differently (especially if it's being made to look like a system layer design).

This also mean tools can create libraries of elements to allow more customization for their story. + you also have this issue with stickers.

Finally : I think a good solution to most of your issues would be to create a dedicated layer for this elements and only expose those variable inside of this layer. Benefits would be :

• You can ensure it is not present if no video is present on the page, either by hiding it or through amp validator.
• You can ensure the element is hidden once the video is unmuted, as it is in a dedicated layer.
• You could just hide it on desktop if you decide to move the UI outside the page (I assume this could only work on desktop as page take all the screen in mobile).

[edoudou]

Seen during WG-Stories ( @gmajoulet @newmuis ) :

A new idea could be to allow clickable stickers, which would unmute the story on click.

• It keep AMP vision to use stickers that don't rely on system layer icons/positioning to show.
• As the stickers is tappable, it remove the frustration of users not to find where to click to unmute the story and would offer a wider zone to interact with.
• It could be hidden once the story is unmuted.