Usability of Footnotes

by @edent | # # | 19 comments | Read ~2,305 times.

I’ve been reading lots more non-fiction books than normal. And I’m getting increasingly annoyed about footnotes1. 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 format2, 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. “.
  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 TLA3 or technical term.
  4. A comedy footnote4.

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 it7. (This criticism applies to most books I’ve read, but this is what I’m currently reading.)

In this example, I click on 13 and my ebook reader – KOReader displays a little pop-up at the bottom of the screen.
A small citation 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:
Four lines of explanation at the bottom of the screen.
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:
A very long footnote.
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?


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:

   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 …

<aside id="ft2f" role="doc-footnote" epub:type="footnote">
     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> …

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.


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 flow8 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 (), 187-205 Springer International Publishing The Shakespeare User the use of open source software has seen…

Which can be represented by the HTML code:

<span itemscope itemtype="">
   <span itemprop="citation">
      <span itemprop="author" itemscope itemtype="">
         <span itemprop="name">
            <span itemprop="familyName">Johnson</span>, 
            <span itemprop="givenName">Eric M.</span>
         <a itemprop="url" href="">
            <cite itemprop="headline">Opening Shakespeare from the Margins</cite>
      (<time itemprop="datePublished" datetime="2017">2017</time>)  
      page: <span itemprop="pagination">187-205</span>. 
      <span itemprop="publisher" itemscope itemtype="">
         <span itemprop="name">Springer International Publishing</span>
      <span itemprop="publication">The Shakespeare User</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.


  1. The explanatory notes in a book which typically come at the end of a page. As digital documents don’t really have a concept of a page, the “footnotes” are often “endnotes”. That is, they come at the end of a chapter or document. I will be using the colloquial term “footnote” to refer to footnotes, endnotes, and citations.
  2. I’ll mostly be talking about the ePub standard, but it also goes for other formats.
  3. A three-letter acronym (TLA), or three-letter abbreviation, is an abbreviation consisting of three letters.
  4. The late, great author Terry Pratchett popularised the meme5 of extensive and tangential footnotes. Often with their own sub-footnotes6.
  5. Dawkins, Richard (1989), The Selfish Gene (2 ed.), Oxford University Press, p. 192, ISBN 978-0-19-286092-7
  6. Not to be confused with “Super-Footnotes” which were a short-lived Superhero group in the “Action World” comics of 1985. The Super-Footnotes had the power of citation which they used to undermine dodgy claims by politicians. They appeared in 3 issues of the comic before disappearing. Their author, Alan Moore, has repeatedly claimed they’re his favourite heroes and has lobbied extensively for a Hollywood movie to be made of their adventures.
  7. I’m quite serious here. I don’t read many “academic” books and I’m unsure of what my journey is meant to be like. Does the author expect me to follow every note? Or wait until the end of the chapter? Or something else?
  8. In psychology, flow is the mental state in which a person performing an activity is fully immersed in a feeling of energized focus, full involvement, and enjoyment in the process of the activity. Named by Mihaly Csikszentmihályi in Flow: The Psychology of Optimal Experience (1990). ISBN 978-0-06-016253-5.

19 thoughts on “Usability of Footnotes

  1. Smudge says:

    I tend to ignore footnotes while reading.

    I’m more likely to scan footnotes at end of chapter. If something piques interest, find the passage and go from there.

    So I wouldn’t mind link from footnote to passage and/or snippet of passage visible near footnote.

  2. Sam Sharpe says:

    In a world where information isn’t free (Scientific Journals, I’m looking at you…) sometimes it is impossible to link to the source, or the link might go away, or it isn’t online at all. In that case, a citation with a brief summary of the information being cited is appropriate

  3. Alex says:

    I think you’re missing something with this though – that citation is then to be compared with your detailed bibliography. The answer to your blog post is essentially that you don’t need to look at footnotes in non-ficiton unless you’re doing a close analysis or factcheck.

    1. Pierre says:

      There’s all sorts of complexity around things like LaTeX, which produce (print-focused) PDFs. They should theoretically translate very easily into EPUB or HTML for reading on screen, but in practice in-text citations and structured bibliographic references are some of the main exceptions where the transition never quite works.

  4. Alex says:

    My habit has been to check the first couple in a new book and see whether they are footnotes (of the explanatory aside type) or endnotes/citations. The former I will generally click on, the latter I might skim through at the end if I’m looking for additional material to read.

    As you rightly point out, the real irritant is editors who merge the two types meaning that you have to click on everything just in case it’s a useful aside or explanation of a term. Simon Schama’s books suffer from this, 80% are simple citations but others contain useful additional context.

    On Kindle (and I presume in ePub) you can use different marking schemes for footnotes and citations (e.g. * for a footnote, 1 for a reference) but it’s hit and miss whether publishers/editors make use of these.

  5. “Usability of Footnotes – Terence Eden’s Blog”

    Footnotes, like drop caps, are one of those things that people carry over from print out of nostalgia that just really doesn’t work in digital without serious reworking.…

  6. By far the largest[1] user of footnotes (both for citations, and supplemental information or commentary, online, is Wikipedia. You might like to look at how footnotes are done there[2], using popups and bi-directional links. Examples are available[3][4].

    [1] {{citation needed}}

    [2] There is more than one method in use



    [5] Beware orphan footnotes

    1. @edent says:

      My challenge back to you – what user research has Wikipedia done on the subject?

      1. Wikipedia, being a non-sentient encyclopedia, has done none. The Wikimedia Foundation’s Research Team may have done (You can ask on the discussion page[2].), or may have facilitated such research by third parties[3].



        [3] For example:

        1. @edent says:

          a non-sentient encyclopedia


  7. I love footnotes, hate endnotes.

  8. I essentially want side-notes in HTML docs*, footnotes in books, and I don’t really care to be able to distinguish between references and notes in the text itself.

    That arguably gets a little more complicated on mobile.

  9. I have so many thoughts, but first I’d like to welcome you to a digital world that is dictated by rules created hundreds of years ago.

  10. Every footnite that’s not just a reference is bad writing style.

    1. Adam Grzelec says:

      I completely don’t agree. There are multiple use cases for footnotes. They allow for some digressions that wouldn’t fit into the main narration (like contradictions that can’t be analyzed deeper in current flow). I treat them as “additional dimensions” for the text, where “footnote in footnote in footnote in ….” would create hypertext structure (not possible due to the nature of medium).

  11. Not sure how correct the story shared by Tom Dennis is, but it’s quite relevant here:…

  12. I like Gwern’s treatment of footnotes: on a large enough screen, the main text goes in the middle, and the footnotes go at the sides, so you can flick your eyes to them while you’re reading.

    If you can’t have that, linking to the footnotes and back to the main text also works well. Another quite popular option is to have a tooltip with either a summary or the main contents of the footnote: this can be good for quick links or due diligence reporting, but for long pieces of text I find it harder to read, and dealing with sub-footnotes without accidentally closing the whole thing can be tricky.

Leave a Reply

Your email address will not be published. Required fields are marked *