Page MenuHomePhabricator

Alternatives for the header button icons
Closed, DeclinedPublic

Description

The Hamburger icon is just not what it should be, so I went shopping for icons and brought back... a whole list of groceries for all the possible buttons on the header bar.
I hope this will inspire the discussion about what icon to choose for each. Icons roughly in the order of: OOUI then my preference. Colors are arbitrarily chosen by fontawesome.com.

Tl;dr: Some icons are good, some are confusing, some are missing for the header improvements. See some ideas below for these icons.

Left-side buttons

Left 1. Table of contents

In case it becomes a tab on the collapsible sidebar.

NonFree https://www.iconfinder.com/icons/3233423/contents_list_table_of_contents_text_icon
NonFree https://www.iconfinder.com/icons/230367/book_bookmark_bookmarks_contents_favorites_icon

Left 2. Site navigation

Personal preference: Wikiglobe with arrow below

Left 3. Article tools / editing
Left 4. Bookmarks

Right-side buttons

Right 1. Alerts

Mentions, direct messages, reverts.

Right 2. Notifications

Thanks, badges. The current icon in Echo is a UTP socket? A tray.

Right 3. Watchlist
Right 4. User contributions

Add small user icon in bottom-right corner of history/list icon.

Right 5. Skin settings
Right 6. User menu

Note: Consider not displaying the user name. Showing the username is useful on shared computers and for sockpuppeteers. Hiding the username is good for making screenshots that have no privacy concerns.

Event Timeline

Demian created this task.Jan 21 2020, 9:32 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 21 2020, 9:32 AM

I'm not sure which "header bar" this about (my stress is on "bar" here)...

This should probably not collide with https://commons.wikimedia.org/wiki/OOjs_UI_icons

Demian renamed this task from Choose expressive icons for the headerbar buttons to Choose expressive icons for the header buttons.Jan 21 2020, 9:52 AM

Removed the bar

Demian updated the task description. (Show Details)Jan 21 2020, 10:51 PM
Demian updated the task description. (Show Details)Jan 22 2020, 12:31 AM
Demian updated the task description. (Show Details)
Demian updated the task description. (Show Details)Jan 22 2020, 12:33 AM
Demian updated the task description. (Show Details)Jan 22 2020, 12:39 AM
Demian updated the task description. (Show Details)Jan 22 2020, 12:43 AM
Demian updated the task description. (Show Details)Jan 23 2020, 9:52 AM

@AronManning From the task description it's not clear what you're aiming for with this task. Also “OOUI then my preference” is unclear. Please clarify the objections of current OOUI icons. Also please refer to https://design.wikimedia.org/style-guide/visual-style_icons.html on backgrounds how we went above our default icon designs.

Demian added a comment.EditedFeb 1 2020, 6:23 AM

@AronManning From the task description it's not clear what you're aiming for with this task. Also “OOUI then my preference” is unclear. Please clarify the objections of current OOUI icons. Also please refer to https://design.wikimedia.org/style-guide/visual-style_icons.html on backgrounds how we went above our default icon designs.

This is primarily for the Desktop improvements project. The initial purpose was to look for an alternative for the hamburger icon (for the sidebar) that's not internationally recognized, then I've gathered a few options for the rest of the (possible) features in the header, many of which have no icon yet.

The order is not important. I did not want to influence the choice other than with the obvious easy path of using an existing OOui icon. That's the reason for those icons being first.

With the non-ooui icons, I wanted to present ideas potentially used to design an icon specifically for ooui. The colors of the icons have no meaning or significance in this listing.

Only these features have an icon in OOui currently:

  • Left 4. Bookmarks
  • Right 1. Alerts
  • Right 2. Notifications
  • Right 3. Watchlist
  • Right 6. User menu

The currently used icon is the first in their respective lists.

  • The icons and alternatives for Bookmarks and User menu are only for reference, these are commonly recognized as they are.
  • For the Watchlist, I found the eye icon might be more expressive, but I'm ambivalent. I'd like to get feedback from a few people.
  • I find the icons for Alerts and Notifications to be confusing. The tray icon bears no meaning for me, the Alerts are usually messages, better expressed by chat bubbles. For these, I've presented alternatives that I think might be more recognizable. I'd like to start a discussion about changing these icons for the new Vector and possibly for all skins.

