In a web application, I've just added a log tables that displays chronologicaly the last events that are monitored by the application.

Those events are of two main types: inputs and outputs.

In order to quickly guess the type of event, I've been asked to colorize the input rows in green and the output ones using red.

My question is: except by adding a color to each row, how can I add a hint about the type of event?

1 Answer 1


I'd wouldn't use green and red into that fashion, because red tends to portray the feeling that whatever it's logged it has gone wrong. I'd use something like this instead:


download bmml source – Wireframes created with Balsamiq Mockups

for inputs


download bmml source

for outputs

The arrow pointing in an out of the icon indicates I/O tasks. (The icon could also be a database or any other object that make sense for your application).

You can add color to the arrows (green and red) and this way the "bad feeling" about a red row might change a bit (and your application will look cleaner; look that I didn't use an alarming red).


Try to group rows by similar events or by dates, collapse all and try to keep the most recent events expanded. This helps not displaying a huge lot of information upfront, if the user is looking for something that happened just now he might be able to look in the expanded rows, if s/he's looking for old data, s/he might be able to navigate to it easier without scrolling much.

This is pretty much the way SE does it and I find it pretty comfortable.


download bmml source

Hope this helps :)

  • Great input, thanks! As the logs displayed in the table can be filtered, would you keep the grouping-by-date feature once a filter has been applied? Commented Jan 22, 2013 at 23:36
  • 1
    Great answer, just one tiny tiny thing in the last image: If you align the pages vertically and make them the same size, it looks like the input and output are entering/leaving from the same place
    – Yisela
    Commented Jan 23, 2013 at 3:53
  • Thanks @yisela, I tried to fix it but BM uses different icons... but I think the idea is there...
    – edgarator
    Commented Jan 23, 2013 at 4:04

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.