Page MenuHomePhabricator

Draw lines pointing from the pointers to the related columns
Closed, ResolvedPublic

Description

To help users understanding the correlation between the two columns in the diff view and the two pointers on the slider lines should show connecting both.

In our internal usability tests, the most frequent issue was that users were confused what the pointers actually influence. Lines are a a standard graphical device to show connections.

Details in the design depend on our impressions and minor tests to be done – for example, we could either show the lines all the time in the same color, or show them transparent most of the time and make them opaque when users hover or click the slider.

Screenshot from 2016-10-26 13-55-50.png (638×674 px, 110 KB)

If the indicators are offscreen, I suggest the following:

Screenshot from 2016-10-26 13-56-14.png (199×310 px, 9 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 319559 had a related patch set uploaded (by WMDE-Fisch):
[WIP] Draw lines between pointer and column

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

In the patch 319559 @WMDE-Fisch wrote:

Other then in the mock, when a pointer moves to the side it is

not hidden and the line is not ending in the arrow-bar. This
is done because it would hinder the user to drag the pointer.
Since "dragging instead of clicking" is the desired way to go
with the extension this should be avoided.

This is a good point. However, we can't be sure yet what will be best for the user. The hiding of the pointer would be more consistent with the model of scrolling and "off view", however this is not something that is often done with sliders. I am also not sure, if people actually need to drag sliders – given a scroll bar of a long document (which works like a slider widget) , e.g. I assume people click more than they drag.

Are we able to easily change the behavior of this depending on test results?

Probably more a question for our UX-team: should we make the line a few px broader? IMO at least the yellow line can easily be confused with the border around the revision slider container. I find it a bit hard to follow it. I made 2 screenshots of the current implementation, the first with a line-width of 1px, the second with 2px.

1px:

rs_line_1px.jpg (261×1 px, 24 KB)

2px:

rs_line_2px.jpg (255×1 px, 24 KB)

@Tobi_WMDE_SW i see no reason why it should be thin lines.

I do find the issue of having the line on the gray border line problematic. I think it would be nicer if both horizontal lines would run inside the rectangle before they make they become a vertical line. This would require some more white space below the left and right arrows so the two lines won't overlap when they run parallel and don't touch the arrows themselves either.

Alternatively the horizontal lines could also run below the rectangle. Then we would still need some more whitespace so they both have enough room without overlapping.

I think if this problem is solved the thin lines problem might resolve itself but like I said, I also don't oppose the 2px lines. Probably even a bit user friendlier for users on small/low res devices.

@Jan_Dittrich

Are we able to easily change the behavior of this depending on test results?

Changing the behavior there should not be that hard.

@Charlie_WMDE @Tobi_WMDE_SW
I also think thicker lines would be better. I didn't want to use much more space underneath the slider container if not absolutely necessary. I would suggest we play with the values live tomorrow and decide then.

@Jan_Dittrich will you be in the office tomorrow?

To put my two cents in: while I am not a person with any UX intuition the first things the came to my mind when I tried out the patch were: why is the line thinner than the line above the diff column, and why on earth did they put this yellow line below (outside) the border of the whole thing?

Change 319559 merged by jenkins-bot:
Draw lines between pointers and related columns

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

I thickened the lines according to the discussion. The problem where the lines show could be addressed in another patch.

Just talked to @Charlie_WMDE about the lines and we tried putting them outside/inside the box. We decided putting them both inside the box. Patch is up in a moment.

Change 320404 had a related patch set uploaded (by WMDE-Fisch):
Move lines into container

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

Change 320404 merged by jenkins-bot:
Move lines into container

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