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 am going to design a management level monitoring page for displaying some sums and counts. No interaction is allowed and it will be used as a monitoring page on a big LCD in the managers view. The project is a web-based application using jQuery. I am looking for some idea to design this page. The amounts are not suitable for charts or guages. But I don't want to display them as raw text and some kind of graphics for making it eye-catching is intended.

What is the best way to create an eye-catching display of numeric values in a web page?

share|improve this question
This isn't the right place for this kind of requests. Voted to close. –  Phil Jul 20 '11 at 11:30
If text, charts and gauges are no good you are left with indicating data in other ways using perhaps size, color, time and location, but agree this is the wrong place for this question. Although Graphic Design SE will probably be more appropriate, I also suggest you provide some examples and an idea of how much data is involved, how the data may change and what is important for your managers to ascertain from a quick glance at the screen. I hesitated to vote for closing because I feel great data visualisation makes for a better user experience... –  Roger Attrill Jul 20 '11 at 11:42
I think it's an OK UX question, though probably suited to GD as typically dashboard apps for exec's are really more about eye candy than anything. –  DA01 Jul 20 '11 at 13:47
When I asked this question here in stackoverflow.com, they asked me to move it here. I am completely confused where is the right place for asking this question. –  Farshid Zaker Jul 20 '11 at 14:18
This question is really about typography, color, sizing and how it relates to conversion (in this case, conversion means interpreting the information easily at a glance and acting on it). I think it's a valid design question for both UX and GD. Let's keep it here and see what kind of answers show up; if we don't get anything valuable we can move it to GD and see if they have something to add. –  Rahul Jul 20 '11 at 14:40

5 Answers 5

Depending on the nature of data, you can use Tufte's Sparklines. This approach combines text, color and small graphics. Google Analytics makes use of this approach in their control panel:

enter image description here

share|improve this answer
+1 Tufte is definitely the man to read up on for this type of stuff. –  Matt Rockwell Jul 20 '11 at 14:45
Here is a link to check out Edward Tufte's books. He is the god of data visualization. edwardtufte.com/tufte/books_vdqi –  Matt Rockwell Jul 20 '11 at 14:49

Take a look at Ducksboard, an online service that you can use to monitor information coming from other web services like Mailchimp, Twitter, Zendesk, etc. They have some good inspiration regarding how to display various kinds of information graphically using graphs, large numerical readouts, sparklines, and specific data formats like weather, time, etc.

You can try a demo here.

share|improve this answer

My preferred approach is a big number, with it's meaning in smaller text below. If it's sums you could work out a flow-chart that joins the values into sums. Counts sounds like it could work with gauges but you'd need a max value. Otherwise you could use "sticks", where you cross over the fifth one as you do on paper. It depends if a high value is good or bad. They also work great with other visualisations, like Tufte's Sparklines mentioned in Pau Giner's answer.

StackExchange uses this next to the questions on listings, with "X votes" and "Y answers":

enter image description here

I've used this on a simple ReadItLater stats site:

enter image description here

share|improve this answer
Thanks for response. In fact I am looking for a graphical text solution, not pure text. For example, this (an rgraph sample) is a good starting point. But it's not as cool as what I want. –  Farshid Zaker Jul 20 '11 at 14:20
I see. I find the big number in a good font and nice color to be aestheticly pleasing. You can also use them with other things, such as Tufte's sparklines as mentioned above. –  John-Philip Jul 21 '11 at 21:00

How about something that repeatedly morphs the text between the label and the value, that could be styled however you like in terms of size, colors, line thicknesses and fills.

For example, you can do this using (the fantastic) Raphael.js - see the text morphing demo - just type in a series of letters or numbers and the shape morphs between each character. It should be sufficiently 'eye-catching'.

share|improve this answer

I'm with @John-Philip - use numbers in a large font, you can then use colours and saturation to give meaning to the numbers.

If you're looking for graphing tools the flot graphing library is first-rate and is used by wordpress among others for displaying their statistics. Its based on javascript so fits in with your jquery.

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.