Page MenuHomePhabricator

Have an intro tour (No. 2)
Closed, ResolvedPublic3 Estimated Story Points

Assigned To
Authored By
Hanna_Petruschat_WMDE
May 27 2018, 9:11 PM
Referenced Files
F25491906: image.png
Aug 29 2018, 11:29 AM
F25421336: Bildschirmfoto 2018-08-27 um 13.12.06.png
Aug 27 2018, 11:14 AM
F25021005: Grafik-tutorial_RTL@2x.png
Aug 16 2018, 4:10 PM
F25021007: Graphic-tutorial_LTR@2x.png
Aug 16 2018, 4:10 PM
F25021009: Graphic-tutorial_LTR@4x.png
Aug 16 2018, 4:10 PM
F25021006: Graphic-tutorial_LTR.png
Aug 16 2018, 4:10 PM
F25021008: Grafik-tutorial_RTL@4x.png
Aug 16 2018, 4:10 PM
F25021004: Grafik-tutorial_RTL.png
Aug 16 2018, 4:10 PM

Description

Motivation
People should understand what they are looking it.

Acceptance Criteria

  • Have the tour (pop up explaining an edit conflict and explanation boxes in place) show again, when clicking on the help icon (see below)
  • When you enter the edit conflict resolution view, you get to see the first pop up informing about the edit conflict
  • Once that is closed, we have pulsating buttons and users can select to see info, but don't need to
  • The pulsating button that is on the editing box will disappear, if people start editing that box
  • Users only see all the help texts once (unless the click the help icon)

Mocks
No 2: Info i that brings back the info tour

MVP 1.3-show-intro-again--en-2.png (240×237 px, 2 KB)

Texts for the info tour (with screenshots of the prototype's tour)

((First popup))

start.png (1×2 px, 215 KB)

You happen to experience an edit conflict: During your edit another user also edited the page and saved it. Your version now does not include the latest edits. We are kindly asking you to merge your version with the now latest version of the other user.

[Start merging] ((please note the small “m”))

Conflicting versions (1/3)

1.png (778×2 px, 180 KB)

Diverging changes are shown line by line. 

When there's a difference between the other user's text and yours, the two versions are shown side by side: the other user's version in the yellow box on the left side and yours in the blue box on the right.

When there is no difference between the two versions, the lines are shown in grey boxes. These can be expanded or collapsed and edited if needed.

Choose which changes you want to keep (2/3) ((this heading has also changed))

2.png (1×2 px, 273 KB)

Select which text version you want to keep by clicking on one of the two buttons between each pair of lines. When you have selected a version, you can edit it by clicking on the pen icon. It’s also possible to copy text from the version you didn’t select by using the copy and paste function on your keyboard or with a right click.

You need to select one version for each changed line to save the merged text.

Highlighted text (3/3)

3.png (1×2 px, 232 KB)

The text that was changed in either version of a line is highlighted. After you edit the text, the highlighting will be gone.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
CommunityTechBot renamed this task from u6baaaaaaa to Have the intro tour open up again when clicking on the help icon "?" (No. 2).Jul 2 2018, 3:38 PM
CommunityTechBot raised the priority of this task from High to Needs Triage.
CommunityTechBot added a subscriber: Aklapper.
Lea_WMDE renamed this task from Have the intro tour open up again when clicking on the help icon "?" (No. 2) to Have an intro tour (No. 2).Jul 5 2018, 8:59 AM
Lea_WMDE triaged this task as Medium priority.
Lea_WMDE updated the task description. (Show Details)
WMDE-Fisch set the point value for this task to 5.Jul 5 2018, 9:03 AM

Some background on why I updated the texts for the tour:
It's quite likely that e.g. the other user changed a line in their version, but I didn't. So these two lines in particular don't show conflicting changes (as I didn't change anything in my line). "Diverging versions" or "difference between the two versions" is more fitting.

Change 451374 had a related patch set uploaded (by Andrew-WMDE; owner: Andrew-WMDE):
[mediawiki/extensions/TwoColConflict@master] [WIP] Add an intro tour

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

@Hanna_Petruschat_WMDE We need a RTL version of the first image ( colors flipped and ideally text right aligned ). Thanks :-)!

Here are svgs for the english and an example for arabic (as a RTL-version) for the tutorial pop up.

Edit: svgs are broken. So here are pngs in different resolutions:

Grafik-tutorial_RTL.png (168×599 px, 7 KB)

Grafik-tutorial_RTL@2x.png (335×1 px, 15 KB)

Grafik-tutorial_RTL@4x.png (669×2 px, 28 KB)

Graphic-tutorial_LTR.png (168×599 px, 7 KB)

Graphic-tutorial_LTR@2x.png (335×1 px, 14 KB)

Graphic-tutorial_LTR@4x.png (669×2 px, 27 KB)

Change 451374 merged by jenkins-bot:
[mediawiki/extensions/TwoColConflict@master] Add an intro tour

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

There is something weird with the text underlying the search field

Bildschirmfoto 2018-08-27 um 13.12.06.png (872×918 px, 135 KB)

