Mouse interaction in MuseScore

For many users the mouse is the primary means of interacting with MuseScore. This article focuses on the icons in the Note Input toolbar and the Palettes with the goal of optimizing mouse interaction in MuseScore.

Screen edges are valuable

The edge of the screen is an easy target to reach with the mouse. Once the mouse pointer reaches the screen edge it stops so a user need not slow down as the pointer approaches this target.

Usability consultant Bruce Tognazzini states, "A single-row toolbar with tool icons that 'bleed' into the edges of the display will be many times faster than a double row of icons with a carefully-applied one-pixel non-clickable edge between the tools and the side of the display" (Source: First Principles of Interaction Design).

Proposed toolbar layout

MuseScore could move the note entry toolbar to the screen edge

Figure 1 Moving the Note Input toolbar to the left edge could offer greater speed and easy access for mouse users. However tweaks are necessary before MuseScore can take full advantage of this layout.

MuseScore allows toolbars to be rearranged to match the layout shown above but two issues remain. First, the current Note Input toolbar is too large to fit vertically on the screen. On my monitor four buttons are hidden. Second, the current toolbar suffers from a non-clickable border that separates the icons from the precious screen edge.

Relocating a group of icons from the Note Input toolbar could address the first problem. Additionally there are icons which could be removed entirely (discussed below). Expanding the Note Input icons by a couple pixels to cover the non-clickable border could give the icons full access to the screen edge. If these issues are addressed then the proposed layout offers significant benefits.

Removing icons

Each icon on the screen gives the user quick access to important tools and functions. On the other hand, unnecessary icons distract from the most important icons. Here are some specifics to consider:

  1. The "What's this?" button only duplicates the tooltip text that appears when you hover over an icon. In its current form it offers little value.

  2. The staccato icon that appears on the Note Input toolbar in recent builds (revision 1081) is confusing because it is identical to the icon for the augmentation dot. The staccato icon is already present on the articulation palette where its meaning is clear from the context. Perhaps a keyboard shortcut would be a better choice for quick access to staccatos.

  3. The articulation palette has duplicate fermata, staccatissimo, portato, and marcato symbols. Each pair has a version for above the staff and a vertically flipped version for below the staff

    Figure 2 Each pair of duplicates contains a version for above the staff or a vertically flipped version for below the staff.

    The articulations palette contains duplicates of four types of articulations. Selecting between the duplicates requires special attention by the user because the correct choice depends on its placement above or below the staff. An algorithm that depends on user placement (above or below the staff) when it is dragged or stem direction when it is double clicked could remove this burden from the user.

  4. Three other icons for consideration are the double sharp, double flat, and double augmentation dot. Their functionality could be combined into the existing sharp, flat, and augmentation dot icons respectively. However the case for removing these is not as strong as the icons listed above since it may be less discoverable for first-time users. It would need careful thought and user testing before adoption.

    one dot quarter note

    Demo 1 The simple prototype demonstrates one button interaction for creating both single- and double-dotted notes.

Finding symbols in the palette

The palette contains 142 icons not counting the Symbols category. The Symbols category alone contains 133 icons although most of these are duplicates found in other categories. Using the mouse to navigate to the correct icon can take time.

Part of the problem is the number of categories and lack of apparent order. A proposed order (below) splits the categories into two groups: symbols that apply to selected notes and symbols that apply to selected measures. The categories are sorted alphabetically within each group and the ambiguous "Notes" category is renamed "Grace Notes".

Note Symbols

  • Accidentals
  • Arpeggio/Glissando
  • Articulations/Ornaments
  • Beam Properties
  • Breath
  • Dynamics
  • Fingering
  • Grace Notes
  • Lines
  • Note Heads
  • Tremolo
  • Symbols

Measure Symbols

  • Bar Lines
  • Brackets
  • Breaks
  • Clefs
  • Keys
  • Repeats
  • Time

Another approach to finding symbols could be a search similar to Quick Find in Firefox. If you are not familiar with Quick Find try hitting the slash (/) or apostrophe (') key while browsing in Firefox. Here's an outline of how it could work in MuseScore for quickly finding a palette symbol.

  1. Activate Quick Find via a one-key shortcut
  2. Begin typing a symbol name such as "3/4 time". As you type MuseScore highlights a match
  3. Hit Enter to add the symbol to the selected note or measure

A Quick Find style search for symbols is easier to remember than keyboard shortcuts for each symbol because it is language based and has immediate visual feedback. It is also faster than mouse interaction since it automates opening categories, hunting for the symbol, and placing the symbol on the score.

The gallery below presents screen shots relevant to the discussion above.

Microsoft Paint has two rows of icons along the left edge of the screen.

Figure 3 Paint is one of the few Microsoft products with a toolbar along the left side of the screen. However a two-pixel border prevents the icons from touching the screen edge.

By default Finale has three toolbars across the top, one of which contains only two items. A fourth toolbar for note-entry runs along the left edge of the screen.

Figure 4 Finale makes good use of the left screen-edge. However, the default middle toolbar wastes space that could be better used for displaying the document.

Two icons: sharp, flat   Four icons: sharp, flat, natural, raise by half-step, lower by half-step

Figure 5 PrintMusic 2000 on Windows XP (left) and Finale 2007 on Mac OS X (right) show a variety of icons for manipulating accidentals.

Quick Find appears in a horizonal strip across the bottom of the browser window. A match is highlighted in the content area of the screen.

Figure 6 The Find feature in Firefox is unobtrusive and gives priority to the content the user is looking for.

See also

David Bolton, September 2008.