What is a space-efficient way to display two numbers next to each other while minimising confusion?

Question

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?

Answer 1

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].

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.

Answer 2

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}