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.

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?

share|improve this question

1 Answer 1

up vote 6 down vote accepted

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

for inputs

mockup

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

Bonus:

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.

mockup

download bmml source

Hope this helps :)

share|improve this answer
    
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? –  Yannick Blondeau Jan 22 '13 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 Jan 23 '13 at 3:53
    
Thanks @yisela, I tried to fix it but BM uses different icons... but I think the idea is there... –  edgarator Jan 23 '13 at 4:04

Your Answer

 
discard

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.