Page MenuHomePhabricator

nayoub
User

Today

  • Clear sailing ahead.

Tomorrow

  • Clear sailing ahead.

Monday

  • Clear sailing ahead.

User Details

User Since
Feb 9 2021, 9:09 PM (72 w, 3 d)
Availability
Available
LDAP User
Unknown
MediaWiki User
NAyoub (WMF) [ Global Accounts ]

Recent Activity

Wed, Jun 15

nayoub added a comment to T294977: Investigate: Match the preview area to the wikitext area.

Following today's retro, we decided to revert this for now.
cc @NRodriguez

Wed, Jun 15, 11:52 PM · Community-Tech (CommTech-Sprint-27), MW-1.39-notes (1.39.0-wmf.17; 2022-06-20), Patch-For-Review, Realtime-Preview-Wish-2021

Jun 1 2022

nayoub updated the task description for T294589: Pulsating UI to onboard users to new Preview feature in toolbar.
Jun 1 2022, 4:44 AM · Community-Tech (CommTech-Sprint-27), MW-1.39-notes (1.39.0-wmf.15; 2022-06-06), Realtime-Preview-Wish-2021
nayoub added a comment to T294589: Pulsating UI to onboard users to new Preview feature in toolbar.

Hi @Samwilson, here's the svg for RTL version of the illustration:

Jun 1 2022, 4:44 AM · Community-Tech (CommTech-Sprint-27), MW-1.39-notes (1.39.0-wmf.15; 2022-06-06), Realtime-Preview-Wish-2021

May 19 2022

nayoub updated the task description for T294589: Pulsating UI to onboard users to new Preview feature in toolbar.
May 19 2022, 3:49 PM · Community-Tech (CommTech-Sprint-27), MW-1.39-notes (1.39.0-wmf.15; 2022-06-06), Realtime-Preview-Wish-2021
nayoub added a comment to T294589: Pulsating UI to onboard users to new Preview feature in toolbar.

Yes, thanks @Samwilson. Here's the .svg illustration:

May 19 2022, 3:48 PM · Community-Tech (CommTech-Sprint-27), MW-1.39-notes (1.39.0-wmf.15; 2022-06-06), Realtime-Preview-Wish-2021

May 6 2022

nayoub added a comment to T307106: Improve preview button look and feel in the Editor toolbar.

Amazing! Looks perfect, thanks @Samwilson!

May 6 2022, 5:58 AM · Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub updated the task description for T303991: Design QA on testwiki.
May 6 2022, 5:23 AM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub added a comment to T307106: Improve preview button look and feel in the Editor toolbar.

Hi @TheresNoTime and @Samwilson, I wanted to make sure that we're also adding the same small border on the other edge of the button – currently it's not visible on Pl-Wiki but maybe you already added to this patch, in that case forget I said anything :) thanks!

May 6 2022, 5:22 AM · Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub added a comment to T303991: Design QA on testwiki.

Thanks @Samwilson, I added a description and visual references for "Visual adjustments on handlebars" on T307105

May 6 2022, 5:17 AM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub updated the task description for T307105: Improvements to resize UI.
May 6 2022, 5:15 AM · Patch-For-Review, MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021

Apr 19 2022

nayoub added a comment to T303991: Design QA on testwiki.

Do these colors/hover etc. only apply to Vector skin? There's already a hover outline in Monobook for instance. Actually, it might be best to do it for all skins except MonoBook.

Apr 19 2022, 6:47 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021

Apr 14 2022

nayoub added a comment to T304568: Manual refresh message in case of slow connection.

I actually fixed the dimensions discrepancy on Figma but not sure how that would affect the OOUI elements...
Also, here's an interactive prototype you can try: https://www.figma.com/proto/Jb6SALEoHWQRawSxscd3Ap/Wikipedia%2FReal-time-preview?page-id=1565%3A32354&node-id=1565%3A33595&viewport=315%2C48%2C0.32&scaling=scale-down-width&hide-ui=1

Apr 14 2022, 3:26 AM · Community-Tech (CommTech-Sprint-24), Patch-For-Review, MW-1.39-notes (1.39.0-wmf.9; 2022-04-25), Realtime-Preview-Wish-2021
nayoub added a comment to T304568: Manual refresh message in case of slow connection.

