Page MenuHomePhabricator

Alternatives for “Clear styling” icon
Open, LowPublic

Description

We've identified current “Clear styling” icon as suboptimal and @RHo spearheaded the discussion and explored several alternatives.
Current:

Possible alternatives:

From those there was a tendency towards rows a) & c) in Design team's conversations, which led to






Event Timeline

Volker_E created this task.Apr 17 2018, 8:46 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 17 2018, 8:46 AM

We've been also design-team internally talking about that we need to be careful with the clear icon on link dialog and I've thought about removing it from above screenshots, but it gives a better rounded picture on the topic, even if we gonna go only for the menu item's icon.

Would like to hear VE team's fresh feedback before posting more details about design teams preferences and thoughts so far…

From a user's perspective:
4c looks to me very much like "subscript". Also, what's the rationale behind using a "T", when the other formatting icons (like big and small, and some language variants) use "A"?

Additionally, a separate "unlink" icon (i.e. crossed out variant of the current "link" icon) for removing a link would perhaps make sense.

RHo updated the task description. (Show Details)Apr 17 2018, 11:15 AM
RHo added a comment.Apr 17 2018, 11:18 AM

From a user's perspective:
4c looks to me very much like "subscript". Also, what's the rationale behind using a "T", when the other formatting icons (like big and small, and some language variants) use "A"?

Hi @Schnark - the styled T was created as an option since the simpler shape renders better along with the underline and the "x" indicating clear. It's also used by a couple of other apps such as the Google Drive office suite (Docs, Spreadsheets, etc) and in Gmail where A is the counterpart letter for text styling, so it's not unprecedented to see this difference.

Having said that, I also would prefer we use the same letter for both "text style" and "clear text style" icons, regardless of whether it is an A or T.

matmarex removed a subscriber: matmarex.Apr 17 2018, 1:34 PM

Additionally, a separate "unlink" icon (i.e. crossed out variant of the current "link" icon) for removing a link would perhaps make sense.

That is in reference to this usage of the 'cancel' icon:

That said I'm not sure we need a separate icon for every annotation type, for example:

We can probably just stick with the existing cancel icon for these cases.

TheDJ added a subscriber: TheDJ.Apr 17 2018, 3:00 PM

Another popular symbol for this function is a letter with an eraser.

We've identified current “Clear styling” icon as suboptimal […]

Please can you explain more? There's a lot of back story missing in this task description.

@Deskana One of the pillars in the icon overhaul T177432 was to look into existing icons and evaluate them against the principles, like universality.
Closest visual similarity, which big number of people might have been exposed to is probably https://duckduckgo.com/?q=no+parking&iax=images&ia=images But it's not working as design axiom for “clear”.

Other, in parts more common representations of “clear” include[[ https://duckduckgo.com/?q=clear+icon&iar=images&iax=images&ia=images | saltire-like crosses, erasers and brushes ]]. While brushes might speak to the universal need, they have to include a lot of details and therefore don't make for a good icon.

Additionally, a separate "unlink" icon (i.e. crossed out variant of the current "link" icon) for removing a link would perhaps make sense.

That is in reference to this usage of the 'cancel' icon:

That said I'm not sure we need a separate icon for every annotation type, for example:

We can probably just stick with the existing cancel icon for these cases.

For the case of removing links or other information elements the trash icon can be considered. The current icon always read to me as "forbidden" which felt a bit strange to translate as an action. Note also that a link with bold text keeps the bold text after applying it (i.e., clearing the style is not what is currently happening anyway).

RHo added a comment.Apr 18 2018, 8:03 AM

For the case of removing links or other information elements the trash icon can be considered. The current icon always read to me as "forbidden" which felt a bit strange to translate as an action. Note also that a link with bold text keeps the bold text after applying it (i.e., clearing the style is not what is currently happening anyway).

+1 the trash icon seems clear that it is removing the Link (shown as the title of the pop over)

We tried it out back in 2013 (?) and people assumed it would delete the link and anchor, not just the link, so we moved to the clear icon which was the same as used by Google Docs and Apple Pages at the time, IIRC. User testing it again would be a good idea before making changes here.

I'd suggest to separate concerns here, let's start with the 'clear styling' icon and separate the 'remove link' into another task.

Deskana triaged this task as Low priority.Aug 16 2018, 3:34 PM
Deskana removed a project: VisualEditor.

This doesn't seem to be high in anyone's priorities since it's not been touched in four months.