GUI Improvements

[mattcoxonline]

Overview

I'm looking to make some changes to the UI of the Gridcoin wallet. The goal, in a nutshell, is make it easier to understand for someone who would class themselves as a "novice". As a parallel goal, I'll aim to ensure that the new design passes elements of WCAG 2.0 standards - making content accessible to a wider range of people with disabilities.

The existing wallet

UI Framework (Open for feedback)

Here we can see the general framework for the app; title bars, headers / logos, navigation, status bar, and all the various states involved within this.

Proposed design

Changelog

• Introduced the new branding / fonts / colour scheme
• Replaced the full logo in the header with the typemark
• Moved the BOINC logo to the content area of the Overview tab
• Removed any icons in the navigation, allowing for a neat type-based nav
• Introduced a "New" notification badge on the Vote option
• Moved the status bar to the bottom of the app

Remaining tasks

• [ ] Mock up all hover / active states
• [ ] Complete the icon states in the status bar

Accessibility

All colour-combos have been checked so far and pass the recommended guidelines for an accessible contrast ratio. Colour-blindness tests are successful, I believe. Please correct me if you spot anything wrong.

Translations

Translations seem to be okay. Generally, I'll mock in English (native language) and then do a Greek, Russian, and/or Korean version to see the length of text strings. Apologies for any bad translations - blame Google Translate. Might have to make the navigation column a little wider to accommodate some lengthier languages.

[mattcoxonline]

No logo vs Gridcoin logo

As you may have seen from the mocks above, there is one with the Gridcoin logo in and one without. Either way - whether it's in or out - I don't mind.

Should the Gridcoin logo be visible in the navigation rail as default?

You decide! Answer by adding emoji reactions to this comment.

👍 to keep the logo 👎 is no logo

[jring-o]

This will be a step toward greater visibility and adoption.

I think we should set up a UI bounty to be fund matched up to X GRC (5k? 10k?) by foundation funds. This would require a proposal to be organized and requirements for the release of funds to be defined.

Additionally, we could begin to allocate foundation funds to specific endeavors and use the foundation's interested earned to pay continuous development and maintenance. This would be far more in depth than a simple bounty/fund-match campaign. At this point in time, the bounty might be more practical.

Does anyone else have thoughts on how we can support @mattcoxonline and his work moving forward?

[jring-o]

Regarding the Gridcoin logo, I might just not like where the logo is placed? Idk. What if it is placed in the same bar as the word "Gridcoin" to counter-balance the BOINC logo?

[iFoggz]

im in between liking and not liking where the logo is. I agree making this more user friendly and to those with disabilities as well. I think you will benefit the most if you working with the people who have the designed the current look in development branch to reach a common goal on this. also you could make this simply another display theme or design in Settings -> options -> display -> style. I honestly really like the development wallet as is with design and re-branding.

[skcin]

@mattcoxonline cool, I like the logo next to the word "gridcoin" as it is in the current development branch. Are you aware that we have different color schemes? (at least in the development branch) You can choose them in the options menu. I would like to keep at least a light and a dark color scheme. But that also means we could create special color schemes for people with disabilities.

I noticed that you don't use any icons. Is everyone fine with that? I think the removal of most icons will reduce the complexity of the qt code in certain areas.

I will look into the following changes next:

• create an alternative overview page
• introduce an option to switch back to the classic overview page
• move the little vertical toolbar to the bottom
• apply the new color schemes (@mattcoxonline can you provide me with the colors in RGB or HEX format?)

[wisecracka]

I love where this look is going. Super clean and the color scheme ties in with branding. I think the background color should stay on the lighter side, the purples could get lost as you darken the background.

👎 I am in agreement with the other folks on the logo. I think it should go next to Gridcoin or just be removed. It looks lost in the bottom left corner.

[Mercosity]

I'm in agreement with Foggyx420 .. You should do this in conjunction with the Dev branch .. my son has a particular type of colour blindness so I'll be checking to see if he has any problems .. I really think that the gridcoin logo should not be left out .. needs to be in a better place than a small one at the bottom ..

[iFoggz]

i agree i think his ideas are good and i'm happy about that consider a style addition

[jring-o]

@skcin i think the removal of icons is great. makes the wallet look smooth. many other wallets don't use icons either. if it simplifies the qt as well... all the better

[mattcoxonline]

@skcin Are you aware that we have different color schemes? (at least in the development branch) You can choose them in the options menu. I would like to keep at least a light and a dark color scheme. But that also means we could create special color schemes for people with disabilities.

Yes! Someone on Slack sent me a build and screenshot of the dev branch and I could see the newest theme. Generally, a Light and Dark theme are good options and I've found that a lot of developers really prefer a dark theme. 😮

Right now I just want to get the one theme out of the way, and correct. From there it will mostly be a case of changing colours. In addition to Light and Dark, it's common and useful to have a High Contrast mode.

@skcin I will look into the following changes next:

• create an alternative overview page
• introduce an option to switch back to the classic overview page

I want to take a pass at the content of each page - coming up with a layout for the Overview content, as well as each subsequent page. Right now, I just presented the framework because I didn't want to overload anyone with a lot of work. ☺️

