aviv-official / xvault-web

Web frontend for XVault
https://aviv-official.github.io/xvault-web/
GNU Lesser General Public License v3.0
0 stars 0 forks source link

Misc UX, UI issues and comments #9

Open sshelton76 opened 5 years ago

sshelton76 commented 5 years ago

I am putting this here for people to give ideas on general UI enhancement. This is carrying over the discussion from #4 which was supposed to focus specifically on the idea that the UI was not giving enough feedback to the user. I needed to close that issue with the latest update.

So here is the place to put your best ideas on how we can make the user interface and user experience for XVault, world class!

moondancer762 commented 5 years ago

Need a "Home" button to return to the home page. Perhaps when a user clicks on "Connect" the three choice boxes show below the "Connect" box. This gives the user an opportunity t view "Rewards" and other aspects of XVault without the need to exit the website and re-enter.

moondancer762 commented 5 years ago

While on the Settings, Unlock page. Once I put in my PIN and unlock the account, the PIN stays, even if I go to other pages. I would think once one leaves this page, the PIN should disappear. And it will continue to unlock.

moondancer762 commented 5 years ago

Keep in mind we will need to do some hefty AML/KYC in the future. Much of this should probably be part of the set-up process: identity questions, document uploads, etc.

moondancer762 commented 5 years ago

I know you added a memo field for things like smart contracts. However, I would like to see a "User friendly memo field." Two things I've realized about the blockchain - all of them - they severely lack basic GAAP and simple user-friendly attributes. Up to now, everything is 'bare bones.' ONLY what the blockchain needs is what is included. Very little thought goes to what users and accountants need. Let's change that. A "System Memo" is fine, but users need the ability to put their own notes into a field - much like the memo field of a cheque - to help the user keep his/her own books straight. It doesn't have to be very large, say 50 characters.

moondancer762 commented 5 years ago

When I tried to purchase ETH with gas (WEI) the dropdown message asked if I wanted to purchase ETH with ETH. Just a little thing, but it probably should ask if the user wants to purchase ETH (or whatever the user is purchasing) with gas.

moondancer762 commented 5 years ago

When I do a "reload current page" from my browser (Vivaldi), my balance seems to disappear. I just neec to click onto the background, then click onto the wallet again. This might alarm some users. Probably something to look into at a later date. 2019-05-29 23 45 56 aviv-official github io XVAULT - MONEY REIMAGINED

moondancer762 commented 5 years ago

Another thing for in the near future: Information icons. Similar to what you added for gas when the mouse hovers, have little Info icons so people can understand what it means and how to do it. For example: "Export Wallet." Exactly what does this do and what kind of situations may call for it. I believe info icons would be preferable to the information automatically showing when mousing over, so as users become familiar, the mouse-overs don't become annoying.

moondancer762 commented 5 years ago

I REALLY like the "RESET" button. This is particularly handy for public machines. How about just adding a plain "Logout." This would be handy for say, a husband and wife who have separate accounts, but use the same computer, or like me - someone who will be managing several family members' accounts (at the behest of the family :-P). I would hate to have to load their mnemonic each time I look at a different account, or so the husband and wife won't have to worry who used the computer last. I believe the LOG OUT button should be on the "home" page (once the user logs in) - perhaps just under, but slightly separate from the "Wallet," "Exchange" and "Settings" buttons - or just another button next to "Settings."

moondancer762 commented 5 years ago

The XChange page looks awesome, sleek and simple. Only a couple things I could add: Under the "Buy" currency, is the current amount of that currency (before the trade) and the amount receiving, or "Exchange" (after entering the amount to be sold). Perhaps change "Exchange" to "Total Amount Receiving." What about adding the "Exchange Rate" and "Fees"as well? I know some shady establishments hide fees within the exchange rate, claiming their fees are the lowest. I believe some of the more "reputable" ones may as well. For instance, on a Coinbase users's home page, a price for BTC/ETH, ect. show. However, when one makes a purchase, the purchase price is generally well above the stated price. Conversely, when one wants to sell, the sell price is well below the price stated on the home page. I understand spreads, but these prices are vastly different than what shows to be the spreads, sometimes up to and more than $100 difference! To accelerate user's faith in our transparency and honesty, we could show both "Exchange Rate" and "Fees" (even if we charge no fees). This should make some of the others squirm, and gain trust.

moondancer762 commented 5 years ago

Restoring an account process is unclear. I believe we should have a walkthrough for this: A button which is called "Restore" Once the "Restore" button is clicked, then a box to enter the mnemonic should appear (with instructions). When an a mnemonic is entered the dropdown for the PIN appears. If both match, awesome - account restored. If one is off, Uh-oh, a generic "Either your restore phrase or PIN is incorrect. No account has been restored."

moondancer762 commented 5 years ago

