moving to the next design iteration

[buck54321]

We've put in a lot of work towards achieving the vision of #451. Things don't align perfectly, but at this point, I think I'd like to close that issue and move forward with a new discussion.

The guidance provided by the design team has been critical into making dcrdata one of the jewels of the decred ecosystem. I'd love to hear from the design team again on what we can do to keep this front-end momentum going in the right direction.

[buck54321]

Here are a few things that are in my plans for dcrdata. Feedback, mockups, etc. are welcome and appreciated.

1. Better prioritization of homepage data. Really widdle down to the critical summary information, focusing on simple and intuitive graphical representations to go along with each important datum.

2. A separate dashboard page will combine some of the current homepage elements, as well as charts and other stats (the /stats page did not make it to prime time).

3. More color. Some dark backgrounds with light text. I'm not very good at it though, so I'd really like the design team's input.

4. Incorporate visual blocks. Not on the homepage. Maybe a /blocks page option?

5. An API info page with instructions for use, links to code samples, and sample responses on demand (AJAX and <pre> elements).

6. An exchange page which displays the current exchange data and explains dcrdata's methodology on the price average. Expect to have market depth charts as well (add order book / depth chart data to exchange bot and server #1041). Some limited price history might be possible too.

[xaur]

I'm still addicted to dcrstats dashboard. The ticket price chart, ticket pool size, time left till ticket price change, price chart - I get a very comprehensive status of the network health by just scrolling this one dashboard for a few seconds, and immediately know if it's the time to buy more tickets.

If replacing that dashboard is something dcrdata team is looking at, I can give it a closer look and write up what elements exactly make it so great for me, and how dcrdata could outcompete it by adding missing features.

P.S. Sorry if this issue is not the proper place for such feedback.

[buck54321]

This is the perfect place. Thank you. Definitely let me know what you like about that experience.

[s-ben]

This all sounds good to me. Would just add that pretty, engaging data visualizations (even if not prominently displayed), can and do get used in research papers, medium think pieces, social media, etc. More pretty please.

[RichardRed0x]

alpha.dcrdata.org is looking great, heading in a good direction.

Number 5 would be most useful for me. API instructions/examples should be relatively easy to produce but could be quite impactful if they allow additional people to start generating new charts/stats easily.

[s-ben]

Number 5 just looks like API documentation. Which seems out of place for a web page on an explorer? Context: have written a lot of technical documentation professionally over the last few years, including API docs. Not opposed, just wondering about discoverability, maintainability.

[xaur]

So I open dcrstats in "slow motion" and write down why I like it so much

Content:

• Price: recent price chart in both USD and BTC - both important to me
  • signals if there's any market action going on
  • I wish default zoom was 1-2 weeks or 1 month
• Network: hashrate, block reward (incl. PoS), next block reward, supply mined - useful
  • I would place them lower because they are not as important
• hashrate chart is missing
  • I'd love to have it on the main dashboard, I often check it
  • useful indicator of network health
• PoS: ticket price, next estimated price, pool size, time till price adjustment - all useful for me
  • all these indicators in one place immediately tell me if it's time to buy tickets now or wait a little
• Lion is cool but useless (sorry dyrk)
• ticket price chart with both price action and amount of tickets purchased - useful
  • also helps to tell if it's time to buy tickets
  • I wish default zoom was 1 month
• ticket pool value and supply % - useful indicator of network health
• VSP list - not as useful, I'd move it to separate page

Style, performance:

• it is super fast. dcrdata charts were slow for me, but that was a month ago
• it is "light", in some sense of perception that's hard to unpack atm. It only shows what I need
• it has important numbers in large font
• it doesn't use smaller size font for smaller decimal places in the same number - that design "feature" of dcrdata makes my eyes bleed every time
• generally I pretty much like these fonts - clearn and readable, no dot in zeros is less noisy

What's missing:

• A few recent blocks and how many tickets were purchased - useful indicator for PoS
• Treasury size in DCR and USD

[buck54321]

This information is incredible. I don't see anything there that dcrdata can't already do with minimal code changes. Awesome.

