tray icon should bear some visual similarity to desktop icon

[matthewjameslord]

Hey there,

I wanted to follow up on the Trac ticket #1276 regarding the tray icon concept

I'm not TCT! I'm an employee at OpenVPN.

I've attached an overview of the revised design, which includes five states: Idle, Idle with error, Connecting, Active, and Active with error.

You can also view these in Figma at the link provided.
https://www.figma.com/file/r5TAXjYHshNwFjoFltbm22/System-Tray-Icon?node-id=0%3A1&t=QqM1gSdEpphhDHYN-1

In addition, I've included zips containing the icons in PNG and SVG formats for all sizes.

SysTrayIcons.zip
SysTrayIconsPNG.zip

Please take a look and let me know your thoughts on how we should proceed from here.

Thanks,
Matt (OpenVPN employee)

[selvanair]

@matthewjameslord Thanks for these.
A minor suggestion: what about moving the red dot to top right corner like overlays on icons for messages, email etc. used in iOS/android? While I get the idea of adding the dot at the end as a moniker for "broken" connection, an overlay at the top may be better at drawing user's attention and more familiar?

Also, the solid dot could be replaced by a white "X" in red background? Not sure whether that would look too busy in a smallish tray icon.

[schwabe]

Maybe use a ⚠️ sign or similar instead of the red dot?

[selvanair]

A familiar warning sign like that (or error sign) at top left or right corner would be good. Wonder whether we can do this decoration as an overlay icon at run time... should be possible with taskbar icons, not sure of notification icons which are too small to start with.

[fghzxm]

I personally would like to be able to distinguish all different states without relying on color. The "Connecting" and "Active" states right now could be particularly problematic if you're colorblind.

[matthewjameslord]

The dot at the bottom left is a familiar signal to alert user to problem in the system tray. If you use Slack, you will see they use the same concept with notifications and states:

States would also be available by hovering over the icon in the tray. Referring to slack once more:

We have to consider as well, the limitations of a tray icon with regards to visual design and sizing of the icons themselves.

Having said that, I have added the warning icon to the designs here and a new connecting state, and this looks like an improvement to me. So thanks for the feedback.

Please review and let me know what you think, and if approved i'll send over a new zip file with all of the sizes again. Thanks.

[cron2]

@selvanair what do you think? Being colour-impaired I find the idea of not relying on colours interesting, though I'm not sure if the "warning!" and "connecting" symbols are clear enough in a tray icon (so maybe the additional symbols need to be bigger)

[dsommers]

Thanks a lot @matthewjameslord!

I'm no Windows user, but I might pick up these icons in the OpenVPN 3 Linux project at some point. I like the last set of icons, but I also fear the "warning" sign is too small. Perhaps that could over 50-60% of the OpenVPN Icon?

For the "Connecting" set, perhaps the OpenVPN logo which is grey could have a tone fade from the greyish to the colour? Or that the outer "circle" is partially coloured? Or something along those lines. Just to give an impression that the state is going to change.

[novaflash]

I also think the warning triangle and the progress circle thingee can be a bit larger. I am curious about the progress circle thingee - will/can that animate/spin? That might also address dsommers concern about giving the impression state is going to change.

[schwabe]

Maybe use three dots ... in the bottom of the icon for progress instead of the circle?

[selvanair]

If I were to pick from these two sets, it would be the second set but the one for "in progress" needs to be improved as others have said --- the circle too small, hard to see even for non-colour impaired.

In general, increasing the size of the red triangle and the yellow circle or replacing the latter by three dots as Arne suggested would help. The dots have to be very clear though. At this point I'm no longer keen on having the decoration at top right. Top, or bottom, whatever looks clear is fine by me.

That said, many users are by now familiar with the current icons which I find very crisp and clear --- though may be a challenge for colour-impaired. That's why I have not shown much enthusiasm for changing these icons. But, if having an icon that resembles the desktop icon is important, looks like we are getting there.

[matthewjameslord]

My apologies for the delay in getting back to this thread

Those were great suggestions, and I agree with all of them.

If these adjustments are acceptable, there are zipped files of both SVGs and PNGs included.

To improve the readability of the logo, I have relocated the warning triangle to the bottom right of the icon. I believe this arrangement works well, especially since the loading dots will also be located in that same area.

Thank you for your feedback and collaboration on this. I am happy to make any further revisions if necessary.

png02082023.zip
svg02082023.zip

[schwabe]

I like the new design very much. But I think the three dots placment might be a bit unfortunate. If you make it black and white
, it is a bit more obvious. But maybe I am overreacting here and it is fine.

[fghzxm]