On the Settings page: I believe nothing should be visible to begin with, except:

  1. RESTORE button
  2. LOCK button
  3. EXPORT WALLET button
  4. RESET button Once one of these is chosen, then the PIN entry box (or dropdown - keeping consistency), and the box for mnemonic phrase can appear. This will keep the Setting page as sleek as the others and help keep some consistency in the way the site operates.
moondancer762 commented 5 years ago

When purchasing xTokens with gas, nothing shows the user the transaction completed properly. A few pop-up messages occur indicating wallet decryption, and "sending," but after that, nothing. The transaction continues to show on the screen and balances prior to the transaction continues to show, as if the transaction did not happen. Only if the "History" tab is clicked immediately after the transaction does the user receive a confirmation the transaction was successful. Then a message appears stating the history will update soon, and gives the user the correct balance. Once a transaction is successful, the transaction information should be cleared, the balance should be updated on the screen, and a confirmation message should show or overlay the transaction information. When the user clicks anywhere on the screen, the confirmation message should disappear. This way, the user is not confused as to whether or not the transaction took place.

moondancer762 commented 5 years ago

Just to see what would happen, I tried to purchase a full BTC, knowing I do not have enough gas. Everything went just as it should have. However, I have a suggestion: The message stating I did not have enough funds went quickly off screen. If I hadn't been paying close attention, I would have missed the entirety of the message. I suggest error messages (maybe all messages) stay on-screen until the user clicks somewhere on the screen. This way, the user has time to read it, even if distracted. For example, someone may be also doing paperwork, or switches screens to record the transaction in a spreadsheet, or has a pet jump on his/her lap, distracting him/her from the screen long enough to miss the message(s).

moondancer762 commented 5 years ago

Another little UI blip: I'm looking at burning MXN to XAV; this is what I see. (The 1.01 is from a previous transaction. I think this should have cleared when the trx was successful, and when I switched currencies, at least.) 2019-05-31 14 29 20 aviv-official github io XVAULT - MONEY REIMAGINED No matter which currency I choose, the all say "Burn BTC to XAV."

sshelton76 commented 5 years ago

Another little UI blip: I'm looking at burning MXN to XAV; this is what I see. (The 1.01 is from a previous transaction. I think this should have cleared when the trx was successful, and when I switched currencies, at least.) 2019-05-31 14 29 20 aviv-official github io XVAULT - MONEY REIMAGINED No matter which currency I choose, the all say "Burn BTC to XAV."

This is odd and I cannot replicate it. Is this on a mobile device or a browser?

sshelton76 commented 5 years ago

While on the Settings, Unlock page. Once I put in my PIN and unlock the account, the PIN stays, even if I go to other pages. I would think once one leaves this page, the PIN should disappear. And it will continue to unlock.

I fixed that in the latest push. Thanks for the heads up!

sshelton76 commented 5 years ago

I know you added a memo field for things like smart contracts. However, I would like to see a "User friendly memo field." Two things I've realized about the blockchain - all of them - they severely lack basic GAAP and simple user-friendly attributes. Up to now, everything is 'bare bones.' ONLY what the blockchain needs is what is included. Very little thought goes to what users and accountants need. Let's change that. A "System Memo" is fine, but users need the ability to put their own notes into a field - much like the memo field of a cheque - to help the user keep his/her own books straight. It doesn't have to be very large, say 50 characters.

This could be done. The only problem I can see is this would be local to the device only.

You can in fact do it right now and it goes on the blockchain. However, adding a memo turns the transaction into an allowance instead of a send. In an allowance the receiver has to actively accept the transaction. Totally doable, but most wallets are not equipped with this in mind. So unless you were sending to someone who's wallet has a provision for dealing with allowances, they would never see the funds and you would never be debited. But at least you would see the attempt in your own wallet... Once I finish the allowances and approvals screen anyways.

sshelton76 commented 5 years ago

I REALLY like the "RESET" button. This is particularly handy for public machines. How about just adding a plain "Logout." This would be handy for say, a husband and wife who have separate accounts, but use the same computer, or like me - someone who will be managing several family members' accounts (at the behest of the family :-P). I would hate to have to load their mnemonic each time I look at a different account, or so the husband and wife won't have to worry who used the computer last. I believe the LOG OUT button should be on the "home" page (once the user logs in) - perhaps just under, but slightly separate from the "Wallet," "Exchange" and "Settings" buttons - or just another button next to "Settings."

This is a nice idea, but it isn't feasible the way things are presently constructed. This is designed with the idea that it is running on your own personal device. There are a lot of major design assumptions based on this idea that there is one mnemonic, one wallet, one user and changing that fundamental assumption would require a complete refactor of so much for what honestly should be an edge case. Run this on your phone, not your computer and maybe we can do a husband and wife version for desktops at some later date. But it really would be a complete rewrite of everything.

