Page MenuHomePhabricator
Create Task
Maniphest T184993

Have a tour to introduce the new Interface
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To
Addshore
Authored By
• Hanna_Petruschat_WMDE
Jan 16 2018, 1:40 PM
Tags
Referenced Files
F13633800: Graphic-Tutorial-3x.png
Feb 12 2018, 11:07 AM
F13633616: Graphic-Tutorial.png
Feb 12 2018, 11:07 AM
F13377928: Bildschirmfoto 2018-02-09 um 14.02.22.png
Feb 9 2018, 1:11 PM
F13378026: Bildschirmfoto 2018-02-09 um 14.05.40.png
Feb 9 2018, 1:11 PM
F13377983: Bildschirmfoto 2018-02-09 um 14.02.15.png
Feb 9 2018, 1:11 PM
F13375443: Screen Shot 2018-02-09 at 13.43.00.png
Feb 9 2018, 12:46 PM
F13375446: Screen Shot 2018-02-09 at 13.43.06.png
Feb 9 2018, 12:46 PM
F12613311: MVP 1.3-tut--de-1.jpg
Jan 17 2018, 1:06 PM
View All 13 Files
Subscribers
Addshore
Aklapper
Andrew-WMDE
Bmueller
gerritbot
• Hanna_Petruschat_WMDE
JStrodt_WMDE
View All 10 Subscribers

Description

Problem
We used a tour for the beta version to explain the interface. This helped just to some degree. Some things were forgotten when the actual task/decision to make came up.

Solution
From a UX perspective it is recommended to guide through the actual site layout and let the make decisions and undestand the interface step by step. Therefore we set up a tour.

  1. It should be definitely clear the user is in an edit conflict and not some kind of preview. Therefore we show an overlay explaining the situation. The window can be hidden for future edit conflicts.

MVP 1.3-tut-1.jpg (1×1 px, 996 KB)

  1. We highlight interactive/decision spots step by step. The chosen pattern builds on the current behaviour of the Visual editor.

MVP 1.3-tut.jpg (1×1 px, 1 MB)

We still have a question mark/help icon in the upper right corner to review the tutorial. This should start everything over again, beginning with the slide.

NB: For the prototype, we do not need the "don't show this info again" button. Always show the tour

Details

SubjectRepoBranchLines +/-
[WIP] Have a tour to introduce the new Interfacemediawiki/extensions/TwoColConflictmaster+257 -5
Customize query in gerrit

Related Objects
Search...

Event Timeline

• Hanna_Petruschat_WMDE triaged this task as Medium priority.Jan 16 2018, 1:40 PM
• Hanna_Petruschat_WMDE created this task.
Lea_WMDE removed WMDE-Fisch as the assignee of this task.Jan 16 2018, 1:59 PM
Lea_WMDE removed a project: WMDE-QWERTY-XMAS-Sprint-2017-12-20.
Lea_WMDE moved this task from Backlog to TwoColConflict revamping spike on the Two-Column-Edit-Conflict-Merge board.
Lea_WMDE added a subscriber: WMDE-Fisch.
Lea_WMDE updated the task description. (Show Details)Jan 16 2018, 3:58 PM
Lea_WMDE set the point value for this task to 8.
• Hanna_Petruschat_WMDE added a comment.EditedJan 17 2018, 1:06 PM

\\Please note, that there is no more step-by-step guidance on top of the site as it was shown in earlier drafts. Please remove them, should they be still in there.//

English

MVP 1.3-tut-1.jpg (1×1 px, 987 KB)

For copy and paste purposes, also including corrected typos and stuff
Solve edit conflicts
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

MVP 1.3-tut-2.jpg (1×1 px, 1 MB)

For copy and paste purposes, also including corrected typos and stuff
Conflicting versions
In the two columns you can find the conflicting version of the other user (in yellow on the left side) and of yours (in blue on the right side).
Grey boxes show paragraphs without any changes. These can be expanded or collapsed if needed.
Oka, got it.

