Digital Footnotes Solution

ui, ux

The Problem

Teaching brought me one of my earliest UX “a-ha” moments: the students told me they simply didn’t read endnotes because flipping to the back of the books is too much work, and I duly noted this user research. Same-page footnotes are the only way to go, but unfortunately I haven’t seen this concept applied to digital reading. So, when I found out a a play I’d co-translated was being put on at UCLA, I wanted to put it online with notes that felt as effortless as possible for the reader.

The Solution

I was inspired by the work I’d done with off-canvas menus, but wanted to flip the concept on its head – instead of a side menu pushing into the whole body of the text, I wanted to footnotes to slide in, where there were needed. I hoped that this would make for a more natural flow of information for the reader. In this, I was inspired by Medium’s approach to comments, at the time: an unobtrusive, clickable indication within the text, which would bring in the footnote if the reader wanted it. I also played with the idea of an auto-play for notes, which would open them as you scrolled down.

The Result

I put the demo online, and also used it for the play itself. The audience for a translation of an ancient Greek play is a bit limited, but those who used it liked it a lot.

The demo is here, and the Git repo is here (and yes, I apologize for not using a map() function. I was young.)