Page MenuHomePhabricator

Update OOUI close/cross icon
Closed, ResolvedPublic

Description

Reason
The close icon in OOUI is small and uses teardrop corners which makes it asymmetric. it stands out because of its peculiar character and all it needs to have is a standard default cross icon. Tear drop theme that is going on in WMF iconography doesn't need to extend to every part of UI. for example we wouldn't round opposite corners of a UI button.

teardrop-button.png (160×498 px, 6 KB)

What it is

oojs.png (1×750 px, 361 KB)

Proposed

me-ui.png (1×750 px, 361 KB)

Event Timeline

I see the argument, but unlike the clear metaphoric comparison, I don't feel that way about the icon comparison. Personally, I think it's pretty elegant with the rounded stroke corners. Would be nice to have other designers' inputs here as well before going to action.

I'm not a designer, so I'll go ahead and comment. I never liked the fancy corners. And we're not even consistent internally, the 'clear' icon (also featuring a cross) has simple corners.

Would be nice to have other designers' inputs here as well before going to action.

yeah. i pinged on slack to get opinions.

the problems with peculiar themes is scalability. if we want distant character we should limit it to specific things and not trickle it down every details.

I agree that it's ok for the teardrop theme should not to go all places. It would be good to have some guidelines on where those apply (e.g., should stroked icons use a stroke with asymmetrically round corners?).

There are two different aspects in the "teardrop theme":

  1. Rounded corners.
  2. Applying them asymmetrically to some corners and not others.

While there have been discussed several benefits of rounded corners that can apply to our context, it is not clear to me the benefits of applying them asymmetrically. They contribute to a more distinctive look but they also increase the complexity (which corners are round and which straight? should we create RTL versions for icons that would be symmetrically otherwise?).

hey contribute to a more distinctive look but they also increase the complexity (which corners are round and which straight? should we create RTL versions for icons that would be symmetrically otherwise?).

I agree, it just creates more complication and IMO pay off is really low.

I agree that whilst the asymmetric corners on the icons lend a distinctive character that distinguishes them from as 'Wikimedia icons', they are quite inconsistently applied (only top right on some, only bottom left on others, occasionally on two opposite corners like the 'X' icon example here). This inconsistency plus the lack of guidelines works against the coherence of icons as a unified set.

So... it seems we could have 2 directions to go:
1. Better define and refine the existing asymmetric rounded corners set
Was the thinking behind the asymmetric rounded corner on strokes is to evoke an angled pen nib 'drawing' the icons? That makes sense somewhat and in line with the idea of 'paper and ink' and that would enable us to go through and update icons with this consistent metaphor in mind.

icons - pen 'drawing' icon with alternate corner radius (138×261 px, 7 KB)

2. Simplify to symmetrical rounded corners, used consistently.
I prefer this for simplicity and ease of icon creation.
The rule would be all shapes more than 4dp thick use 2dp rounded corners.
The open question is whether want rounded corners as well for shapes that are less than 4dp thick, ie. strokes like the two diagonal strokes which form the "X" in this ticket's example.

icon style comparison - cross with and without round bevel (101×204 px, 3 KB)

  1. Better define and refine the existing asymmetric rounded corners set

Was the thinking behind the asymmetric rounded corner on strokes is to evoke an angled pen nib 'drawing' the icons? That makes sense somewhat and in line with the idea of 'paper and ink' and that would enable us to go through and update icons with this consistent metaphor in mind.

this is really interesting. i didn't think of it this way. but then the question is, the nib metaphor works for strokes alone and not for filled shapes.
i.e. how to explain this - >

uniE100 - article.png (24×24 px, 214 B)

It would be as if the nib 'drew' the outline of the shape and filled it in. But then you end up having very esoteric visual style with quirky lines to form the hamburger menu icon, etc... so that's why I advocate for the option 2 since asymmetric corners just seems overly finicky.

We used (and still do use) plain corners in Apex, so in many cases we can just revert to those files. For me they don't add anything due to being inconsistent and often barely perceptible.

Jdforrester-WMF moved this task from Backlog to Reviewing on the OOUI board.

Change 341185 had a related patch set uploaded (by volker-e):
[oojs/ui] icons: Remove “teardrop” from close icon

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

The patch proposed on the close icon, does neither contain teardrops nor rounded corners.

Volker_E renamed this task from Update OOJS UI close/cross icon to Update OOjs UI close/cross icon.Mar 6 2017, 5:21 PM
Volker_E updated the task description. (Show Details)

Change 341185 merged by jenkins-bot:
[oojs/ui] icons: Remove 'teardrop' from MediaWiki theme close icon

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

Volker_E moved this task from Reviewing to OOjs-UI-0.19.5 on the OOUI board.
Volker_E edited projects, added OOUI (OOjs-UI-0.19.5); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.
Volker_E renamed this task from Update OOjs UI close/cross icon to Update OOUI close/cross icon.Jun 13 2018, 2:04 PM
Volker_E updated the task description. (Show Details)