Highlighted text
The changed text is highlighted in each version. After editing the text, the highlight will be gone.
Okay, got it.

Choose a base version
To merge both versions, first select a version to work in using the buttons in the middle of the paragraphs. The chosen version will be editable, when clicking on the pen. You can copy text from the unchosen version and paste it into the chosen version by using the copy-and-paste-function on your keyboard or on right click.
You need to select one version for each changed paragraph in order to be able to save the merged version.
Okay, got it.

German

MVP 1.3-tut--de-1.jpg (1×1 px, 1 MB)

For copy and paste purposes, also including corrected typos and stuff
Bearbeitungskonflikte lösen
Du bist in einem Bearbeitungskonflikt gelandet: Während du den Artikel editiert hast, hat eine andere Person ebenfalls editiert und schon gespeichert. Deine Version der Seite kann noch nicht gespeichert werden, da sie die neuen Änderungen noch nicht berücksichtigt. Auf dieser Seite kannst du die andere Version mit deiner Version zusammenführen.
Zusammenführung beginnen

MVP 1.3-tut--de-2.jpg (1×1 px, 1 MB)

For copy and paste purposes, also including corrected typos and stuff
Kollidierende Versionen
Die zwei Spalten zeigen den Bearbeitungskonflikt zwischen der anderen Person (in gelb auf der linken Seite) und dir (in blau auf der rechten Seite) an.
Graue Boxen enthalten Absätze, in denen keine Änderungen vorgenommen wurden. Die Absätze können nach Bedarf ein- oder ausgeklappt werden.
Okay, verstanden.

Markierter Text
Die Textstellen, die in den jeweiligen Paragraphen von beiden Benutzern bearbeitet wurden, sind farblich markiert. Nach der Bearbeitung eines Absatzes verliert der Text jedoch diese Markierung.
Okay, verstanden.

Auswahl einer Textgrundlage
Zur Zusammenführung beider Versionen musst du mit den Knöpfen zwischen den Absätzen zunächst eine Version wählen, die als Bearbeitungsgrundlage dient. Die gewählte Version kann durch einen Klick auf den Stift bearbeitet werden. Aus der nicht gewählten Version kannst du Text mithilfe der Tastatur oder des rechten Mausklicks kopieren und in die bearbeitbare Version einfügen.
Um den zusammengeführten Text speichern zu können, musst du von jedem kollidierenden Absatz einen ausgewählt haben.
Okay, verstanden.

• Hanna_Petruschat_WMDE added a subscriber: JStrodt_WMDE.Jan 18 2018, 9:06 AM
Lea_WMDE added a project: WMDE-TechWish.Jan 22 2018, 7:55 PM
Lea_WMDE moved this task from Proposed to Sprint ready on the WMDE-TechWish board.
• Hanna_Petruschat_WMDE moved this task from ToDo to doing on the WMDE-Design (WMDE-Design-Workboard Doing) board.Jan 23 2018, 9:22 AM
WMDE-Fisch added a project: WMDE-QWERTY-Sprint-2018-01-23.Jan 23 2018, 4:01 PM
• Hanna_Petruschat_WMDE moved this task from doing to In work by others on the WMDE-Design (WMDE-Design-Workboard Doing) board.Jan 31 2018, 10:13 AM
Andrew-WMDE claimed this task.Feb 5 2018, 1:31 PM
Andrew-WMDE moved this task from Sprint Backlog to Doing on the WMDE-QWERTY-Sprint-2018-01-23 board.Feb 5 2018, 5:52 PM
gerritbot subscribed.Feb 5 2018, 6:12 PM

Change 408322 had a related patch set uploaded (by Andrew-WMDE; owner: Andrew-WMDE):
[mediawiki/extensions/TwoColConflict@master] [WIP] Have a tour to introduce the new Interface

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