@skcin can you provide me with the colors in RGB or HEX format?

Yes! Better still, you can view the spec in it's entirety here: https://xd.adobe.com/spec/d941d56b-f06d-497b-9c39-8f5eef925b6e/ ☝️

@Mercosity my son has a particular type of colour blindness so I'll be checking to see if he has any problems

That would be great. I check the artwork by simulating deuteranopia, protanopia and tritanopia. These are extreme forms of color blindness – therefore, it should also be easily readable by those with minor color blindness and relatively normal vision. 👌

[mattcoxonline]

Logo vs No Logo

I don't want this discussion to drag out, but as commented on this Gridcoin Marketing discussion, it's not common at all for an app to place the logo within the UI.

To open the app, you click the logo. When the splash screen loads, the logo is there. You see the logo a lot before you get into the app - and then it's ever-present in the taskbar (Windows) / dock (MacOS) / switch app dialog.

Right now, I'd like to keep it where it is (in the lower part of the navigation) or get rid of it in the interface altogether - considering it'll still be at the OS level and on the Splash Screen. 🙂

[RoboticMind]

Is this UI designed in a scalable way? The current wallet doesn't scale nicely with High or Low DPI displays. would this fix that?

[jring-o]

Regarding the logo:

In cryptoland, logos seem to generally appear in wallets. Some quick examples are:

-PINK -SLR -NXT -XLM

Sometimes they occupy most of the real-estate. It is a marketing and identification tool for an ecosystem that is flooded with wallets. If you see it, you remember it. If you see it, you know which wallet you have open. Seems odd, but it's a thing.

Major organizations don't need to have their logo present on the main screen because they are major organizations. = )

[tomasbrod]

302

[ragnaroklow]

A breakdown of current polls on the main page would be nice

[madmaxpayne]

Mockups can be accessed in Invision: http://invis.io/APJIDTNFV47

Overview Tab [Dark]

Overview Tab [Light]

Status Bar States

[RoboticMind]

@madmaxpayne could you add in somewhere a sync progress bar? That would help with https://github.com/gridcoin/Gridcoin-Research/issues/841

[madmaxpayne]

Have some thoughts. Am I right thinking that it should show current block number and some kind of a progress bar or graph? I'm not great at blockchain technology so some explanation would be helpful.

[RoboticMind]

When you are not on the latest block, you have to download all of the blocks that you are missing. So when the wallet is downloading all of the blocks that it doesn't have you could show a progress bar on the progression of the download. Here's a link that explains how it works on Bitcoin, which is similar on Gridcoin: https://en.bitcoin.it/wiki/Bitcoin_Core_0.11_(ch_5):_Initial_Block_Download

[an0n7mous3]

@madmaxpayne I love the layout in your mockup. Very professional feel. I'd vote for this to be our next UI

[madmaxpayne]

1. Added Est. RR/day and Est. TTS fields
2. Drew details of the status bar (correct me if I have missed something)

@RoboticMind I decided to go with a pie progress bar. Amount of processed blocks can be displayed inside a tooltip, don't want to overburden UI with unimportant information. Let me know your thoughts.

Original Post

[TheCharlatan]

@madmaxpayne how would the bar at the top change when going to Send/Receive/Transactions/Address Book/Voting. Should it be static like currently, or change its content as well, displaying the most important information for each pane?

[madmaxpayne]

Yes, it will change dynamically.

[tomasbrod]

Naive Sync progress bar would sit at >90% when syncing, but not from zero. Ok this issue is about graphics, but lemme add functional thoughts. When syncing not from zero, make the 0% position of progress bar the block number on startup and 100% the highest reported by peers. There is a small possibility of this bare going backwards (reorganize), maybe even negative.

[skcin]

@madmaxpayne Just for clarification are these just mockups or are you working on the code? I created a new sidebar (after @mattcoxonline mockup) and I am currently creating a new overview page which can be selected from the options menu. The new overview page is meant to be very clean and without all the network info. If you or @mattcoxonline have suggestions please let me know.

[madmaxpayne]

@skcin These are mockups. Currently I'm working on Polls tab. Hope to show it this week. Have pretty tight schedule.

[jring-o]

with syncing status:

could we include the block number during syncing? it might be useful to know what block you're on for troubleshooting if/when a lot of people get stuck syncing.

this is why a lot of other wallets have a % completed bar with the X / total blocks displayed inside the bar.

[madmaxpayne]

@jring-o Why not to display amount of processed/total blocks inside a tooltip? As I mentioned previously I don't want to overburden UI. I didn't know that syncing may get stuck. What's your thougth about if we make that the app will change a color of the pie chart to red in this case? Then a user can hover over the pie and see details.

It is just my vision. If it's so vital for users to see this info in the status bar then I'll invent something.

[skcin]

So, this is the current state of the gui changes I am working on. The user can switch between this overview page and the old one in the options menu.

By the way, we already have the processed block count in the tooltip, just not the total blocks. We might want to add that.

[madmaxpayne]

