Page MenuHomePhabricator

Editing on boarding: As a new editor, I'd like for there to be an introduction to Wikitext the first time I visit the editor
Closed, ResolvedPublic

Description

Why are we doing this?

As we continue to work on making Wikitext easier to learn and understand for all users, we would like to explore how a guided introduction to Wikitext could potentially help users more quickly learn how to work with Wikitext.

User story

As a new editor, I'd like for there to be an introduction to Wikitext the first time I visit the editor

Potential solution

  • Include on boarding screens before the first time a user edits, both to introduce them to the general rules of editing and also to show them common syntax elements.
  • Include a sort of sandbox article where specific syntax elements are 'highlighted with a blue dot and the user can click around to see what each syntax element represents

Designs

Zeplin Screens: https://app.zeplin.io/project/57a120ce9787dcf26230651f/dashboard?seid=5c76c0fe8f2c54bc78bf2e38

Be boldNPOVVerifiabilitySet knowledge free
100_be bold v2.png (1×750 px, 95 KB)
101_NPOV v2.png (1×750 px, 111 KB)
102_Verifiability v2.png (1×750 px, 147 KB)
103_Set knowledge free v2.png (1×750 px, 250 KB)
Zeplin: https://zpl.io/2yOqvLJZeplin: https://zpl.io/V1NOGowZeplin: https://zpl.io/bPPxJR6Zeplin: https://zpl.io/V0qL4eE

Design details

  • These screens use the same layout as the main app on boarding screens
  • Background 'confetti' should animate out from the center of the illustrations as per main app on boarding
  • Reading themes are supported and text and UI elements should be adapted to fit the theme. Illustrations will remain the same as on default.
  • Tapping 'Skip' on the first screen or 'Get started' on the last screen brings user to the editing interface.

Potential follow-ups

  • Animating elements of the illustrations
  • Creating a place where users can re-visit these screens later

Event Timeline

Reminder - ensure these panels don't show if the user taps a "locked" edit pencil.

FTUI for editors who tap on a locked article?
What are the triggers for showing the on boarding?

JMinor triaged this task as Medium priority.Feb 21 2019, 9:45 PM

I'm awaiting design review, but an early first peek at the on boarding screens can be found here: https://wikimedia.invisionapp.com/freehand/document/MTCJ5RLRM
I'll update the description of this task when design review is complete.

cmadeo updated the task description. (Show Details)
Mhurd removed Mhurd as the assignee of this task.Mar 12 2019, 11:04 PM

@NHarateh_WMF

Per the mocks it looks like for the 1st pass (until "Animating elements of the illustrations" follow-up) you'll only need a single image for each of the foreground animation views - currently WMFWelcomeIntroductionAnimationView (shows just the globe) is a good template for these. (so the "layer" overlap issue shouldn't come into play - though you'll still want to get all 4 pdf's from @cmadeo at exactly the same size and with built-in padding - see footnote)

And WMFWelcomeExplorationAnimationBackgroundView is a good template for the background animation views - would just need to use all plusses and tweak their unitDestinations.


Footnote: size consistency and built-in padding (i.e. padding must be in the image itself) gives her complete control over padding tweaks & alignment consistency 'cause she'll know all 4 images are, say, exactly 150x150 at identity transform (we may still scale things of course but at lease there's "source" consistency between panel images).

Squee! Yay! This is so exciting @NHarateh_WMF!
Just some small tweaks:

  1. Can we have the text on the first screen that is currently Blue50 use Green50? Also could we possibly bump it up a bit higher on the screen, perhaps 5pts?
  2. The image on the last screen (article heart) is looking a bit small. Do you need a larger version or did it get scaled down? If needed I can export all of the images using the same clear bounds. Just let me know.

@cmadeo I think having the same bounds would make sense - here's the difference between citations and the heart, both 218 x 218 here

blep.png (462×467 px, 183 KB)

Hi @NHarateh_WMF! Sorry it took a while for me to figure out how to retain the bounds but here are the PDFs! Thanks for your patience.

cmadeo added a project: Product-QA.

Thanks so much @NHarateh_WMF, looking good even on large sizes in German!

ABorbaWMF added a subscriber: ABorbaWMF.

Looks good to me across a couple of devices. I did notice in the black theme the background is a bit more gray. Shuffling over to @cmadeo for a quick review.

IMG_2585.PNG (2×1 px, 550 KB)

IMG_0125.PNG (2×1 px, 566 KB)

IMG_0126.PNG (2×1 px, 872 KB)

IMG_2586.PNG (2×1 px, 856 KB)

IMG_0123.PNG (2×1 px, 311 KB)

IMG_2583.PNG (2×1 px, 306 KB)

IMG_0124.PNG (2×1 px, 427 KB)

IMG_2584.PNG (2×1 px, 409 KB)

@NHarateh_WMF I think we've now fixed the 'greyness' issue with the dark modes by not using a transparency for the pluses and removing the shadows while you worked on the animations. Just going to leave this ticket in 'needs design' until the animation / illustration updates hit the app.

for those interested in on boarding we just shipped this on iOS...

@MMiller_WMF

@JMinor -- thanks for letting me know. I'm interested to know what we can look forward to learning from this feature. Will you be instrumenting or measuring it? Is it being A/B tested? Is it present for both anonymous and logged-in users?