Yes exactly @Samwilson. The reload hover button can be at the same place when the manual bar is active:

Hover buttonManual Bar
Screen Shot 2022-04-13 at 20.11.20.png (1×2 px, 427 KB)
Screen Shot 2022-04-13 at 20.16.55.png (1×2 px, 892 KB)

There's a discrepancy in the position because of the design system dimensions between the OOUI progressive button (in the reload hover one) and the OOUI quiet button (in the manual bar).
You'll find the Figma mock here: https://www.figma.com/file/Jb6SALEoHWQRawSxscd3Ap/Wikipedia%2FReal-time-preview?node-id=1565%3A32666
Let me know what you think :)

Apr 14 2022, 3:18 AM · Community-Tech (CommTech-Sprint-24), Patch-For-Review, MW-1.39-notes (1.39.0-wmf.9; 2022-04-25), Realtime-Preview-Wish-2021

Apr 13 2022

nayoub updated the task description for T303991: Design QA on testwiki.
Apr 13 2022, 6:08 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021

Apr 11 2022

nayoub updated the task description for T303991: Design QA on testwiki.
Apr 11 2022, 11:37 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub updated the task description for T303991: Design QA on testwiki.
Apr 11 2022, 11:32 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub updated the task description for T303991: Design QA on testwiki.
Apr 11 2022, 11:29 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021

Apr 8 2022

nayoub updated the task description for T303991: Design QA on testwiki.
Apr 8 2022, 6:39 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub updated the task description for T303991: Design QA on testwiki.
Apr 8 2022, 6:38 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub updated the task description for T303991: Design QA on testwiki.
Apr 8 2022, 6:37 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021

Apr 5 2022

nayoub updated the task description for T304596: Add Realtime Preview as Beta Feature.
Apr 5 2022, 3:09 PM · Community-Tech (CommTech-Sprint-24), MW-1.39-notes (1.39.0-wmf.7; 2022-04-11), Realtime-Preview-Wish-2021
nayoub added a comment to T304596: Add Realtime Preview as Beta Feature.

