Regarding display of amounts: I would use a mono-spaced font and align them all to the right, so the decimal separator is always in the same place.
I wouldn’t display the Slatepack Address in green, but in white and add some copy icon to the label. Green creates some false sense of accomplishment for me.
“Backup Wallet” and “Close” on the TX details screen could be real full-width buttons below each other. I would not use red (“danger”, “delete”, …) and yellow (“warning”) for them, but display them as secondary options in black and white/gray.
Connected peers could be a zebra-striped table with leading counting numbers, in order to improve readability.
Paste from clipboard looks empty. The icon could be huge and centered above the label instead. Maybe some gray rectangle behind that, to make more clear that the area can be tapped.
In some places labels are gray and values are white, but not always. It would be good to keep that consistent IMO. Labels could be always gray.
In the TX list, received and canceled TXs look pretty similar. Maybe icons or some color coding would help.
Since I cannot test it right now and I see no pending TXs in the screen, I wonder how those would look like and how the calls to action on them would look like.
Here are a few pointers on general UX, or on how to use the design elements to provide user with information.I havn’t figured out how to do the transactions yet, but I think the mockup from the other thread going in the right direction.
Before I start elaborating on the mockups I’d like to say that the most important thing regarding UX is that the application works.Rn it’s crashing a lot (Android/MacOS/Linux). I don’t know why that happens, but it’s really bad for the UX. It’s just frustrating for users if things don’t work as intended. You can have the best design in the world, but if the app doesn’t work, it does more harm than good to the whole project.
You can educate the users in the loading screen. Add important facts, and the workings of the UX(with screenshots) to it. The user will then have the opportunity to learn about Grin and the application while synching. You can add dozens of those. Maybe the community can work on these.
The loading % should be general, and not task-specific. It’s important that the user knows how long it will take, and how far he has progressed. I’ve added an estimated time to help solve this issue.
2. Login
This is more on the button states. Primary (filled bg), Secondary (outline), Buttons with a yellow background will be “green” buttons. It’s the success-color.
3. The wallet
I moved the important navigation-elements from top to bottom. It’s hard to reach navigation elements on top of the screen.
– Additionally I moved the wallet-specific elements to the top, next to the wallet name. Network, QR, Copy.
See how I used colors, typography and icons to provide the user with information.
– A pending transaction has a grey font.
– Incoming transactions are bolder than outgoing transactions. Same goes for wallet states. unconfirmed in my example. The rule of thumb here is: negative = thin, positive = bold.
– To-Do’s, or unfinalized transactions have an outline, they are not filled yet.
– I have used icons to vizualize the texts whenever it was possible.
When clicking on a To-Do, you can lead the user to a separate screen where he can finalize or cancel his tx. I also described what needs to be done.
And I removed the logo from the top left corner. Meanwhile people should know that they are using grin++.
Ok, that’s it for now. I know it’s still far from perfect, and that things can be further improved. But it’s more about the underlying principles, and about how to approach UX/UI.
I hope I could help to better understand all this, and provide you with some ideas to improve your app.
If there is a place you want us to submit some of those “loading tips” (which is SUCH A GREAT IDEA by the way) just link it, David! Would love to volunteer to help on some of the tips in 2 or 3 languages.
Here how’s going so far, feel free of offering more feedback
I added a slideshow, now users can learn more about Grin while waits for the node to finish loading.
New Dashboard!
It is more clear now to cancel or finalize a transaction now.
It is still a work in progress, I need to polish this thing a bit more and also, I need add more text to explain better what the user is seeing. This new version will be available in english, russian, ukrainian, german and spanish, but if you think you can help to translate the app into another language, please let me know.
