Horizontal Grouping GUI

22 Jun 2010 - 4:40pm
6 years ago
2 replies
1210 reads

I've been charged with designing a horizontal version of the attached graphic.

Think of the 'Conditions' area like the white text box where you type your search query in Google.

Pictured are 2 groups of items. The outer group (colored blue) has a right border that is blue with vertical lines and a triangle. This indicates it is an AND group. The inner group (colored green) has right border that is orangish with diagonal lines and a half-circle. This indicates it is an OR group.

Inside each of the groups are some key / value pairs. The inner-most are left value IS EQUAL TO the right value. The outer-most are the left value IS NOT EQUAL TO the right value.

If this were an if statement it would read as follows:

if ( ( SourcePort == 25 || DestinationPort == 25 ) && DestinationMachine != MailServerIP && SourceMachine != MailServerIP )
// true

Before you say it - yes, I know the if statement is a nice, compact way to represent this, AND it's horizontal! However I need to come up with a way to show the above if statement in a colorful GUI similar to the attached graphic, but horizontally. I have VERY limited vertical space to deal with (about 50 pixels, though on roll-over it could expand to as much as around 300 if necessary). I've got a minimum of 800 pixels in which to lay it out horizontally before I have to add a horizontal scroll bar (but this area could grow based on the user's screen resolution).

I've got a couple of ideas, but I figured I'd crowd-source the problem to see if you guys could come up with any more. Maybe there is a design pattern that fits this bill nicely that I'm overlooking.

Thanks a TON!

some other things to consider:
You don't have to be able to see the whole thing all at once, but it'd be nice.
Things can expand/collapse if needed.
User will be able to rearrange the items (e.g. drag/drop key/value pairs into other groups, drag a group inside/outside of another group etc, drag items to replace a key or a value.
There can be n-number of groups and n-number of key/value pairs (the largest one I'm aware of has around 60 different groups containing around 90 different key/value pairs - but it is very a-typical)

SMTP_Traffic_filter.jpg25.32 KB


24 Jun 2010 - 12:08am
Mathew Sanders

You could just take the existing interface and stack each condition horizontally instead of vertically?

Although triangles/circles are a convention in many diagrams to represent and/or logic, you might also want to consider switching to a more natural language/sentence format (which coincidentally happens to work perfectly presented as horizontal lines).

If the pencil icon is being used to represent parts of the condition that can be edited, you might want to consider adopting a convention that indicates this with less space (e.g. underline to show click-to-edit). 

Here's a quick mock up that hopefully might help spark some ideas. :-)


Some quick ideas for showing logic conditions 130.03 KB
24 Jun 2010 - 9:31pm

Brilliant Mathew. Thanks a ton for taking the time to address my request. It really helped set me validate some of the directions I'd experimented with, as well as gave me some ideas to augment other avenues I'd tried.

Syndicate content Get the feed