Page MenuHomePhabricator

Add an "OCR" icon
Closed, ResolvedPublic

Description

OCR is a common action in the workflow of transcribing books on Wikisource. As the Community Tech team is adding this feature to the Proofread editor, there was a need for a generic "OCR" icon which was not available among our icons, and could represent the concept of transcribing text from images.

The proposed icon is included below:

OriginalProduction optimized

Screen Shot 2021-08-03 at 15.53.33.png (636×636 px, 13 KB)

Design details

The four center lines represent the text layer extracted from a document by the OCR engine, illustrated by the four corner lines that focus the attention on the center text layer.

Larger sizeon the icon grid
Screen Shot 2021-08-03 at 15.54.04.png (796×800 px, 26 KB)
Screen Shot 2021-08-03 at 15.55.13.png (696×694 px, 45 KB)

Acceptance criteria

Event Timeline

nayoub renamed this task from Add a "OCR" icon to Add an "OCR" icon.Jun 28 2021, 11:10 PM
nayoub created this task.

@nayoub Not sure if you've considered just three 2 dp thick stroke lines for the document representation? That might fit in better with other icons like align* or list*. I'm also aware that article* icons go a 1 dp way.

nayoub updated the task description. (Show Details)

@nayoub Not sure if you've considered just three 2 dp thick stroke lines for the document representation? That might fit in better with other icons like align* or list*. I'm also aware that article* icons go a 1 dp way.

+1 for keeping the stroke consistent however, I know that you've been considering both the 3 and 4 line "document" within the icon. My preference is actually the 4 line because it maintains the illusion that the negative space is creating a document, whereas the 3 line version appears as if it's the hamburger icon. To me, this design is more obvious. So with keeping the stroke and using the 4 lines, I wonder if you should try another iteration that breaks up the metaphor of "hamburger menu" a bit in this context.

From OOUI:

Note the menu icon.

Screen Shot 2021-06-29 at 10.43.14 AM.png (125×896 px, 38 KB)

Note the article icon.

Screen Shot 2021-06-29 at 10.44.23 AM.png (40×108 px, 6 KB)

It's not a 1:1 perfect fit with the article icon, but then again this is not a 1:1 fit with articles as it's image -> article.

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)

Thanks for the feedback @Volker_E @iamjessklein
Here are some other options explored, let me know what you think :)

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

Hi @nayoub - my 2c. I also prefer the 4 line version in your original design with the equal lines across. The options with the different line lengths are not preferred because it is associating with LTR text, so if you did want to go with different lengths to make it look less like a handburger icon, potentially try a center-aligned different line lengths. Another option if wanted to reduce the lines to 3 but not have it confused with the hamburger may be to is to thicken the top line to be like a "header" size:

image.png (450×860 px, 27 KB)

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

Change 713025 had a related patch set uploaded (by VolkerE; author: VolkerE):

[oojs/ui@master] icons: Add 'ocr' icon for OCR app

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

The options with the different line lengths are not preferred because it is associating with LTR text

Hasn't stopped us in the past to have left-aligned text icons for LTR and right-aligned for RTL, see for example 'journal' icon.
Here a 4 line version with extended header and footer (LTR) with icons around for completion:

image.png (1×1 px, 176 KB)

image.png (450×860 px, 27 KB)

Note that I've taken the center aligned 4 line one into the patch above!

Change 713025 merged by jenkins-bot:

[oojs/ui@master] icons: Add 'ocr' icon for OCR app

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

Volker_E updated the task description. (Show Details)

@nayoub Please add the production optimized icon in a pull request also to the DSG and update the shared Figma library.

When will the new icon be available in MediaWiki? We need to update the Wikisource extension to use it. @NRodriguez should that be a separate task?

Change 713803 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update OOUI to v0.42.0

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

Change 713803 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.42.0

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

@Samwilson OOUI related changes are (manually) tagged in release follow-up core patch like here. We've been delaying next release as it's a breaking change release and capacity was bound to Vue related stuff in recent weeks.

I'm not sure there's much to QA here (the follow-up work will be done in T289215).

I'm not sure there's much to QA here (the follow-up work will be done in T289215).

@NRodriguez moving this to Product sign-off per Sam's comment