New Design Implementation: Phase 1

[denyszayets]

Hello to all,

Recently design team completed the redesign of explorer.dcrdata.org. We plan to divide this restyling process into a few milestones/phases that will help us all make this project successful.

Based on my conversations with @raedah, his team is happy to take on this project in a few phases.

A subdomain redesign.dcrdata.org should work.

Phase 1
Application of visual and style changes (HTML, CSS) to the homepage, utilizing features available at the moment.

• Header
• Search Box
• Menu (button only phase 1)
• Footer
• Network Statistics
• Decred Blockchain

All links from the homepage can be pointed to non-styled pages with a default template.

Items highlighted in red will be developed in phase 2 but will require developers to keep in mind these changes during the development of phase 1.

Attached below is the screenshot highlighting items to exclude in phase 1.

Prototype Link: https://xd.adobe.com/view/b0dcf31d-cc18-450c-acfa-2b5d223ffcad/
Design Specifications: https://xd.adobe.com/spec/e9f3f22a-7eb2-4bef-8921-9fc4b04a8b6d/
(this page will have all the details on the colors, size, spacings, fonts, etc.)

Looking forward to getting our explorer more average user-friendly. Please let me know if I missed anything. Thank you all.

Mampool Design

[raedah]

Need a complete mockup for phase 1 that is usable, else work would be blocked from being deployed until #452 is done. I created 452 to reference the technical work needed to include the external data which is highlighted in the mockup above as Phase 2.

[denyszayets]

Updated mockup and prototype with Phase 1 elements only.

[ta-lind]

Perhaps only go with Staking and Mining cards for this release as partial cards look a bit off. Available supply could replace hashrate in Mining, that way both cards are fully populated.

[denyszayets]

1. Removing General Block for now.
2. Staking block stays the same
3. Mining block: replacing Hashrate with Available Supply.

updated layout coming soon.

[denyszayets]

• Removed General Block
• Mining Block: Added Available Supply
• Added Dev Fund under available supply
• Added PoW % APR

[xaur]

Posting my feedback per @gozart1 's request

Overview:

• Total DCR Locked, Available Supply: no need for 4-digit precision, even 0 would work.
• Avg Locked 24.4 days -- is this number correct? I thought it's 28 days + immaturity periods.
• Ticket Price, PoS Reward, PoW Reward: the smaller numbers (3-4th decimal places) don't add much
• Difficulty: % delta in 30 days would look interesting if it would fit there
• "Dev Funds" -- there were talks to avoid using this term to not give an impression it goes to developers (developer tax), other suggested terms are "project fund", "treasury" and "warchest", I'd go with "project fund"
• Not clear what APR means

Mempool:

• kb -> KiB
• how about a thin colored bar chart to visualize proportion between votes, tickets and transactions?

[chappjc]

Yes, "project fund". Also, thinking about ARP, it does usually refer to a borrowing rate, so it's a bit funny in this context IMO. It could just be annual return.

[denyszayets]

@xaur & @chappjc thank you both for your feedback. I will make these changes in the new revision.

[denyszayets]

[denyszayets]

This Decred Blockchain view right-side might be easier to implement at this moment.

[raedah]

reposting these comments from gozart that were in a thread that is now moved here,
"This latest design doesn't pass the "squint test".
By that I mean if I squint my eyes, the primary element I see is the 5 gray bars lining the top of each block. The purpose of the squinting at the design is to identify if the visual weight of the overall composition, you can squint at a good design and still get useful information from the broad strokes that remain perceivable.

Squinting also helps you find areas where contrast is too low. For example, in this design, the block height and age become invisible when squinting. I think both of these elements too important
to de-prioritize like this because they help you get your bearings when you are comparing your own view of the chain with the rest of the world, which is a common use case for a block explorer.

The icons have no meaning to me. The 2nd one looks like a ticket being submitted into a ballot box to me, which I don't think is what it's supposed to represent.

Adding tooltips to explain them is a design smell to me. Tooltips are not very mobile friendly, and in general indicates a failure to make something intuitive on its own.

I'm not necessarily saying the current design is better in every way, for example if you squint at the current home page the progress bars have too much visual importance, which is also not ideal.

I think that we can do better than both versions."

[denyszayets]

This is different from what we originally designed, and focuses on current features and data points we currently have and use. Based on our conversation we need to address the following:

• Remove Latest Transactions
• Remove Latest Block
• Page height blocked (no scroll)
• Add Titles to sections Network Statistics, Stake Statistics

-Network Statistics-
TOTAL SUPPLY 8,164,000.54314501DCR
DEVELOPMENT FUND 535,228.83011272 DCR
PROOF OF WORK DIFFICULTY 3,975,462,299.70000839
HASH RATE 49.79 TH/s

-Reward Statistics-
BLOCK REWARD 20.53992222 DCR
POW REWARD 12.32395335 DCR
POS REWARD 1.23239533 DCR / ticket
DEV REWARD 2.05399222 DCR
BLOCK REWARD ADJUSTMENT block 1399 of 6144 (2w 2d 11h 35m remaining)