Hi @MusikAnimal, the SVGs have been updated and I added a RTL version :) (haha it's perfectly fine)

Apr 5 2022, 3:09 PM · Community-Tech (CommTech-Sprint-24), MW-1.39-notes (1.39.0-wmf.7; 2022-04-11), Realtime-Preview-Wish-2021
nayoub updated the task description for T304596: Add Realtime Preview as Beta Feature.
Apr 5 2022, 3:06 PM · Community-Tech (CommTech-Sprint-24), MW-1.39-notes (1.39.0-wmf.7; 2022-04-11), Realtime-Preview-Wish-2021

Mar 23 2022

nayoub updated the task description for T304568: Manual refresh message in case of slow connection.
Mar 23 2022, 9:25 PM · Community-Tech (CommTech-Sprint-24), Patch-For-Review, MW-1.39-notes (1.39.0-wmf.9; 2022-04-25), Realtime-Preview-Wish-2021
nayoub updated the task description for T303383: Improve error display.
Mar 23 2022, 4:46 AM · Community-Tech (CommTech-Sprint-24), MW-1.39-notes (1.39.0-wmf.5; 2022-03-28), Voice & Tone, Realtime-Preview-Wish-2021
nayoub added a comment to T303383: Improve error display.

Hi @Samwilson!

  • Yes it's constrained in its width. The font is set to OOUI Smaller UI text on Figma (Helvetica Neue, 13px, 400, Regular) for a width of 268px.
  • Yes you're right, let's set it to the OOUI default for a quiet button then: Base 10 (#202122). I'll update the visual reference here :)
Mar 23 2022, 4:45 AM · Community-Tech (CommTech-Sprint-24), MW-1.39-notes (1.39.0-wmf.5; 2022-03-28), Voice & Tone, Realtime-Preview-Wish-2021

Mar 16 2022

nayoub updated the task description for T303961: Rollout plan for real-time preview.
Mar 16 2022, 5:12 PM · Community-Tech (CommTech-Sprint-27), Hungarian-Sites, Realtime-Preview-Wish-2021
nayoub updated the task description for T303532: Add ability to refresh via shortcut and UX.
Mar 16 2022, 4:34 PM · Community-Tech (CommTech-Sprint-24), MW-1.39-notes (1.39.0-wmf.8; 2022-04-18), Realtime-Preview-Wish-2021

Mar 10 2022

nayoub updated the task description for T303383: Improve error display.
Mar 10 2022, 10:06 PM · Community-Tech (CommTech-Sprint-24), MW-1.39-notes (1.39.0-wmf.5; 2022-03-28), Voice & Tone, Realtime-Preview-Wish-2021
nayoub updated the task description for T303383: Improve error display.
Mar 10 2022, 10:03 PM · Community-Tech (CommTech-Sprint-24), MW-1.39-notes (1.39.0-wmf.5; 2022-03-28), Voice & Tone, Realtime-Preview-Wish-2021
nayoub added a comment to T303383: Improve error display.

SVG illustration for error state:

Mar 10 2022, 10:02 PM · Community-Tech (CommTech-Sprint-24), MW-1.39-notes (1.39.0-wmf.5; 2022-03-28), Voice & Tone, Realtime-Preview-Wish-2021

Mar 4 2022

nayoub added a comment to T302506: Deploy to test wiki for user testing purposes.

To investigate after confirmation from Performance team

Mar 4 2022, 7:03 PM · Community-Tech (CommTech-Sprint-22), Realtime-Preview-Wish-2021
nayoub updated the task description for T302904: Error states for the Preview Output.
Mar 4 2022, 7:00 PM · Community-Tech (CommTech-Sprint-20), Realtime-Preview-Wish-2021

Mar 3 2022

nayoub added a comment to T300560: Design persistent notification for when new comments are posted while drafting a reply.

salut jess

Mar 3 2022, 3:10 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Editing QA, Design, Editing-team (FY2021-22 Kanban Board), Goal, DiscussionTools

Nov 9 2021

nayoub added a comment to T294723: Highlight the preference when hovering on "Set a local exception".

Hi @Samwilson, I haven't seen this design before, either on the design style guide so I believe we can remove it :)

Nov 9 2021, 1:49 AM · MW-1.38-notes (1.38.0-wmf.9; 2021-11-16), Community-Tech (CommTech-Sprint-13), MediaWiki-extensions-GlobalPreferences

Nov 8 2021

nayoub updated the task description for T293337: Disable Preview editing mode when screen is too crowded.
Nov 8 2021, 7:18 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021

Oct 29 2021

nayoub added a comment to T293337: Disable Preview editing mode when screen is too crowded.

I'm not sure if a specific ticket will be cut for this but regarding the animation we discussed @NRodriguez, here's an example of how it could look like (without any fancy animations) in a similar way to codesandbox.io when you click on the "toggle preview button" (browser with a play icon).

Oct 29 2021, 10:32 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub updated the task description for T293337: Disable Preview editing mode when screen is too crowded.
Oct 29 2021, 9:29 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub updated the task description for T293337: Disable Preview editing mode when screen is too crowded.
Oct 29 2021, 9:27 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub updated the task description for T293337: Disable Preview editing mode when screen is too crowded.
Oct 29 2021, 9:27 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub updated the task description for T293337: Disable Preview editing mode when screen is too crowded.
Oct 29 2021, 9:20 PM · MW-1.39-notes (1.39.0-wmf.12; 2022-05-16), Community-Tech (CommTech-Sprint-24), Realtime-Preview-Wish-2021
nayoub updated subscribers of T293347: Draggable resize preview and editor container.
Oct 29 2021, 9:18 PM · Community-Tech (CommTech-Sprint-24), MW-1.38-notes (1.38.0-wmf.26; 2022-03-14), MediaWiki-Interface (deprecated JS libraries), Realtime-Preview-Wish-2021
nayoub updated the task description for T293347: Draggable resize preview and editor container.
Oct 29 2021, 9:17 PM · Community-Tech (CommTech-Sprint-24), MW-1.38-notes (1.38.0-wmf.26; 2022-03-14), MediaWiki-Interface (deprecated JS libraries), Realtime-Preview-Wish-2021
nayoub added a comment to T294589: Pulsating UI to onboard users to new Preview feature in toolbar.

Note on the designs:
Illustration and copy might be subject to change but will fit within the same dimensions

Oct 29 2021, 9:11 PM · Community-Tech (CommTech-Sprint-27), MW-1.39-notes (1.39.0-wmf.15; 2022-06-06), Realtime-Preview-Wish-2021
nayoub updated the task description for T294589: Pulsating UI to onboard users to new Preview feature in toolbar.
Oct 29 2021, 9:09 PM · Community-Tech (CommTech-Sprint-27), MW-1.39-notes (1.39.0-wmf.15; 2022-06-06), Realtime-Preview-Wish-2021

Oct 28 2021

nayoub added a comment to T293347: Draggable resize preview and editor container.

Visual resource

handlebars_ui.png (1×3 px, 76 KB)

Oct 28 2021, 10:20 PM · Community-Tech (CommTech-Sprint-24), MW-1.38-notes (1.38.0-wmf.26; 2022-03-14), MediaWiki-Interface (deprecated JS libraries), Realtime-Preview-Wish-2021
nayoub added a comment to T293347: Draggable resize preview and editor container.

The handlebar/draggable slider for split-panes is similar to the one used here: https://vuejsexamples.com/a-vue-js-simple-and-touch-ready-panes-splitter-resizer/
Ideally, both panes should have minimum heights and width (depending on vertical or horizontal stacking – T293337) but also on resizing (which is already the case for the editing pane on Wikitext Editor).

Oct 28 2021, 10:06 PM · Community-Tech (CommTech-Sprint-24), MW-1.38-notes (1.38.0-wmf.26; 2022-03-14), MediaWiki-Interface (deprecated JS libraries), Realtime-Preview-Wish-2021

Oct 19 2021

nayoub updated subscribers of T288676: Side lock isn't enabled when starting selection from outside the diff table.

Hi @imaigwilo, I'm doing well, thank you - hope you are too!
I actually haven't worked on the Copy and Paste from Diffs project so I'm not sure what users' behavior might be in this case. I think @Daimona or @NRodriguez will be more helpful to answer your question :)

Oct 19 2021, 7:18 PM · Community-Tech (CommTech-Sprint-11), MW-1.37-notes (1.37.0-wmf.20; 2021-08-23), MediaWiki-Page-diffs

Oct 13 2021

nayoub added a comment to T292670: Open the insert link widget when users click on "review link" on disambiguation warning in wikitext.

Visual references of the preferred workflow:
Once the user writes [[dabs-link]], the notification opens with "Change link" CTA, when the user clicks on "Change link" the input [[dabs-link]] is highlighted and opens the link insertion dialog with the dropdown menu.

Oct 13 2021, 5:52 PM · Community-Tech (CommTech-Sprint-14), MW-1.38-notes (1.38.0-wmf.6; 2021-10-26), MediaWiki-extensions-Disambiguator, Disambiguation-Wish-2021

Oct 6 2021

nayoub added a comment to T289214: Disambiguation Pages: Visually differentiate disambiguation links on Wikitext Editor link selector.

Hi @Samwilson, that's completely fine – it works well indented too :)

Oct 6 2021, 2:46 PM · Community-Tech (CommTech-Sprint-12), MW-1.38-notes (1.38.0-wmf.5; 2021-10-19), Patch-For-Review, MW-1.37-notes (1.37.0-wmf.23; 2021-09-13), WikiEditor, Disambiguation-Wish-2021

Sep 7 2021

nayoub added a comment to T285508: Show notification when users type a link to a disambiguation page.

Hey @MusikAnimal, I've updated the ticket description with the latest mock and Figma link.
Regarding the behavior, you're right -- that's the one we decided on in our last RTL. The acceptance criteria look perfect to me, but I'll let @NRodriguez confirm :)
Thanks!

Sep 7 2021, 5:43 PM · Community-Tech (CommTech-Sprint-11), MW-1.37-notes (1.37.0-wmf.23; 2021-09-13), Disambiguation-Wish-2021, MediaWiki-extensions-Disambiguator
nayoub updated the task description for T285508: Show notification when users type a link to a disambiguation page.
Sep 7 2021, 5:39 PM · Community-Tech (CommTech-Sprint-11), MW-1.37-notes (1.37.0-wmf.23; 2021-09-13), Disambiguation-Wish-2021, MediaWiki-extensions-Disambiguator

Sep 1 2021

nayoub moved T285697: Investigate Live Preview UX from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-8) board.
Sep 1 2021, 11:25 PM · Community-Tech (CommTech-Sprint-14), Design
nayoub added a comment to T289214: Disambiguation Pages: Visually differentiate disambiguation links on Wikitext Editor link selector.

Following RTL meeting, we are updating the UX wording to "This is not a content page; it lists topics with similar names."

Sep 1 2021, 11:23 PM · Community-Tech (CommTech-Sprint-12), MW-1.38-notes (1.38.0-wmf.5; 2021-10-19), Patch-For-Review, MW-1.37-notes (1.37.0-wmf.23; 2021-09-13), WikiEditor, Disambiguation-Wish-2021
nayoub updated the task description for T289214: Disambiguation Pages: Visually differentiate disambiguation links on Wikitext Editor link selector.
Sep 1 2021, 11:20 PM · Community-Tech (CommTech-Sprint-12), MW-1.38-notes (1.38.0-wmf.5; 2021-10-19), Patch-For-Review, MW-1.37-notes (1.37.0-wmf.23; 2021-09-13), WikiEditor, Disambiguation-Wish-2021

Aug 26 2021

nayoub updated the image for Community-Tech from F34620886: profile to F34620888: profile.
Aug 26 2021, 5:39 PM
nayoub updated the image for Community-Tech from F34551239: profile to F34620886: profile.
Aug 26 2021, 5:39 PM

Aug 24 2021

nayoub added a comment to T288672: Add toggle button for the image cropper.

Looks perfect, thanks @Samwilson! The one tiny change would be the wording to be "Drag a rectangle on the image below to transcribe only one area of the page" since the button says "Transcribe area", it would be more consistent for users.

Aug 24 2021, 5:02 PM · Community-Tech (CommTech-Sprint-8), Wikimedia OCR

Aug 20 2021

nayoub added a comment to T288672: Add toggle button for the image cropper.

Hi @Samwilson, thanks for updating the description - sounds great! To my understanding, this would be the visual reference for the updated UI:
(give or take non-OOUI assets + I used the button from cropper.js docs, with our colors though)

OCR-cropper.jpg (1×1 px, 438 KB)

Let me know what you think. Thanks!

Aug 20 2021, 8:57 PM · Community-Tech (CommTech-Sprint-8), Wikimedia OCR

Aug 18 2021

nayoub updated the task description for T285508: Show notification when users type a link to a disambiguation page.
Aug 18 2021, 10:37 PM · Community-Tech (CommTech-Sprint-11), MW-1.37-notes (1.37.0-wmf.23; 2021-09-13), Disambiguation-Wish-2021, MediaWiki-extensions-Disambiguator
nayoub created T289214: Disambiguation Pages: Visually differentiate disambiguation links on Wikitext Editor link selector.
Aug 18 2021, 10:31 PM · Community-Tech (CommTech-Sprint-12), MW-1.38-notes (1.38.0-wmf.5; 2021-10-19), Patch-For-Review, MW-1.37-notes (1.37.0-wmf.23; 2021-09-13), WikiEditor, Disambiguation-Wish-2021
nayoub added a project to T289213: Disambiguation Pages: Visually differentiate disambiguation links on Visual Editor link selector: Disambiguation-Wish-2021.
Aug 18 2021, 10:28 PM · Editing-team (Tracking), VisualEditor, Disambiguation-Wish-2021, Community-Tech
nayoub created T289213: Disambiguation Pages: Visually differentiate disambiguation links on Visual Editor link selector.
Aug 18 2021, 10:28 PM · Editing-team (Tracking), VisualEditor, Disambiguation-Wish-2021, Community-Tech
nayoub added a comment to T285508: Show notification when users type a link to a disambiguation page.

VISUAL REFERENCE

Aug 18 2021, 10:24 PM · Community-Tech (CommTech-Sprint-11), MW-1.37-notes (1.37.0-wmf.23; 2021-09-13), Disambiguation-Wish-2021, MediaWiki-extensions-Disambiguator
nayoub added a comment to T288590: Add favicon.

Hi all! The colorful one you used looks great @Samwilson, thank you :)