sshelton76 commented 5 years ago

On the Settings page: I believe nothing should be visible to begin with, except:

  1. RESTORE button
  2. LOCK button
  3. EXPORT WALLET button
  4. RESET button Once one of these is chosen, then the PIN entry box (or dropdown - keeping consistency), and the box for mnemonic phrase can appear. This will keep the Setting page as sleek as the others and help keep some consistency in the way the site operates.

I made some very significant changes to the settings over the past 24 hours. Check it out and see what you think.

sshelton76 commented 5 years ago

Just to see what would happen, I tried to purchase a full BTC, knowing I do not have enough gas. Everything went just as it should have. However, I have a suggestion: The message stating I did not have enough funds went quickly off screen. If I hadn't been paying close attention, I would have missed the entirety of the message. I suggest error messages (maybe all messages) stay on-screen until the user clicks somewhere on the screen. This way, the user has time to read it, even if distracted. For example, someone may be also doing paperwork, or switches screens to record the transaction in a spreadsheet, or has a pet jump on his/her lap, distracting him/her from the screen long enough to miss the message(s).

I have a feature in the works to prevent you from inputing a number more than you have funds for. I'll let you know when that ships. As for the insufficient funds notice, there is a lot going on with these alerts and it can only keep a max of 3 on screen. I'm not sure how I could make it clearer short of turning it into a prompt that blocks the UI until the user acknowledges it.

I am considering breaking the alerts into 2 groups. Alerts and notifications. Notifications use the operating systems notifications area and could be used for critical messages such as "Sorry you didn't have enough funds" or "Transaction complete", or "You have received new money". That would reduce some of the load on the alerts system. However this could get spammy quickly and not everyone hits allow for notifications, so we would need a way to track when they reject that and re-route the message back through the alerts system.

moondancer762 commented 5 years ago

Once the user clicks on "Connect," the account "Home" page shows.

  1. a line is in the middle of the "XChange" button
  2. the 'excess gas' notice shows, even though the user has not clicked on anything. I've also seen it before my balances show. I believe this notice should only show after the user has clicked on "Accounts" and true balances are showing.
moondancer762 commented 5 years ago

there is a lot going on with these alerts and it can only keep a max of 3 on screen. I'm not sure how I could make it clearer short of turning it into a prompt that blocks the UI until the user acknowledges it.

Can you make it to so once the notices are done (if less than 3), or the max amount are on the screen, the user must acknowledge? For instance, Alice received 1 notice, but she must acknowledge it before doing anything else. Conversely, Bob, will receive 5 notices. After the first 3 appear on the screen, he must acknowledge them. Once he does, the other two show on the screen and he must also acknowledge them.

Will this work? I'm not sure splitting them between notices and alerts for the very reason you stated, "...not everyone hits allow for notifications"

moondancer762 commented 5 years ago

I like the Settings page. It looks more like the others: sleek and simple.

moondancer762 commented 5 years ago

Another little UI blip: I'm looking at burning MXN to XAV; this is what I see. (The 1.01 is from a previous transaction. I think this should have cleared when the trx was successful, and when I switched currencies, at least.) 2019-05-31 14 29 20 aviv-official github io XVAULT - MONEY REIMAGINED No matter which currency I choose, the all say "Burn BTC to XAV."

This is odd and I cannot replicate it. Is this on a mobile device or a browser?

This is on the Vivaldi browser. This is no longer happening. It may have been internet connectivity issues, or something else, not related to the programming.

moondancer762 commented 5 years ago

There are a lot of major design assumptions based on this idea that there is one mnemonic, one wallet, one user and changing that fundamental assumption would require a complete refactor of so much for what honestly should be an edge case. Run this on your phone, not your computer and maybe we can do a husband and wife version for desktops at some later date. But it really would be a complete rewrite of everything.

MetaMask has the one mnemonic, but can have several accounts under it. What about something like that?

moondancer762 commented 5 years ago

ABILITY TO ADJUST GAS Shouldn't users be able to adjust the amount of gas to initially be sent with a transaction, in case they want to ensure a transaction gets through quickly, if necessary? I don't see this option in XVault. I do see it in MetaMask. I still don't understand gas, but this may be an important function.

You should put that over in #9 But long story short. Gas is only a thing on Ethereum, the fact that you don't understand it means that millions of others won't either. When we launch AVIV the whole concept of gas goes away. So adding a UI to make it more like metamask is just going to confuse the end users.

Will users will still be using XVault with the ETH network, even after we launch AVIV?

moondancer762 commented 5 years ago

What does this button do? All it does on my end is makes a loud beeping noise when i click it: 2019-06-01 12 04 08 aviv-official github io XVAULT - MONEY REIMAGINED