Usability of Footnotes

I've been reading lots more non-fiction books than normal. And I'm getting increasingly annoyed about footnotes¹. Footnotes are a weird skeuomorph hangover from the days of printed text. I don't think they are really suited to eBooks - but they seem to have come along for the ride into the future.

There are a few things that really annoy me from a usability point of view. Some of these are the fault of the author, some the publisher, some the eBook format², and some the reader app.

Firstly, what's the point of a footnote? This is a rough and untested bit of user-storying...

• As a reader, I want to look up a reference to a quoted work. So that I can see if the author is being accurate.
• As a reader, I want to know a little more about the subject being discussed. Because I'm interested in this specific topic
• As a reader, I want to understand what a newly introduced term means. So that I can understand the rest of the book.

But, there's also another user, who often takes precedence:

• As an author, I want to show that I have done my research. So that critics can't use that to question my credibility.
• As an author, I want to add more details which don't fit in the main body of the text. Because I hate deleting text and my editor told me to take it out.
• As an author, I want to add an explanation for some jargon or terminology. So that readers unfamiliar with the subject don't feel excluded.

(This isn't a thorough bit of user research. It's just me noodling around. Feel free to add your own, well-researched, stories.)

Types of footnotes

In my experience, there are four types of footnote:

1. A citation. Anything from something a bit useless like "(Smith 1984.)" to a fully semantic "Baucherel, Kate, Blockchain Hurricane. Business Expert Press. 2020".
2. A long note. A diversion which, while interesting, is not relevant to the main argument. Think of it a bit like a Director's Commentary on a DVD.
3. A short note. Usually an explanation of an TLA³ or technical term.
4. A comedy footnote⁴.

Here's my problem / User Need - how does a user know which type of footnote they are encountering?

In the wild

Let's take an example. I'm currently reading "Race After Technology" by Ruha Benjamin". It's an excellent book. But I am unsure how I am supposed to read it⁵. (This criticism applies to most books I've read, but this is what I'm currently reading.)

In this example, I click on ¹³ and my ebook reader - KOReader displays a little pop-up at the bottom of the screen.

Before I tap the link - I've no idea what's behind it. And, that's assuming that I know that reference numbers are tappable, and that the tap-target is large enough that I don't accidentally interact with the book in some other way.

Here's another, from the same page:

Here the author provides a citation and some explanatory text. How does an author decide what goes in the body and what goes in the notes? How does the user know whether the footnote is a citation or is explanatory?

Finally, again from the same page, there's this:

This footnote is so long that the UI pop-up isn't big enough to contain it and displays a scrollbar.

Again, this isn't a criticism of this specific author. This happens on lots of books. The publishing industry seems to have a complete disregard for the user's need.

How do users read? Do they want to click on every footnote link they encounter? Do they expect to read them at the end? Does having a mixture of notes and citations confuse them?

Specification

The ePub specification talks about how to handle footnotes. One of the great things about ePub is that it is based on HTML5. The footnote markup is pretty simple:

<p>
   In that year<a href="#ft2f" role="doc-noteref" epub:type="noteref">2</a> there were 67 mills engaged in the manufacture of cotton goods …
</p>

<aside id="ft2f" role="doc-footnote" epub:type="footnote">
   <p>
     2 The manufacturing statistics for 1900 which follow are not those given in the Twelfth Census, but are taken from the <em>Census of Manufactures</em> …
   </p>
</aside>

Most eBook publishers also include a back-link, so that users can easily return to the main text.

The specification doesn't say whether citations should be displayed differently to footnotes.

I guess it would be easy to add class="citation" and have the CSS .citation::before {content="cite ";}

That would allow users to differentiate between ^{cite 2} and ^{note 2}.

Usability

There are some "technical" usability issues here. How the user interacts with links, whether the note appears as a pop-up or inline, and the process of returning to the main text.

But I want to talk about the cognitive issues at play. When footnotes can contain anything from a citation to essential background information, the user is forced to break from the flow⁶ of reading - often in the middle of a sentence. This is a problem in both paper books and electronic books.

I'm still stuck on the user needs. It seems to me that most footnotes are for the author's benefit. If the text is that important, it should be in the main body. If it isn't, leave it out.

Abbreviations can be dealt with inline using the <abbr> element. You should be able to to tap on the TLA to get the definition.

As for citations? Isn't that what HTML links are for? Just link directly to the document in question as part of the running text.

Would it make life easier for reader to include a fully semantic citation inline? Take this scrap of imaginary text:

There are many websites about Shakespeare. As is discussed in Eric M. Johnson's Opening Shakespeare from the Margins (2017), the use of open source software has seen...

Which can be represented by the HTML code:

<span itemscope itemtype="http://schema.org/ScholarlyArticle">
   <span itemprop="citation">
      <span itemprop="author" itemscope itemtype="http://schema.org/Person">
         <span itemprop="name">
            <span itemprop="familyName">Johnson</span>, 
            <span itemprop="givenName">Eric M.</span>
         </span>
      </span> 
      <q>
         <a itemprop="url" href="https://doi.org/10.1007/978-3-319-61015-3_10">
            <cite itemprop="headline">Opening Shakespeare from the Margins</cite>
         </a>
      </q> 
      (<time itemprop="datePublished" datetime="2017">2017</time>)  
      page: <span itemprop="pagination">187-205</span>. 
      <span itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
         <span itemprop="name">Springer International Publishing</span>
      </span>. 
      <span itemprop="publication">The Shakespeare User</span>.
   </span>
</span>

CSS could be used to show / hide various parts of the citation until interacted with. A reader familiar with hypertext should know that visiting a link will take them to an external site. No need for footnotes at all!

Obviously, I haven't done any proper usability studies. Nor have I spoken to any users other than myself.

But surely we need a better way of making footnotes and citations better for readers?

What's next

There have been many attempts to get a <footnote> element into HTML. I think there's some value in adding semantic information to a document. But I probably think that the <aside> element and <cite> element are good enough.

Perhaps the W3C Publishing Group needs to fund some user research to see if ePub notes and citations work well for most users.

Perhaps authors need to realise that linear text is a relic of paper-based publishing and that hypertext affords new ways for a reader to journey through a text.

Or, perhaps, I need to learn how to read without getting distracted.