I like the way footnotes are implemented here: Snakes on the Web
by Jacob Kaplan-Moss.
(Recorded with byzanz. My gif-fu
is nonexistent or I would make it loop, but with a sufficiently long delay
at the end to avoid irritation. Now you have to reload the whole page if
you missed the animation.)
I'm somewhat ambivalent about the animation effect. On one hand, shiny! On
the other hand, hitting tiny clickable areas is not good usability. Still,
Footnotes are kind of a personal pet-peeve of
I'm really impressed by this zoomable map of Switzerland.
Interactively zoom from the whole country down to individual streets and
buildings! And it is insanely fast! I want one for Lithuania.
Every now and the I see a web page that tries to use footnotes and
fails. Usually it is a longish article, and all the footnotes are
unhelpfully placed at the very end. Effectively they are more like endnotes
The difference between a footnote and an endnote in paper books is that you
can easily find the footnote on the same page that you're looking at, while you
have to work hard (turn pages, use bookmarks) to find the endnote. Footnotes
are convenient, endnotes are not. I have to admit that I haven't the slightest
idea why people ever use endnotes. I suppose it's because they're easier to
Footnotes are called this way because they are placed at the bottom
(foot) of the page. When people write articles or books on
the web they naturally tend to put the footnotes at the foot of the
webpage. But there is one very important difference between
paper pages and web pages: you can see the entire page of a book at once,
but you can only see one screenful of a long web page without scrolling.
Footnotes are convenient because moving your eyes to a different part of the
text in front of you is easy.
Scrolling on the web is like turning pages of a book. If you cannot see both the footnote and the text
that the footnote refers to, then you cannot easily jump between the two with
just your eyes. You have to use the mouse (or the keyboard), you lose
concentration, it becomes harder to find the place where you stopped reading
before you started looking for the footnote.
People generally try to correct this problem by making the footnote
marker into a hyperlink that points to the text of the footnote. This
solution is inadequate because footnote markers are small and therefore
hard to hit (Fitt's
Law). It usually takes me more time to move the mouse around and
click on the footnote marker that it takes me to hit End, then maybe PageUp or
two and find the relevant footnote visually.
A much better solution is to put the footnotes immediately after the
paragraph that mentions them. This keeps the footnote and its marker close
together (but not too close as to interrupt the reader's flow), and hopefully
on the same screenful of text. Indent the footnotes and render them in a
smaller font, so that readers may easily skip them.
I did not invent this footnote presentation style - I found it on the
web somewhere, a while ago. I wish I remembered where and could give credit
where credit is due. Obvious things are sometimes hard to invent.