opentower / populus-viewer

A Social Annotation Tool Powered by Matrix
https://opentower.github.io/populus-viewer
GNU Affero General Public License v3.0
120 stars 7 forks source link

Audio Media Annotation UX #133

Open CommitsVortex opened 2 years ago

CommitsVortex commented 2 years ago

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:

Some additional notes regarding annotation behavior:

Additional feature thoughts:

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

gleachkr commented 2 years ago

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 b28ae272cc069b0408d8cebc0fa7fe39e5236b1b, 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 commented 2 years ago

Tooltip added in 8dbe5f2fd2126a1627845d2e691c140031999e0a

gleachkr commented 2 years ago

Horizontal bar tabs added in 2c90e706c97a193a7da1a6bffc2b2789704aff29