(Re)designing Piano Tablature

Aka, “How I’d Redesign Piano Music, Part 2”

Alex Couch
Alex Couch's portfolio
10 min readJan 31, 2020

--

I’ve designed a notation method for piano music. It’s called “Piano tablature” because it shares goals, methods, and constraints with guitar tablature (aka “guitar tabs”), which is popular among guitar players.

I want to provide an alternative to traditional sheet music that provides piano players with a luxury that guitar players have had for years: a notation method that is less extensive, but more intuitive, more writeable, and more approachable than traditional sheet music. Let’s start with that famous piano intro from Elton John’s “Tiny Dancer”:

The intro from Tiny Dancer, by Elton John, written as a piano tab

It’s laid out like you’re looking down at the piano keys: the lines (the “|” pipe symbol on your computer keyboard) represent the black keys, and the spaces between them are the adjacent white keys. The notes are called out on the keys you’re supposed to play; capital letters are for the left hand, lowercase letters for the right. The page is read from top to bottom (instead of left to right), so, notes on the same row are played at the same time (like, chords).

There are a few optional elements to the right: the sustain pedal marker (“+” means hold the pedal), the overall chord names, and lyrics.

But first, some history.

Five years ago

That Medium piece was my first attempt to provide a sheet music alternative — and I can’t believe it was five years ago! If you want to know more about the motivations, goals, reasoning, and other details about this project, check out that article.

That piano notation style was more “visual,” with colored shapes representing chords and the length of time you’d hold the notes. The spacing and styling was more custom, and arguably more precise that my latest version.

Keys correspond to lines and spaces (from the original article)
The first few bars from The Beatles’ “Let it Be”, in my first version of piano tablature.

The good stuff

The Medium piece was (for me) a hit, with 1,000+ hits and still counting. The feedback was divided largely based on audience. Some experienced pianists and musicians didn’t appreciate this “shortsighted shortcut,” but a lot of beginners related to the problem I was trying to solve: many were excited, and had positive feedback! 🎉

Some compared it to similar interfaces they’d enjoyed, like Dance Dance Revolution (DDR), or Guitar Hero. I took it as a compliment, given that those are “intuitive” enough interfaces to become popular games all over the world.

Positive feedback is fun! But I also had to set (and defend) some context behind my decisions …

In short: this “piano tablature” is targeted at beginner and intermediate players. It’s supposed to augment, not replace, traditional sheet music, and it isn’t designed to make someone a music theory expert.

It also isn’t supposed to mimic the total portability of sheet music: people learning from these “tabs” would almost certainly know how a song sounds before they try to play it — as opposed to traditional sheet music, which has the detail needed to communicate exactly how to play any piece of music.

Feedback

All in all, though, there were a things I needed to address:

  1. The notations for the sustain pedal (those little arrows on the right for press/lift) were seen as unintuitive and sparse. I’m frankly skeptical that pedal signals are that important for most playing, but people wanted a more obvious notation for it. Fair enough!
  2. Colors as left/right hand identifiers bring some complicated challenges with them. Different people see colors differently, and folks with some color vision deficiencies wouldn’t be able to distinguish between the left and right hand colors. In the field of UI/Web design, it’s an important practice to not over-rely on color as a sole communicator, so that’s a good practice to adopt here, too.
  3. The chord shapes didn’t teach anything about notes. This method isn’t meant to teach music theory, but it didn’t even come close to bridging the gap between “where to put your fingers” and “what notes these are.”
  4. It wasn’t very writeable. This was a very custom solution. I worked briefly with a developer on a prototype, but it quickly became obvious that requiring a dedicated tool to create this music was going to limit how people could create, or even consume, it.

Emerging requirements for “version 2”

It’s been five years since that initial attempt; and it hasn’t really gone anywhere (that’s my bad). Because I want to have a more effective and actionable follow up version, I added some requirements to make it more usable, flexible, writeable, and shareable:

  • Black and white friendly. Avoid leaning on color for communication. This will also help make it more reliable across platforms and mediums.
  • Printer friendly. This is an even further step beyond the black-and-white requirement. Basically: this musical language needs to be able to communicate even under constrained circumstances.
  • Writeable using “normal,” available software and skills. I created v1 using Sketch and (barely) a custom prototype. But this should be writeable and shareable among users with basic software; and it needs to be distributable on sites like the many guitar tablature sites out there.

Five years later, a version 2

These suddenly-stringent requirements brought me to these: a keyboard-friendly plain-text solution. No colors, shapes, fills, or even required text styles. It’s … Piano Tabs!

This is a musical notation method that — similar to guitar tabs — is completely writeable using a QWERTY keyboard, without having to dig around for custom symbols or shapes. Here’s an example of a tab in a simple “.txt” file:

A GitHub Gist showing a piano tab of “Let it Be”

Piano Tabs can be typed using all normal QWERTY keys with no extra styling and no special symbols — all of the characters are accessible on your standard US QWERTY keyboard, either on a key, or by using shift + a single key.

We’ve gotten pretty bare bones here (!), but I think there are benefits from optional styling — things to enhance the reading experience, but without relying on custom styles to communicate. Here’s the same song shown with some key striping and with notes in bold type:

“Let it Be” piano tab with some added styling. The grey keys (C through E) help break up octaves and allow the reader to more easily locate notes.

Advantages

No software

You don’t need any special software or knowledge to create these tabs. It’s just typing stuff into a text editor! The only required styling is — again, similar to guitar tabs — using a monospaced font (like the ubiquitous Courier and its variants) so that the spacing stays consistent.

Another example in a Github Gist. This time, Taylor Swift’s “New Year’s Day.” I saved this one as an “.mt” file so that some colors would show up in code formatting.

Authoring and sharing

