8

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?

Improve this question
6
  • This isn't the right place for this kind of requests. Voted to close.
    – Phil
    Jul 20, 2011 at 11:30
  • 5
    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, 2011 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, 2011 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, 2011 at 14:18
  • 5
    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, 2011 at 14:40

4 Answers 4

Reset to default
13

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

Improve this answer
3
4

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.

Improve this answer
1

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

Improve this answer
2
  • 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, 2011 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, 2011 at 21:00
0

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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