V4 UX Improvements

[dternyak]

V4 UX Improvements

While a more thorough UX re-design will take place post-V4 release, there a few major improvements we can make with existing design elements that should improve UX and can hopefully be included in V4 release.

1. Global account unlock
   • Account persistence. When unlocking an account, either automatically or prompt to save that account for one-click unlocking (Of course asking for the proper decrypt info, that wouldn’t be saved.) Potentially similar behavior to Trezor (only address, balances visible before account unlock). Also allows rejection of incorrect passwords when unlocking an encrypted mnemonic.
   • Sidebar based account info (similar to Trezor)
   • Logout / expire button to purge in-memory key or hardware wallet connection
   • Disabled nav options when no account unlocked.
2. Rename "Send" to "Account".
   • Should utilities be a sub-tab of "Account"? (e.g. convert private key to keystore)
3. Navigate to Account instead of View Only after wallet creation.

TODO

• [ ] mockups
• [ ] create individual issues

[wbobeirne]

Here's a quick first draft of the global unlock component. This was personally how I was imagining it, but I'm open to any and all feedback: https://imgur.com/a/KMLx3. Be sure to read the descriptions of each image if something doesn't quite make sense. Also keep in mind that these are pretty raw, think of them more as wireframes!

[tayvano]

Took a quick look before dinner. Wanted to drop these random mocks I did a bit ago. I'll comment more fully post-dinner but I like this direction.

![Uploading 2017-11-21 at 6.52.04 PM.png…]()

---

1. We need to make sure the user fully understands that they cannot send unless they re-select PK or connect to Metamask or whatever and enter the password. Having it in the sidebar doesn't necessarily mean its unlocked.

2. I would put when you need the user to select / enter their private key as late in the process as possible and possibly think about adding "wallet" as "add address" and not let a user add a PK there unless its hardware, metamask, or until they actually sending / sign. This would help prevent phishing a lot, I believe and reduce users who use private keys to check balacnes

more later...sorry for brevifty and typos

[james-prado]

• I don't think outright disabling buttons is a good idea, in my experience it ends up leaving people wondering where to go to somehow enable the button again. Assuming we have to disable buttons at all (I don't think we do), a better approach would be to prompting the user to complete a specific action (like logging in) before redirecting them back to wherever they were going.

• I think it makes more sense to hide away disabled buttons and dead ends until they're unlocked or users have gained an important piece of context for those choices to make sense. For example, seeing a disabled button for 'send transactions' doesn't do much until your logged in and it's finally enabled. Or setting the gas price & gas limit only within the context of sending a transaction and calculating TX fees.

• A sidebar just for wallets might be a bit overkill. I think sidebars work best when they're used to display a large amount of content like with dashboards with many pages / sub sections, sections of documentation, and on mobile devices where it's unreasonable to squish so much information into a shrinking navigation. I feel like having a sidebar dedicated just to wallets shown all the time would be more of a distraction.

Not sure what you mean when you ask "Should utilities be a sub-tab of "Account"?" What do you mean by utilities?

I really like the idea of the auto-discover button, could the same outcome be achieved by filtering the tokens by value?

I'm sort of getting into the weeds here but I thought this would be the place to mention it. I'm a sucker for good design guidelines and I think Material Design is hands down one of the most thorough out there. I definitely don't want to copy paste google's style all over mew, but I there there are a lot of solid patterns and guidelines that can be taken and repurposed.

[dternyak]

@james-prado

1. Regarding Utilities - There is a PR out that would add a utilities tab that would offer account related functionality (e.g. converting raw private key to a keystore): https://github.com/MyEtherWallet/MyEtherWallet/pull/336

2. Regarding Material Design -- there will be an in-depth UX-redesign post-V4 launch that can perhaps follow the Material Design philosophy. In the short term, we're hoping to using existing design elements to provide users with a better overall UX with the V4 launch.

[eddiewang]

I really like the sidebar of accounts displayed in @wbobeirne mockups. It makes me think if there could be a way of persisting the locked accounts even if localstorage was cleared. But I guess doing that would make MEW convenient by sacrificing some security, which we don't want.

I'm not sure how I feel about modals, I usually find things sliding/fading in and out kind of janky.

@tayvano 's designs are super clean, and I like the direction it's going in, but we're not planning on making any major thematic changes right - or are we open to that as well?

Generally though, I think that we're trying to provide a user experience that make it more convenient for them to access their wallets, since it's a drag to have to find the wallet file every time. Have we ever talked about potentially having registered MEW accounts in the future?

Another things that would be cool is if we could create a bunch of wallets, and then download a master keystore file that would contain all the subwallets within it.

One last thing - we should provide privacy options for the wallet (locked, view-only, private). For example, if you have a wallet loaded, you could set a view-only privacy setting so that you can quickly access the public address, view token balances, etc.

I know a use-case I have is to check my Ledger balance online. I always forget my address, so currently I bookmark an ethplorer link. A MEW solution would be nicer though.

I'll work on some wireframes this weekend as well and throw them here when it's ready.

[wbobeirne]

@james-prado I hear you on the sidebar, I have another angle that hopefully I can mock up soon that might be better. I'll also try to mock up what

[wbobeirne]

Crap, accidentally slipped on mobile and posted that closing the issue...

Anyway, I'll also try to mock up some of the no-wallet states as well. I also disagree about simply disabling buttons, but I also feel removing things might make a user worry who expected it to be there.

I'll also take a look at Taylor's designs and take queues from that. Some good UX improvements in there (and it looks like we came to similar conclusions about unlock!)

[wbobeirne]

I took a second crack at it with an expandable top menu, I think I like this take better: https://imgur.com/a/JyHPd. However, if we made the overlay larger, I think @tayvano's much more informative wallet unlock UI would work as well.

Just a few notes about the discussion above:

1. I totally think we should do read-only on selecting a wallet, and push decrypting as late as possible. However, I think that should be a separate additional task from the redesign just to make sure we keep PRs small, and progress moving. But I think that'll be a huge QOL upgrade.
2. As for redesigns, I'm just trying to apply this to the current site as un-invasively as I can. When it comes to the actual visual design, I'm not prescribing anything, I'm just mocking up how it would behave for the most part.
3. I think us having accounts is a little scary, I don't think anyone here wants that responsibility. However, I was thinking that it could be interesting to attach settings etc to your wallet. So if I decrypt one of my wallets, it fetches all of my settings and other wallets from a server, and sets up my local storage to match. But this would be a huge undertaking, given that MEW is just a static site right now with no backend of any kind. I think we should table anything like this for the future.

[eddiewang]

Here's a quick take on what the sidebar could look like:

Users often go through the hassle of unlocking their wallet to see their balance, not realizing that they can see their ETH balance + any token balances with just their public address. We can save their public address in localstorage, and display their balance + tokens whenever they arrive at the site.

The lock icon represents the state of the wallet (locked vs unlocked). In the example above, 2/3 wallets are locked, but you are still able to view the account balance + token balance from the sidebar.

The list icon shows that the wallet has tokens. By clicking on the list icon, a dropdown list containing the tokens and their respective value drops down from the sidebar.

[dternyak]

Moving Custom Token Redesign to https://github.com/MyEtherWallet/MyEtherWallet/issues/494

[tayvano]

How Blockchain.info does TX Fees:

[wbobeirne]

All of these have either been implemented, or have been broken out into other issues. Closing.