Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Approaches to citations and references in user interfaces
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 [https://en.wikipedia.org/wiki/War_crime](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.
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.