Stakepools design overhaul: GDPR, naming consensus and other items

[ta-lind]

This issue is a base point for informing and coordinating the release of a design update for stakepools theme. The update mainly focuses on improving the user experience for staking, as well touches point with some of the stakepool administrative items and the recent case around terminology. decred/dcrdesign#23

Design work, largely created by @MariaPleshkova can be previewed here: https://www.figma.com/file/dzjw34JZ40sxEJVqhekmhZBP/Decred
Currently these views are being coded into front-end by @rmykolas, and lastly will be tied to the stakepool dynamics by @karamble

Once the process is further, plan is to give a another notice well ahead before the release to the stakepool hosts.

Naming transitions
There appears to be a rough consensus to use Voting Service Provider (VSP) instead of stakepool. As this is a larger change, requesting feedback from stakepool hosts. Please respond with your opinions and considerations or suggestions. E.g. does this create any serious conflicts with your domains?

Touching point on related design improvements here. Taking into account recognisability of individual stakepools. Current state around distinguishing stakepools by either domain, self-picked name and ID's is inconsistent. The current release only has standard DCR logo – so there's little differentiation options between the pools. However in the design update, we've created a derivative logo lockup to highlight the network id of each stakepools.

Obviously some of stakepools have put further effort down into naming and branding. This is obviously an individual interest already. The intent of the update is rather to provide all stakepool hosts an improved and more even starting point. As well consider potential of building the communications around the stakepool ID rather than having several competing names. This paints a more professional and established picture for new users picking between stakepools.

GDPR: there is a standing issue needing attention: #259
Requesting help from copywriters to get involved and put together a generic privacy policy terms. The new theme should not be launched without it. For education/reference: https://twitter.com/smashingmag/status/999189181162250241

[ta-lind]

Any update on how the design design implementation is going @karamble or has someone else picked this up? Asking so the release of this design update would be somewhat coordinated w/ Decrediton and dcrweb, thanks.

decred/dcrdesign#23

[jholdstock]

I've spoken with @karamble and @linnutee, I am going to take this on.

[jholdstock]

My progress so far can be seen at http://testnet-vsp.jamieholdstock.com

---

Other miscellaneous feedback

• navigation toolbar

  • There is not enough horizonal spacing for all of the menu items and they wrap to the next line.

