UI & Wording Feedback

[julianbauer]

General

• Headline line-height is wrong (is 1, but should be 1.2)
  

• The description text below the headline should always keep the same distance to the headline (reduce that spacing to 24px). Together they form a block that's top aligned (reduce spacing between them to 24px). Buttons and info at the bottom form another block that's bottom-aligned, the content in between is usually vertically centered.
  

• "Skip"-button should be moved up around 4px to compensate line-height

• "Skip"-button click area should be taller, but not span the whole width
  

• Big Button misses hover effect (seems to be overridden), interestingly this doesn't happen on RecoveryWords screens

• 16px text line-height should be exactly 1.3 (Figma messes this up in the code export for some reason)

• coloured intro text below headline is regular but should always be semibold (for contrast)

Password Box

• If password is wrong: Don't shake inside textfield, but shake the whole box, and more subtle, maybe can become orange or red at the same time. Is there a way to try that out myself?
• If a flow requires a password entry to continue, and the user clicks on the back button in the next step after having successfully entered the password, the password box should stay (right now the password gets saved and the password box is replaced by a button). The reason is that otherwise we would have to introduce a lot of special rules to make those altered screens work well in terms of UX, which wouldn't be economical for this edge-casey behaviour.

Back Arrow

• We need to change the style of the back arrow, because it's indifferent from the secondary button we have in some screens at the bottom of the modal. This is the new one (14px bold):
  
• Wording
  Text: “Back to Accounts” if coming from Safe

Onboarding Switch

• Wording
  Create Account button: “Choose an Avatar. ...”
  Login button: “...or Recovery Words.”
  Back button:
  From website: “Back to nimiq.com”
  From safe: “Back to Accounts”

Signup

• Bug: If in “Confirm password” back arrow is clicked and a new Identicon is chosen, the next step has the headline “Confirm password”, instead of “Create a password”.

Step 1 (Choose Avatar)

• Wording
  Headline: “Choose Avatar”
  Generate New button: “New Avatars”
  Back button: “Back to Join Nimiq”

Step 2 (Create Password)

• Wording
  Headline: “Create password”
  Subline: “This is your Account with your first Address in it.”
  Enter at least 8 characters versions:
  “Enter min. 8 characters”
  “Sufficient password”
  “Good password”
  “Strong password”
  Main CTA
  “Confirm”

Step 3 (Confirm Password)

• Wording
  Headline: “Confirm password”
  Subline: “This is your Account with your first Address in it.”
  Blue screen: “Connecting to Nimiq”

Download Login File

a) No password set

Step 1 (Info)

• Wording
  CTA: “Create password”

Step 2 (Set Password)

• Is it possible to use the original dash size?
• We should have a textblock here explaining that the password will secure the file.
  
• Wording
  Subline: “Create a password to protect your Login File.”)

Step 3 (Repeat Password)

• Nice to have: Transition from empty login file to Login File: Colored Login File fades in while growing with a bounce easing (similar to first identicon appearing in the AccountRing). Probably needs to be finetuned.

Step 4 (Download File)

• Nice to have: Animate file from step 2 to step 3 (grow with subtle bounce easing)
• File shouldn't be clickable on Desktop – Either file is clickable with respective note (mobile) or button is clickable

b) Existing password

Step 1 (Info)

• Wording
  Headline: “Save Account”
  Subline: “Your Login File grants access to your Account. Download and save it.”
  “Your Account is stored in your browser’s cache.”
  “It might be deleted automatically or by accident.”
  “Download the Login File to save your Account.”
  Text above Button: “Keep it safe and confidential.”

Step 2 (Unlock Login File)

• Headline "Download Login File" --> "Unlock Login File"
• Blurred Login File missing
• Wording
  Headline: “Unlock Login File”
  Main CTA: Continue when the correct password is entered? NO: Find Wording

Step 3 (Download)

• Wording
  Headline: “Save Login File”
  CTA: “Download”

Recovery Words

Step 1 (Info)

• Add perspective to the flipping animation + switch flip direction (right-edge-to-left, like the page of a book)

• progress bar empty steps have wrong color
  

• intro text has wrong font size (is: 18px, should be 16px)

• Wording
  1) “Keep your words offline, enter them nowhere but on keyguard.nimiq.com”

Step 2 (Show words)

• Top words are already overlayed by gradient shade, also bottom words when scrolled

• numbers should be semibold and aligned with the base-line of the corresponding word
  

• scrollbar should be at the edge of the modal-box
  

• "Skip for now" shouldn't have underline on hover

• Wording
  Subline: “Anyone with these words can access your Account! Keep them safe.
  CTA: “Confirm backup”

