-
Notifications
You must be signed in to change notification settings - Fork 406
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
tray icon should bear some visual similarity to desktop icon #595
Comments
@matthewjameslord Thanks for these. 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. |
Maybe use a |
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. |
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. |
This comment was marked as off-topic.
This comment was marked as off-topic.
@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) |
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. |
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. |
Maybe use three dots |
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. |
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. |
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. |
Hi all, just checking here if there is anything required from me for this ticket. Thanks |
@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. |
@matthewjameslord This is in my todo list, but have been busy.. |
@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. 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.
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.
|
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! |
@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). |
@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. |
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) Set 2: #595 (comment) |
@selvanair here is the second set that use the red triangle and yellow dot at 256 x 256 in svg |
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. |
@grzegorz-gutowski I'll follow up on this internally at OpenVPN Inc. We'll figure out something. |
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)
The text was updated successfully, but these errors were encountered: