Page MenuHomePhabricator

Create an icon for suggestions: 'lightbulb'
Closed, ResolvedPublic

Assigned To
Authored By
Pginer-WMF
Sep 5 2017, 11:52 AM
Referenced Files
F12214990: lighbulb not balanced.png
Jan 3 2018, 12:52 AM
F12215017: lightbulb highlighted.PNG
Jan 3 2018, 12:52 AM
F12215014: lightbulb without highlight.PNG
Jan 3 2018, 12:52 AM
F12058476: image.png
Dec 26 2017, 5:53 AM
F11192770: lightbulb.png
Dec 5 2017, 12:23 PM
F11192779: lightbulb-alternatives-example.png
Dec 5 2017, 12:23 PM
F11192773: lightbulb.svg
Dec 5 2017, 12:23 PM
F11042396: lightbulbs-outline.png
Nov 28 2017, 8:59 AM

Description

Currently the icon repo lacks a concept to represent suggestions. This is needed for T157212 and possible other contexts where the user is provided suggestions or ideas to contribute.

The proposed metaphor is the lightbulb, since it represents the notion of an idea. Following the icon guidelines we may want to represent it filled, instead of outlined:


lightbulb.png (20×20 px, 265 B)

Example in context

lightbulb-alternatives-example.png (107×218 px, 2 KB)

Event Timeline

@Pginer-WMF Two questions:

  • I'm not fully convinced about the idea–suggestion connection. Those two things are not necessarily overlapping concepts for me.
  • In the mentioned task I wasn't able to identify the location where the icon should be used at. Context would help with identifying if the icon works.

@Volker_E

In T157212, there are mockups for three different screen sizes - narrow, medium and wide. Narrow mockup specifies that section and language selector are presented in a compact way, meaning that icons are used instead of labels 'Suggestions', 'In progress' and 'Published'.

  • Here is link to mockup for narrow screen size - F6557922.

@Petar.petkovic Thanks, I was thinking of & looking for an icon+label combination. Also it's not filled in the example, which probably confused me.
With the example I'm even more concerned of the icon representing “Suggestions” appropriately.
Maybe it's my German speaking background where "mir geht ein Licht auf" is often additionally represented by literally a light bulb with light rays. The term is similar to "Heureka" translated best probably by "I finally understand". Idea is also represented by lightbulbs, suggestions don't really work for me here.

@Pginer-WMF Two questions:

  • I'm not fully convinced about the idea–suggestion connection. Those two things are not necessarily overlapping concepts for me.

You can think of these as ideas. The user is looking for ideas on what to contribute.
For abstract concepts such as those, the light bulb is the strongest connection I found, but I'm open to other suggestions/ideas.

@Pginer-WMF First off, my critique above was not constructive as I haven't provided an alternative icon proposal. Sorry for that.
The solution to resolve my issue with the abstract icon I see more user confusion than clearance with would be to overthink if the button group needs to become an iconized button group?
Wouldn't a different layout with labelled buttons be advantageous on the smallest screen?

The icons aren't featured on the medium and wider screens with the labels in current layout proposals, which makes building the connection harder.
If a different layout isn't the way to proceed, another idea that comes to my mind were a numbering like in

  1. Suggestions | 2. In progress | 3. Published and then minify them to 1. | 2. | 3. on small screens…

@Pginer-WMF First off, my critique above was not constructive as I haven't provided an alternative icon proposal. Sorry for that.
Wouldn't a different layout with labelled buttons be advantageous on the smallest screen?

Yes. It may be the case that an icon is not enough. We can explore other approaches in a different ticket, but if those also require an icon we need an icon for suggestions anyway.

The icons aren't featured on the medium and wider screens with the labels in current layout proposals, which makes building the connection harder.

Connecting the labels with the icons better is worth exploring, we can add them to the list headings to reinforce their meaning.
Suggestions is the harder concept to represent, but it is also the default view when the user has not translated anything yet, which may help to make the connection.

If a different layout isn't the way to proceed, another idea that comes to my mind were a numbering like in

  1. Suggestions | 2. In progress | 3. Published and then minify them to 1. | 2. | 3. on small screens…

One consideration about responsive design is that users may or may not experience multiple sizes. Thus, we cannot rely on users having seen the tool at a larger size before. It can be the case that users only see the small size, and in that context the 1-2-3 does not seem very clear to anticipate what users will find there.

The 'idea' icon metaphor almost always shows light rays coming off the bulb, see this Google image search:

image.png (466×619 px, 93 KB)

The current icon is therefore less recognisable as a lightbulb, especially as the filament isn't visible, and doesn't connect as well to 'ideas'.

The current icon is therefore less recognisable as a lightbulb, especially as the filament isn't visible, and doesn't connect as 'ideas'.

The icon was based on the Google Material design icon for lightbulb, which we considered a set that is compatible with our guidelines.

