Improved playhead and loop markers

• Feb 17, 2020 - 03:46

I've been working on possible visual improvements to the playhead and the loop markers.

MuseScore - Improved playhead and loop markers.png

Current:

  • Playhead: Semi-transparent blue rectangle.

  • Loop markers: Thin vertical lines with triangles (flags?) at the top pointing in right (for “loop in”) and left (for “loop out”).

Option 1:

  • Playhead: Semi-transparent (but slightly less so) rounded rectangle with a thin border (also semi-transparent, but even less so).

  • Loop markers: Square brackets that resemble the icons on the buttons on the Play Panel that are used to toggle them.

Option 2:

  • Playhead: Same as option 1, but with a right-pointing equilateral triangle affixed to the middle of right side, meant to look like a “play” icon.

  • Loop markers: Same as option 1.

Option 3:

  • Playhead: Same as option 1, but with a right-pointing right triangle affixed to the middle of right side, also meant to look like “play” icon, but less pointy.

  • Loop markers: Same as option 1.

Rationale:

  • Loop markers: There is currently no visual association between the loop markers and the buttons on the Play Panel used to enable and disable them. Changing the loop markers to resemble square brackets establishes this visual association, and also potentially paves the way for an additional association by shipping MuseScore with the [ and ] keys assigned as default shortcuts for “loop in” and “loop out”, respectively.

  • Playhead: Rendering the playhead with rounded corners and a border makes it look more polished. Additionally, the triangles in options 2 and 3 are intended to tie in with a separate enhancement that I'm working on that will allow the user to make the playhead visible at all times (and not just during playback). If/when the playhead is made visible at all times, it will be useful to provide a visual indicator to the user that it is indeed a playhead and not, say, a selection rectangle.

All of the presented options are actual screen shots taken from fully working code. These enhancements are all pretty much ready for a pull request.

Looking forward to any and all feedback and suggestions.


Comments

I like the loop markers!
However, I am not sure for the playhead. The current, not having a frame, flows well with the movements.
When moving often something with a frame it looks erratic. I would like the frame in the case of a stationary playhead.
The triangles seems useless to me. Music never goes backwards anyway, no?
Btw, no frame but just rounding the current rectangle could help a bit.

Another option is to make the looping brackets directly resizable. In which case, the current upper arrows (triangles) could serve a function. The user could resize the loop by clicking on one of the arrows and dragging it out or in, similar to looping clips in a DAW program such as Ableton.

In reply to by Sambaji

Making the brackets draggable is on my (long) to-do list. I don't think we necessarily need to have the flags there; I'd like to first see what it's like if the user is allowed to drag anywhere on the bracket.

(And BTW, before anyone else mentions it, making the playhead draggable/scrubbable is also on my to-do list.)

My preference would be towards option 1. The direction of music is obvious from the score and shouldn't need a directional indication imo. In case the directional indication is desired, then I'd opt for the smaller equilateral version.

I do share a bit of the concern about the border being there whilst moving, so that would be interesting to see in action. Perhaps consider showing the border only on hover/interaction?

I'm in agreement that the flags are in need of an update. They are a tad ugly looking and I think the user should be able to reposition them by dragging.

Regarding the brackets, I'm in camp 'Option 1', although with a few reservations (some of which I won't be able to judge until I use it).

1: Having the playhead on all the time might be quite annoying and if that's the case, I don't think having a toggle to turn it off is the right answer. I'd prefer (if it is actually annoying people) to tweak the solution until the majority are happy. To this end, I'll make sure to test it out on a few people to get feedback, since it's a core piece of UI. With any luck, it'll feel natural and people will gain the benefit without noticing the change :)

2: I recognise the idea behind the triangle - although I'm wondering if the solution might be to tweak the selection highlight instead? I'm pretty sure with a bit of work, we can make it all feel right without needing the triangles. I'm chatting to @Spire42 about those changes in the Telegram design chat. Let's see how it goes!

Do you still have an unanswered question? Please log in first to post your question.