Give primary action items more visual weight #24

issue statusquont opened this issue on July 2, 2020
  1. statusquont commented at 5:56 PM on July 2, 2020: none

    The Receive panel indicates that "all fields are optional" and if that is indeed the case, there is no clear visual cues what the correct action is -- it's to click the 'Create New Receiving Address' button.

    Suggestion: give primary action buttons an orange background.

    image

    Here's an example from GitHub settings where a UI has multiple actions, but they visually guide the user to the action they should be taking with a colored button.

    image

  2. Sjors commented at 6:46 PM on July 2, 2020: member

    More emphasis on the primary action makes sense. I think there's a QT standard way of marking buttons as such: <img width="983" alt="Schermafbeelding 2020-07-02 om 20 44 50" src="https://user-images.githubusercontent.com/10217/86397861-ec19e580-bca4-11ea-8ee3-935304420f03.png">

    <img width="360" alt="Schermafbeelding 2020-07-02 om 20 45 52" src="https://user-images.githubusercontent.com/10217/86397929-0eabfe80-bca5-11ea-95b2-e20fa33a2ed7.png">

  3. hebasto commented at 8:25 AM on July 11, 2020: member

    @Sjors Unfortunately, on Linux it looks not such emphasized:

    Screenshot from 2020-07-11 11-22-27

  4. Sjors commented at 6:36 AM on July 17, 2020: member

    I see a subtle blue line around Hide. Can you show a screen with more than 1 button? Doing non-native styling can get real ugly real fast in my experience.

  5. hebasto commented at 9:53 AM on July 17, 2020: member

    @Sjors

    I see a subtle blue line around Hide. Can you show a screen with more than 1 button?

    Qt 5.9.8 (static): Screenshot from 2020-07-17 12-50-30

    Qt 5.12.8 (dynamic): Screenshot from 2020-07-17 12-35-52

    Doing non-native styling can get real ugly real fast in my experience.

    Agree.

  6. Sjors commented at 2:45 PM on July 17, 2020: member

    I think these are both clear enough, the static build (which we ship) is the most clear.

    So in the original example, maybe we just need to mark the Receive button as primary?

  7. hebasto commented at 3:09 PM on July 17, 2020: member

    I think these are both clear enough, the static build (which we ship) is the most clear.

    So in the original example, maybe we just need to mark the Receive button as primary?

    Actually, in a such way not the "primary action" button highlighted rather the focused one.

  8. hebasto commented at 8:22 AM on July 19, 2020: member

    @statusquont Mind providing an example among desktop widget-based applications to find the solution without non-native styling?

  9. statusquont commented at 1:44 AM on July 20, 2020: none

    I'm not sure if I understand what you're asking for, but hopefully this helps, from the GitHub Desktop application (Windows).

    image

    If I misunderstood the question please advise.

  10. hebasto commented at 8:45 AM on July 21, 2020: member

    Concept ACK.

    To implement this feature into the code (say, "primary push button") some design decisions are required to make it harmonized with the used styles on all supported platforms.

    It could be made as artworks, e.g., https://doc.qt.io/qt-5/gallery.html

    Doing non-native styling can get real ugly real fast in my experience.

    That is it what we should avoid for sure.

  11. statusquont commented at 4:56 PM on July 21, 2020: none

    Yeah, that makes a lot of sense. IMO a good design should be there to help a user make decisions, but other than that, get out of the way and don't cause distraction.

    I'm not too familiar with QT, but I would presume (and hope) that efforts have been made in that project to consider usability for all types of users (including vision impaired for example) and design the UI accordingly. So leaning on QT's prior work makes a lot of sense. In that regard, I'll retract my previous suggestion of "give primary action buttons an orange background" since that seems to be outside of the scope at this time. Perhaps it can be revisited at a later time as the Bitcoin Design working group make further progress to establish a set of visual standards.

    To wrap this issue up, I'd just ask whether or not the 'Create New Receiving Address' button is inheriting the default button push properties from QT in order to help the user make a decision? https://doc.qt.io/qt-5/qpushbutton.html#default-prop

    I'm not sure where/how to check the code to answer this question myself.

  12. hebasto commented at 6:37 PM on July 21, 2020: member

    @statusquont

    To wrap this issue up, I'd just ask whether or not the 'Create New Receiving Address' button is inheriting the default button push properties from QT in order to help the user make a decision? https://doc.qt.io/qt-5/qpushbutton.html#default-prop

    I'm not sure where/how to check the code to answer this question myself.

    Mind testing #39 ?

  13. statusquont commented at 6:43 PM on July 21, 2020: none

    Looks improved, slightly, but still an improvement nonetheless! 👍

  14. statusquont commented at 6:46 PM on July 21, 2020: none

    Not sure of proper protocol here. Do I close this issue? Or does it auto-close once #39 gets closed?

  15. hebasto commented at 6:47 PM on July 21, 2020: member

    Not sure of proper protocol here. Do I close this issue? Or does it auto-close once #39 gets closed?

    The latter one :)

  16. MarcoFalke closed this on Aug 28, 2020

  17. fanquake referenced this in commit 2a55a0ed30 on Nov 20, 2020
  18. jonasschnelli referenced this in commit c33662a0ea on Dec 2, 2020
  19. MarcoFalke referenced this in commit bce09da122 on Apr 28, 2021
  20. MarcoFalke referenced this in commit c857148636 on May 15, 2021
  21. bitcoin-core locked this on Feb 15, 2022

github-metadata-mirror

This is a metadata mirror of the GitHub repository bitcoin-core/gui. This site is not affiliated with GitHub. Content is generated from a GitHub metadata backup.
generated: 2026-04-14 21:20 UTC

This site is hosted by @0xB10C
More mirrored repositories can be found on mirror.b10c.me