Mixer: Designing a more compact and accessible UI
MuseScore 3's Mixer looks much better than it did in MuseScore 2, and the side-by-side volume sliders are particularly useful when you have a second monitor on which to display them. However, if you only have one monitor then the Mixer's relatively large dialog gets in the way of the score and other parts of MuseScore's interface.
Size is not the only problem. There are various usability issues, and the UI is almost completely inaccessible to the keyboard users (e.g. people who are blind or motor impaired, or those who simply prefer using the keyboard over the mouse).
The relationship between the top and bottom half of the dialog is not immediately obvious. Once it is understood, you realise that volume and pan controls for the selected instrumental part (Oboe II) are provided twice, which is inefficient. (It's actually three times if you include the number spinners, but those are admittedly quite useful.)
Proposed new Mixer
Users are encouraged to first select an instrument from the list, and then to adjust controls for that instrument alone. This saves space and avoids duplication. Master Gain control has been removed; overall volume can be set in the Play Panel.
How I came up with the proposed design
I seem to remember one of @ericfont's many proposed Mixer redesigns included a list (possibly as a dropdown combo box) to select the instrument, but I can't find the post in question. Anyway, it is actually possible to arrive at the new design simply by considering accessibility requirements. If you are not blind (I am not) then try to imagine that you are, and that you rely on a screen reader program to tell you what is happening on the screen...
As a blind user, imagine that you open the Mixer and the screen reader tells you that the “mute button” currently has focus. This is no good! Which instrument is it for? The first thing a blind user must be presented with is an instrument, and a quick way to choose a different one if necessary. This means a list of instruments. Once the blind user has selected an instrument they should be presented with controls for that instrument and no others.
Aside: If you think about it, an instrument list is the only way to arrange the Mixer that makes sense for keyboard users. If controls for all instruments were visible at once then keyboard users would have to press the Tab key many times to navigate between them. However, if controls are only displayed for one instrument at a time then keyboard users don't have to press the Tab key nearly as often.
The proposed design obviously takes up a lot less screen space, but there are other benefits:
- The instrument list scrolls vertically instead of horizontally (easier to scroll with a mouse)
- We can see more instruments than we could previously (less scrolling is needed)
- Instrument names are vertically aligned (easier to spot groupings like “Corno” and “Fagotto”)
- Names can be longer before they get cut off (e.g. wouldn’t confuse Tenor Trombones 1 and 2)
These visual improvements all happened because of the instrument list, but the list was introduced to help blind users. In other words, the visual problems with the current design are simply byproducts of the fact that it is inaccessible to blind users! If you fix accessibility problems for blind users then the design becomes more usable for everyone.
Further improvements to the design
We can take the accessibility analysis a step further and consider the fact that blind users might want quick access to frequently used controls without having to leave the list. We could introduce new list columns with checkboxes for mute and solo, and of course this benefits sighted users too by making those options visible regardless of which instrument is selected.
Navigating the list with the keyboard becomes tiring if there are lots of instruments, and blind users need to remember the order of every instrument in the list (otherwise they might try to go up the list to get to the instrument they want when it is quicker to go down). We can help blind users by grouping related instruments together in a tree structure, with categories like woodwind, brass, strings, etc. Naturally, this grouping is also beneficial to sighted users.
Aside: A tree structure also enables settings to be adjusted for categories as well as for the instruments. Now users can adjust settings for all brass instruments at once, or expand the tree to adjust only the horns, expand the horns to adjust Horn II, expand again to adjust Horn II in C, and so on to whatever level of detail is required!
So far we have only looked at the list. We could apply the accessibility analysis to the other controls in the Mixer, and eventually everything would be presented in the way that makes most sense to blind users as they Tab over all the controls in the dialog. The optimum arrangement for blind users puts frequently used controls closest to the list, and this naturally results in the shortest cursor travel distance for mouse users. It also means controls that are needed less often would appear on the right of the dialog, so this part of the dialog could be hidden until an Advanced button is pressed, thereby saving even more space. As it stands, the current design is not far off optimum anyway, so the remaining adjustments won't alter the layout significantly.
Restoring the sliders
Having made all possible accommodations for blind users (all of which benefited sighted users too), it is finally time to consider whether there are any enhancements that could be made specifically for sighted users. The only people who will be unhappy with the proposed design are users who own a second monitor. These users will miss the side-by-side volume sliders, but we can simply reintroduce the sliders as an optional feature via a button to expand the Mixer downwards.
Viewing the designs in context
The attachments below show the two Mixer designs with MuseScore's interface in the background to provide context.
The screenshot of the current Mixer was taken in MuseScore 3.0.5 running on a 2015 MacBook Pro (background has been lightened and blurred). The image of the proposed Mixer is a mock-up at the same scale.