• CAPTCHA

  • Designs are showing a checkbox-style RECAPTCHA (I am not a robot). The site actually uses a CAPTCHA where you have to copy the text, kind of like [this one]
    (https://www.jimthatcher.com/images/captcha2.jpg)

[jholdstock]

Designs are missing for "Flash" messages. Eg. On the current site, try and log in with an invalid email/password and a red textbox is shown "Invalid Email or Password". Here is a list of the possible flash messages:

• Login

  • Login failed (eg. incorrect password)

• Register

  • Failed to register (eg. User already exists)
  • Pool is closed, not accepting new users

• Password reset

  • Failed to update password (eg. invalid token)

• Email verification

  • Failed to verify email (eg. invalid token)

• Low fee tickets page

  • Successfully updated tickets
  • Failed to update tickets

• Status page

  • Failed to retrieve status

• Settings page

  • Successfully updated password/email
  • Error updating password/email

• Tickets page

  • Error retrieving tickets

• Address page

  • Pubkey set successfully
  • Error setting Pubkey address

• Voting page

  • Vote preferences updated successfully
  • Error updating vote preferences
  • No Agendas for voting

[jholdstock]

• I have improvised a no-javascript message in the stats page which is not included in the designs. Charts are hidden when no js is enabled. This should be reviewed by designers.
• The information contained in pop-ups (opened by clicking on the i buttons) is not accessible without javascript. There is one on the "tickets" page, two on the "connect to wallet" page before connecting a wallet, and one after. Can we come up with an alternative way to embed this information in the page if javascript is not enabled?

[rmykolas]

@jholdstock, great points - I think the first two should be addressed by @MariaPleshkova or @linnutee, so we could implement their fixes/ideas.

In terms of the no-js version, we should be able to do that, however:

1. I guess you copied the charts from some current implementation of them, which seems to heavily rely on some JS library. We could try to rework those in a clever way, that would only involve CSS/HTML, but I'm guessing we need to make sure that there's a way to pass dynamic data to those?
2. Is there a way to access those pages on your implementation? Can you send a direct link to those or set me up with a temp login, if they're behind the login screen?

[jholdstock]

The charts are copied exactly from the existing site. Creating css only charts should be easy - however I will open a new issue for this and tackle it as a separate problem. The change-set for this issue is already way too big.

Sending you credentials for the test site on Matrix now.

[ta-lind]

Alrighty tested through this, here's all I found:

jholdstock noted issues batched as below:

1. Design and implement various notification modals @MariaPleshkova @rmykolas
2. Design and implement placeholder page for no agendas @MariaPleshkova @rmykolas

Login
Login failed (eg. incorrect password)
## Regarding this and most below, would need to add
 a notification modal/box. This can be a common one 
for other errors also and I think its worth including an icon
 to specificy between success/fail and maybe specific cases
 as pubkey added. Only question remains whether the details 
are shown below the field as designed or are the infield 
notifications disabled altogether? 

Register

Failed to register (eg. User already exists)
## Error notification
Pool is closed, not accepting new users
## Iteration of same view

Password reset

Failed to update password (eg. invalid token)
## Error notification

Email verification
Failed to verify email (eg. invalid token)
## Error notification

Low fee tickets page
Successfully updated tickets
## Success notification

Failed to update tickets
## Error notification

Status page
Failed to retrieve status
## Error notification

Settings page
Successfully updated password/email
## Success notification

Error updating password/email
## Error notification

Tickets page
Error retrieving tickets
## Error notification 

Address page
Pubkey set successfully
## Success notification, specific icon

Error setting Pubkey address
## Error notification

Voting page
Vote preferences updated successfully
## Success notification

Error updating vote preferences
## Error notification

No Agendas for voting
## No content placeholder, use same illustrastion as for timestamp service 

Additional notices.
3. @jholdstock: is the Stakepools list also going to be implemented later on or that left out altogether? If left out altogether, probably wise to account for it by some tweaks in the layout.
4. Settings page in navigation is off position, both desktop and mobile nav. Preview 1, Preview 2 @rmykolas
5. Logout's underline is off position in navigation. Preview @rmykolas
6. Add low fee Tickets – action buttons in this view look have slightly off style (minor bug). Refer to Connect to Wallet view. Preview. @rmykolas
7. @jholdstock / @rmykolas could you also add a placeholder for the VSP naming in styling that's using the derivates logo lockup so it would be clear for the VSP hosts. I had several options while this was being developed since the whole naming topic was open at that day. The listing of "VSP YourVSPID" is the most optimal one and hopefully having it in the example will encourage the VSP's to pick it up and use their actual ids vs odd namings.

Design and front-end tweaks/enhancements - Preview 8-11
8. These icons in the tutorial images could be optically re-sized into similar proportions. Right now being mathematically, the ticket looks really big in comparison. Also use the latest icons found in this issue: decred/dcrdesign#133 (some were tweaked/updated recently). @MariaPleshkova
9. I think its worth updating the micronavigation by making it slightly more ergonomical. Right now the arrows are pretty small for mobile use. Can potentially be brought outside of the box. @MariaPleshkova @rmykolas
10. The text column can be made slightly smaller with the intention to avoid words like DCR end up as orphans. Being alone in a single row, not optimal typesetting. @rmykolas
11. Remove that sliding animation from the slides, overlap isn't too pleasing. Can be just a quick 340ms fade-out instead. @rmykolas

[jholdstock]

3 - Listing will be added later (top of my TODO list after this current work is merged). It is not possible right now because the necessary information is not available in stakepool yet.

4 & 5 - I opened a PR for the design repo (rmykolas/dcrstakepooltheme-new#7) to fix these. Its already deployed onto my test site for a preview.

6 - The button specified in the designs only works with javascript. Disabling javascript means the page is not usable. I have made a note to come back and fix this later. I figured it would be acceptable for now because this is an admin only page.

7 - Placeholder added for the VSP name, and also the operator description on the homepage (directly above the register/support buttons). Deployed to test site.

[ta-lind]

6 - I meant the button is visually off – larger type, etc. Can be same styling in html/css still.

[MariaPleshkova]

Checked testnet link. There are my comments:

1. Need "Hello," word be #424F67 color (now it's #8997A5)
   

2. Did we decide to remove % from the circles by default?

It was like this on the layout

3. Cross icon has to be a little bit higher (30px from top)
   

4. When we get a notification regarding errors in fields, it has to be like this
   
   Not appearing modules.
   How it looks like now:
   
   The rest of notifications should be like these ones, right. But the length should be appropriate for inner text (now it's too long) and we need a possibility to close it (maybe add our cross icon to the corner).

5. Settings page

• 1st section with changing email address is out of style rn, need smth like this
  

6. We need common button state style. I mean that on some screens buttons that relate to some fields are always blue (active state) even if their fields are empty. But on Settings page button Update password is gray (inactive state) and gets blue only when we filled the fields. Let's do it also blue by default (same problem on Login/Register screens)

7. Need this to be in one line
   

8. I think if we have "Register" button, the words in the corner should be Login and Register instead of Sigh In/ Sign Up
   

@jholdstock @rmykolas

[jholdstock]

Hi @MariaPleshkova,

Thank you for the detailed review. To address your points:

1. Fixed
2. The % is now always displayed. The charts were not updated in this PR, they remain the same as before. They will be updated in another PR in future (I have a list of PRs to create after this one).
3. I have moved the cross icon up as far as possible without making dramatic changes, but it is still not exactly 30px from the top. (I think it is 40px)
4. This will need to be addressed in a new PR. This style of notification will require some javascript which is not implemented. yet. The validation is currently performed on the server side.
5. I have updated Captcha style site-wide.
6. This is another issue I would like to address in a separate PR, as this is also a Javascript dependent feature.
7. Fixed
8. Fixed

[MariaPleshkova]

@rmykolas
Here's also the link to Figma file with some updates from @linnutee 's comment:
https://www.figma.com/file/Cx7oJG5HqaAPb6Dj5scinrJO/Decred-updated?node-id=1%3A628

Attaching new illustration for No agendas found as well
No found.svg.zip