In Progress Rfp-1: Windows Wallet Ui / Ux Overhaul

Discussion in 'Requests for Proposals' started by jrick, Feb 15, 2016.

  1. 2017/12/15 - Decred v1.1.2 released! → Release Notes  → Downloads
  1. BoMBeR

    BoMBeR New Member

    Jan 17, 2016
    75
    21
    The GUI looks good. However I have to say I am not a fan of the horizontal lines. It almost feels "jailed". Plus the colors on the right side are to bright. I definitely like how the left side looks, very clean and blends well. Other than that good job, keep it up!
     
  2. ceejep

    ceejep Sr. Member
    Developer

    Dec 14, 2015
    192
    220
    This is the UI as of https://github.com/decred/Paymetheus/pull/96

    I would like feedback on how everyone feels about the organization and stylistic elements. @jrick had commented that the title font may be too large and should be reduced. He also had concerns about right versus center justified for the title text. How do you feel about it?
     

    Attached Files:

    • 1.png
      1.png
      File size:
      35.1 KB
      Views:
      39
    • 2.png
      2.png
      File size:
      97.9 KB
      Views:
      107
    • 3.png
      3.png
      File size:
      44.9 KB
      Views:
      39
    • 4.png
      4.png
      File size:
      20.2 KB
      Views:
      36
    • 5.png
      5.png
      File size:
      55.4 KB
      Views:
      37
    LedgerNano and chappjc like this.
  3. ceejep

    ceejep Sr. Member
    Developer

    Dec 14, 2015
    192
    220
    (2/2)
     

    Attached Files:

    • 6.png
      6.png
      File size:
      26.6 KB
      Views:
      26
    • 7.png
      7.png
      File size:
      30.8 KB
      Views:
      26
    LedgerNano likes this.
  4. adam2312

    adam2312 Jr. Member

    Jan 11, 2016
    118
    43
    Male
    Title font appears good to me, perhaps just 2 less in size.
    On 2.png, it looks busy to me. Suggest moving the Warning immediately above the continue button (below the seed), then Centering but justified the "Create a new wallet" and associated descriptive paragraph and so on. For some reason, I like the Warning paragraph not justified.
    Same with subsequent images: suggest Centered and justified.
    Just suggestions. Thank you for asking!
    Great work.
     
  5. ceejep

    ceejep Sr. Member
    Developer

    Dec 14, 2015
    192
    220
    Thanks for your response. After feedback from the other devs, I have further refined the views of the start up screens for simplicity.

    Restore from seed has been removed for now because it is not yet supported.
     

    Attached Files:

    • 1.png
      1.png
      File size:
      34.1 KB
      Views:
      32
    • 2.png
      2.png
      File size:
      85.6 KB
      Views:
      30
    • 3.png
      3.png
      File size:
      23 KB
      Views:
      28
    • 4.png
      4.png
      File size:
      45.4 KB
      Views:
      28
    • 5.png
      5.png
      File size:
      39.1 KB
      Views:
      29
    Alexoz, BoMBeR, chappjc and 1 other person like this.
  6. BoMBeR

    BoMBeR New Member

    Jan 17, 2016
    75
    21
    Looks great, keep up the good work.
     
  7. linnutee

    linnutee Jr. Member
    Designer

    Jan 17, 2016
    14
    30
    Hi,

    UI Designer and author here, just noticed these and here's a few comments to help out.

    For any new views are generated, its best for the consistency to stick to the common components/styles that have been used. Some of those such as type styles, colors and button types are listed in the Decred - UI Components.png

    Another important factor to consider is the spacing/padding logic. If you check the layouts with spec's added to them, those are listed there. The main steps are for example 30 px below an element and 20 px above the element + also 10 px and 40 px for smaller and larger steps if needed. The appropriate spacing/padding for every element is neccesary as elsewise things would get cluttered, loose rhythm and visual hierarchy.

    1.png is almost fine, would just need a bit of extra padding above/below the texts + I would recommend a white flat button instead of the floating one (for selecting).

    2,3,5.png same deal with the spacing. For 2.png I would use an active color #2ed8a3 for the notification "Write down the following …" and consider using the monospaced font for the word list for the clearest legibility.

    4.png looks a bit tricky, to clear it up I would recommend having two columns there. This way the fields can be shorter, as they don't have to be so long there. The left column could be the mandatory private passphrase + right one optional one and common button to continue centred below. The field for public data encryption should be disabled before the checkbox is ticked. encr public data.png for quick example.
     

    Attached Files:

    jy-p, adam2312 and BoMBeR like this.
  8. ceejep

    ceejep Sr. Member
    Developer

    Dec 14, 2015
    192
    220
    Thank you for the well thought out feedback. I completely agree with spacing and color harmonization. Unfortunately, the views I began with were cumbersome. Some things were in grids, some things were in stack panels, nothing appeared to have been designed very consistently. For the initial alpha releases, we're trying to ensure the GUI is simple and workable for the end user. In subsequent versions we will work on ensuring more consistent design and overhaul of the initial concepts. I think for the "encrypt wallet" panel (#4), it may be best to split it into two screens, with the second screen allowing you to skip the feature if you'd like to. I think this is more similar to general Windows Wizard screen UIs the user may be familiar with.

    As the GUI has been taking so long, we're working hard at this phase to just get it out to users and working. Please forgive some aesthetic inconsistency, we hope to have it better worked out in future versions and will keep your advice in mind.
     
    jy-p likes this.
  9. ceejep

    ceejep Sr. Member
    Developer

    Dec 14, 2015
    192
    220

    Attached Files:

    • 1.png
      1.png
      File size:
      93.4 KB
      Views:
      17
    • 2f.png
      2f.png
      File size:
      69.2 KB
      Views:
      15
  10. BoMBeR

    BoMBeR New Member

    Jan 17, 2016
    75
    21
    This looks like second nature to you. As I've stated in post in the past I'd love to be able to get into the whole programming and design aspect of things. However when i see such detailed and knowledgeable post like this it makes me realize how little I actually know and how deep the knowledge goes to be good at it.
     
  11. jinlei

    jinlei New Member
    Translator (中文)

    Jan 7, 2016
    55
    20
    Male
    great work
     
  12. root

    root Member

    Feb 3, 2016
    381
    76
    I tested the wallet, looks nice and works fine :) I smell some monies :)

    upload_2016-7-22_18-51-41.png

    upload_2016-7-22_18-51-53.png

    upload_2016-7-22_18-52-10.png

    upload_2016-7-22_18-52-35.png

    upload_2016-7-22_18-52-50.png
     
    chappjc likes this.
  13. jrick

    jrick Member
    Developer

    Jan 4, 2016
    88
    81
    Male
    @root Is that thousand's place comma separator in the block count correct in your locale? I'm guessing not and should be something else (period?) since commas are being used as the decimal separator for amounts.
     
  14. root

    root Member

    Feb 3, 2016
    381
    76
    Yes, you are right. I am not sure about proper thousands separator here in Europe, space or nothing probably.

    Found a small glitch - as ',' is decimal separator here, If I delete the amount to send, I am not able to enter ',' but if I do not delete it,I am able to send decimal amount.
     
  15. jrick

    jrick Member
    Developer

    Jan 4, 2016
    88
    81
    Male
    Thanks, I added an issue for that amount entry bug on the issue tracker: https://github.com/decred/Paymetheus/issues/130

    Feel free to add more issues if you run into any of them. Reporting them on github helps us keep track of them all and plan fixes for them in later releases.
     
  16. jrick

    jrick Member
    Developer

    Jan 4, 2016
    88
    81
    Male
  17. root

    root Member

    Feb 3, 2016
    381
    76
    seems fine with CZE locale, blocks - thousands separated by space, sent amount can be deleted and comma (CZE decimal separator) can be typed. Github comment added.

    Great work @jrick !
     
    chappjc likes this.
  18. LedgerNano

    LedgerNano New Member

    Jul 4, 2016
    9
    10
    Male
    EUA
    so, this rfp is done?
     

Share This Page