Improve symbolism for off and muted status icon
ClosedPublic

Authored by trickyricky26 on Nov 28 2018, 3:37 PM.

Details

Summary

BUG: 398975

FIXED-IN: 5.53

Use a strikethrough version of a neutral icon for *-off icons and a red circle with a diagonal line for *-muted icons. Also add 22px audio-{on,off,ready} while we're at it as well as reduce opacity of inactive sound waves to match Breeze Plasma theme.

Test Plan

Diff Detail

Repository
R266 Breeze Icons
Branch
streamline-muted-off (branched from master)
Lint
No Linters Available
Unit
No Unit Test Coverage
Build Status
Buildable 5476
Build 5494: arc lint + arc unit
trickyricky26 created this revision.Nov 28 2018, 3:37 PM
Restricted Application added a project: Frameworks. · View Herald TranscriptNov 28 2018, 3:37 PM
Restricted Application added a subscriber: kde-frameworks-devel. · View Herald Transcript
trickyricky26 requested review of this revision.Nov 28 2018, 3:37 PM
trickyricky26 edited the summary of this revision. (Show Details)Nov 28 2018, 3:39 PM
trickyricky26 edited the test plan for this revision. (Show Details)
trickyricky26 added a reviewer: VDG.

Oh jeez, this patch replaces some icons with symlinks which makes Phabricator unable to apply the patch. :/

I changed the symlinks to point from the off icons to the muted icons; but I could reverse that.

Before, the symlinks pointed from the muted icons to the off icons, except for audio-{on;off;ready} icons, which don't exist at 22px at all. Perhaps I should add audio-on and audio-ready in 22px as well.

If you reverse that such that no existing files are replaced with symlinks, it will certainly make it easier to review this patch. If necessary, after that I can do the symlink switcheroo in a separate commit to keep life sane.

trickyricky26 updated this revision to Diff 46419.EditedNov 28 2018, 4:06 PM
  • Change symlinks

Should include audio-on and audio-ready 22px icons in this patch?

the status/22/audio-volume-muted icons are still being replaced with symlinks, so I still can't apply the patch. :(

ndavis added a subscriber: ndavis.Nov 29 2018, 1:49 AM

Could a distinction between "off" and "muted" be useful? If that is true, then we should keep the red horizontal dash for muted and use a red slash through the whole icon for off/disabled. In general, I think a red X should mean "error", but we're not consistent about that yet. I also think the sound waves should be reversed on the microphone icon since microphones don't normally make noise.

Here's what the Breeze Plasma desktop theme uses for the network-wireless-off icon:

The icon above it with the red X is network-wireless-disconnected.

Here's what the Breeze Plasma desktop theme uses for the network-wireless-off icon:

That fact that slightly different versions those icons live in two places (Breeze plasma icon theme & general Breeze icon theme) is... not ideal. :/

Here's what the Breeze Plasma desktop theme uses for the network-wireless-off icon:

That fact that slightly different versions those icons live in two places (Breeze plasma icon theme & general Breeze icon theme) is... not ideal. :/

Yes, I'm working on bringing the Breeze desktop theme icons into breeze-icons, but it will take a while.

You're the hero KDE needs.

trickyricky26 added a comment.EditedNov 29 2018, 2:59 PM

I think the distinction is useful. The off icons would then look like this:


Should this style then also be applied to other "off" status icons like touchpad and camera?

Also, I've experimented with a circle with one line through it, as that represents muted better than an X which looks too much like an error:

abetts added a subscriber: abetts.Nov 29 2018, 3:03 PM

I think the distinction is useful. The off icons would then look like this:


Should this style then also be applied to other "off" status icons like touchpad and camera?

Also, I've experimented with a circle with one line through it, as that represents muted better than an X which looks too much like an error:

These look really good. My only warning to the team is that we don't add too many elements to the icon that will make it expand in area. We should strive to keeping size constraints so that we don't introduce too many elements into the icon that will make it be confusing visually.

This is really nice, at least at large size. How does it fare in the UI when it's tiny? Is the red part still distinguishable?

22px is okay imo; however I've enlarged it quite a bit for 16px:

  • Apply new off and muted styles; add 22px audio-status icons
trickyricky26 edited the summary of this revision. (Show Details)Nov 29 2018, 8:40 PM
trickyricky26 edited the test plan for this revision. (Show Details)
trickyricky26 retitled this revision from Use red X in disabled and muted status icons consistently to Improve symbolism for off and muted status icon.Nov 29 2018, 8:46 PM

This stuff looks so good. I'll formally review later. I also think we should update the HIG's icons page to officially recommend a red slash for status icons' off state and a red circle-with-a-slash-through-it for the muted state. All in favor?

Should this style then also be applied to other "off" status icons like touchpad and camera?

I think so. I'm somewhat concerned that on certain icon designs it could make them illegible, but I think we find ways to avoid that.

Also, I've experimented with a circle with one line through it, as that represents muted better than an X which looks too much like an error:

I think this is likely more intuitive than the red dash we currently use.

This stuff looks so good. I'll formally review later. I also think we should update the HIG's icons page to officially recommend a red slash for status icons' off state and a red circle-with-a-slash-through-it for the muted state. All in favor?

Aye!

ndavis added a comment.EditedNov 29 2018, 9:49 PM

I'm not sure about this, but I think increasing the size of the red "No" symbol from 6px to 8px on the 22px mute icon might be a good idea. At 6px, it just seems to lack visual weight. I think it's OK for it to stick out farther to the right than normal here. Our HIG allows icons to expand past the left and right margins sometimes.

6px "No" symbol

8px "No" symbol

ndavis added a comment.EditedNov 29 2018, 9:56 PM

Also, the semi-transparent sound waves on the audio icons in the Breeze Plasma theme use 25% opacity, not 50% opacity. I think 25% looks better anyway. They're not part of your patch right now, but I think you might as well change them so we can be done with the basic audio icons once and for all.

Also, here's the 16px muted icon with the "No" symbol moved out to the right by 1px and then 2px compared to the 16px full volume icon

1px to the right

2px to the right

trickyricky26 updated this revision to Diff 46577.EditedNov 30 2018, 4:56 PM
  • Lower opacity of inactive sound waves (25%)
  • Make muted symbol in sound icons clearer
trickyricky26 edited the summary of this revision. (Show Details)Nov 30 2018, 5:00 PM
trickyricky26 edited the test plan for this revision. (Show Details)
trickyricky26 planned changes to this revision.Nov 30 2018, 8:52 PM

I will make changes to the muted symbol in the microphone icons as well

  • enlarge muted symbol in 22px microphone-sensitivity-muted icon
trickyricky26 edited the test plan for this revision. (Show Details)Nov 30 2018, 9:09 PM
ndavis accepted this revision.Dec 1 2018, 9:30 PM

I've checked it out and it looks good!

This revision is now accepted and ready to land.Dec 1 2018, 9:30 PM
ngraham accepted this revision.Dec 2 2018, 12:45 AM

This looks great to me too! I'll land this manually since arc doesn't like patches that change symlinks to files.

I notice that there are bunch of action icons that now differ subtly from these. We can probably make them symlinks to the nice new status icons. But that's material for another patch. :) There's plenty of time anyway since this is going into Frameworks 5.54.

This revision was automatically updated to reflect the committed changes.