@Hanna_Petruschat_WMDE Can you have a look at https://tools.wmflabs.org/wmde-editconflict-test/core/index.php?title=Spezial:SimulateTwoColEditConflict and see whether the button pulse and the button disappearing once clicked + the rest is as you expected this to work?

The pulse is great.
The disappearing works as expected. One remark to the interaction though: When closing the popup, we enter the conflict handling page. If you don't know about the pulsating buttons it's relatively likely to not notice them or identify them as clickable. In a former version we had the behaviour of the first tour tip automatically being open when entering the page and when pressing "Okay, got it" being shifted to the next tour tip. Is that conciously being disabled?

There is something weird with the text underlying the search field

Bildschirmfoto 2018-08-27 um 13.12.06.png (872×918 px, 135 KB)

Oh yeah, that looks bad :-). Also it seems not trivial ( at least I did not find no way ) to make it display over the very top navigation and search field. To possible solutions for that:

  • always show these popups below
  • increase box width so it does not stretch so high

Which one is more desired? @Hanna_Petruschat_WMDE

In a former version we had the behaviour of the first tour tip automatically being open when entering the page and when pressing "Okay, got it" being shifted to the next tour tip. Is that conciously being disabled?

Since you ask that now, I am not sure again, but have the feeling we talked it about it while estimating this task.... @Lea_WMDE do you remember what we decided there and what not? - Or: Do we want to reintroduce the "guided tour experience" as in the prototype?

@WMDE-Fisch for the overlapping talk to @Tonina_Zhelyazkova_WMDE @gabriel-wmde or @Tim_WMDE - they solved the exact same problem for AdvancedSearch :)
We did decide for the behavior described above, but that was when Hanna wasn't available. I'll discuss it with UX again, but let's keep the acceptance criteria for this ticket as is.

@Lea_WMDE @WMDE-Fisch Here is the change you are referring to:

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/AdvancedSearch/+/440538/3/modules/ext.advancedSearch.AdvancedOptionsConfig.js

Keep in mind it changes the position of the element and kind of throws it to the top of the DOM and positions it absolutely or something crazy like that, so double check that this does not break any behavior / styles for you (it was fine in our case).

FYI: I can not immediately reproduce the issue with the overlapping search field. In all my tests the popup window goes down, not up, and therefore does not overlap. This does not mean the bug is not there. It is, should be fixed, and will via T203066. But I don't like the idea of blocking a story that essentially asks for "having" an intro tour, when we clearly "have" that intro tour.

What I found instead is this bug:

image.png (680×1 px, 148 KB)

Notice the mispositioned blue circles. To reproduce this all you have to do is to resize the browser window (e.g. make it fullscreen) before clicking the "i" icon. This is not far fetched, it can easily happen to regular users. Should this now also block this story from being done? Should I go on and find more bugs? I'm usually pretty good at this. What I don't like is that this boils down to timing: When individuals are fast enough to find bugs early enough before a story is closed as being done, we block it. But when I'm not fast enough, the bugs gets automatically prioritized a magnitude lower, because it now does not block a story any more, but is on it's own, competing with all the other open tickets. Typically this means the bug is not being worked on immediately, but months later, if ever.

This is not really a "process", but super unclear and confusing to me.

Also notice that the bullet point "The pulsating button that is on the editing box will disappear, if people start editing that box" is blocked on T195721, which we not started working on. Does this mean we need to actually block these two stories on each other? Or is it better to create a separate ticket to make sure we don't forget about this behavior?

Change 456176 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/TwoColConflict@master] Fix misplaced active spots in the tour

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

Change 456176 merged by jenkins-bot:
[mediawiki/extensions/TwoColConflict@master] Fix misplaced active spots in the tour

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

Change 458525 had a related patch set uploaded (by Andrew-WMDE; owner: Andrew-WMDE):
[mediawiki/extensions/TwoColConflict@master] Add browser tests for Tour and remove delay

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

Lea_WMDE changed the point value for this task from 5 to 3.Sep 25 2018, 1:04 PM
Lea_WMDE moved this task from Sprint Backlog to Doing on the WMDE-QWERTY-Sprint-2018-09-25 board.

This ticket is just about what is written in the description, not what is in the sub tickets. Current issues: The test does not run through yet, and we should have browser test.

Change 463218 had a related patch set uploaded (by Andrew-WMDE; owner: Andrew-WMDE):
[mediawiki/extensions/TwoColConflict@master] Fix alignment of the tour buttons without hacky JS

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

Change 463106 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/TwoColConflict@master] Make it possible to restart the tour once more

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

Change 463218 merged by jenkins-bot:
[mediawiki/extensions/TwoColConflict@master] Fix alignment of the tour buttons without hacky JS

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

Change 463106 merged by jenkins-bot:
[mediawiki/extensions/TwoColConflict@master] Make it possible to restart the tour once more

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

Change 458525 merged by jenkins-bot:
[mediawiki/extensions/TwoColConflict@master] Add browser tests for tour and remove delay

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

Lea_WMDE moved this task from Demo to Done on the WMDE-QWERTY-Sprint-2018-09-25 board.