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.

Design Iteration 1
'''Step 1: Click reference icon under “more” toolbar. Enter Reference wizard.'''

'''Step 2: Choose from a list of common templates. '''In this example a user selects the Book template.

The list of templates will show a few commonly used templates, or the user may search for more. The user may also enter a reference manually here.

'''Step 3: Enter reference information into the form. '''

The parameters will appear in the form in the same order they appear in the reference result, except in the case there is a parameter that can autofill the rest.

Step 3 b: Autofill parameters.

In this case, ISBN field appears first. The user enters the ISBN and clicks the search button. The ISBN is searched and the other fields are autofilled.

Step 4: Review and insert reference.

The user may view the reference result as it will appear in the article. The user may also edit the reference here if they wish.

Adding parameters:

The option to add more parameters from a template is visible after the user scrolls to the bottom of the form.