Wed, Jun 15
Following today's retro, we decided to revert this for now.
Jun 1 2022
Hi @Samwilson, here's the svg for RTL version of the illustration:
May 19 2022
Yes, thanks @Samwilson. Here's the .svg illustration:
May 6 2022
Amazing! Looks perfect, thanks @Samwilson!
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!
Apr 19 2022
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 14 2022
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
Yes exactly @Samwilson. The reload hover button can be at the same place when the manual bar is active:
|Hover button||Manual Bar|
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 13 2022
Apr 11 2022
Apr 8 2022
Apr 5 2022
Hi @MusikAnimal, the SVGs have been updated and I added a RTL version :) (haha it's perfectly fine)
Mar 23 2022
- 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 16 2022
Mar 10 2022
SVG illustration for error state:
Mar 4 2022
To investigate after confirmation from Performance team
Mar 3 2022
Nov 9 2021
Hi @Samwilson, I haven't seen this design before, either on the design style guide so I believe we can remove it :)
Nov 8 2021
Oct 29 2021
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).
Note on the designs:
Illustration and copy might be subject to change but will fit within the same dimensions
Oct 28 2021
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 19 2021
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 13 2021
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 6 2021
Hi @Samwilson, that's completely fine – it works well indented too :)
Sep 7 2021
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 :)
Sep 1 2021
Following RTL meeting, we are updating the UX wording to "This is not a content page; it lists topics with similar names."
Aug 26 2021
Aug 24 2021
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 20 2021
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)
Let me know what you think. Thanks!
Aug 18 2021
Hi all! The colorful one you used looks great @Samwilson, thank you :)
Aug 13 2021
That's a great idea @Samwilson! I can provide updated visual reference if you want.
Aug 12 2021
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 11 2021
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 10 2021
Sounds great, thanks @NRodriguez! I'll comment on the new ticket.
Aug 4 2021
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 3 2021
Ticket description updated with latest icon design, including files and px grid compliance.
Ready for review.
Looks perfect, thanks @Samwilson
Aug 2 2021
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:
1– Pulsating UI
If you click the button a second time (while the popup is open) it submits the OCR.
Jul 20 2021
Thanks @NRodriguez, here is an example of how it could look like on a smaller device:
Jul 19 2021
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 16 2021
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 15 2021
Visual reference for two toolbar options:
Jul 14 2021
I think we could go with something like this? I'll confirm tomorrow if that's the proper use of all assets.
Jul 13 2021
@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.
Hi @dom_walden, yes it is deliberate to be consistent with the OCR button and increase visibility for the CTA
Jul 12 2021
@Samwilson Sorry if it was confusing, I meant it would dismiss the popup forever as if they would have clicked on 'Okay, got it'.
Jun 29 2021
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.