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.

[TinCanTech]

Social correctness:

• User proposes the idea that OpenVPN use a distinct icon.
• tct motions a second
• cron2 does too

I then offered some ideas.

Please delete this comment as your conscience permits.

[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.