Page MenuHomePhabricator

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

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.

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

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

Event Timeline

Hanna_Petruschat_WMDE triaged this task as Normal priority.Jan 16 2018, 1:40 PM
Hanna_Petruschat_WMDE created this task.
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.

\\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


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


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


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


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.

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

WMDE-Fisch changed the point value for this task from 8 to 5.Feb 6 2018, 4:35 PM
Lea_WMDE updated the task description. (Show Details)Feb 7 2018, 4:33 PM

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

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 moved this task from Review to Doing on the WMDE-QWERTY-Sprint-2018-02-06 board.

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.

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

TheDJ added a subscriber: TheDJ.Feb 9 2018, 12:46 PM

Might require a bit more attention to narrow screens :)

Same here with screen size 1280 x 800

EN

DE

Besides, the pulsating blue dots are not shown.

@Andrew-WMDE
Here is the image for the overlay

  • in small size

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

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)"

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.//

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.

Tobi_WMDE_SW closed this task as Resolved.Feb 20 2018, 3:18 PM
Lea_WMDE moved this task from Done to Demoed on the WMDE-QWERTY-Team board.Feb 20 2018, 3:30 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

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

Reason:
Ups

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

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