Luckily, the charts page will be getting faster, too (#1126). Scratch that. The charts won't load faster from the changes in that PR, but I've been considering other options for improving load speed.

[ta-lind]

Hi Buck,

dcrdata design got brought up in the design operations channel last week, as no designer has been involved with for a a while. Long story short, @MariaPleshkova from block42 and likely another designer from b42 got some time and interest in picking up the UI/UX work for dcrdata. I’ll bring the ends together w/ you in matrix. Also would recommend to use this issue for discussion and gathering feedback. Design-output could be coordinated via /dcrdesign repo as a master issue and specific issues for implementation as smaller chunks posted into this repo. We’ve been following this process w/ decrediton and pi-gui, a bit more clarity this way.

Also wondering if anyone has compiled a list of all the features in the present views? This higher level overview would be helpful for the UX work as well in other products. There’s some nice micro features e.g. ticket maturity counter I've noted in feedback around decrediton.

On the UI/UX side, notices and thoughts:

1. Homepage: hierarchies/prioritarization, agree on the point. This essentially comes down to the similar problem what was addressed w/ the previous design version. To describe, presently both the left and right groups are largely fighting for focus. Left ones being larger but then again with a lot more space and in a sense less meaningful data, where as right ones are more densely filled and easily understandable and more meaningful data. I think the best approach here for the designers is to use the present data sets and attempt to first solve the higher level layout and then come down to the visual smaller details e.g. type details, color, icons, mempool live visualization and latest blocks rows vs visual blocks, as well think whether some values like the DAY/YEAR switch or USD/DCR underlines could be solved as some interactive elements. Also whether something has a graph or visual approach.
   1.2 Visual Blocks: When I proposed the visual blocks concept the idea was to simplify the landing page - so instead of a table, illustrate the blocks as actually a bit more tangible element (number of quick and dirty iterations here: https://xd.adobe.com/view/ee9e5575-8023-4b0f-8563-773a3e9863e1). 
However do need to take into account the containing chart visualization is likely understandable for only one or two variables. So should be kept fairly simple like having only one chart for for the transactions amount/value for example. I doubt a dedicated page https://alpha.dcrdata.org/nexthome would be worth aiming for, as a table is far simpler to comprehend (e.g. *swiss-army-knife-syndrom when there's so many variables as charts visualized per block, one can only understand what something means by interacting with it – hovering on the block rather than quick glance). Comparing the two, i’d rather recommend improving the table rows into more elaborate ones through visual design and interaction wise.

2. Visual Design consistency: The visual design proposed in New Design Implementation: Phase 1 #451 isn’t the best reference any more, as over time the common components have been more refined. As a fairly easy picking, the currently implemented state can be taken as a basis to get the visual components sorted out (e.g. color values, type styles, iconography, table styles etc). 

   2.2 Darkmode color scheme: recently worked out a new color scheme for Decrediton's dark mode. Will be posting more details on implementation issues soon w/ Maria. This could implemented for dcrdata also. Ref: Decrediton: UI dark color scheme dcrdesign#105

3. Interactions/Navigation: on a brief overview I’ve noticed the most issues around navigation. There’s both quite a lot of subpages and also “items” that have different relations to them, whether one inside another or some references. e.g.: 
https://alpha.dcrdata.org/disapproved and sidechains only accessed via bottom of blocks page
https://alpha.dcrdata.org/agendas and proposals, back and fourth movement 
https://alpha.dcrdata.org/ticketpool vs https://alpha.dcrdata.org/charts?chart=ticket-price&zoom=ikeaa800-jty3g360


4. Chart/Graph elements: Probably more annoying of front-end tasks, but lastly the chart/graph elements got a plenty of potential for some visual design tuning as they seem presently mostly out-of-box library stuff? Worth the effort as this way they could look visually a lot more integrated, but i’d also rate this lowest on the work hierarchy or as future enhancement.



I’ve listed other blockexplorers for benchmarking and reviewing:
https://www.blockchain.com/explorer
https://btc.com
https://explorer.ark.io
https://explore.veforge.com
https://tronscan.org/#/
https://explorer.ont.io
https://wavesexplorer.com
https://minexexplorer.com
https://explorer.alqo.org/overview

[buck54321]

Thanks @linnutee. I'm excited to see where this goes. The proposed process sounds good. Let me know once the /dcrdesign issue is opened.

I'll start preparing a list of features.

Here's just a few notes to add for whoever might read this.

1. Visual blocks / blocks table: I'm not yet convinced that we need to display recent blocks on the homepage to begin with. Where other block explorers might need to fill the homepage real-estate with a recent block list, Decred's hybrid concensus gives us a lot more data to play with. Instead, I'd like to zone in on the critical stats that summarize recent block activity, and display that data in some compelling way. As far as which figures fit the bill, that's still open for discussion. Part of my resistance to visual block, in particular, is that interpretation carries a learning curve. Dcrdata should certainly be a portal to awesome data visualizations, but the graphics and figures on the homepage should be super intutive and approachable for users of varying technical proficiency. My current tact is to propose a separate dashboard page with a more detailed overview.

2. Not all DCR values can be displayed in a fiat index yet. We only have the current exchange rate for now. They are making some progress at https://github.com/raedahgroup/dcrextdata/, though.

3. Dcrdata gives strong consideration to users with javascript disabled.

4. Looks like I'm ranking charts redesign a little higher than @linnutee, in particular the /charts page. Expect some movement there soon.

One last thing. I'd really like to have a mnemonic name for each of the colors in the Decred palette, e.g. #2970ff = blockchain blue. It would help me make the CSS more readable. Here is the palette I'm currently using. Does anybody have any interest in doing this? Could be fun.

[buck54321]

I wrote up some notes on the current site's pages and features.

There are also some open design-related issues.

• Need copy text icon on all hashes and addresses #127 : Need copy text icon on all hashes and addresses

• Show field data and resize width for large screens #836 : Show field data and resize width for large screens

• reutilize current chart tools for politeia proposal vote chart info #995 & PR gov:proposals: new proposal votes charts #1210: Politeia charts

• home: make left and right blocks of same height #992: make left and right blocks of same height

• Add Subsidy Stats, Inflation Chart #1098: Add Subsidy Stats, Inflation Chart

• Add notice about vote #1175: Add notice about vote

[xaur]

I'm not yet convinced that we need to display recent blocks on the homepage to begin with.

Good idea. Now that you said it, that data is rarely useful to me. All I need to know from the homepage is: 1) are people rushing to buy tickets now? is it time?; 2) did the network stall? (some "last block X min ago" would do).

Dcrdata gives strong consideration to users with javascript disabled.

Thanks to everybody who puts effort into this. It allows me to just read the pages without executing code in eternally broken browsers. I expect not many users disable it currently, but to those who understand no-js mode also boasts Decred's deep knowledge of security.

Next pro level challenge: drop web fonts :D