Random notes from mg

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, shiny!

Footnotes are kind of a personal pet-peeve of mine.

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.

And it is all done in client-side Javascript.

I've stumbled upon World of Ends: What the Internet Is and How to Stop Mistaking It for Something Else by Doc Searls and David Weinberger. It is a great article.

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 than footnotes¹.

¹ It can be argued that endnotes on the web are placed on a different web page from the main text, while footnotes are placed on the same web page. This is completely irrelevant to the rest of this post.

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 typeset.

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.

² Clicking on next/previous links is like putting down the book you're reading now and picking up another book from the table. Not everyone has ultra-low-latency high-bandwidth links.

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.