Chord libraries: connect the name and shape

Separate root and quality without hiding the result

GuitarTuna’s library shows root-note and chord-quality selectors above a large diagram. Chordify uses separate rows for root, accidentals and quality. These compact controls help expose the ingredients of a chord name, but they should also resolve into one readable current selection.

After any change, update the displayed chord name, diagram and playback target as one state. Avoid a moment where D major is selected but the previous C diagram remains without a loading indication. Keep the last valid shape visible only if it is clearly labeled as pending replacement; otherwise a quick player may practice the wrong reference.

For long lists of qualities, make the selected option discoverable after horizontal scrolling. An off-screen active chip should not force a person to reconstruct the choice from the diagram. Use accessible names that distinguish root note, accidental and quality, with a complete combined summary available for the result.

Alternative shapes are not different chord names

Ultimate Guitar displays alternate C diagrams with fret positions beside the main reference. Tuner Pro shows numbered finger positions together with a hand guide and audio control. The first supports choosing another representation; the second supports interpreting the representation already selected.

Label the current shape or position in a way that remains understandable when moving between alternatives. A row of anonymous pagination dots can show that more options exist but not what distinguishes them. If a shape starts higher on the neck, make the fret position explicit rather than drawing a grid that looks like the open position.

Keep finger numbers, string status and fret numbers visually distinct. Do not require color alone to distinguish fingers. Offer a text equivalent or structured accessible description for essential diagram information. If the display can change handedness or orientation, identify that mode so the same shape is not accidentally interpreted in reverse.

Arrows need a stable meaning

The Guitar Tuner Easy tune chords examples show C Major, F Major and B Major with neighboring labels, directional arrows, playback and pagination indicators. The repeated layout is useful, but it raises a precise design question: which navigation changes the chord name and which changes the fingering?

Give each navigation axis one meaning. Root selection, quality selection and shape browsing should not all share indistinguishable left and right controls. If arrows cycle shapes, announce the new shape while retaining the chord name. If swiping moves through roots, make that relationship visible before the swipe is discovered accidentally.

Keep the diagram stable enough to compare changes. Sudden rescaling can make a different position look like a different number of strings. Provide a clear current-state summary after an orientation change or return from another tool. A player holding an instrument may glance back after several seconds and need immediate confirmation of what remains selected.

Spelling and instrument context deserve explicit controls

The B Major example includes a sharp/flat notation toggle. Jamzone’s chord book names Standard E A D G B E tuning and exposes capo and key controls around a set of diagrams. These are context controls, not decorative preferences: they change how a player interprets the reference.

Do not collapse a display spelling preference into a transposition action. Changing a label from a sharp spelling to a flat spelling can be a representation decision; changing the musical key is a different operation. Keep the effective song or reference context visible when either action is available.

Similarly, distinguish a capo setting from a tuning choice and a displayed shape. If your library supports several instruments, require a valid context before presenting a diagram. Do not leave a guitar label above a diagram loaded for another instrument because the picker updated before its content. Validate combinations against the data source rather than fabricating a plausible-looking grid.

Choosing a practice sequence is another task

Fender Play asks people to choose up to four chords and says that tap order determines practice order; numbered badges make the selection sequence visible. GuitarTuna’s recorded validation message asks for four to six chords before Save and play. These are selection constraints for a session, not rules for the chord dictionary itself.

Show the limit before people hit it. If order matters, represent that order with explicit numbers or a reorderable summary. Tapping again to remove a chord should have a clear, reversible result, especially when removing the second item renumbers everything that follows. Do not use the same selected color for current reference, saved favorite and queued practice item.

When a session is interrupted, the learning re-engagement examples help frame a return path. Test two shapes of one chord, a notation change, a different tuning and a practice selection over its limit. Measure wrong-reference corrections and whether people can explain the chosen sequence. A bigger chord catalog alone does not establish a more usable library.

A reference test with two shapes

Choose one chord with multiple documented shapes in the app’s own data. Ask a player to open the reference, move to another position and explain what stayed constant. They should distinguish chord identity from the active diagram. Change root and quality next, and verify that the name, fingering and any audio preview resolve to the same current selection.

Switch sharp or flat presentation if the feature exists, then inspect whether the control changes spelling, musical content or both. The interface should make that scope understandable. Repeat after changing instrument or tuning context. An unsupported combination should not keep a plausible old diagram while displaying a new instrument name.

Use a larger text setting and a monochrome display to examine the diagram. Finger numbers, open strings, muted strings and fret positions must remain distinguishable. Ask someone using assistive technology to identify the current chord and reach its essential description without needing to infer the pattern from an unlabeled image.

Then build a practice set in a deliberate order and remove the middle selection. The sequence summary should renumber predictably and preserve the remaining identities. Test the maximum count and cancel before saving. The library reference should not silently become a saved practice plan. Review misunderstandings about the selected shape and sequence rather than claiming that reference-screen activity demonstrates musical improvement.

Review audio when rapid selection changes occur. Start playback for one shape and immediately select another chord while the sound is loading. The control should identify the pending or playing reference and avoid displaying the new chord name over the previous sample. Stopping playback must remain reachable with the diagram open. If a reference has no audio, show that limitation without replacing it with another chord’s sound. The goal is a coherent relationship between chosen notation, visible shape and optional playback, not an illusion that every catalog entry has the same supporting assets.

Review reference and practice separately

Use these checks on a working build, not only on the polished reference state.

• ✓Keep root, accidental, quality and the combined chord name coherent.
• ✓Label alternative shapes and fret positions without changing chord identity unexpectedly.
• ✓Distinguish finger numbers, string status and fret numbers beyond color.
• ✓Give arrows, swipes and pagination a consistent documented meaning.
• ✓Make tuning, instrument, capo and key context explicit where supported.
• ✓Show practice limits and selection order before validation fails.
• ✓Test delayed diagrams, audio-source mismatch, large text and accessible diagram descriptions.

Related design decisions

Use the tooltip and coach-mark examples to explain notation controls without placing a permanent tutorial over the diagram.

The saved-items article helps distinguish keeping a reference from adding it to the next practice session.