Page MenuHomePhabricator

Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in Design Style Guide & OOUI
Closed, ResolvedPublic

Description

The structured data team is looking to add an icon to help distinguish audio files in the new media search. We currently don't have anything in the icon library that quite meets our needs and would like to suggest an addition.

Example of the icon in use (the complete layout is not finalized but we expect to use the audio icon in this way):

Example of the icon in our icon template layout:

Icon files

*Updated SVGs (LTR&RTL and SVGO optimized)*



Event Timeline

mwilliams created this task.Aug 7 2020, 5:20 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 7 2020, 5:20 PM

+1 we could do with a video icon as well :)

Good point @Esanders, we were planning on using the "play" button for now but maybe there is something better. Happy to think on that.

Iniquity added a subscriber: Iniquity.

Wow! Yes, please :) I need it for VideoJS player. All native icons need to be replaced T258584: Align VideoJS player to Wikimedia UI design. It is possible to create an icon in three versions: full volume, half volume, muted?

Volker_E added a comment.EditedAug 10 2020, 3:01 PM

@mwilliams If we add additional icons (later) for it in place of volume buttons, this would be the equivalent of audioUp/volumeUp? Asking for naming agreeement.
Note https://material.io/resources/icons/?style=baseline

  • audioMute/volumeMute
  • audioDown/volumeDown
  • audioUp/volumeUp [this one]
  • audioOff/volumeOff with a line through

@Volker_E Following that naming scheme makes sense to me as it seems like we will probably be adding additional related icons in the future for the player. Between audio and volume, I think volume is probably a more accurate descriptor even if it's a bit odd and unrelated in my use case.

Volker_E renamed this task from Audio Icon to Add 'volumeUp' icon in OOUI.Aug 11 2020, 12:45 PM

From a quick checkin with @Ladsgroup we're gonna mirror the icon in RTL languages. Compare for example
https://fa.wikipedia.org/wiki/%D8%A7%D9%84%DA%AF%D9%88:%D8%AA%D9%84%D9%81%D8%B8

@mwilliams I was a bit confused when I've opened the document and it was 20x16px document boundaries. Although you've shared the icon on the icon template correctly.
The canvas is always unchanged 20x20px to make the icon positioning in implementation more predictable.

Change 619473 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] icons: Add 'volumeUp'

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

Volker_E updated the task description. (Show Details)Aug 11 2020, 2:06 PM
Volker_E triaged this task as Medium priority.Aug 11 2020, 2:47 PM
Volker_E moved this task from Backlog to OOUI-0.40.3 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.40.3); removed OOUI.

Change 619473 merged by jenkins-bot:
[oojs/ui@master] icons: Add 'volumeUp'

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

Change 621711 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.40.2

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

It seems odd to have a "volumeUp" icon without a "volumeDown" one. Without other icons nearby, "volumeUp" just looks like "volume on". For volumeUp/Down icons that are less ambiguous you could use this style which I have on my keyboard:

Also the only use case so far for "volumeUp" is not "volume up" which makes the choice of name seem strange.

RHo added a comment.Aug 21 2020, 1:09 PM

It seems odd to have a "volumeUp" icon without a "volumeDown" one. Without other icons nearby, "volumeUp" just looks like "volume on". For volumeUp/Down icons that are less ambiguous you could use this style which I have on my keyboard:

My preference is for the curved sound wave lines to indicate up and down since they can be also be used to denote maximum and minimum values, like when used on opposite ends of a volume slider control.
And actually, the volumeUp when used on its own in certain contexts serves to indicate volume/audio. So, naming conventions aside, it is comparatively more versatile (than volume +), and pretty widely used.

Change 621989 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[oojs/ui@master] Fix the removing of windows being broken by this scoping issue

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

Change 621989 merged by jenkins-bot:
[oojs/ui@master] Follow-up I669cfeeb: Fix the removing of windows being broken by this scoping issue

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

Volker_E added a comment.EditedAug 24 2020, 1:45 PM

OOUI v0.40.2 got reverted due to an unrelated breakage. We'll plan to do a v0.40.3 release tomorrow which will then be the release containing 'volumeUp' icon.

Spent some time on what volumeDown and volumeOff could look like...

Contemplated having separate icons for off and mute like Material Design does, but couldn't come up with a use case for that. Off and mute should mean the same thing, correct? I don't feel like I have all the context on the new player design to be 100% though.

@Volker_E Still having some weird artboard sizing issues and some general svg confusion. Attaching the two new svg's in their current state here, maybe you can help me out here. Feel free to message me if these are way off and we can work through it together.

Change 623824 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.40.3

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

Change 621711 abandoned by Reedy:
[mediawiki/core@master] Update OOUI to v0.40.2

Reason:
Replaced by https://gerrit.wikimedia.org/r/c/mediawiki/core/ /623824

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

Change 623824 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.40.3

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

Volker_E moved this task from OOUI-0.40.3 to Doing on the OOUI board.Sep 9 2020, 2:38 PM
Volker_E edited projects, added OOUI; removed OOUI (OOUI-0.40.3).
Volker_E renamed this task from Add 'volumeUp' icon in OOUI to Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in OOUI.Oct 7 2020, 2:30 PM

Change 632770 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] icons: Add 'volumeDown*' and 'volumeOff*' and optimize 'volumeUp' further

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

Change 632770 merged by jenkins-bot:
[oojs/ui@master] icons: Add 'volumeDown*' and 'volumeOff*' and optimize 'volumeUp' further

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

Change 632805 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.40.4

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

Change 632805 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.40.4

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

Can people upload it in commons? I tried uploading it but it's not working due to the libsvg bug (T193352#5984544)

@Ladsgroup What would that be in order to work? A less optimized version?

Sorry, just saw T193352#5984600 so actually a libsvg bug. Not sure if investing in workarounds is worth the effort.

Volker_E renamed this task from Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in OOUI to Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in Design Style Guide & OOUI.Oct 8 2020, 1:35 PM
Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)

@mwilliams Last bit missing is to update the Design Style Guide's Illustrator collection with those files (correctly named and preferably source files).