At work we’re busy redoing the entire Ministry of Education website. One of the problems with every redesign / realign / redo of a major site is the migration of existing content. It would be easy to port everything verbatim into a new design, but the maturation of the online medium has made something clear, which Khoi Vinh recently articulated: Pages are the problem.
The word “webpage” comes with it the baggage of the printed page. Web pages were, and still often are, seen as online representations of content which already exists on paper. That is why we always hear the phrase “put it up on the web”, as a follow-through action to the production of the printed page.
An example I’ll bring up in this post is our treatment of the footnote. On the printed page the footnote is additional information placed at the bottom of the page. It is often referenced by a superscript number in the main content of the article itself. For online content we usually use hyperlinks to bring readers to additional content, but sometimes the absence of an appropriate webpage forces us to create footnotes.
Most of the time online footnotes mirror the print medium - superscript number with footnote placed below the body text, an example being a typical MOE press release. More web savvy content creators such as John Gruber and Jason Kottke added some functionality to their footnotes. The superscript numbers are hyperlinked to their respective footnotes, and a nifty hyperlink at the end of the footnote brings you back to the specific text the footnote references. Examples are Gruber’s Microsoft and Yahoo article and Kottke’s Growth of Twitter vs Blogger article.
But why do we restrict ourselves to a two-dimensional mechanism meant for a different medium?
For the new MOE website we’ll be using tooltips for footnotes. The entire word or phrase will be hyperlinked, and the relevant footnote information will pop up on a separate layer when place your mouse cursor over the link.
I’m not sure if it’s the absolute best way to handle footnotes, but I think it’s a step ahead.
Comments
Interesting idea.
But the idea of a footnote is to be unobtrusive. For e.g. unless you are interested you wont bother to look at the bottom of a page and find the explanation for a sentence that has a superscript reference.
So, if only by hovering the user sees the footnote that seems a little obtrusive. What you say?
Posted by: divya | May 14, 2007 1:28 PM
Good observation, Divya. I tend to view hyperlinks as unobtrusive in general. When the user hovers over the link, I take that as an intentional effort to know more.
Posted by: Lucian | May 14, 2007 1:31 PM
i’m thinking in terms of accessibility: would the footnote still be accessible for low-end browsers or screenreaders?
Posted by: coleman yee | May 14, 2007 1:39 PM
Coleman, but of course. The footnote information would simply be stored in the title attribute of the hyperlink tag. Whether that’s proper use of the title attribute however…
Posted by: Lucian | May 14, 2007 3:53 PM
Your ‘footnote’ looks just like any other link. I would be expecting to click on that link to perform an action and then suddenly a paragraph of text pops up. I’d find that annoying. I would suggested some visual clue to show that it was a note not a normal hyperlink, or at least make the note only appear when the link is clicked.
Using super/sub-scripted numbers is less intrusive. Have you considered printing the page - how easy is it to place these notes into their proper position below or to the side of the main body of text?
Posted by: Arthur Case | May 16, 2007 12:01 PM
Hi Arthur, great feedback. The visual cue can be accomplished without a problem, but the printer stylesheets would require undesired hackery to implement.
We may actually have to rethink the solution. Do you have any ideas of making better footnotes?
Posted by: Lucian | May 16, 2007 12:21 PM
Hi Lucian. The best advice I can offer for making good footnotes is to follow convention, using a numeral or other series of typographical marks that are unobtrusive to the main body of text, which then link to the corresponding footnote elsewhere on the page.
Really it’s through good typography that elegant footnotes are achieved. The idea of having the footnote link back to the correct place in the body text is really useful.
Posted by: Arthur Case | May 16, 2007 3:27 PM
I would say that i find tooltips obtrusive especially when there are so many of them in one page.
What you can do with the footnotes is very limited IMO, i can only suggest
1) Tool Tips + SideNotes - Atleast it wont block users view of the text underneath.
2) As Arthur Case suggested, Hyperlinks with footnotes should be styled differently from normal hyperlinks
3) A link back type which can be found here
http://www.brandspankingnew.net/specials/footnote_5.html
Posted by: vinay | May 17, 2007 2:32 PM
I found this which might be helpful
http://www.brandspankingnew.net/specials/footnote_3.html
More writeup is here http://web-graphics.com/mtarchive/001626.php
Posted by: vinay | May 17, 2007 2:41 PM