Test clicking with ghost + highlighted bar
Closed, ResolvedPublic

Description

Motivation
If users want to select a revision by clicking, the current UI forces them to click on the slider line. This may be quite slow, as the right spot to click has to be found first. Furthermore, when users search for a revision by passing over the bars and reading the tooltips, they sometimes drift away from the clickable area, which is annoying when you found your revision, want to click, and can't (anymore).

These issues would be solved, if the area above the slider (i.e. the bars) were clickable itself. However, this creates other issues, since we are breaking the current slider metaphor. Therefore, we need to be careful that we don't create new issues by solving this issue.

Task
Make the area above/below the slider line clickable, where it is clear what will happen. This means: Everything below the yellow slider is clickable for yellow, everything above the blue slider is clickable for the blue revision.

To indicate the user what will be happening, highlight the half of the column where the pointer is situated in the color of the knob that would go there. Also, add a "ghost" knob to the slider, as shown in the mock:

We need this for testing. Please apply the patch to our new test wiki, and not put it live yet

Restricted Application added a project: TCB-Team. · View Herald TranscriptMay 20 2017, 6:59 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Lea_WMDE updated the task description. (Show Details)May 20 2017, 7:04 AM
Lea_WMDE added a subscriber: Jan_Dittrich.

If we realize this, we would also need to change click behavior for mobile frontends: If tooltip is not shown, show tooltip on click. If it is visible already, move the pointer.

Lea_WMDE updated the task description. (Show Details)May 30 2017, 4:33 PM
WMDE-Fisch moved this task from Todo to Sprint ready on the WMDE-QWERTY-Team-Board board.

Change 357587 had a related patch set uploaded (by WMDE-Fisch; owner: WMDE-Fisch):
[mediawiki/extensions/RevisionSlider@master] [DNM] Prototype implementation for new bar clicking

https://gerrit.wikimedia.org/r/357587

The prototype is ready and was approved sufficient for testing.

I had a quick look. Looking pretty cool!

@WMDE-Fisch you may already be aware of this and I know it is only a prototype, so it might not helpful, but on Firefox, after you have changed the range around 20 times, the page performance starts to significantly degrade (scrolling the page becomes very laggy for example). The same issue is not present in Chromium.

James_Budday added a comment.EditedJun 19 2017, 10:51 AM

See bugs

T168265 Dragging boundary not enforced
T168262 Question Mark Icon Stays Highlighted
T168266 Clicking in space to move sliders doesn't always work

Tobi_WMDE_SW moved this task from TODO to Doing on the Revision-Slider board.Jun 19 2017, 3:31 PM
Tobi_WMDE_SW closed this task as Resolved.Tue, Jul 25, 2:42 PM
Tobi_WMDE_SW added a subscriber: Tobi_WMDE_SW.

Tests have been completed.

Tobi_WMDE_SW moved this task from Done to Demoed on the WMDE-QWERTY-Team-Board board.