Skip to content

Approaches to citations and references in user interfaces

Tom Longley edited this page Jul 31, 2017 · 1 revision

All data points in Security Force Monitor's data are individually referenced, often with multiple sources. This presents a big usability challenge for us. This page contains ideas and discussion about the design options available.

Current approach to references

The SFM prototype handled sources by creating footnotes using anchors.

Pop-over approaches to references


Wikipedia [](also has an end-note approach); a number in text corresponding to a citation in the end section of the page. A full citation appears in a pop-over when the user hovers over the in-text number. Along with this, there are user controls on the visibility and appear-after delay.

Wait but Why

Wait by Why uses a pop-over too - blue circles for footnotes, grey boxes for references.

Text expand

The Atlantic's update to David Foster Wallace's "Host"

David Foster Wallace wrote notoriously long, digressive, multi-page footnotes. The Atlantic approached their display by putting a chip around text which is footnoted by Wallace; on click, a coloured box appears inline in the text.

Global Detention Project

As with our project, Global Detention Project references sources for every piece of data. They used a text expand approach too.

Controlling other screen areas


OpenTrials uses traditional inline footnote numbers in text but on click, a blind draws up from the bottom edge of the screen containing the full text of the reference.


When a lyric is clicked on Genius the content of the right-hand side panel is changed to show an annotation.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.