User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm working on a site that needs to show two balances next to each other, preferably in the header next to a user's name. The issue I'm having is differentiating the balances enough that they don't get confused or cluttered.

The two number balances are:

  • Giving (Ex. 3,000)
  • Received (Ex. 10,000)

Does anyone have any clever ideas how to distinguish these while saving space?

share|improve this question
up vote 1 down vote accepted

One way to do this is actually found here, on UX.SE. If you look at your name at the top of the page, you'll notice four different counts [Reputation points, No of Gold badges, No of Silver badges and No of Bronze badges].

UX.SE user and status

If you apply the same to your app, it could look like this:


download bmml source – Wireframes created with Balsamiq Mockups

a plus(+) sign would represent received, and a minus (-) sign would represent giving. You could also use colors, if you find some appropriate.

share|improve this answer

Default signs in most finance systems are arrow indicators: red down arrow for spent and green up arrow for received money. So it is the clearest way to represent balances using such signs, for instance in such compact way:


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.