Aug 18 2021, 3:06 PM · Community-Tech (CommTech-Sprint-7), Wikimedia OCR

Aug 13 2021

nayoub added a comment to T288672: Add toggle button for the image cropper.

That's a great idea @Samwilson! I can provide updated visual reference if you want.

Aug 13 2021, 3:54 PM · Community-Tech (CommTech-Sprint-8), Wikimedia OCR

Aug 12 2021

nayoub added a comment to T288589: Create proof-of-concept script for warning wikitext editors after typing links to disambig pages.

This is really cool! We can explore different options with color as well that will emphasize the warning.
Agreed for the longer toast. I'm also curious as to what happens when you click one of the suggestion links? Does it pop up the link selector and replace it for the user to approve? Or does it simply link to the article?

Aug 12 2021, 2:31 PM · Community-Tech (CommTech-Sprint-7), Disambiguation-Wish-2021

Aug 11 2021

nayoub updated subscribers of T288672: Add toggle button for the image cropper.

Thanks @Daimona, yes exactly. Here's a visual reference of how this could look with a ButtonGroupWidget (including a toggle button to "select area" grouped with a normal button to run the OCR on the selection):

Aug 11 2021, 9:45 PM · Community-Tech (CommTech-Sprint-8), Wikimedia OCR
nayoub updated the task description for T288575: Pulsating UI to 1-click interaction on OCR.
Aug 11 2021, 2:49 PM · MW-1.37-notes (1.37.0-wmf.23; 2021-09-13), Community-Tech (CommTech-Sprint-8), Wikimedia OCR