1. Added 'Syncing Stuck' state to the status bar (see original post).
2. Drew tooltip
3. Drew Polls tab and related windows (first version)

Mockups can be accessed in Invision: http://invis.io/APJIDTNFV47

Polls Tab [Light]

Active

Details

Vote

Create Poll

Loading Completed

Completed

Participated

Archived

Polls Tab [Dark]

Active

Details

Vote

Create Poll

[skcin]

Hey @madmaxpayne,

what do you think about including @mattcoxonline sidebar (or a redesigned version of it) in your designs? The upside would be:

1. I already created it. (more of a selfish reason, but still)
2. No Icons on the sidebar. That is particularly handy if a new page needs to be created. We had the situation in the past that we had a new page but no icon for it. That looked terrible.
3. The little indicator label. There were several requests for something like that in the past. It is not yet functional because I am not sure on how to track if a poll has been seen. But I think it is a good idea.

[tomasbrod]

Users might want to work on multiple outgoing transactions at one. Currently it is possible to work on transaction AND go to eg address book or voting, because the pane content persists, but not multiple transactions. Idea: allow opening send coins form in new window. e: or just fix the message field so this wont be needed.

[madmaxpayne]

@skcin

1. It is just my vision. I want to make the wallet look modern and slick.
2. Most of guidelines recommend to use icons in navigation and toolbars. Icons can contribute greatly, speeding comprehension and understanding, when their form is recognizable and builds on a user’s past experience. I use icons from Material Design library (https://material.io/tools/icons/?style=baseline) so there should be no problems in the future.
3. It's a great idea. I had some thoughts about it recently. I'll add some kind of a marker for Polls and likely for income transactions.

[madmaxpayne]

@tomasbrod

I'll ponder over the problem and see what can be done.

[tomasbrod]

I am for icons in tab-bar. For development we can have some generic placeholder icon ready, like a lightbulb :bulb:.

[madmaxpayne]

Added following:

1. Notification markers for new polls and transactions
2. Unlock Wallet, Splash and About Screens
3. Settings and Console windows

In the next 2 weeks planning to complete Send, Receive, Transactions and Favorites tabs; Sign/Verify Message; create Dark Theme style for all screens and detailed style guide.

Mockups can be accessed in Invision: http://invis.io/APJIDTNFV47

[madmaxpayne]

Taking into consideration brod's suggestion I designed a second version of About screen where it is a part of Settings tab.

[madmaxpayne]

Quick update:

1. Favorites tab
2. Sign/Verify windows
3. Send tab
4. Receive tab

Mockups can be also accessed in Invision: http://invis.io/APJIDTNFV47

[caraka]

You guys are beautiful. Keep up the good work, it is appreciated. :D

[tomasbrod]

This was all re-design of mostly existing gui. But I have in mind gui module that does not exist. A News feed. Your current polls list looks close to that, maybe you can combine pols with news? Idk.

[madmaxpayne]

Hm, polls and news are essentially different by meaning. I think we need another tab.

[RoboticMind]

I think he meant to reuse most/all of the layout

[jring-o]

@tomasbrod i like the idea of a news feed but i think that the main issue is that we do not currently have a structure for this sort of decision making;

how do we decide what news gets onto the feed?

a centralized option where a group of devs/admins decide would be quick and easy, but i'm not sure if it would have a majority of the community supporting it.

a decentralized option based on some sort of upvote (or something) structure would probably be supported, but seems like a lot of work to implement when we have other priorities to focus on.

if we went with a centralized option, i'd say add it, but if the community does not want that, i'd say leave the news feed for a future development.

[madmaxpayne]

I'll design News tab anyway. Should be able to upload more mockups by the end of this week.

[Scalextrix]

I'd like to suggest hover-over tooltips or links back to a wiki, especially for errors or techno-speak. Try and help newbies to help themselves.

[RoboticMind]

@madmaxpayne Sorry to add more to your to-do list, but could you improve the popup explaining all the Gridcoin information, and asking for the required information, when you first open the wallet.

[madmaxpayne]

It's ok. I have some drafts of help tips. Could you send me a screenshot of the first open screen?

[RoboticMind]

The Current UI for the new user screen is not a useful guide to look at as it gives very little information to users and immediately asks for the BOINC user email (it shouldn't do that as you only need to give that if you are solo mining). It then proceeds to tell you (if you don't have BOINC install) that it can't find BOINC. BOINC only needs to be installed if you want to mine solo.

Maybe ask the user first whether they are an investor, solo miner, or pool mining and explain what those are? Then proceed to explain how to setup BOINC for mining and how you need it to install on the machine running the wallet to verify information if they are solo mining. Then finally ask for the email (if solo) after all that. (with all other important Gridcoin information somewhere in there)

[madmaxpayne]

Got it. Thanks!

[madmaxpayne]

Here's another update on the new UI:

1. Enhanced Overview tab with help tooltips (Miner & Investor modes)
2. History tab
3. News section (not sure if news can contain graphics so I created two versions: one with images and one without)
4. Change passphrase view

Mockups can be also viewed in Invision app: http://invis.io/APJIDTNFV47

Overview

History

News

Change Passphrase