Audio Media Annotation UX

[CommitsVortex]

Issue: The UX flow for creating and leaving annotations on audio files is unintuitive.

Process: Currently, the user needs to long press on the waveform, create a default-sized annotation box, press the annotation icon to the left of the navigation menu at the bottom of the window, open the annotations list using the icon on the righthand sidebar, select the new annotation, and then add the annotation contents before creating another annotation. Attempting to create a new annotation before adding any content to the first annotation box will remove all annotation boxes, and a refresh of the page becomes necessary before another annotation box can be generated.

Here are some ideas for how the UX could be made more intuitive:

• Include some indication for the user that it is possible to annotate the audio media using a long press. This could be as minimal as a tooltip when hovering over the greyed-out annotation icon.
• Let the user set the duration of the annotation by allowing them to drag the courser over the portion of the audio they want to annotate after the annotation functionality is enabled by long pressing.
• Assuming implementation of the prior point, automatically generate a room based on that annotation box and automatically open it so the user can post an annotation. Ideally, this would mimic the behavior of the PDF annotation flow.
• Alternatively, allow the user to click the annotation icon and then let them select the portion of the audio media they want to annotate, automatically open the new annotation room, and bypass the need for the long press.
• While more of a general audio player issue, displaying a horizontal scroll bar at the bottom of the media view would possibly make it easier to navigate the waveform and leave annotations on past or future portions of the audio file.

Some additional notes regarding annotation behavior:

• When annotations are overlapping it is not possible to select any of the annotations beneath the top annotation.
• While an annotation box is present, but not commented on, if the user scrubs to a different location in the waveform while audio playback is paused, the playback will begin from the beginning of the annotation box and not the area that the user has navigated to.

Additional feature thoughts:

• Automatically create a clip of the audio file based on the duration of the annotation and have that show as the first post in an annotation room, allowing the user to play that clip from within the room without needing to scrub through the waveform to find the annotation box.

System Details
Browser: Brave
Server: Open Tower
Audio formats tested: mp3 & wav

[gleachkr]

Thanks! I think some of what you're experiencing is the result of a regression that I seem to have introduced while adding video annotation. With the fix in b28ae27, it should be doing this:

Assuming implementation of the prior point, automatically generate a room based on that annotation box and automatically open it so the user can post an annotation. Ideally, this would mimic the behavior of the PDF annotation flow.

I think having the same flow across different annotation types is probably the way to go.

---

More thoughts:

Include some indication for the user that it is possible to annotate the audio media using a long press. This could be as minimal as a tooltip when hovering over the greyed-out annotation icon.

This is a good idea! The tooltip should probably also reflect when you can't annotate because you don't have permission.

Let the user set the duration of the annotation by allowing them to drag the courser over the portion of the audio they want to annotate after the annotation functionality is enabled by long pressing.

That makes sense - I'll think about how to do this. One constraint is that you've got to be able to get a visual indication that the selection exists on mobile, even if your finger is mostly over the selection, which might mean (if the selection starts very small) that the handles of the selected region need to be less transparent.

While more of a general audio player issue, displaying a horizontal scroll bar at the bottom of the media view would possibly make it easier to navigate the waveform and leave annotations on past or future portions of the audio file.

This actually ought to be possible right now. If you go to your profile (click the small circle with your avatar on the list-of-discussions view), then under "display options" you can set scrollbars to be visible. This is a bit of an aesthetic thing - basically I find the Chrome scrollbars visually distracting. I think maybe I should switch them to be visible by default though.

When annotations are overlapping it is not possible to select any of the annotations beneath the top annotation.

Yep, this isn't great. What I'd like to do is add a non-overlapping horizontal line below the wave form for each annotation, kind of like the vertical bar tabs that appear in the margins when highlighting a PDF, and which serve a similar purpose. Tracking issue is here.

While an annotation box is present, but not commented on, if the user scrubs to a different location in the waveform while audio playback is paused, the playback will begin from the beginning of the annotation box and not the area that the user has navigated to.

This is tricky. Basically I'd like to make it easy to replay what's in a selection while skootching the endpoints around, to make sure you've selected what you want. But the result is sort of counter-intuitive when you've scrubbed over to somewhere else. One option might be to cancel the selection if the user scrubs out of the selected area?

[gleachkr]

Tooltip added in 8dbe5f2

[gleachkr]

Horizontal bar tabs added in 2c90e70