Emphasize VE's save button by animating the progress bar attached to the bottom of the toolbar
Open, NormalPublic8 Story Points

Description

In usability testing conducted on 12–13 May 2015, only 6 out of 10 news users were able to successfully save their edits—the lowest rate among all the tested tasks.

This is likely due to new users being familiar with online WYSIWYG editors like Google Docs, which automatically commit changes as they're typed, without any discrete save step.

After few iterations the following prototype addresses the issue.

http://nirzar.github.io/prototypes/ve/loadingbar/loading/loading.html
Click on edit -> let the toolbar load -> click next the end of the second paragraph

This uses a chrome element to convey state of the document.

Previously, we had moved the progress bar to the center of the editing window because users who scrolled down could lose sight of a progress bar at the top of the document. We'll need to make sure we don't revive that problem in the new implementation.

Neil_P._Quinn_WMF updated the task description. (Show Details)
Neil_P._Quinn_WMF raised the priority of this task from to Normal.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 15 2015, 7:31 PM
Neil_P._Quinn_WMF set Security to None.
Neil_P._Quinn_WMF updated the task description. (Show Details)
Neil_P._Quinn_WMF updated the task description. (Show Details)
ggellerman assigned this task to Nirzar.May 15 2015, 9:44 PM
ggellerman added a subscriber: ggellerman.

Assigning to @Nirzar who did the designs.

@Neil_P._Quinn_WMF I noticed this is in the VisualEditor project Backlog. What does this mean for the fate of this concern? @Nirzar said (on 5/15/2015) he is working on designs and will add them to this ticket when he is done. Note he is traveling and at the hackathon.

@aripstra It doesn't mean very much :) I don't actually recall why I moved it to the backlog column on our workboard, but I suspect it was mainly because I was reluctant to place it as "next up" without a nod from @Jdforrester-WMF. However, if Nirzar's already working on it, it may be "next up" in practical terms anyway.

Nirzar added a comment.Jun 1 2015, 7:50 PM

While I was thinking about how the view->edit state should emphasize the save button, i came up with a new way to do the same thing.

here's a prototype (click next to the cursor in text) which doesn't have "save page" button shown at all by default.
Save button presents itself when you add content (modify article in any way)
This captures the attention to the new added element on the interface.

It follows a very basic design principal, don't show if not needed.

If there is a function behind showing a disabled "save page" button which I am unaware of, please point it out :)

Nirzar updated the task description. (Show Details)Jun 2 2015, 8:51 PM

Updated the task description with prototype for the proposed solution.

Jdforrester-WMF renamed this task from Emphasize VE's save button for new users to Emphasize VE's save button for new users by animating the progress bar attached to the bottom of the toolbar.Jun 3 2015, 6:10 PM
Neil_P._Quinn_WMF renamed this task from Emphasize VE's save button for new users by animating the progress bar attached to the bottom of the toolbar to Emphasize VE's save button by animating the progress bar attached to the bottom of the toolbar.Jun 3 2015, 6:11 PM
Jdforrester-WMF edited projects, added Design; removed WMF-Design.Jun 29 2015, 10:10 PM

@Jdforrester-WMF is this going to be addressed at any time in the near future? Please let us know. Thanks!

Removing Design-Research-Backlog

@Capt_Swing and @dchen to raise at next instance of Design Research/Editing regular checkpoint meeting.

In contrast to the last screen where the Save button is hidden – which is in my opinion more confusing to users, than starting with it in the view, but being disabled – I think there could be an intermediate solution where the color properties in the change from disabled to enabled button are getting a medium-length transition.
That would increase the focus probability on the save button.

The (promising) idea with the loading bar and the sooner visible toolbar remains untouched from this intermediate step.