Filter and Search tools. Design and usability ? | The Coffeehouse

Sourcecode
Whatever it is, I didn't do it.

In that past I’ve designed software that is for a rather specific user base. With a new product coming up in the next few months +-6 (if all goes well) we are attacking a much broader user base with a more diverse experience level.

I’m having some trouble clearing my mind (forgetting old way’s) at the mid-higher user experience level. I’m trying to find a usable way for a user to search and filter data. I would like it ideally to cover the curve on the different user experience levels.

It has to be a separate form or view part as the base views are different i.e. it’s not always a list of data or a calendar etc.. There are several visualization types in which a user can manipulate and use the data.

At the lower user experience level we have a full text search just a text input.

Lower user experience level mockup:

At the higher user experience level we want to allow specific field filtering (using and, or, all, any etc..). All with the necessary operators or combinations translated to a readable language.

Multiple nested conditions, and spanning of tables/databases (transparent for the most part). Trying not to let a user get bogged down with logic.

Now in some systems this may be overkill, but we expect a large percentage of the more experienced user base to use this for quick reporting purposes (due to the visualization possibilities).

In the past all data started as a list so we had columnar drill down filtering, and the optional advanced filtering similar to the below mockup. No longer possible, as the starting visualization of data on a primary table is user preference and can change at any time between different types/sets of data.

I’m thinking that the best way is to allow the user to build a sentence/phrase so fields, criteria, operators, additional conditions etc.. become parts of that.

So below is a higher level mockup as it is now. I realize it’s not ideal (doesn’t reflect well on sentence/phrase idea) and would like to ask input on way’s to implement this correctly. Keeping in mind that for example a filter could also be something like “Show all records that changed last week” so instead of a date picker you would have a list of choices (last week, last month, yesterday etc..)

Higher user experience level mockup:

I looked at a lot of usability stuff on the subject but almost all of it is a very basic user level or to complicated for a non technical person.

I want a new user to be able to eventually use the advanced tools as their experience progresses so that they can get more value out of the product. I don’t feel comfortable that with the above advanced type of interface a new user will be able to get to a productive stage with this part of the product.

I realize this is a broad question.

It’s a mock up so no graphics have been thought about yet, however if your willing to throw out some ideas in that area I’d love to see/hear it.

I’d really welcome any kind of push in a direction that makes sense, advice, experiences, criticism, ideas, links, and anything else anyone is willing to provide/share.

Much appreciation , and Thanks.

-jason

SimonJ

Basic
I think it is important that all your buttons should look like you could click them. Bare text, such as "Cancel", doesn't.

The usual order of common buttons on the bottom of a dialog is "OK, Cancel" or "OK, Cancel, Apply". OK is used where this dialog will close. Apply is used where the result of the action will be seen in this dialog.

Help button, bottom left, might be better rendered as a question mark in a blue circle in the title bar. See Word 2007, etc.

Consider using a square green GO arrow at the right-hand end of the simple search term box. With that and the cross in the top-right, you don't need separate Cancel and Apply buttons.

Advanced
It is not obvious how the tabs across the top relate to the conditions listed down the form. Are the criteria on these tabs going to be combined with And or Or?

The Add and remove tab buttons are too far away from the tabs to which they refer. Consider putting a "close/remove" x into each tab and a ghosted "Add New" tab on the end of the row.

The top combo box ("All/Any" I presume) only allows you to concatenate all the conditions with AND or OR but you can't specify a combination of those. Consider putting and And/Or combo box at the beginning of each row.

Consider having the green plus at the beginning of a blank row to make it more obvious what it does.

Regards
Simon Jones
Contributing Editor
PC Pro Magazine

littleguru
<3 Seattle

You could put this thing on a single form (or control) with two tabs... One named "simple" and one "advanced". It's most likely that advanced users will also use the simple way for certain searches.

Putting a query together visually is always nice and very easy to understand.

Sourcecode
Whatever it is, I didn't do it.

SimonJ wrote:
Basic
I think it is important that all your buttons should look like you could click them. Bare text, such as "Cancel", doesn't.