These features have no icon currently:

  • Left 1. Table of contents
  • Left 2. Site navigation
  • Left 3. Article tools / editing
  • Right 4. User contributions
  • Right 5. Skin settings

I wish to start the discussion for each choice. Maybe this should be turned into an RfC, in which case I'll ask for some mentoring to do that.

Demian updated the task description. (Show Details)Feb 1 2020, 6:28 AM
Demian updated the task description. (Show Details)Feb 10 2020, 12:43 AM
Demian assigned this task to Quiddity.Feb 10 2020, 12:45 AM
Quiddity reassigned this task from Quiddity to olga.Feb 20 2020, 8:07 PM
Quiddity added a subscriber: Quiddity.
ovasileva triaged this task as Low priority.Feb 21 2020, 10:58 AM

Low priority for now as I am not sure if all of these features will eventually require icons.

ovasileva removed olga as the assignee of this task.Feb 21 2020, 10:58 AM
ovasileva added a subscriber: olga.

Low priority for now as I am not sure if all of these features will eventually require icons.

I note that the purpose of this card was to pre-seed the discussion when the time comes to choose an icon for some of these features, there's no timeline or due date for this card. I also proactively added icons for requested features that I'm unaware of whether a decision was made to implement it.

I also made this roundup so volunteers can be asked which one expresses better to them the intended meaning.

The motivating piece was the "Site navigation" (hamburger menu), particularly to avoid using the meaningless hamburger icon at all costs. A "W" or globe logo would be more meaningful and I've added icons that express directories, to give a choice. Personally I like all these options.

Note that the icons are not meant to be used in this exact form, but instead as ideas of what symbols (meaning) to communicate. I assume the designers would alter the details to fit the WM design patterns.

Demian renamed this task from Choose expressive icons for the header buttons to Alternatives for the header button icons.Fri, Mar 6, 12:13 PM