We can make customisations, but also take into account that it is not intended for illustration purposes at large size but as an icon when adding more details. We can consider adding the light rays, but we need to take into account that given the same canvas size the main lightbulb shape will need to be smaller for the light rays to fit.

I explored some variants for the lightbulb icon. Adjusting the shape of the lightbulb may help to recognition. The rays definitely help to recognition, but they also force the main lightbulb body to be smaller and results in an icon with a higher number of small details compared to most on the collection.

I recreated one of the uses below to make it easy to compare versions:

lightbulb-alternatives-example.png (107×637 px, 3 KB)

Thoughts?

For me personally it's hard to recognise the first one as lightbulb immediately. Google seems to compromise on it in their Material icons and provides both versions, a filled and an outlined similar to our star icons. Also they are offering a distinction between off and on ones.

For me personally it's hard to recognise the first one as lightbulb immediately.

Does it mean that the later two work for you?

Google seems to compromise on it in their Material icons and provides both versions, a filled and an outlined similar to our star icons. Also they are offering a distinction between off and on ones.

I'm not sure what would we achieve by having two versions. In a particular UI, one of them will be used, which can be the filled one and we want that to be recognisable. If we think that an outline version could work better, let's go that way but I'd try to avoid having two different versions.

@Pginer-WMF I was wondering if you've considered an outlined version?

@Pginer-WMF I was wondering if you've considered an outlined version?

Yes, but based on the icon guidelines, I was trying to give priority to filled shapes first.
Here is the comparison between outlined and filled versions at 100% size:

lightbulbs-outline.png (50×135 px, 1 KB)

lightbulbs-filled.png (50×135 px, 1 KB)

Based on the feedback, I reviewed the design to adjust the shape, and propose to use the following:

Examples

lightbulb.png (20×20 px, 265 B)

lightbulb-alternatives-example.png (107×218 px, 2 KB)

Feedback
Is the proposal good-enough to move forward for the initial version? Are there suggestions for improvement? Are those blockers that need to be addressed now?

Works for me, for what little it's worth.

Is the proposal good-enough to move forward for the initial version?

Yes, and since there've been no blockers in a week, here is a patch.

Change 397998 had a related patch set uploaded (by Prtksxna; owner: Prtksxna):
[oojs/ui@master] icons: Add lightbulb icon

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

Volker_E assigned this task to Prtksxna.
Volker_E triaged this task as Low priority.
Volker_E moved this task from Backlog to OOUI-0.25.0 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.25.0); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.

Change 397998 merged by jenkins-bot:
[oojs/ui@master] icons: Add 'lightbulb' icon

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

Change 399446 had a related patch set uploaded (by Bartosz Dziewoński; owner: Prtksxna):
[oojs/ui@v0.24.4] icons: Add 'lightbulb' icon

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

Change 399446 merged by jenkins-bot:
[oojs/ui@v0.24.4] icons: Add 'lightbulb' icon

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

Volker_E renamed this task from Create an icon for suggestions to Create an icon for suggestions: 'lightbulb'.Dec 22 2017, 9:31 PM
Volker_E removed a project: Patch-For-Review.

@Pginer-WMF I just realized where I've seen a similar icon before:

image.png (386×1 px, 60 KB)
Extension:GettingStarted

Soon after OOjs UI was upgraded to v0.24.4, I have submitted patch to make use of new lightbulb icon. But, icon is not centered, which makes it look really unbalanced.

Not selectedSelectedDOM highlights
lightbulb without highlight.PNG (52×162 px, 1 KB)
lightbulb highlighted.PNG (53×163 px, 1 KB)
lighbulb not balanced.png (42×149 px, 1 KB)

Looking at icon SVG, we can see it's not centered.

The icon @Volker_E mentioned looks really good IMO, and could be adapted into OOjs UI icon.

EDIT: This patch deals with centering.

@Petar.petkovic Ouch, I was not double-checking the patch set by @Prtksxna, only code-wise but not visually – luckily this was no release that made it into MW core and also, such alignment issues will less often happening with T177432 accomplished. Will prepare a follow-up patch set.

Oops, my bad! @Volker_E should we wait for https://gerrit.wikimedia.org/r/#/c/400091/ or should I submit a patch particularly for this?

@Prtksxna No, let's do one immediately. There is uncertainty how much more time 400091 will need.

Change 401651 had a related patch set uploaded (by Prtksxna; owner: Prtksxna):
[oojs/ui@master] wikimediaui: lightbulb icon: Fix centering

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

Change 401651 abandoned by VolkerE:
wikimediaui: lightbulb icon: Fix centering

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

Change 401651 restored by VolkerE:
wikimediaui: lightbulb icon: Fix centering

Reason:
Falsely clicked.

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

Change 401651 merged by jenkins-bot:
[oojs/ui@master] icons: Fix 'lightbulb' centering

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