This definitely looks like a huge improvement over the initial draft. One thing I can still think of that may enhance the legibility further is to add a bit of outlining to the icons. (I'm not a visual designer and my ideas could be totally wrong.)

The aforementioned Slack icon has white body color, but dark-shaded outlines so that it looks good even on a light-themed taskbar.

The new icons have both light- and dark-colored parts, so I'm not sure which color we should use for the outline; maybe dark so that the outer "tunnel" part (which I perceive as the most outstanding part of the OpenVPN icon, YMMV) is emphasized. The warning sign and the ellipsis could also use some outlining so that they stand out even more.

[matthewjameslord]

Hi all, just checking here if there is anything required from me for this ticket. Thanks

[dsommers]

@matthewjameslord Did you see the comment from @schwabe? #595 (comment)

Maybe just move the dots to the upper half of the space, and it would be good enough?

Also, having more high-res (64x64, 128x128, 256x256) and SVG based icons would be beneficial too. With SVG, implementers could fix higher scale icons themselves too.

[selvanair]

@matthewjameslord This is in my todo list, but have been busy..
We need some changes to handle the "active error" state (currently the GUi has no icon for it), and I also wanted some logic changes for the way states are represented when there are multiple connections.
That said, we could just swap the icons and do other improvements later..

[selvanair]

@matthewjameslord Some of these icons seems to have a "odd" size: (17x17, 17x16, 25x24 etc -- see the file listing at the bottom of this comment). Am I doing something wrong?

A couple of other things:

Sizes: although Windows taskbar notification icons are 16x16 at 100% resolution it would be good to cater for 125%, 150% and 200% scale factors -- that would need 32 px ones too. Our current tray icons have 16, 20, 24 and 32 px versions. Even higher-res one's as @dsommers suggested may make it future-proof. Or just provide 256x256 and we can scale down if that would look okay.
Also see https://learn.microsoft.com/en-us/windows/apps/design/style/iconography/app-icon-construction (especially, the section Icon sizes for win32)

Boundingbox: I see more than a few pixels are wasted around the icons -- a tighter bounding box would help. For example, the original application icon is on the left, the new "Active" icon which resembles it is at right (scaled to same size) -- both with a jarring green background to show the boundingbox.

Current application icon	New "Active" icon scaled to same size

Ignore the low quality of the one on right as its scaled up. Also, to be precise, the one on the left is 48x48 pixels, one on right is 50x48 because of the "odd" size issue mentioned above. But the wasted space is more than those 2 pixels and is at top and bottom too.

$ file *.png
Systray-Icon-Active-16px.png:       PNG image data, 16 x 16, 8-bit colormap, non-interlaced
Systray-Icon-Active-20px.png:       PNG image data, 21 x 20, 8-bit colormap, non-interlaced
Systray-Icon-Active-24px.png:       PNG image data, 25 x 24, 8-bit colormap, non-interlaced
Systray-Icon-Active-Error-16px.png: PNG image data, 17 x 16, 8-bit colormap, non-interlaced
Systray-Icon-Active-Error-20px.png: PNG image data, 21 x 20, 8-bit colormap, non-interlaced
Systray-Icon-Active-Error-24px.png: PNG image data, 25 x 24, 8-bit colormap, non-interlaced
Systray-Icon-Connecting-16px.png:   PNG image data, 17 x 17, 8-bit colormap, non-interlaced
Systray-Icon-Connecting-20px.png:   PNG image data, 21 x 22, 8-bit colormap, non-interlaced
Systray-Icon-Connecting-24px.png:   PNG image data, 25 x 26, 8-bit colormap, non-interlaced
Systray-Icon-Idle--16px.png:        PNG image data, 16 x 16, 8-bit colormap, non-interlaced
Systray-Icon-Idle--20px.png:        PNG image data, 21 x 20, 8-bit colormap, non-interlaced
Systray-Icon-Idle--24px.png:        PNG image data, 25 x 24, 8-bit colormap, non-interlaced
Systray-Icon-Idle-Error-16px.png:   PNG image data, 16 x 17, 8-bit colormap, non-interlaced
Systray-Icon-Idle-Error-20px.png:   PNG image data, 21 x 21, 8-bit colormap, non-interlaced
Systray-Icon-Idle-Error-24px.png:   PNG image data, 25 x 24, 8-bit colormap, non-interlaced

[matthewjameslord]

Here are the icons all at 256px for you to scale down as necessary. I'm unsure how all of those ended up different sizes, they were exported correct, but hopefully having these at a larger scale will solve the issue here.

Thanks and let me know if these are going to work for you so we can close this ticket out!

[selvanair]

@matthewjameslord How come these use red dots instead of the red triangle with exclamation and the orange ellipsis (...) at the bottom that we settled for?

(Please keep this issue open until we have an implementation ready for release).

[matthewjameslord]

@selvanair the red dot is easier to read as a status when the icon is small like this. Slack, Adobe etc, all employ a similar technique.

However, if the triangle is preferred by everyone, I can send a revision over, please let me know.

Thanks.

[selvanair]

It appeared the general consensus was to use the second set which used red triangle and yellow dots.

Anyway, the images above are 257x256 (1 pixel off?) -- could you please supply the svg files of both designs at, say nominally 256 pixels? Then I can easily edit the bounding boxes if needed. Also, we want to include svg files in the repo as source of the icons, even if only binary ICO files will be embedded in the executable.

If anyone has strong opinion on this, please comment. We now have two designs:

Set 1: #595 (comment)
idle: grey
connecting: pale yellow
connected: orange
connected with errors: orange with red dot

Set 2: #595 (comment)
idle: grey
connecting: grey with yellow dots
connected: orange
connected with errors: orange with exclamation in red triangle

[matthewjameslord]

@selvanair here is the second set that use the red triangle and yellow dot at 256 x 256 in svg

[grzegorz-gutowski]

As @dsommers suggested in Issue 2, I have used this set of icons in my simple GTK indicator application that controls openvpn3-linux application openvpn3-indicator.
I wanted to let you know and ask how I should mention this in my project.

[dsommers]

@grzegorz-gutowski I'll follow up on this internally at OpenVPN Inc. We'll figure out something.