Replying specifically on the example of 2. site navigation icon alternatives proposed above, but true for all icon specific choices:
How would replacing one “meaningless” (your opinion stated in T243268#5906746) icon with another non-meaningful be beneficial?
Meaning results out of different angles, like

  • familiarity of the icon metaphor (relatively well with hamburger icon in certain applications)
  • context of the icon position in the page
  • clarity of the icon design itself
  • cultural independence or global understanding of those icons.

To oppose each of those alternatives provided in 2.:

  • “W” is at best understood as Wikipedia (it's not useful on any of our other projects where Vector will be used or any 3rd party wiki). Even if ignoring above, it would at best possible outcome result in making a user think about it being a link to the main page of Wikipedia, not about opening a menu.
  • Bulleted list: Not very different to hamburger, while the hamburger is used in a variety of web applications as main menu option (see familiarity), the bulleted list icon is not. It's mostly used in visual editing interfaces (compare GMail or Visual editor) as tool icon for inserting a bulleted list
  • Navigate: Far too complex for the targeted size, arrows might not be recognizable then. First interpretation is directed results of a search. Very unfamiliar and uncommon visual metaphor, never came across in any application on the web before.
  • Globe with question mark: Not sure what this should symbolize at all? Planet in question? Questions about the planet?
  • Globe in a number of variants: Globe is sometimes used as visual metaphor for choosing a specific language or country subsite in a global company or organization, most often in the context of localizing as in “choosing from the options in the world”. Again, similar to the W above, no clear familiarity to a menu with a menu of some site specific links
  • Sitemap variants: As the labels already states, sitemap is commonly used on the web as bound to sitemap opening links. Re-using it as sidebar icon would be confusing.

What I'd like to emphasize with this exercise above is, that selecting icons is not only a task about pure visual representation of an idea, it's about choosing on context, evaluating familiarity, distinctiveness and possibilities to educate visual metaphor of certain icons to users alongside certain design requirements.
Please also read further about our icon guidelines at https://design.wikimedia.org/style-guide/visual-style_icons.html

In my opinion the task in its current description is not providing a clear problem description, is too wide-reaching, is requesting icon discussions on elements, that are not set to use icons at all. And finally, the alternatives fail to fulfill the prerequisites of icon selection. Therefore recommending to put status on invalid.

We are aware of questions around the 'hamburger' icon metaphor and are currently discussing how to best-possibly address those.

If there are specific icons that are failing for a number of users proven by data or better proposals, tasks on those ones should be filed.

Replying specifically on the example of 2. site navigation icon alternatives proposed above, but true for all icon specific choices:
How would replacing one “meaningless” (your opinion stated in T243268#5906746) icon with another non-meaningful be beneficial?

Thanks for taking the time to evaluate the site navigation options. Mostly I agree with your points, I'm not satisfied with any of those options. I hoped this would give a designer with more creativity than I have some ideas to start with.

  • Globe with question mark: Not sure what this should symbolize at all? Planet in question? Questions about the planet?

The Noun project found that representing Wikipedia, so maybe they could better answer that question.

  • Globe in a number of variants: Globe is sometimes used as visual metaphor for choosing a specific language or country subsite in a global company or organization, most often in the context of localizing as in “choosing from the options in the world”. Again, similar to the W above, no clear familiarity to a menu with a menu of some site specific links

With the globes, I'd like to represent the WikiGlobe, which might be difficult with 2-bit graphics, that's why the 4 globe alternatives. I had Wikipedia in mind with these icons and they might not be applicable to other projects.

  • Sitemap variants: As the labels already states, sitemap is commonly used on the web as bound to sitemap opening links. Re-using it as sidebar icon would be confusing.

For me, the current sidebar is what I would imagine as the top level of a sitemap. The association comes from that. As currently in all demos and discussions I've seen the sidebar is equivalent to "site navigation", that's the icon I found to be closest in meaning.

What I'd like to emphasize with this exercise above is, that selecting icons is not only a task about pure visual representation of an idea, it's about choosing on context, evaluating familiarity, distinctiveness and possibilities to educate visual metaphor of certain icons to users alongside certain design requirements.
Please also read further about our icon guidelines at https://design.wikimedia.org/style-guide/visual-style_icons.html

Yes, we know that and have read the style guide.

In my opinion the task in its current description is not providing a clear problem description, is too wide-reaching, is requesting icon discussions on elements, that are not set to use icons at all. And finally, the alternatives fail to fulfill the prerequisites of icon selection. Therefore recommending to put status on invalid.

The reason for that is that this is not a task, but a discussion starter with a few ideas, no specific suggestions. I would not suggest using these icons, but rather some of the concepts manifested. As such I don't agree that discussing ideas would be invalid, but certainly not a pressing issue, so I'd suggest Lowest priority if you wish to somehow mark this.

If there are specific icons that are failing for a number of users proven by data or better proposals, tasks on those ones should be filed.

Ack. The Echo notifications icon was what I found particularly confusing. After a year I still find myself guessing what will be listed in one or the other Echo dropdowns. Is there any previous discussion about this icon? If there is, could you please share it?

Another icon that I'd like to highlight is the contributions icon as it was seen in a few mockups. It's represented with the list icon combined with the user icon. A combination of the history and user icon would be more meaningful, I think.
The watchlist icon can also be hard to tell apart from the "add to watchlist" icon as only its location is the difference, therefore I'd suggest combining that with a small user icon, similar to the contributions icon.
Afaict these icons are farther away on the timeline, but I can't tell how far. Is there any expectation when these will be discussed?

Demian lowered the priority of this task from Low to Lowest.Tue, Mar 10, 5:09 AM

@Demian Please see https://www.mediawiki.org/wiki/Phabricator/Help#Setting_task_priority – I think @Aklapper has already shared this with you before.
To this task, there are no actionable problems to solve, only a collection of (vague) ideas, personal preferences and icon requests for currently unplanned usages. Therefore closing this as 'invalid' seems most appropriate. I've also shared how proper requests could look like by sharing

If there are specific icons that are failing for a number of users proven by data or better proposals, tasks on those ones should be filed.

The reason for that is that this is not a task, but a discussion starter with a few ideas, no specific suggestions.

Like I've shared above,

the task in its current description is not providing a clear problem description

A discussion should start around a clear problem description, not a collection of above. It's time-intense and therefore costly to try splitting such collection up into actionable problem statements – if possible at all.

Demian added a comment.EditedTue, Mar 10, 8:19 AM

@Demian Please see https://www.mediawiki.org/wiki/Phabricator/Help#Setting_task_priority – I think @Aklapper has already shared this with you before.

No, he did not. Why would he... I hope you don't mind that I've lowered the priority, I assume you don't want it higher.

Like I've shared above,

the task in its current description is not providing a clear problem description

As I've said that's not the purpose. While there are 3 clear problems: the hamburger icon without a better alternative, the confusing Echo tray icon (probably not the concern of DIP), and the contributions icon, this ticket was intended to be a general overlook for header icons (actual and potential) and a discussion about any of those.

Therefore closing this as 'invalid' seems most appropriate.

I would say "the least". I think these decisions should be discussed at least to have some documentation. Although this content might be better-placed on-wiki, for technical and practical reasons I've created it here: the wiki is unsuitable to efficiently upload and present 50 icons from various sources and it seemed developers get more involved here.

I hoped my effort to gather quite a few options would help the discussion about what icons to use. If there is a better place for that, feel free to start a discussion on the venue and in the form you find more appropriate. Until then, unless there is an administrative need to wrap up and close the tickets related to DIP - which would be surprising at this stage of development -, I find no practical reason to close this ticket. Beaureuctratic reasons would just strengthen my impression of refusing volunteer efforts, understand how this is perceived. I agree that the "Invalid" flag is technically true (this is not a bug), but not with closing the discussion: discussions about design decisions benefit the project. That being said feel free to do what you like.

I did not realize that you're implying you wish to close this ticket... While this ticket is not that important to me, I find it unfortunate that the only discussions we have are about how to reject my contributions. Please spend some time also on my contributions that clearly benefit the project and I've been asking for your feedback for a month or more, but the most I've got was just a few short and confusing responses, some fundamental misunderstandings, and a direction to JdlRobson that resulted in him abandoning the hours of intensive work - for which I'm very grateful -, that we did together on a documentation patch in which he has shown interest. I'm looking for similar cooperation with you and continuing the work with him.

A discussion should start around a clear problem description, not a collection of above. It's time-intense and therefore costly to try splitting such collection up into actionable problem statements – if possible at all.

I assume creating 10 separate tickets for the 10 icons would have resulted in "team overload" comments, that's the reason for making 1 task. Now you find this objectionable...
If there will be a specific interest in discussing one of the icons I'll make a specific ticket for that. I was surprised that there was no interest in discussing such an important design decision as an icon choice, but I would hope its time will come. At the moment only the sidebar icon has actuality, for which there seems to be no better alternative, nor interest to discuss. Maybe 3 other icons will come up later, I assume a ticket for those would be too early now.

Thus the following oppositions to your comment:

  • The "problem" (call it the topic) is clear: discussion about the icons.
  • I've been spending time on this ticket, thus I've paid its "cost". It wasn't and won't be "time-intense" for you, however closing it would waste my effort: the cost I've paid. Feel free to spend your time on my tickets and patches that are finished solutions, requiring very little time investment from you.
  • There is no need to take actions, thus there is no "actionable problem statement". The purpose is to discuss and measure the opinions and consensus of developers. If there is a consensus, that can be turned into actions, but we aren't there yet.
  • For me it's easy to split this into individual tasks, even if you think "if possible at all". If you wish me to split a specific icon, a one-sentence request will achieve that, again, no need for lengthy discussions.
Aklapper closed this task as Declined.Tue, Mar 10, 1:16 PM

I am declining this task as I'm going to trust the designers' input, their previous research, and the existing style guidelines based on that research.
There are many aspects which are impossible to properly discuss or follow in this format, plus to me it is still lacks a clear well-defined problem definition (for example, the initial sentence talks about one icon ("hamburger icon"), but then a lot of icons are listed? Or why two times the same icon is listed under "Left 4. Bookmarks"? I don't get it).
For high-level discussions, mailing lists or wiki pages etc might be better suited venues. Thanks for your understanding.