Aug 10 2021

nayoub added a comment to T285415: Design Desk Check for OCR changes.

Sounds great, thanks @NRodriguez! I'll comment on the new ticket.

Aug 10 2021, 8:52 PM · Community-Tech (CommTech-Sprint-6), MW-1.37-notes (1.37.0-wmf.12; 2021-06-28), Wikimedia OCR, Design

Aug 4 2021

nayoub added a comment to T283879: Advanced Tools User Experience Improvements.

Hi @imaigwilo, thanks for sending all of those over and apologies for not updating the ticket with the latest visual references. @MusikAnimal and I made some changes as he was developing the front-end so there has been some updates that aren't reflected in the visual reference. Everything looks good, except for the beta environment which should not be reflected on the production release.

Aug 4 2021, 11:01 PM · Community-Tech (CommTech-Sprint-6), Design, Wikimedia OCR

Aug 3 2021

nayoub moved T285727: Add an "OCR" icon from In Development 💻 to Review/Feedback 💬 on the Community-Tech (CommTech-Sprint-6) board.
Aug 3 2021, 7:58 PM · Community-Tech (CommTech-Sprint-9), MW-1.37-notes (1.37.0-wmf.20; 2021-08-23), Wikimedia OCR, Wikimedia Design Style Guide, WVUI, OOUI, Design
nayoub added a comment to T285727: Add an "OCR" icon.

Ticket description updated with latest icon design, including files and px grid compliance.
Ready for review.

Aug 3 2021, 7:57 PM · Community-Tech (CommTech-Sprint-9), MW-1.37-notes (1.37.0-wmf.20; 2021-08-23), Wikimedia OCR, Wikimedia Design Style Guide, WVUI, OOUI, Design
nayoub updated the task description for T285727: Add an "OCR" icon.
Aug 3 2021, 7:56 PM · Community-Tech (CommTech-Sprint-9), MW-1.37-notes (1.37.0-wmf.20; 2021-08-23), Wikimedia OCR, Wikimedia Design Style Guide, WVUI, OOUI, Design
nayoub added a comment to T287551: Add 'undo' to loading widget and remove prompt.

Looks perfect, thanks @Samwilson

Aug 3 2021, 2:13 PM · Community-Tech (CommTech-Sprint-7), MW-1.37-notes (1.37.0-wmf.18; 2021-08-09), Wikimedia OCR

Aug 2 2021

nayoub updated the task description for T287551: Add 'undo' to loading widget and remove prompt.
Aug 2 2021, 9:32 PM · Community-Tech (CommTech-Sprint-7), MW-1.37-notes (1.37.0-wmf.18; 2021-08-09), Wikimedia OCR
nayoub updated subscribers of T287551: Add 'undo' to loading widget and remove prompt.

