Page MenuHomePhabricator

[EPIC] Mobile VE toolbar improvements
Open, Needs TriagePublic

Description

Todo

  • Update "Definition of 'done'"

Task overview

This task includes the work involved with refreshing the mobile VisualEditor editing toolbar. It is a part of our team's broader effort to increase the likelihood contributors will have success making quick edits on-the-go.

Background

We know from our research, contributors' success making quick edits on-the-go, using the mobile VisualEditor, depends – in part – on their ability to identify the right editing tools at the right moment and their ability to navigate along the edit "path."

Trouble is, mobile VisualEditor's existing editing toolbar (where these editing tools live), can make it difficult for contributors to:

  • Find the tools they need to make an edit/change
  • Understand where they are in the course of their edit(s)
  • Recover from a mistake and advance towards edit completion

We intend to address these issues by "refreshing" (read: redesigning) the existing toolbar to meet the criteria below.

Criteria

  • Core editing tools [1] are "easy" for contributors to identify
  • It is clear for contributors to know where they are in the course of their edit(s)
  • It is clear to contributors how to go "forwards" and "backwards" (read: it is clear how to recover from a mistake; it is clear what to do to publish their edit(s))

General requirements

  • Platform: Mobile VE
  • Languages: All
  • Target users: Josef the Reactive Corrector (minus the geographic specificity of the persona)
  • Eventlogging: TBD
  • QA Testing: TBD

Definition of "done"

  • Write design brief T218177
  • Research mobile keyboard behaviors and events on iOS and Android and identify IME behaviors that will need additional design treatment T211788
  • Wireframe the entire flow of brainstorm sketch T211786
  • Develop a working toolbar prototype by making edits to the toolbar code and bringing the desktop context menus to mobile T211789
  • Design a Test for prototype T211787
  • Perform test on prototype T211790

References

  1. Core editing tools: Adding/modifying links, adding/modifying citations, formatting text

Related Objects

StatusAssignedTask
Openppelberg
Resolvediamjessklein
Openiamjessklein
Opendchan
ResolvedDLynch
OpenRyasmeen
OpenNone
Openiamjessklein
Openiamjessklein
Resolvediamjessklein
Openppelberg
OpenNone
OpenNone
OpenNone
Resolvedppelberg
Openppelberg
Declinedppelberg
DuplicateNone
Openppelberg
Resolvedppelberg
Resolvedppelberg
OpenNone
OpenNone
OpenNone
OpenNone
Resolvedppelberg
Resolvediamjessklein
Resolvediamjessklein
Openiamjessklein
Openiamjessklein
Openiamjessklein
OpenNone
ResolvedJTannerWMF
OpenDLynch
OpenDLynch
ResolvedDLynch
Resolvedppelberg
Openiamjessklein

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
marcella updated the task description. (Show Details)Dec 12 2018, 4:44 PM
iamjessklein updated the task description. (Show Details)Dec 12 2018, 4:45 PM
iamjessklein updated the task description. (Show Details)
iamjessklein updated the task description. (Show Details)
Trizek-WMF renamed this task from [EPIC] Toolbar Improvements to [EPIC] Toolbar Improvements for mobile VE users.Feb 18 2019, 5:15 PM
iamjessklein reassigned this task from DannyH to ppelberg.Mar 13 2019, 12:11 AM
iamjessklein updated the task description. (Show Details)
iamjessklein added a subscriber: DannyH.
iamjessklein updated the task description. (Show Details)Apr 8 2019, 1:54 PM
ppelberg renamed this task from [EPIC] Toolbar Improvements for mobile VE users to [EPIC] In-edit Improvements.Apr 16 2019, 9:43 PM
ppelberg renamed this task from [EPIC] In-edit Improvements to [EPIC] Refresh Toolbar.Apr 17 2019, 9:37 PM
ppelberg renamed this task from [EPIC] Refresh Toolbar to [EPIC] Refresh mobile VE toolbar.
ppelberg renamed this task from [EPIC] Refresh mobile VE toolbar to [EPIC] Toolbar improvements.Apr 17 2019, 10:51 PM
ppelberg renamed this task from [EPIC] Toolbar improvements to [EPIC] Mobile VE toolbar refresh.Apr 22 2019, 10:07 PM
ppelberg renamed this task from [EPIC] Mobile VE toolbar refresh to [EPIC] Toolbar improvements.
ppelberg updated the task description. (Show Details)Apr 23 2019, 12:22 AM
ppelberg updated the task description. (Show Details)Apr 23 2019, 12:24 AM
ppelberg added a subscriber: Esanders.EditedMay 15 2019, 10:19 PM

In our 13-May meeting, @Esanders, @iamjessklein and I talked about how a unified toolbar would require icons for:

  1. undo
  2. text formatting
  3. citations
  4. linking
  5. closing editor
  6. switching editors (wikitext / VE)
  7. next/publish
Esanders added a comment.EditedMay 15 2019, 10:35 PM

Housekeeping note: We should ensure we put "mobile" in the title of mobile tickets, and also use the Visualeditor-MediaWiki-Mobile tag.

ppelberg renamed this task from [EPIC] Toolbar improvements to [EPIC] Mobile VE toolbar improvements.May 15 2019, 10:36 PM

@Esanders good call – thank you for saying something. Updated. Will do the same on other tickets where this has been left off, as I come across them.

iamjessklein updated the task description. (Show Details)Jul 25 2019, 4:51 PM
iamjessklein added a comment.EditedJul 31 2019, 2:25 PM

Based on the feedback on the mockups from the team, we should add a few more tasks:

  • T229427 Tweak the mockups to reflect the change of the < button to close for this iteration
  • T229428 Tweak the mockups legal message placement to account for keyboard being up
  • T229429 Confirm the applied changes to the Save dialog on desktop doesn't cause any issues, and highlight if there any places we think mobile needs to behave differently.
  • T228165 Check how the character limit counter edge case looks now that we've removed the frame

As our user testing at Wikimania Stockholm confirmed, this is working well.
Has @Ryasmeen had a chance to do a QA review on it?

In usertesting we learned:

  1. folks were confused about what “label” means - can/should this be changed to something else?
  2. Text selection can be obfuscated by toolbar - is this to the point where it impairs the experience?

Once we have answers to these two questions, we should fix them and then move this over to Beta for @Ryasmeen to test.

  1. folks were confused about what “label” means - can/should this be changed to something else?

Covered in T230794 (and resolved yesterday).

  1. Text selection can be obfuscated by toolbar - is this to the point where it impairs the experience?

The changes to the toolbar should not impact the behavior of text selections at all. I am not sure what the problem is (I'd welcome more details), but it most likely already exists in production and is not introduced by the changes.