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 #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

[Nethlek]

I suggest adding an ability to select several UTXOs in coin control by holding down shift like Windows does with files.

[madmaxpayne]

I suggest adding an ability to select several UTXOs in coin control by holding down shift like Windows does with files.

Normally all grids should support this feature.

Ctrl + Select – allows you to click and select multiple records that are anywhere on a list, not necessarily next to each other.

Shift – allows you to select a group of records that are contiguous (i.e. next to each other) by clicking one record, and then holding Shift and clicking the last record. All the records in between are then selected.

Ctrl + A will “select all” the records you see in a grid.

In macOS Command button is used instead of Ctrl for those purposes.

[Tatayet64]

Following a misadventure that has just happened to me, I suggest you an evolution of the GUI.

For several months, my work done on the Einstein and LHC projects was not taken into account in the calculation of my magnitude. Due to a GDPR regulations on these projects.
The only solution to know if the projects are correctly taken into account is the command "explainmagnitude" (Thanks Jim Owens for the information)
On "Gridcoinstats", these 2 projects were known but was not giving me any magnitude. As they said, it's just an estimation. But it was the source of my mistake. I was thinking that all was good.

What I propose is to add this information on the GUI.
For example, an idea could be a pop-up on "Magnitude" which would give the result of the "explainmagnitude" command in more user friendly. Only active projects with their own magnitude.
Or, a little tabs with the same info of the command : Project name, RAC, Magnitude.
If so, if a projetc you are crunching don't appear, you know that there is a problem.
By the same way, should great having an explanation of the issue due to GPDR and how to solve it.

I hope that my English is not too bad and well you well understand the idea.

[KeithMyers]

Need messages added to the "Other" type in the History function. Currently any message type is not listed in any History type.

So when you send a GRC transaction to a address as a message, it is invisible and not listed in any type.

Suggest the "Other" category as most logical location as it does not fit in any other current category.