For the sake of this question, assume that I am developing a monitoring platform for a power plant ( I am not actually doing that, but the situation is similar, so this assumption should work).

Every now and then, the system extracts information from each generator system and each generator has compartments that return information. I need to find a way of displaying the last extract times quick and easily at the top of of a certain page. This information is by itself not very important, but it serves as a quick glance "we got information recently" or "shit, no info came in last night" kind of thing.

I have a line at the top right of the page that looks something like:

->Information extracts: Compartment 1: Good | Compartment 2: Good | Other: Good

Then, when you actually click on the line, a div right below it is shown. So, it looks a bit like:

->Information extracts: Compartment 1: Good | Compartment 2: Critical | Other: Good
  Generator1            Compartment 1: 10:05 | Compartment 2: 10:15 | Ax500: 10:25
  Generator2            Compartment 1: 11:05 | Compartment 2: 11:15 | Bx500: 11:25
  Generator3            Compartment 1: 15:05 | Compartment 2: 35 hours ago | Ax500: 15:25

Note 1: The -> is a right arrow picture that changes to a down arrow picture when the thingy is clicked.

Note 2: The 'Other' field is less generic than I made it seem. It is just that depending on the generator system, a different system is polled for the same data and making that distinction is slightly important.

Note 3: Whether something is Good or Critical depends on whether any of the generators had an extract that happened too long ago. So, in this case, Compartment 2 is shown as critical because generator 3's last data extract happened 35 hours ago which exceeded the expected threshold of an extract happening every 24 hours.

Unfortunately, right now, it is just a simple html table in a div. There is no real styling. For the life of me, I cannot think about how to improve this, but I know that it doesn't look very nice right now. It presents the data needed and it is nice and simple, but in theory, it could be better.

I thought about perhaps adding some styling to the td boxes and perhaps making some of the fields stand out more. So, for example making the generator names (e.g. generator 1) pop into the page or out of the page and doing similar things to the times shown. Unfortunately, stuff like that makes it look really busy.

So, do you guys have any suggestions about styling I could use?

Or, would it be better to ditch the table altogether and find a different way of presenting the data? Me and my team mates have pondered this for a while and we can't really think of a better way. What do you guys think?

1 Answer 1


When thinking about how to design things in a situation like this, break out of 's or HTML-tags and just draw on a piece of paper :)

What I did:

  • Repeat words as little as possible
  • Highlight with size what is more important
  • Separate top row from sub-rows

This is what resulted when from me doing that:

enter image description here

No doubt there are 100's more ways to do this and a Visual designer will do a great job at it but this was just a quick sketch.

  • Thanks a lot mate. I will draw some stuff and hopefully I will come up with something good. Your answer helped a great deal. :P
    – zerminator
    Commented Jun 28, 2012 at 18:19

Your Answer

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

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