How do I display a lot of account information in the Navigation bar?

Question

My client wants to display several numbers:

1. How much cash you have
2. How much cash you saved
3. How much cash you gave to charity

My proposition was along the following lines. Just display your current balance, and only show the additional info on mouseover (mind you, this is not a finished design):

1 http://3.1m.yt/MfWpG9Zob.png 2 http://3.1m.yt/FNTqDzIyy.png

Now, He wanted the additional info to always be visible. This is going to be my proposal:

3 http://3.1m.yt/xBhvn370D.png

Even though he was probably talking about something like this:

4 http://3.1m.yt/6gsoVOgm2.png

Now, on to my questions:

• Is it important that points number 2 and 3 are always visible? I don't think so, but want to test this in the future.
• If it truly is important, is there a better way to display this additional information?

Answer 1

You could simply make a mix of your client's request and your proposed option: just use icons and numbers. The money values alone will create an element of interest so people will probably click those elements to get more info. Then you can expand the element on click to display more info or even use it as an engagement element, like "how did you get X amount? What can you do to improve it? What can I do with this money?" and stuff like that.

Thus, you add options for the user and convert a static value into a dynamic element with CTAs by simply guiding the user to click that element. And obviously, this means a better performance for the site, so your client will at least appreciate the intention

Keep in mind that in financial apps/websites, there's an element of information (the values themselves) and an element of value (as concept) where both the user and the owner of the site have an interest, so any good action oriented to enhance that value will probably have a better engagement than just some information.

And finally: all the above being said.... Test test test!

Answer 2

Since the client wants the three values always visible, the last option is in the right direction.

You should however make sure that you pay attention to a few things:

Information hierarchy: Make sure the data you are displaying is sized and placed correctly in the top bar. Currently the font size of two of your numbers is larger than the logo and and one is smaller so it looks like the two numbers on the left are more important.

The labels for the numbers and the currency are the same size as the numbers so the importance of the numbers is reduced. Make sure the user notices the most important information which in this case are the numbers.

Group similar content together: The language menu breaks up the numbers group which causes a bit of confusion. You can try grouping by proximity, size and color.

Hope this helps.