Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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
add comment

2 Answers 2

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:

mockup

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
add comment

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

Your Answer

 
discard

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.