Advice on GUI layout for security product

Question

We've developed a security product which identifies certain types of unauthorized traffic on a network. The interface for displaying the messages is a Java Servlet generated page.

At this point, the page is a glorified console log. There is a big text box with lines of text added as warnings and messages are generated. A couple of cool features are the page is updated automatically using reverse ajax (DRW) and the latest messages goes to the top of the display.

Is there a way to make the look cooler? Also, we would like to somehow highlight or otherwise emphasize certain more serious warnings.

Any thoughts are most welcome.

Answer 1

Well, you'll want some type of filtering system. Allow users to create filters to filter out certain messages (to ignore, highlight, etc.).

Advanced searching would be useful as well.

Add mouse interactions by letting users click words and search from there, or something similar.

Just my $.02.

Answer 2

Use established GUI ideas, particularly from AV suites. If you've any way of grading the analyses (from a 'good' state, through 'moderate' risk/danger to 'high risk'), then use some form of colour to denote the grading. Ideally, and dependant on the increments, use something akin to

.all-well {background-color: #0c0; /* not using #0f0 because it's a little too bright, for me */
}
.slight-risk {background-color: #f90; 
}
.danger-will-robinson {background-color: #c00; /* again #f00 is just too much for my eyes */
}

Without details or screenshots of your app it's hard to suggest anything that isn't as basic and generic as above, sorry. If you add more info, I'll try to offer better suggestions.

Answer 3

I don’t know about “cool,” but a functional layout depends on the how the users use the information. Here’re some random suggestions, the appropriateness of each depending on your users, tasks, and limitations of the technical environment:

• A table of messages, like your console, but with separate fields to allow the user to sort, query, filter, and scan the messages on various criteria (e.g., timestamp, IP address). This will allow users to group messages together in order to see patterns that indicate a single problem.

• A table of incidents, where your app intelligently groups related messages into a single incident (e.g., a single intrusion) for the users, making the task much more manageable if there are a zillion messages. Users can click or double-click on an incident to see more details (e.g., lists of related messages).

• A diagram of the network, with components highlighted or otherwise graphically coded if they have associated messages (or incidents). This may allow users to see relations among messages/incidents based on network location. Users can also intervene directly by interacting with the network through the diagram.

• Whatever the layout, a means to “replay” a time period so the user can see with animation how an incident develops, and trace incidents back in time to their origin.

These options can be combined of course to support different tasks.

For highlighting more serious messages, it’s hard to beat color-coding (hue) for making certain things jump out from the crowd. However, you should redundantly code at least one other graphic attribute for accessibility and B&W printing purposes. I’d suggest brightness (e.g., white, amber, red, for increasing levels of severity), size (especially if you can quantify the seriousness), or number (one to three exclaimation marks with increasing severity). Incorporating this coding with a sortable field so users can sort by severity as well as other fields. See http://www.zuschlogin.com/?p=51 for more.

Since your users appear to be network administrators, I’d focus on the professional-IT-versions of AV suites for other ideas, rather than AV programs for consumers/endusers, who have very different issues and knowledge levels.