They are actually link buttons but you are right it should be more apparent.

SimonJ wrote:

The usual order of common buttons on the bottom of a dialog is "OK, Cancel" or "OK, Cancel, Apply". OK is used where this dialog will close. Apply is used where the result of the action will be seen in this dialog.

Help button, bottom left, might be better rendered as a question mark in a blue circle in the title bar. See Word 2007, etc.

Consider using a square green GO arrow at the right-hand end of the simple search term box. With that and the cross in the top-right, you don't need separate Cancel and Apply buttons.

I'll have to think about this. I've chosen apply on the bottom to keep a constant between the 2 view states.

SimonJ wrote:

Advanced
It is not obvious how the tabs across the top relate to the conditions listed down the form. Are the criteria on these tabs going to be combined with And or Or?

Yes the phrase is modified to show a and/or combo as well as the all/any combo (if you add a second condition).

Any = or, All = and unless 2 identical fields are used, in this case the logic described below comes into effect.

SimonJ wrote:

The Add and remove tab buttons are too far away from the tabs to which they refer. Consider putting a "close/remove" x into each tab and a ghosted "Add New" tab on the end of the row.

The top combo box ("All/Any" I presume) only allows you to concatenate all the conditions with AND or OR but you can't specify a combination of those. Consider putting and And/Or combo box at the beginning of each row.

Good ideas, thanks. The ghost tab + close works.

On the and/or thing I wanted to avoid the extra combo box, so we are *thinking* about doing something a little different.

If 2 fields of the same name are used the 2 move position so that they are one after the other. Then a line is draw linking them with a (?) the default is or. Move over this (?) and a tip pops up explaining the process and difference of the 2. Clicking the (?) toggles between the 2.

SimonJ wrote:

Consider having the green plus at the beginning of a blank row to make it more obvious what it does.

Regards
Simon Jones
Contributing Editor
PC Pro Magazine

All good thanks Smiley

littleguru
<3 Seattle

Sourcecode wrote:

littleguru wrote: You could put this thing on a single form (or control) with two tabs... One named "simple" and one "advanced". It's most likely that advanced users will also use the simple way for certain searches.

Putting a query together visually is always nice and very easy to understand.

Clicking the Advanced button on the bottom changes the view. It is one form. It's just using states. The first option when you open it is the simple method.

thanks for the input.

Wow! It's very much hidden. Creating tabs would make it more visible. Smiley

You should give it your wife/gf and ask her how she would use it Tongue Out

Helps sometimes to find out UI "bugs".

Sourcecode
Whatever it is, I didn't do it.

littleguru wrote:
You could put this thing on a single form (or control) with two tabs... One named "simple" and one "advanced". It's most likely that advanced users will also use the simple way for certain searches.

Putting a query together visually is always nice and very easy to understand.

Clicking the Advanced button on the bottom changes the view. It is one form. It's just using states. The first option when you open it is the simple method.

EDIT: you mean visually as is or different then the mock up?

thanks for the input.

Sourcecode
Whatever it is, I didn't do it.

littleguru wrote:

Sourcecode wrote:

littleguru wrote: You could put this thing on a single form (or control) with two tabs... One named "simple" and one "advanced". It's most likely that advanced users will also use the simple way for certain searches.

Putting a query together visually is always nice and very easy to understand.

Clicking the Advanced button on the bottom changes the view. It is one form. It's just using states. The first option when you open it is the simple method.

thanks for the input.

Wow! It's very much hidden. Creating tabs would make it more visible.

You should give it your wife/gf and ask her how she would use it Helps sometimes to find out UI "bugs".

True, i'll try the tab for switching between states.

Ask my wife? Depends how many man months i want this one feature to take. Tongue Out

(joking). I will when it's actually farther along.

thanks for the input.

Sourcecode
Whatever it is, I didn't do it.

I just want to say thanks to you both, and that your suggestions are appreciated.

