New Icons for Console Commands and Responses #270

1. 
   jarolrod commented at 2:51 am on April 5, 2021: member

   Currently, the RPC Console uses the Send Bitcoin and Receive Bitcoin icons for commands and responses.

   

   Two issues with this:

   1) Non-Optimal UX

   It’s non-optimal, in my opinion, that the icons used for signaling a Send Bitcoin or Receive Bitcoin are recycled elsewhere. These icons should be reserved and not used anywhere else. I propose we get/design a new icon for use in the RPC Console to signal commands and responses.

   Maybe we can use the < and > symbols like so:

   022:26:21 < getblockcount
   122:26:21 > 1970004
   

   2) Icons are used in the wrong order

   The Receive Bitcoin icon is used when you input a command and the Send Bitcoin icon is used when you receive a response. This signals that the icons are employed through the framing of the RPC Console’s POV, not the users.

   We should reframe the POV to be user-oriented.

   • a) We stick with the Send Bitcoin & Receive Bitcoin Icons When you input a command, the Send Bitcoin icon should show alongside the command. When you receive a response, the Receive Bitcoin icon should show alongside the response.

   • b) We use a new Icon/Symbol The new Icon or symbol should keep this POV framing in mind. A command input should be shown with a Send icon/symbol. A received response should be shown with a Receive icon/symbol.

2. jarolrod added the label Feature on Apr 5, 2021
3. 
   Bosch-0 commented at 2:37 am on April 6, 2021: none

   100% agree with this, I think option b is the best route. @GBKS and I have been working on a Bitcoin Icon set that I am interested in using in future core GUI / Website designs. The icon set can be found on GitHub as well as Figma (for most up to date icons / WIP).

   The set has chevrons (<, >) that could be used for console commands. Though as chevrons may be used elsewhere I think it would be best to design a new icon to be used in the console. Below is a quick mockup using a console icon that I would like to include in the above set. I think a single icon could be used for input and output can be left blank instead of showing a icon. Having it blank is more clear that the input is related to the output as the two chevrons are so similar (just inverted horizontally), so it can be hard to distinguish at a quick glance. It also results in less visual clutter. Furthermore, this icon is quite ubiquitous in representing consoles and would be more relatable to people than the current icons or just simply using chevrons.

   

4. 
   jarolrod commented at 2:46 pm on April 6, 2021: member

   @Bosch-0 I like the icon you propose for the console. Ping me when it’s included in the Bitcoin-Icons repo. Nice work on the Icons, I like them!
5. 
   Bosch-0 commented at 3:15 am on April 8, 2021: none

   Console icon is now in the set: https://github.com/BitcoinDesign/Bitcoin-Icons/blob/main/svg/filled/console.svg

   Feel free to use any other icons / request icons you’d like made :)

6. 
   jarolrod commented at 7:26 pm on April 8, 2021: member

   @Bosch-0 I’ve gone ahead and applied this to a patch here: https://github.com/jarolrod/gui/tree/new-console-icon

   Below is a screenshot of it in action:

   Here’s what I think we also need:

   • The response icon does have a place, and I think we should maintain one. Something like this is good:

   • We currently use the Send Bitcoin icon for console error. So, we need an error icon. I could re-use the remove icon which has an x in it. Let me know what you think.

7. hebasto removed the label Feature on Apr 10, 2021
8. hebasto added the label Design on Apr 10, 2021
9. 
   hebasto commented at 7:47 am on April 10, 2021: member

   Concept ACK on not using the tx_input.png and tx_output.png icons in the RPC console.
10. 
    Bosch-0 commented at 2:59 am on April 27, 2021: none

    For a cleaner UI I still think having no response icon is better. The red font is telling enough that an error occurred.

    

11. 
    jarolrod commented at 6:44 pm on May 3, 2021: member

    @Bosch-0 I’m leaning towards having the icon you’ve proposed be used exclusively for the console prompt

    Can you please design the following icons so we can see how it looks integrated:

    Console Input	Console Output

12. 
    Bosch-0 commented at 1:16 am on May 4, 2021: none

    I still think those icons look too ambigious, though happy to make them to try. Another suggestion could be to use the arrow icons with 45 degree tilts like so:

    

13. 
    GBKS commented at 6:48 am on May 6, 2021: none

    My suggestion would be to not use icons, but text color to differentiate between user input and console output. The icons just feel a bit foreign in context and stand out visually too much.
14. 
    hebasto commented at 7:15 am on May 6, 2021: member

    @GBKS

    Thanks for sharing your vision!

    My suggestion would be to not use icons, but text color to differentiate between user input and console output. The icons just feel a bit foreign in context and stand out visually too much.

    1. Is it acceptable for color-blind people?
    2. As we are striving to support dark mode, could you provide “light” and “dark” color schemes to be putting in the source code?
15. 
    GBKS commented at 11:38 am on May 6, 2021: none

    @hebasto good question about accessibility. Are you aware how other Terminals and/or development tools handle this? There is probably no one good answer, as there are different types of color-blindness.

    If you want to have a symbol to indicate user input vs. console output, why not keep it text-based, like in the example below? It uses the “>” character to indicate user input, to match the icon next to the input field.

    For light and dark modes, are you looking for colors just for the console or the whole application?

16. 
    hebasto commented at 6:49 am on May 10, 2021: member

    @GBKS

    For light and dark modes, are you looking for colors just for the console or the whole application?

    The former for now.

Contributors
jarolrod Bosch-0 hebasto GBKS

Labels
Design