gerritbot added a project: Patch-For-Review.Feb 5 2018, 6:12 PM
Andrew-WMDE mentioned this in rESCC927e9d7f6bdb: [WIP] Have a tour to introduce the new Interface.Feb 5 2018, 6:13 PM
Bmueller subscribed.Feb 6 2018, 4:10 PM
WMDE-Fisch added a project: WMDE-QWERTY-Sprint-2018-02-06.Feb 6 2018, 4:24 PM
WMDE-Fisch changed the point value for this task from 8 to 5.Feb 6 2018, 4:35 PM
Andrew-WMDE mentioned this in rESCC448fffca548c: [WIP] Have a tour to introduce the new Interface.Feb 6 2018, 4:59 PM
Lea_WMDE updated the task description. (Show Details)Feb 7 2018, 4:33 PM
Addshore subscribed.Feb 8 2018, 10:37 AM
Addshore mentioned this in rESCC4ac1e28cc402: [WIP] Have a tour to introduce the new Interface.Feb 8 2018, 11:53 AM
JStrodt_WMDE added a comment.Feb 8 2018, 3:03 PM

Hi, there are two text changes to be done. They are collected in the document mentioned in T186613.

Addshore claimed this task.Feb 8 2018, 3:42 PM
Addshore moved this task from Proposed to Doing on the WMDE-QWERTY-Sprint-2018-02-06 board.
Addshore added a subscriber: Andrew-WMDE.
Restricted Application added a project: User-Addshore. · View Herald TranscriptFeb 8 2018, 3:42 PM
Addshore added a subscriber: • Hawe_WMDE.EditedFeb 8 2018, 5:00 PM

@Hanna_Petruschat_WMDE & co, where is the image that is used in the mock located?

Addshore removed a subscriber: • Hawe_WMDE.Feb 8 2018, 5:10 PM
Addshore mentioned this in rESCC36ec8445735b: [WIP] Have a tour to introduce the new Interface.Feb 8 2018, 5:14 PM
Addshore moved this task from Doing to Review on the WMDE-QWERTY-Sprint-2018-02-06 board.Feb 8 2018, 5:19 PM
Addshore moved this task from Review to Doing on the WMDE-QWERTY-Sprint-2018-02-06 board.
Addshore added a comment.Feb 8 2018, 5:23 PM

The patch is now ready except for adding the image seen in the mock.

The task also says

NB: For the prototype, we do not need the "do not show this info again" button. Always show the tour

So the checkbox has not been implemented.

Addshore mentioned this in rESCC9f103eae65d8: [WIP] Have a tour to introduce the new Interface.Feb 9 2018, 12:18 PM
Addshore added a comment.Feb 9 2018, 12:21 PM

The test site is now running with the latest patches and can be tested with the tour.

Addshore moved this task from Doing to Review on the WMDE-QWERTY-Sprint-2018-02-06 board.Feb 9 2018, 12:21 PM
TheDJ subscribed.Feb 9 2018, 12:46 PM

Might require a bit more attention to narrow screens :)

Screen Shot 2018-02-09 at 13.43.00.png (1×1 px, 295 KB)

Screen Shot 2018-02-09 at 13.43.06.png (1×1 px, 520 KB)

JStrodt_WMDE added a comment.Feb 9 2018, 1:11 PM

Same here with screen size 1280 x 800

EN

Bildschirmfoto 2018-02-09 um 14.02.22.png (1×2 px, 438 KB)
Bildschirmfoto 2018-02-09 um 14.05.40.png (1×1 px, 460 KB)

DE

Bildschirmfoto 2018-02-09 um 14.02.15.png (1×2 px, 528 KB)

JStrodt_WMDE added a comment.Feb 9 2018, 1:25 PM

Besides, the pulsating blue dots are not shown.

• Hanna_Petruschat_WMDE added a comment.EditedFeb 12 2018, 11:07 AM

@Andrew-WMDE
Here is the image for the overlay

  • in small size

Graphic-Tutorial.png (169×599 px, 7 KB)

  • in bigger size (for resolution and screen size purposes)

Graphic-Tutorial-3x.png (507×1 px, 20 KB)

Also: the pop ups should show up one after the other with a "1/3" in brackets after headline. so people know how much more to expect. "Conflicting Versions (1/3)", "Choose a base version (2/3)", "Highlighted Text (3/3)"

Andrew-WMDE mentioned this in rESCC7f935069aa1a: [WIP] Have a tour to introduce the new Interface.Feb 12 2018, 11:59 AM
Addshore added a comment.Feb 12 2018, 12:08 PM

Also: the pop ups should show up one after the other with a "1/3" in brackets after headline. so people know how much more to expect. "Conflicting Versions (1/3)", "Choose a base version (2/3)", "Highlighted Text (3/3)"

So we do want them to appear one after another / step by step?

I assume the below in your previous comment meant we no longer wanted them to appear in steps.

\\Please note, that there is no more step-by-step guidance on top of the site as it was shown in earlier drafts. Please remove them, should they be still in there.//

Andrew-WMDE mentioned this in rESCC012ff7180e84: [WIP] Have a tour to introduce the new Interface.Feb 12 2018, 12:55 PM
WMDE-Fisch mentioned this in rESCC56e064f91a52: [WIP] Have a tour to introduce the new Interface.Feb 12 2018, 1:42 PM
• Hanna_Petruschat_WMDE added a comment.Feb 12 2018, 3:42 PM

Sorry for the confusion. If I remeber right, this note was meant for the tutorial overlay, not for the tour we introduce here. To clarify:

  • The popups should show up, one after the other (This also helps prevent overlapping). This is also meant for now (the MVP). I think later on, we might introduce the glowing blue points
  • the first popup opens automatically after the introductional overlay was exited.
  • If one popup gets closed, the next one should open up automatically
  • To prevent the user from being scared of hundred more popups to come, we show the "n/3" next to the headline.

I hope that clarifies things.

WMDE-Fisch added a comment.Feb 12 2018, 4:15 PM

All these thing should be done in the current version deployed already :-)

https://tools.wmflabs.org/wmde-editconflict-test/core/index.php?title=Spezial:SimulateTwoColEditConflict

Addshore mentioned this in rESCC171e9706e265: [WIP] Have a tour to introduce the new Interface.Feb 13 2018, 11:06 AM
• Hanna_Petruschat_WMDE created subtask T187301: Popups appearing in the wrong order.Feb 14 2018, 10:01 AM
WMDE-Fisch moved this task from Review to Done on the WMDE-QWERTY-Sprint-2018-02-06 board.Feb 20 2018, 1:38 PM
Tobi_WMDE_SW closed this task as Resolved.Feb 20 2018, 3:18 PM
Tobi_WMDE_SW moved this task from Sprint ready to Done on the WMDE-TechWish board.Feb 20 2018, 3:20 PM
Lea_WMDE moved this task from Done to Demoed on the WMDE-TechWish board.Feb 20 2018, 3:30 PM
Addshore moved this task from Unsorted 💣 to Closing ✔️ on the User-Addshore board.Feb 23 2018, 12:29 PM
gerritbot added a comment.Aug 29 2018, 2:23 PM

Change 408322 abandoned by WMDE-Fisch:
[WIP] Have a tour to introduce the new Interface

Reason:
Squashed in
I267de58c2a3f965b8eebfb545e6b417601527191

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

gerritbot added a comment.Aug 29 2018, 2:23 PM

Change 408322 restored by WMDE-Fisch:
[WIP] Have a tour to introduce the new Interface

Reason:
Ups

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

gerritbot added a comment.Aug 29 2018, 2:24 PM

Change 408322 abandoned by WMDE-Fisch:
[WIP] Have a tour to introduce the new Interface

Reason:
Squashed in
I267de58c2a3f965b8eebfb545e6b417601527191

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

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL