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

Looks perfect, thanks @Samwilson

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
Yep.
If you click the button a second time (while the popup is open) it submits the OCR.

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

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

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.

Visual reference for two toolbar options:

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

@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 might 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

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

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

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.

@Samwilson I guess it should close the popup to remove friction. Since the user will be clicking to run the OCR, I would imagine they either know what OCR is or have taken the time to read through the popup.

Visual reference for #4 Warning message has been updated in the original comment, also below:

1– Pulsating UI

• When a user sees the button for the first time and the pulsating dot is present, they should be able to click directly on the button and see the guided tour pop up (not by only clicking on the dot)
• The padding on the guided tour pop up should be optimized

@MusikAnimal Thanks for letting me know! Do you think it would be possible to keep the larger content area while reducing the size of the input fields (similarly to the mocks)? That way we can offer a large side-by-side transcription/proofread experience without having very wide fields in the forms above. What do you think of this "hybrid" solution?

@MusikAnimal sorry for the confusion, here's the logo svg :)

We could add placeholder text. "Auto" by itself might look a little weird, but we could have a sentence "Leave blank for automatic language detection". How does that sound? Also we can add any number of little clickable tooltip icons (?) next to the labels that provide more information, as desired.

Hi @MusikAnimal:

• Just added the svg on the ticket T282960 (I already sent it to Sam earlier)

• It's totally fine to use Bootstrap components instead of OOUI in this case, as we did for the WS Export page.
• We can keep the current language selector, it'd be nice if we have the possibility to have a default state (in the case of the mock "Auto") when there's no user input at first. Do you think it could be possible?
• We can select Tesseract if you prefer, although Google might make more sense as options would appear when Tesseract is selected (and it might be odd for the Tesseract options to disappear after selecting Google?). But again, if Tesseract makes more sense, it shouldn't be a major UX issue.

SVG asset:

Apologies for the confusion, updated :)

Thanks @ldelench_wmf! The ticket description has been updated with the latest designs, and I've unassigned myself from it too :)
Please let me know if there's any issue, thanks! cc @NRodriguez @MusikAnimal

Oh my bad @Daimona, I didn't get that.
The bubble notification works great for generic error handling. Thank you!

Hi @Daimona! For the first point, I agree with @NRodriguez.
For the second point, the objective is to warn the user that they're about to perform a "destructive" task (e.g. replacing the text they have already edited with a new OCR transcription).
Although we are using "Message dialog (2 actions, long)" with a 'destructive' red OOUI button component, we can also use a "Quick Confirm" prompt if that's easier to develop.
Let me know if that makes sense :)

@Samwilson Unfortunately we won't be able to use that image as we don't have the rights for it and we can't use images with text. I'll try to find another one we can use and post it here.

@Samwilson here is the updated UI for loading state:

• No text in the page body field

• Existing text in the page body field

Sounds perfect @Samwilson

@Samwilson sorry I missed this. Here's the updated version of the dropdown:

• description label: "Select your default transcriber tool"
• radio buttons with 'Tesseract OCR' and 'Google OCR', including "Recommended by your community" below the one that is the most appropriate for each Wikisource.

Thanks @Samwilson!
There should be a warning message to let the user know that the task they're performing will replace the current text they have (especially if they have already started doing edits to the text). T281767 has the visual of the popup that should appear before the user continues and then the editing box is greyed out and the loading message appears on top of the box.

I think @SGill's idea is great! If the community can inform us on which engine is more suited for their wikis (considering language/script), it'd be ideal to have that one be the default for each of them. (The user could always opt-out by selecting another engine by clicking the down arrow part of the button)

Open question for the engineers:
If I'm not mistaken, steps 1. and 2. (from above) are already happening when a user initiates an OCR process?

Would it also be possible to vertically center the "Back to Wikisource" button label to the arrow, if time allows?

We need to reduce the font size of "Options" to make it consistent with the other labels (e.g. "Wikisource", "Title", "File Format", ...).

Yes, I agree @dom_walden, I think it would be helpful for the users to also have custom messages on unpredictable 500 errors.
It would also add consistency with the predictable errors. Maybe we could display a message along those lines:

@Samwilson the tweaks look great!

Here are some potential UI tweaks for the Wikisource Export page.

Thanks @Samwilson, sounds great!

@Samwilson Yes that works great – it is standard for the close icon to be on the top right. The other 'x' icon on the left was representing an 'error icon', that's why it was bigger and bolder than the 'x' for close on the right.

@ifried Based on what I saw on the existing credit page: if we condense the whole content into one or two sentences, we can have something like this, linking back to the book page on WS:

Here's an updated visual example
The font doesn't really fit, so it's more to give an idea.