Consistency between Wikitext & Visual Editor

Concept

Create a more seamless transition between wikitext and visual editing modes. A user has to make an upfront decision about which mode to edit Wikipedia in and there is a drastic shift in layout and controls once you switch between wikitext and visual editing modes.

Control Panel & Layout

The two editing modes currently have very control panels that are inconsistent and split up across the page. The first idea is to create a more cohesive control panel where certain areas of the panel are fixed and others are fluid based on editing mode and a users last action. See the control panel mental model for a quickview. A more detailed spec explaining this is linked here also.

Media Settings Specification

Default Mode rules

Near term Design Solutions

Media Settings

Areas of Design with Challenges

States of the toolbar

• 
  States of the Toolbar
• 
  States of the Toolbar

Creating a toolbar that provides the ability to act on content easily but can be customized for a new user who needs help in the first 10 edits, or an advanced editor who does very specific tasks such as math editing. Also must think about in context controls.Terms of Service

• 
  Terms of Service

The TOS will be accepted on a first Save. We want users to know what the TOS of contributing to Wikipedia are, it shouldnt be a dialogue that interrupts but doesn't inform.

Text Formatting

• 
  Unified Formatting & Headings
• 
  Extended Controls

How might relevant controls be available if a user double clicks content. Is there a grouped standard formatting that I can apply if I select a bunch of sections and images to improve the layout?Inserting Links

• 
  Inserting Links
• 
  Inserting Links

What are some ways of providing context when a user links to a page? If a user selects something that should not be linked, is it in the culture of wikipedia to advice that this should not be linked.Inserting Images & Making Galleries

• 
  Uploading Image
• 
  Making Galleries

Images and galleries will allow us to take more control of page layout. Sizing & Aspect ratios should take into consideration layout of text that images will sit with.

Inserting Categories

• 
  Guide Text, Typeahead
• 
  Red Links, Advanced mode to set sort options

Explain the purpose of tagging

We need to think about a less confusing taxonomy, currently any and all types of categorization, ranging from too broad to too specific can be entered by a user.

Insert Templates

• 
  Adding a Template
• 
  Adding Recommended Parameters
• 
  Deleting or Modifying existing Templates

Explain how Templates work & Provide Descriptions where possible.

Use a progressive disclosure model to think about

We need to think about a less confusing taxonomy, currently any and all types of categorization, ranging from too broad to too specific can be entered by a user.

Page Settings

• 
  Remove unnecessary page settings, support redirects and languages

Provide page settings that control the content but not the chrome. Audit any current settings that feel superfluous. (Indexing etc)

Default Editor Pattern

Default Edit Mode based on edit count and history

New Users - If a user has 0 edits, we default to visual editor.

Successfully using Wikitext - If a user previously switched to Wikitext editing and successfully saved their edits then default to Wikitext editing.

New but abandoned editing - If a user has less than 10 edits and abandoned wikitext editing, then default to visual editor

Anonymous Users - Anonymous editors default to wikitext editing.

Primary Operating Principles

• One edit action - No upfront decision making between two edit actions
• Point new users to visual editing but allow quick switching
• No extra steps for key actions
• Help orient me, don’t shuffle things
• Frequent and Important actions will be easy to find
• Show controls that listen to my actions

Secondary Principles

• Support Users who work with very specific subject matter
• Create spaces for the growth team to tie in their experiments

Some of the key areas covered in the spec

• Positioning the switch state in the bar
• First time UX
• Rules for defaults and remembering modes
• Detail the audit for any nested actions
• Article Issues UX and legal concerns
• Title positioning
• Actions grouping for Wikitext Editor V1
• Actions grouping for Visual Editor V1
• First time Next and Save UX
• Cancel and Preview positioning
• Help
• Edit Summary Details

Proposed Work Plan

-Start with a small non disruptive step of making the toolbar on the top consistent with visual editor. Lets leave out any elements that are currently at the bottom of wikitext editor and leave them there.

-Remove everything except Preview, Save and Cancel. Merge with Visual Editor.

-Introduce Getting Started