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

ExistingPrevious 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).

Details

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

Auto-filled Web Citations

View a prototype.

• 
  When a user clicks the cite icon in the toolbar, this dialogue pops up in context where the cursor is.
• 
  The user pastes their URL into the field and clicks Done.
• 
  VE searches the URL and returns a formatted reference. It is shown in a tooltip here.
• 
  After an auto-filled citation is returned, the user can choose to edit it. They enter a form in which each field is labeled. If the software cannot find a field that is required, it is marked.
• 
  The user can also choose to enter the citation manually. Here they can select the type of citation.
• 
  The user has selected cite web, and enters the form.