VisualEditor/Design/Reference Dialog

This document describes the proposed design for a reference and citation insertion dialog for use within VisualEditor.

Goals
Improve the experience of adding references to an article using Visual Editor.


 * Decrease the amount of time spent navigating the reference wizard
 * Surface the common types of reference templates for easy selection
 * Use data such as ISBN or links to autofill parameters if capable

Existing user flow
Here is a guide on how to insert a reference. The existing flow involves at least 10 steps.

Problems
The initial steps are a barrier to new editors, especially finding a template to use.

“There is no obvious way of inserting a reference from the list.” Arson McFire (talk)

More feedback here.

Easy selection of reference template
There will be a per-wiki (locally defined) set of up to 6(?) templates that are displayed on the first screen for easy selection; below are shown an example of how the English Wikipedia might wish to configure it for their needs, with the following types used for the example: Book (auto fill on ISBN), Web, News, Journal (autofill on DOI? PMID? JSTOR?), Media (w:Template:Cite AV media ?)

A search box will be available for the user to find other reference templates. The search results will be filtered to only include templates that useful for citation and footnoting purposes, and the search parameters will match against any fields in the TemplateData. The search results will display a short name rather than the template name. (e.g. w:template:cite PMID will display 'Pubmed' or 'PMID' rather than 'cite PMID')

Dialog Design
(Note: These are design mockups of possible approaches, not screenshots from existing software.)

Archive Design Iterations See Here

Web References from URL Design


Workflow for adding a web reference.