Given the plain text format, piano tabs can be written, stored, and shared in the same way that guitar/bass tabs are on websites like UltimateGuitar.com. I’ve already posted my first piano tab — “New Year’s Day”, from above— and it actually got approved the first time!

Accessibility

Someone reading a Piano Tab can discern note location, left and right hand placement, pedal holds, and any other essential information… all without having to be able to see color differences or other visual nuances.

This visual language is certainly more sparse without the linked chord shapes (one per hand) that I showed in version 1, but this version is so much easier to write. It’s a good tradeoff.*

*Plus, clever software could expand upon this simple system later on; e.g.,, by recognizing the L/R characters and drawing those connecting lines automatically. I’ll put that in the “ideas for later” bucket.

Learning notes and keys

In version 1, I used simple dots and lines to show where to put fingers and hands — again, it was highly visual and simplistic.

In Piano Tabs, though, we’re actually using real note names … at least for the white keys. It’s a bit more complex, but it should make it easier for beginners to start memorizing these notes. From there, this would be a benefit — allowing for easier way-finding on the keyboard — rather than a burden. Sure, it’s very rudimentary and isn’t “teaching music theory” per se, but it’s a step.

Flexible, breakable

The examples so far have been big blocks of tablature, but they can easily be broken up to express just the parts that need specific notation. Below is an example from a song that has memorable, repeatable piano lines that can be taught, then simply referenced again later on.

A piano tab of “New Year’s Day,” showing how piano tabs can be interspersed with lyrics.

Limitations and refinement

Sharps and flats are less identifiable

Notating white keys is simple: they each get their one-letter note name (e.g., “G”), plus capitalization according to which hand plays which note(s).

The black keys are more nuanced, though. For one, they each have multiple names: the key to the right of “C” could be called “C#” or “D♭”. And, even if we did choose a name for each, we can’t fit two characters (e.g., “C” and “#”) into a single space to describe that note. So ended up simply marking all of the black keys the same (only with differences between the hands). Here’s an example of a song (in the key of B) that features a lot of black keys:

Piano tab of “You are the Sunshine of My Life”. Note how the black keys are marked as “#” and “*”.

It’s not as precise as the white keys. We’re relying more on note locations to see which black key(s) to play; the individual characters (“#” for the left hand, “*” for the right) don’t give us any more information.

But it does communicate the basic, necessary information. When beginners start playing songs that aren’t just in “C” — that is, they start playing songs that use black keys — they are often just trying to recognize which notes are played up on the black keys instead of the white. Piano Tabs visualize the keyboard in a similar way: the first glance quickly reveals which keys are white keys, and which are black. In playing a song like “You Are the Sunshine of My Life” (above), knowing the general “flavor” of each chord at a glance is a boon to playing it.

(Mis)using the “#” symbol

There’s another related issue: that “#” pound symbol I’m using for the left hand black keys is risky, given that “#” means “sharp” in normal musical notation. There are even circumstances — though I think it’s rare, for my target audience — where a player should simultaneously play a white key and a black key that are next to each other. That would show up as something like “F#”, which reads more like an “F#” chord than “play an F note and an F# note next to each other.”The tradeoff was the visual weight of “#” — it really is kinda perfect to mimic those uppercase left hand notes that the white keys reflect — and the absence of other fitting characters on the keyboard (remember, I want people to be able to write this easily, using characters that are either keys or shift+ keys on a normal US keyboard). The “@” and “&” symbols do this somewhat well, but their symmetries and weights are not as well-matched with the letters shown for white keys played by the left hand. Plus, those symbols have significant cultural meanings of their own.

All that said, I’m hopeful that I’ll come up with a better solution for “#” in the future (or that fonts or other tools, e.g., emoji keyboards, significantly change the circumstances).

No note holds or duration

Version 1 visualized the length of notes (how long to hold your finger down), but I couldn’t come up with a desirable way to visualize those holds without introducing undue complexity. Also, having to write all of those holds would make authoring these tabs take so much longer. For now, I think as long players know when and where to play notes — and how long to hold the pedal — they’ll be able to play.

The thrilling opening theme song from “Succession” on HBO. https://youtu.be/77PsqaWzwG0

Mobile (ugh)

Yeah… so mobile-friendliness is tough on Piano Tabs. Guitar tabs already aren’t great on small-screen devices, but at least they’re read from left-to-right and can be wrapped to fit on narrow screens. Piano tabs have no such luxury, so it’s up to the author to keep the tabs as narrow as is conveniently plausible (e.g., by only showing the necessary octaves to play a song). The song shown above displays a lot of octaves necessarily, but surely most songs will be writeable using just a few.

Otherwise, we’ll have to let folks pinch-to-zoom and scroll left and right to read some piano tabs. And, at least phones keep getting bigger, eh?

What’s next?

Play some piano tabs

So, what’s next? Well, you should come play! I have early samples of songs written in as Piano Tabs (all as Google Docs):

Write your own piano tab

Better yet, you can write your own tabs — join me and we’ll start a revolution! The more folks we get to write piano songs in this format, the faster this method will become as ubiquitous and as downright useful as guitar tabs are.

So, here’s a Google Docs template for making your own. You won’t be able to edit this document, but you can make a copy of it and edit from there.

Once you get the hang of it, it’s easy, navigable, and repeatable (copy/paste). And you can give back to the music community by posting your piano tabs online. The site I (and many others) use is Ultimate-Guitar.com: you can write your first piano tab in their built-in text editor and submit it today!

Reply to this post with any feedback: I’d love to hear how we can make this a better tool that can help more aspiring pianists begin to play the songs that they love. 🎹 🎶 ❤️️.

--

--

Alex Couch
Alex Couch's portfolio

Product Designer in the SF Bay Area. Music fan, pizza eater, Medium reader. linkedin.com/in/alexcouch/