-Stake Statistics-
VOTES IN MEMPOOL 10
TICKETS IN MEMPOOL 27
TICKET PRICE 91.49677969 DCR
TICKET ROI +1.35% per ~30.22 days
TICKET WINDOW block 104 of 144 (3h 30m remaining)
TICKET POOL SIZE 40696 (99.36% of target 40,960)
TICKET POOL VALUE 3,804,008.47111678 DCR (46.59% of total supply)

Prototype: https://xd.adobe.com/spec/f8935f6f-41a8-4239-4cb6-b049623f8070-8ea2/

[dmigwi]

I have taken up this task and I have managed to make some changes to the new homepage based on the earlier progress by @freethinkingway and this mockup #451 (comment)

Although its still work in progress, here is what the right side (Decred BlockChain stats could look like)

My block visualization design is comprised of Icons and tx count. The Orange icons represents the Votes, the Green Icons represents the tickets and the red Icon represents the revoked txs. The fourth Icon (greyish) represents the regular txs.

The design above allows us to implement the concept of multiple themes in a later date for dcrdata.

[xaur]

Commenting on the above screenshot (comment link)

This design is what I call "icons and number" style, opposed to alternative visualization approach where area size is used to visualize the numbers.

First, some comments to fix the current design but stay within "icons and numbers" approach:

• title: "Decred Blockchain" -> "Blocks" to make it clear the tiles are blocks
• add a legend to explain all icons
  • idea: draw an "explainer tile" that has the same shape as other tiles with all elements explained with arrows and labels
• Mempool tile:
  • Add some bg coloring to visually distinguish it from the blocks
  • Align "Mempool" label same way like the #blocknumbers on block titles
• color for tickets: green tix purchases, blue votes, red or orange revocations (must be alarming color)
  • all colors used must be reviewed by our designers and be consistent with other uses
• arrange tix icons by the order of phases in the tix lifecycle: tix purchase, vote, revocation
• idea: do not show revoke icon if there was no revocations
• look for simpler tix icon
  • idea: remove black dot from tix icons for less visual noise
• regular tx:
  • do not use ticket icon for regular tx!
• labels text: remove # from block number, add "ago" after age
• labels positioning: keep block number left aligned, make age right aligned
• make the whole tile clickable, not only block number
• how about fitting more tiles?
  • e.g. fit all icons inside a tile in 1 row, and make 5-6 rows of block tiles

[dmigwi]

I may need help I coming up with the Icons @xaur

[xaur]

@dmigwi I know only 2 shapes for tickets: either one you have now (rectangle with half-circle holes on top and bottom), or the Stakey shape (rectangle with small holes on top). Both are pretty good for tickets. If you pick the current one, I'd remove the black dot from center.

Cannot help with the icon for transaction, need to ask our designers.

[denyszayets]

@xaur @dmigwi if you need help with assets, icons, image, colors, please let me know and I can export them for you.

[xaur]

In this comment I'd like to discuss alternative visualization where area size is used.

What useful data do we want to see in the blocks?

• How big is the block?
  • Some blocks could be visually bigger than others. But that doesn't work well at scale (e.g. 20 kb blocks vs 300 kb blocks)
• Proportion of regular tx and staking tx
  • Sometimes interesting, sometimes not. When Decred gets more tx it will not be too useful to compare hundreds of regular tx to 5-30 ticket tx because their numbers will be of different orders
  • Comparing the amounts of tx of same type between different blocks is interesting
• Proportion of ticket lifecycle phases: tix purchase, vote, revoke
  • I'd love to quickly visually recognize blocks where whales start massively buy tickets (20 per block)
  • Revocations must be noticeable (red or orange), would be useful to notice a bunch of revocations signaling that something went wrong with some pool
• "No" block votes must be clearly seen

With that in mind, one approach is a flat list (table) where:

• Every line (list item) represents one block
• Transactions are colored by type
• First type (gray) are regular tx, the bar is continuous because small separate bars may look poor for hundred tx
• Second (green) are tix purchase, small bars are separate because they are up to 20
• Third type (blue) are votes, the bars are bigger because there are up to 5 votes, No block votes are bloody red
• Fourth type (orange) are revocations, are optional but clearly seen

This actually looks like the current https://explorer.dcrdata.org/blocks but with visuals.

edit: What this allows is to quickly see some data wihtout reading texts or numbers: full blocks, whales buying tickets, spikes of revocations, No block votes.

[dmigwi]

@denyszayets Yes please

[dmigwi]

Mockups used in the newhome page task.

1. https://xd.adobe.com/spec/e9f3f22a-7eb2-4bef-8921-9fc4b04a8b6d/screen/41477c41-0161-45ec-a676-518492458011/1366x800-home/

2. https://xd.adobe.com/spec/e9f3f22a-7eb2-4bef-8921-9fc4b04a8b6d/screen/78a5a58f-fbfb-4dee-a4b6-0149caf1fdb7/1366x800-home-block-selected/

[denyszayets]

@xaur I really like your idea. I'll post a new concept here asap!

[raedah]

shot of current work in progress

[raedah]

@xaur not easy to capture in a screenshot, but hover over will give full descriptions of all items

[chappjc]

Superseded by #1191