However I was kind of looking for suggestions on a better way then the advanced mockup. A better way usability wise to present a user with filter/search power. The basic search can’t get much easier. So more on the advanced search then anything else.

Though the advanced type form above is easy (for already advanced users) I still think that particular method/presentation of building a filter is to complicated and/or unclear for a general type/average user level.

So what are ways to make advanced filtering more comprehensible and usable to an average user ?

Or do you feel that as it is now, advanced filtering will be adequate for all user levels? I tend to think not, but want other opinions.

I’m looking for ideas so even if it means changing everything or parts of the current. I’m not stuck on the way it is now.

Thanks.

-jason

CannotResolveSymbol
{insert caption here}

Sourcecode wrote:

I just want to say thanks to you both, and that your suggestions are appreciated.

However I was kind of looking for suggestions on a better way then the advanced mockup. A better way usability wise to present a user with filter/search power. The basic search can’t get much easier. So more on the advanced search then anything else.

Though the advanced type form above is easy (for already advanced users) I still think that particular method/presentation of building a filter is to complicated and/or unclear for a general type/average user level.

So what are ways to make advanced filtering more comprehensible and usable to an average user ?

Or do you feel that as it is now, advanced filtering will be adequate for all user levels? I tend to think not, but want other opinions.

I’m looking for ideas so even if it means changing everything or parts of the current. I’m not stuck on the way it is now.

Thanks.

-jason

The only thing I'm not clear about with your advanced filter setup is what condition tabs do. What's the difference between a condition tab and a condition that you add to a tab? Will multiple tabs result in an AND or an OR operation? Is there any purpose that the tabs serve that adding conditions to the search would not?

From here, it looks like you're using two different methods to achieve the same thing... either clear up the distinction (in your interface) or only use one of the metaphors.

Sourcecode
Whatever it is, I didn't do it.

CannotResolveSymbol wrote:

Sourcecode wrote:
I just want to say thanks to you both, and that your suggestions are appreciated.

However I was kind of looking for suggestions on a better way then the advanced mockup. A better way usability wise to present a user with filter/search power. The basic search can’t get much easier. So more on the advanced search then anything else.

Though the advanced type form above is easy (for already advanced users) I still think that particular method/presentation of building a filter is to complicated and/or unclear for a general type/average user level.

So what are ways to make advanced filtering more comprehensible and usable to an average user ?

Or do you feel that as it is now, advanced filtering will be adequate for all user levels? I tend to think not, but want other opinions.

I’m looking for ideas so even if it means changing everything or parts of the current. I’m not stuck on the way it is now.

Thanks.

-jason

The only thing I'm not clear about with your advanced filter setup is what condition tabs do. What's the difference between a condition tab and a condition that you add to a tab? Will multiple tabs result in an AND or an OR operation? Is there any purpose that the tabs serve that adding conditions to the search would not?

From here, it looks like you're using two different methods to achieve the same thing... either clear up the distinction (in your interface) or only use one of the metaphors.

Yes. Multiple tabs provide combining of (broad) conditions. True that the lines are also conditions and a distinction needs to be made.

For example using the tabs you could have the first condition say “use all/any of the following conditions” and a second tab that says “combine condition 1 and/or any/all of the following conditions”.

Now depending on the combinations of both line conditions and broad (tab) conditions a user could make filters that make no logical sense. So I’d ideally make it smart enough to identify these different conflicting points and present the user with options/suggestions to correct the ambiguity.

Does that answer that part of your question ?

What I eventually wish to accomplish is a general way for a user to construct a series of phrases and combine them. I want this so that the construction of a filter/query can better reflect their thought process as it pertains to their business role, processes, and immediate requirements.

We can’t be intimidating the user with logic or forcing the user to think logic. Rather allow the user to remain in their current thought process and find information that pertains to the activity or requirements at hand.

As part of this we’ll be creating various name/value sets of phrases that depend on the object/field, data type, and current visualization (view).

I’ll be making changes to the mock up today to take into account some of the suggestions mentioned above. I’ll post a more in depth and clear collection of screens, along with a better use case scenario.

Thanks for your input.