Make tray icons more informative on network status #70

1. 
   Bosch-0 commented at 10:09 am on August 23, 2020: none

   Having tray icons that communicate more clearly the status of your bitcoin node is something I think would be a minor UX improvement. Below I’ve proposed three states.

   Solid green = Network is fully syncd with most recent block.

   Flashing green = Syncing with the Bitcoin network.

   Solid red = Network has connectivity issues and is not syncing

   Figma File

   

2. Bosch-0 added the label Feature on Aug 23, 2020
3. 
   GBKS commented at 7:08 am on August 24, 2020: none

   Like the idea. How about a blue dot for syncing since flashing might get a bit annoying. I could also see the dots be a little smaller so they don’t touch the “B”.
4. 
   Bosch-0 commented at 7:28 am on August 24, 2020: none

   Like the idea. How about a blue dot for syncing since flashing might get a bit annoying. I could also see the dots be a little smaller so they don’t touch the “B”.

   Blue seems like a bit of a random colour, how’s bout a solid yellow? Though yellow may indicate an error which wouldn’t be the case. I’ll re-upload with the dots slightly smaller thanks :)

5. 
   GBKS commented at 7:31 am on August 24, 2020: none

   I might have been thinking of blue because that’s what Dropbox issues, got used to that over the years. You can see their sync icons here.
6. 
   Bosch-0 commented at 7:35 am on August 24, 2020: none

   I like there more detailed icons, could maybe do something similar I’ll get some ideas up soon. A paused state if the user manually stops the sync is another one worth having.
7. 
   hebasto commented at 8:15 am on August 24, 2020: member

   @Bosch-0 Please note that the tray icon color depends on the network (yellow for main network, green for testnet, and blue for regtest). It seems reasonable the additional icon element would compatible with the testnet at least:
8. 
   Bosch-0 commented at 9:00 am on August 24, 2020: none

   I’ll do mockups for regtest and testnet too
9. 
   hebasto commented at 9:13 am on August 24, 2020: member

   I’ll do mockups for regtest and testnet too

   I think you could skip regtest as there is no such public network.

10. 
    Sjors commented at 12:45 pm on August 28, 2020: member

    A flashing tray icon, when no user action is required, sounds annoying. When using colors, keep in mind that red-green color-blindness is pretty common. Perhaps only change the icon when there’s a problem? E.g. only when the internet connection is otherwise fine and the user didn’t disable the network themselves, you could show some general disconnection icon:
    
11. 
    Bosch-0 commented at 1:33 pm on August 31, 2020: none

    Here is another iteration based on feedback provided.

    Also added a sync paused state as well for when the user manually pauses the sync.

    figma file

    

12. hebasto added the label Design on Mar 5, 2021
13. hebasto removed the label Feature on Mar 5, 2021
14. 
    Bosch-0 commented at 0:41 am on April 21, 2021: none

    @GBKS and myself have been working on a Bitcoin icon set that @jarolrod is looking to implement into the GUI. We have an icon designed by GBKS to represent a node which could be used for this. I kept things monochromatic for accessibility as well as most tray icons use this style so it’s more consistent in general. Two states is enough imo. If the node isn’t syncd (second image) the user can open the GUI to figure out why. Communicating all the other states in the tray like my previous designs is too complex and gets messy. Mockup below:

    

Contributors
Bosch-0 GBKS hebasto Sjors

Labels
Design