steemit UI suggestion - change $ sign in Pending Payout to STU.

problem:

The $ sign in the Pending Payout display for listings is highly confusing, as is the value that is displayed behind it. The Pending Payout is displayed in different locations, the screenshots below give two examples, with the item in question circled by a blue squiggly line:.

Within a list of posts:

At the bottom of a post:

It's not just confusing to the average user, but was until recently also confusing to witness @dragosroua as his recent post indicates. A quote from this post:

The main confusion point is the "$" displayed by default near the rewards by Steemit (and busy, and eSteem). This "$" is not a USD. It has nothing to do with it. It's also not a SBD. So, what is it? It's what I'l call from now on a "Steem Token Unit", or STU. This is different from SBD and STEEM as currencies, and it's actually the expression of the underlying value storage in the STEEM blockchain, which goes under the name vests.

So, the potential reward you see near your posts is actually expressed in STU.

I like his suggestion to reference this value as a "Steem Token Unit" or STU.

suggestion:

I propose to make a simple UI change and replace the "$" symbol with the string "STU" (at 85% font size to make it less prominent). Given the previous two screenshots, a mockup of the proposed solution looks like:

Within a list of posts:

At the bottom of a post:

User's might still have a question what "STU" means, but that can be explained in the steemit FAQ or with some kind of tooltip if desired.

benefits:

This minor change reduces major user confusion.

implementation:

The screenshots above provide info on two locations where the Pending Payout can appear. I don't know what the full set of possible locations is, a code search would have to identify all those I assume. The actual change is simple, replace the "$" symbol with the text "STU".
If my suggestion to reduce the font-size is followed as well, then a minor CSS change is required:

.FormattedAsset .prefix {
    padding-right: 0.2rem;        <-- currently 0.1rem
    font-size: 85%;                         <-- new
}

Potentially a new CSS class needs to be introduced if the above class(es) are used elsewhere for other purposes as well.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---