The animation looks great, thanks @Samwilson! Following a call with @NRodriguez, it was brought up that it might be good to extend the display of the banner to 30s total so that users with longer text or other types of devices might be able to revert changes with a bit more timeframe. Also ideally we'd want to include the arrow with the button and make it blue in order to emphasize that it's part of the button. Additionally, it'd be great if we could add a "close" icon on the right of the banner so users can dismiss it if they don't need it.
Visual reference below:

Screen Shot 2021-08-02 at 17.28.32.png (934×1 px, 436 KB)

Aug 2 2021, 9:31 PM · Community-Tech (CommTech-Sprint-7), MW-1.37-notes (1.37.0-wmf.18; 2021-08-09), Wikimedia OCR
nayoub added a comment to T285415: Design Desk Check for OCR changes.

1– Pulsating UI
Yep.
If you click the button a second time (while the popup is open) it submits the OCR.

Aug 2 2021, 6:20 PM · Community-Tech (CommTech-Sprint-6), MW-1.37-notes (1.37.0-wmf.12; 2021-06-28), Wikimedia OCR, Design

Jul 20 2021

nayoub added a comment to T285712: Optimize "Extract text" button concerns.

Thanks @NRodriguez, here is an example of how it could look like on a smaller device:

OCR_Mockup_Tablet.png (756×1 px, 296 KB)

Jul 20 2021, 12:20 AM · Community-Tech (CommTech-Sprint-7), MW-1.37-notes (1.37.0-wmf.16; 2021-07-26), Wikimedia OCR

Jul 19 2021

nayoub added a comment to T285698: Design Brief for Disambiguation Pages.

Hey @ldelench_wmf, the design brief is another doc specifically for design and the Product Spec is more general around product :)
T285696 is an investigation that will be reported on the design brief and with research protocol for discovery user research, the goal is to understand current UX workflows of junior contributors around adding disambiguation links when editing.

Jul 19 2021, 3:13 PM · Community-Tech (CommTech-Sprint-7), Disambiguation-Wish-2021, Design

Jul 16 2021

nayoub added a comment to T285712: Optimize "Extract text" button concerns.

After running A/B, here are two options for the OCR button inside the toolbar. The first option here is with OOUI dropdown button inside the toolbar and the second one is the split button with "auto-OCR" on one side and the dropdown menu to change engines. I included the zoom icons that might be moved there, as they're pretty helpful for the user to understand that the dropdown arrow part of our button shouldn't be considered as options or a menu for the entire toolbar.

Jul 16 2021, 6:31 PM · Community-Tech (CommTech-Sprint-7), MW-1.37-notes (1.37.0-wmf.16; 2021-07-26), Wikimedia OCR

Jul 15 2021

nayoub added a comment to T285712: Optimize "Extract text" button concerns.

Visual reference for two toolbar options:

Screen Shot 2021-07-15 at 11.44.29.png (934×3 px, 464 KB)

Jul 15 2021, 5:15 PM · Community-Tech (CommTech-Sprint-7), MW-1.37-notes (1.37.0-wmf.16; 2021-07-26), Wikimedia OCR

Jul 14 2021

nayoub updated the image for Community-Tech from F34551237: profile to F34551239: profile.
Jul 14 2021, 7:00 PM
nayoub updated the image for Community-Tech from F34551227: profile to F34551237: profile.
Jul 14 2021, 6:59 PM
nayoub added a comment to T286564: "Undo" functionality in OCR Transcription ~ Investigation.

I think we could go with something like this? I'll confirm tomorrow if that's the proper use of all assets.

Screen Shot 2021-07-14 at 10.59.41.png (632×1 px, 254 KB)

Jul 14 2021, 3:00 PM · Community-Tech (CommTech-Sprint-5), Wikimedia OCR

Jul 13 2021

nayoub added a comment to T283879: Advanced Tools User Experience Improvements.

@NRodriguez the button shouldn't clash with the text since as you said they're different elements. There might be edge cases though where the text appears underneath the button, which then could be a user pain point.

Jul 13 2021, 3:59 PM · Community-Tech (CommTech-Sprint-6), Design, Wikimedia OCR
nayoub added a comment to T283879: Advanced Tools User Experience Improvements.

Hi @dom_walden, yes it is deliberate to be consistent with the OCR button and increase visibility for the CTA

Jul 13 2021, 3:27 PM · Community-Tech (CommTech-Sprint-6), Design, Wikimedia OCR

Jul 12 2021

