VisualEditor/Design/Reference Dialog

This document describes the current and future proposed designs for a citation insertion and editing dialog for use within VisualEditor.

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


 * 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 Previous 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 and there (on copying references and citations).

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
Archive Design Iterations See Here

Web References from URL Design


Workflow for adding a web reference. A user can paste a URL into the field and other fields are filled automatically. This saves the user time and ensures that fields are filled consistently.