Step 3 (Validate words)

• big number should be semibold
• decrease margin between number and "What is the Xth word" by 8px (to compensate for line-height)
• horizontal spacing between words should be exactly 16px. It's a bit bigger because due to the inline-block layout the space between the elements in the markup is shown in the interface. Solution: remove the space between the elements in the code or use a flex-layout
• shaking word is shaking too much. Animation:

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
        transform: translate3d(1px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-2px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(2px, 0, 0);
    }
}

• Correct word should have a subtle success animation. Animation TBD (Recovery words validation success animation keyguard#392)
• after clicking a word, shortly a no-interaction cursor shows up, which is weird.
• after clicking a word, correct or not, all words decrease in opacity. It's good if this happens for all uninvolved words, but if the wrong word is clicked, both that and the blinking correct word should stay at 100% opacity. If the right word is being clicked of course only that one stays at 100%
• Wording
  Headline: “Validate backup”

Add Address

• Unlock Screen in Figma (it's a universal unlock screen for the account, so it can be used for recovery words password entry as well)
• if identicon images aren't loaded yet, rectangular outlines appear which overlap. Can we remove them?

Step 1 (Unlock)

• Wording
  Headline: “Unlock Account”
  Subline: “To add a new Address, please unlock your Account first.

Step 2 (Choose Address)

• Wording
  Headline: “Choose a new Avatar”
  Generate New button: “New Avatars”

Step 3 (Naming overlay)

• Wording
  CTA: “Add to Account”

Loading/Success

• Wording
  Blue screen: “Adding new Address”
  Success Screen: “New Address added to your Account.”

Login

with Login File

• Hover/Focus/Drag styles:
  

• "Create new account" doesn't have the right hover effect

• "Continue" Button is not needed, correct password should unlock directly. Is this possible?

• Lock-opening animation after password is correct is missing. Will provide. (Lock icon animation keyguard#281)

• Wording
  Headline: “Create new Account”
  Back button: “Back to Accounts”
  Storing your account: “Connecting to Nimiq”
  Idea: Add steps of what is happening in the background to the blue screen?

with Recovery Words

Step 1 (Input Words)

• placeholder numbers in inputs should be semibold, and hidden on focus

• "Press TAB to ..." should be bold

• transitions missing for hover/focus/error states

• filled input has wrong style – see screens
  

• error state of input should shake less, see shake animation in word validation

• input border only turns red on error if clicked outside the field, not if tabbed into next field. should become red for both actions.

• "This is not a valid account. Typo?" is 50% transparent. Should be 100% opaque (and bold, as "Press TAB...")
  

• Shake animation of whole word box is too strong. Use same shake animation as for single inputs

Step 2 (Create Password)

• password creation can't be skippable in this flow.
• login file placeholder isn't centered
  
   

Logout

• Line height for image headlines ("Is your Login File...", "Do you know where...") should be 1.4
• Wording
  Subline: “If you log out without saving your Account, you will irreversible
  lose access to it!”

Change Password

Step 1 (Create Password)

• password creation can't be skippable in this flow.
• Wording
  2. “If a Login File was compromised: Please create a new Account and transfer all funds.”
  CTA: “Confirm”

Step 2 (Confirm)

• Wording
  Headline: “Confirm new password”

Step 3 (Download LoginFile)

• Wording
  Headline: “Save your Login File”
  Success Screen: “New Login File and password created.”

Send TX

• amount should be centered if no message is provided

• plain account numbers should be written in Fira Mono
  

• named addresses shouldn't fade out, but collapse. Also, they should have more room until they collapse. They naming concept is built on the assumption that we have a 148px wide box to display the name.
  

• Even if I add the receipient as a contact, the name is not shown, but the account number instead. (Also in the detail overlay it still says "unnamed contact")

Account Detail Overlay

• Blur entry animation not performant at first
• Copying of number not implemented yet
• if a receipient address has no name, let's just leave it away ("unnamed contact") assumes an understanding of the "Contacts" concept already, which may not be the case.

Checkout

• arrow animation missing (also, arrow seems to be too thin...)
• merchant logos should have padding to the border – also the nimiq hexagon
• step 2: height of modal adapts to height of viewport, should stay the same

[sisou]

FYI, the screenshots here come from the regular Nimiq Accounts Mgr & Keyguard Flows Figma file, but are in the bottom page __Feedback 26.03.18 (I'm guessing the 18 is a mistake and should be 19).

[sisou]

First batch of UI style changes is in nimiq/keyguard#269.

[sisou]

Completed. Issues for remaining important items have been created and assigned the correct repository.