nayoub added a comment to T285415: Design Desk Check for OCR changes.

@Samwilson Sorry if it was confusing, I meant it would dismiss the popup forever as if they would have clicked on 'Okay, got it'.

Jul 12 2021, 1:29 AM · Community-Tech (CommTech-Sprint-6), MW-1.37-notes (1.37.0-wmf.12; 2021-06-28), Wikimedia OCR, Design

Jun 29 2021

nayoub added a comment to T285697: Investigate Live Preview UX.

@Aklapper It is somewhat related but T285500 is for engineers and this one is for a design investigation

Jun 29 2021, 5:16 PM · Community-Tech (CommTech-Sprint-14), Design
nayoub updated the task description for T285712: Optimize "Extract text" button concerns.
Jun 29 2021, 4:15 PM · Community-Tech (CommTech-Sprint-7), MW-1.37-notes (1.37.0-wmf.16; 2021-07-26), Wikimedia OCR
nayoub updated the task description for T285712: Optimize "Extract text" button concerns.
Jun 29 2021, 4:12 PM · Community-Tech (CommTech-Sprint-7), MW-1.37-notes (1.37.0-wmf.16; 2021-07-26), Wikimedia OCR
nayoub updated the task description for T285712: Optimize "Extract text" button concerns.
Jun 29 2021, 4:12 PM · Community-Tech (CommTech-Sprint-7), MW-1.37-notes (1.37.0-wmf.16; 2021-07-26), Wikimedia OCR
nayoub updated the task description for T285712: Optimize "Extract text" button concerns.
Jun 29 2021, 4:11 PM · Community-Tech (CommTech-Sprint-7), MW-1.37-notes (1.37.0-wmf.16; 2021-07-26), Wikimedia OCR
nayoub added a comment to T285727: Add an "OCR" icon.

Thanks for the feedback @Volker_E @iamjessklein
Here are some other options explored, let me know what you think :)
Regarding 2dp lines in the center of the icon, I preferred the 1dp line weight as a better hierarchy in the elements but I understand the point around consistency.

Screen Shot 2021-06-29 at 10.53.03.png (1×1 px, 85 KB)

Jun 29 2021, 3:01 PM · Community-Tech (CommTech-Sprint-9), MW-1.37-notes (1.37.0-wmf.20; 2021-08-23), Wikimedia OCR, Wikimedia Design Style Guide, WVUI, OOUI, Design
nayoub updated the task description for T285727: Add an "OCR" icon.
Jun 29 2021, 2:47 PM · Community-Tech (CommTech-Sprint-9), MW-1.37-notes (1.37.0-wmf.20; 2021-08-23), Wikimedia OCR, Wikimedia Design Style Guide, WVUI, OOUI, Design
nayoub updated the task description for T285727: Add an "OCR" icon.
Jun 29 2021, 2:46 PM · Community-Tech (CommTech-Sprint-9), MW-1.37-notes (1.37.0-wmf.20; 2021-08-23), Wikimedia OCR, Wikimedia Design Style Guide, WVUI, OOUI, Design

Jun 28 2021

nayoub updated the task description for T285727: Add an "OCR" icon.
Jun 28 2021, 11:23 PM · Community-Tech (CommTech-Sprint-9), MW-1.37-notes (1.37.0-wmf.20; 2021-08-23), Wikimedia OCR, Wikimedia Design Style Guide, WVUI, OOUI, Design
nayoub renamed T285727: Add an "OCR" icon from Add a "OCR" icon to Add an "OCR" icon.
Jun 28 2021, 11:11 PM · Community-Tech (CommTech-Sprint-9), MW-1.37-notes (1.37.0-wmf.20; 2021-08-23), Wikimedia OCR, Wikimedia Design Style Guide, WVUI, OOUI, Design
nayoub created T285727: Add an "OCR" icon.
Jun 28 2021, 11:10 PM · Community-Tech (CommTech-Sprint-9), MW-1.37-notes (1.37.0-wmf.20; 2021-08-23), Wikimedia OCR, Wikimedia Design Style Guide, WVUI, OOUI, Design
nayoub added a project to T285698: Design Brief for Disambiguation Pages: Design.
Jun 28 2021, 3:56 PM · Community-Tech (CommTech-Sprint-7), Disambiguation-Wish-2021, Design