User interface ideas
-
Have a look at the DevExpress filter control[^]. You can make the filter as complex as you'd want to, while staying easy to use. Well, as easy as it gets when it can do "everything". It's not that quick to use though I have to say.
Be excellent to each other. And... PARTY ON, DUDES! Abraham Lincoln
I've found the DevExpress filter control easy yet powerful to use, so it may be worth a try to copy the concept.
CEO at: - Rafaga Systems - Para Facturas - Modern Components for the moment...
-
Anybody found a "nice" way to get users to create and use complex filters? I have simple filters and they work well: A drop down for Type: Name, and four different classes. If it's the name, then they get a drop down to select "Contains", "Starts with", "Ends with", "Does not contain" and so forth together with a text box. If it's one of three classes, you get a drop down for "Includes all of", "Includes any of", "Includes none of", and "Does not include", together with a dropdown list of valid values. The final class gets just "Is in" and "Is not in" and a dropdown list. All grouped up in a simple control that I feed a list, and it does the filtering. No problems. Now I've had a request for making it more complex:
"Name Contains 'ABCD' AND Class Includes any off <list> OR Otherclass Is not in <AnotherList>"
for example. Coding wise this is a doodle - that's partly why I made a filter control in the first place. It's trying to work out how to present it to an average user so it's easy to create, understand and edit that's giving me problems. I was thinking of a tree of some kind so it's obvious if the example above is
"A AND (B OR C)"
or
"(A AND B) OR C"
but I'm not sure a tree is that obvious to the average joe... Anyone seen a good way? And I'm not after code, just the presentation ideas - so this isn't a programming question! :laugh:
This message is manufactured from fully recyclable noughts and ones. To recycle this message, please separate into two tidy piles, and take them to your nearest local recycling centre. Please note that in some areas noughts are always replaced with zeros by law, and many facilities cannot recycle zeroes - in this case, please bury them in your back garden and water frequently.
I think there is a huge chasm between the Average Joe and a developer. If I had to guess, I would say that the average Joe doesn't want the filtering functionality. If they could get away with it, they would press a big button that says "Do what I Want" and they'd be done. My guess is that what Joe would want instead is a view of the data that was designed specifically for his primary use case scenario(s). In other words, avoid filters the best you can for the average Joe. Understaninding the content and how it is consumed and why is key here. Identify a default functionality that serves the purposes of the user 90+% of the time. Then Devote the whole screen to making that default scenario feel like a kindergartener could do it. Use the language that Joe is already used to hearing around the shop in your design. Then if a power user still needs filters, put that on a different "Advanced" screen. Maybe a power user could build and save other common scenarios for the Average Joe to consume. Getting Joe to learn to program queries via a user interface is not low hanging fruit even if you deliver a killer UX. Hope it's hepful, -Mikhael :)
-
Anybody found a "nice" way to get users to create and use complex filters? I have simple filters and they work well: A drop down for Type: Name, and four different classes. If it's the name, then they get a drop down to select "Contains", "Starts with", "Ends with", "Does not contain" and so forth together with a text box. If it's one of three classes, you get a drop down for "Includes all of", "Includes any of", "Includes none of", and "Does not include", together with a dropdown list of valid values. The final class gets just "Is in" and "Is not in" and a dropdown list. All grouped up in a simple control that I feed a list, and it does the filtering. No problems. Now I've had a request for making it more complex:
"Name Contains 'ABCD' AND Class Includes any off <list> OR Otherclass Is not in <AnotherList>"
for example. Coding wise this is a doodle - that's partly why I made a filter control in the first place. It's trying to work out how to present it to an average user so it's easy to create, understand and edit that's giving me problems. I was thinking of a tree of some kind so it's obvious if the example above is
"A AND (B OR C)"
or
"(A AND B) OR C"
but I'm not sure a tree is that obvious to the average joe... Anyone seen a good way? And I'm not after code, just the presentation ideas - so this isn't a programming question! :laugh:
This message is manufactured from fully recyclable noughts and ones. To recycle this message, please separate into two tidy piles, and take them to your nearest local recycling centre. Please note that in some areas noughts are always replaced with zeros by law, and many facilities cannot recycle zeroes - in this case, please bury them in your back garden and water frequently.
OriginalGriff wrote:
Anybody found a "nice" way to get users to create and use complex filters?
No. Seriously, most users simply don't understand a logic series more than two items long; they grasp something like "If A then B", but I've found that they get lost beyond that.
-
Anybody found a "nice" way to get users to create and use complex filters? I have simple filters and they work well: A drop down for Type: Name, and four different classes. If it's the name, then they get a drop down to select "Contains", "Starts with", "Ends with", "Does not contain" and so forth together with a text box. If it's one of three classes, you get a drop down for "Includes all of", "Includes any of", "Includes none of", and "Does not include", together with a dropdown list of valid values. The final class gets just "Is in" and "Is not in" and a dropdown list. All grouped up in a simple control that I feed a list, and it does the filtering. No problems. Now I've had a request for making it more complex:
"Name Contains 'ABCD' AND Class Includes any off <list> OR Otherclass Is not in <AnotherList>"
for example. Coding wise this is a doodle - that's partly why I made a filter control in the first place. It's trying to work out how to present it to an average user so it's easy to create, understand and edit that's giving me problems. I was thinking of a tree of some kind so it's obvious if the example above is
"A AND (B OR C)"
or
"(A AND B) OR C"
but I'm not sure a tree is that obvious to the average joe... Anyone seen a good way? And I'm not after code, just the presentation ideas - so this isn't a programming question! :laugh:
This message is manufactured from fully recyclable noughts and ones. To recycle this message, please separate into two tidy piles, and take them to your nearest local recycling centre. Please note that in some areas noughts are always replaced with zeros by law, and many facilities cannot recycle zeroes - in this case, please bury them in your back garden and water frequently.
I've approached this problem by using a left to right tree structure and a drag and drop palette. See http://www.codeproject.com/script/Membership/Uploads/383127/RuleEditor.png[^]. The nice thing about this approach is that you can read it top to bottom just the way you would describe it in language, it contains no parentheses you need to track and it enables arbitrary boolean combinations. From a behavioral perspective, if you drop a logical operator on an expression, it creates the structure seen at the bottom, with a blank spot for a new field. Clicking on any expression that has a field will bring up an in-place editor for that field type.
-
Oooo! That's not bad - a single curly bracket on the LHS "pointing" at the grouping term...
/ A | / / And - | \\ / |Or - \ B
\
|
\ CNeed a bit of thinking about, but that could work. Not sure how you make it obvious how to add a grouping, but that could work...
This message is manufactured from fully recyclable noughts and ones. To recycle this message, please separate into two tidy piles, and take them to your nearest local recycling centre. Please note that in some areas noughts are always replaced with zeros by law, and many facilities cannot recycle zeroes - in this case, please bury them in your back garden and water frequently.
-
Anybody found a "nice" way to get users to create and use complex filters? I have simple filters and they work well: A drop down for Type: Name, and four different classes. If it's the name, then they get a drop down to select "Contains", "Starts with", "Ends with", "Does not contain" and so forth together with a text box. If it's one of three classes, you get a drop down for "Includes all of", "Includes any of", "Includes none of", and "Does not include", together with a dropdown list of valid values. The final class gets just "Is in" and "Is not in" and a dropdown list. All grouped up in a simple control that I feed a list, and it does the filtering. No problems. Now I've had a request for making it more complex:
"Name Contains 'ABCD' AND Class Includes any off <list> OR Otherclass Is not in <AnotherList>"
for example. Coding wise this is a doodle - that's partly why I made a filter control in the first place. It's trying to work out how to present it to an average user so it's easy to create, understand and edit that's giving me problems. I was thinking of a tree of some kind so it's obvious if the example above is
"A AND (B OR C)"
or
"(A AND B) OR C"
but I'm not sure a tree is that obvious to the average joe... Anyone seen a good way? And I'm not after code, just the presentation ideas - so this isn't a programming question! :laugh:
This message is manufactured from fully recyclable noughts and ones. To recycle this message, please separate into two tidy piles, and take them to your nearest local recycling centre. Please note that in some areas noughts are always replaced with zeros by law, and many facilities cannot recycle zeroes - in this case, please bury them in your back garden and water frequently.
Hello, we designed a clever visualization of logical expressions once. Imagine a a huge pile of sand we poured into a vertical flow of sieves. The sand is the set that is to be filtered. The sieves are the conditions. At each sieve the amount of grains is reduced. When there is an OR-path, the flow forks and of course it lets more grains of sand through. This way the sand ripples down from top to bottom and in the end you have your final set. Sounds really colourful, eh? When you design it, it looses a lot of the original metaphor. But it works astonishingly. We made people create complex filters who usually have problems using google. I can send you a wireframe if you're interested.
Jan
-
Hello, we designed a clever visualization of logical expressions once. Imagine a a huge pile of sand we poured into a vertical flow of sieves. The sand is the set that is to be filtered. The sieves are the conditions. At each sieve the amount of grains is reduced. When there is an OR-path, the flow forks and of course it lets more grains of sand through. This way the sand ripples down from top to bottom and in the end you have your final set. Sounds really colourful, eh? When you design it, it looses a lot of the original metaphor. But it works astonishingly. We made people create complex filters who usually have problems using google. I can send you a wireframe if you're interested.
Jan
Sounds interesting - anything which helps user understand what they're doing has got to be worth a look! :laugh: I'll send you a private email so you get my address without exposing either of them to public scrutiny.
This message is manufactured from fully recyclable noughts and ones. To recycle this message, please separate into two tidy piles, and take them to your nearest local recycling centre. Please note that in some areas noughts are always replaced with zeros by law, and many facilities cannot recycle zeroes - in this case, please bury them in your back garden and water frequently.
-
I'd strongly suggest using "and", "or", "not" rather than the C-Style symbols. Unless the user is a programmer, there is no reason to assume familiarity with these. Further, in the absence of bit-wise operations, why on earth use "&&"?
"If you don't fail at least 90 percent of the time, you're not aiming high enough." Alan Kay.
I agree, that would be better unless it makes validation against your query language impossible which seems unlikely.
"The secret of happiness is freedom, and the secret of freedom, courage." Thucydides (B.C. 460-400)
-
Anybody found a "nice" way to get users to create and use complex filters? I have simple filters and they work well: A drop down for Type: Name, and four different classes. If it's the name, then they get a drop down to select "Contains", "Starts with", "Ends with", "Does not contain" and so forth together with a text box. If it's one of three classes, you get a drop down for "Includes all of", "Includes any of", "Includes none of", and "Does not include", together with a dropdown list of valid values. The final class gets just "Is in" and "Is not in" and a dropdown list. All grouped up in a simple control that I feed a list, and it does the filtering. No problems. Now I've had a request for making it more complex:
"Name Contains 'ABCD' AND Class Includes any off <list> OR Otherclass Is not in <AnotherList>"
for example. Coding wise this is a doodle - that's partly why I made a filter control in the first place. It's trying to work out how to present it to an average user so it's easy to create, understand and edit that's giving me problems. I was thinking of a tree of some kind so it's obvious if the example above is
"A AND (B OR C)"
or
"(A AND B) OR C"
but I'm not sure a tree is that obvious to the average joe... Anyone seen a good way? And I'm not after code, just the presentation ideas - so this isn't a programming question! :laugh:
This message is manufactured from fully recyclable noughts and ones. To recycle this message, please separate into two tidy piles, and take them to your nearest local recycling centre. Please note that in some areas noughts are always replaced with zeros by law, and many facilities cannot recycle zeroes - in this case, please bury them in your back garden and water frequently.
I don't know if it qualifies as 'nice' or not, but we had a similar problem where we tried several approaches but the one that stuck was using a tree view. The filter rules are setup using controls like you described and then the rule is added to the tree. Each rule is displayed in the tree as the near-English description of the rule (i.e where name is one of 'roy', 'fred'). The basic idea is that rules nested below another row (i.e a child) are and-ed together (with the parent). Rules that are at the same level of the tree are or-ed together with their sibilings. In short, the tree becomes a visual indication of the parentheses. The rules can also be dragged/dropped to reposition within the tree, or copied and pasted between trees in different windows with the same filter control. Double-clicking a rule reloads it for editing. I can't say I'm totally 100% in love with it, but so far our users seem to understand the concept, or do so with just a little training, and it works. I haven't yet seen anything better - even the TFS style grouping of rules in a grid (see work item query construction) seems to confuse a lot of users. Of course the real problem is users are apt to try and build conditions that are beyond their level of comprehension regardless of the UI they're using.
-
I've approached this problem by using a left to right tree structure and a drag and drop palette. See http://www.codeproject.com/script/Membership/Uploads/383127/RuleEditor.png[^]. The nice thing about this approach is that you can read it top to bottom just the way you would describe it in language, it contains no parentheses you need to track and it enables arbitrary boolean combinations. From a behavioral perspective, if you drop a logical operator on an expression, it creates the structure seen at the bottom, with a blank spot for a new field. Clicking on any expression that has a field will bring up an in-place editor for that field type.
Nice, this would be a good article. Talking about which, I believe the link in your signature would benefit from an update.
Be excellent to each other. And... PARTY ON, DUDES! Abraham Lincoln
-
Nice, this would be a good article. Talking about which, I believe the link in your signature would benefit from an update.
Be excellent to each other. And... PARTY ON, DUDES! Abraham Lincoln
I've thought about this Jörgen. Honestly, I think this would be too big for an article. This is a custom drawn editor and quite complex. As currently written, it's very specific to our data model. The most interesting aspect of it that might be share-worthy really is the visual design and most of that is pretty self explanatory. I could be wrong, and I like writing articles. But I don't see how I can do with without doing more work than I'm able to right now. :)
-
I've thought about this Jörgen. Honestly, I think this would be too big for an article. This is a custom drawn editor and quite complex. As currently written, it's very specific to our data model. The most interesting aspect of it that might be share-worthy really is the visual design and most of that is pretty self explanatory. I could be wrong, and I like writing articles. But I don't see how I can do with without doing more work than I'm able to right now. :)
Tom Clement wrote:
But I don't see how I can do with without doing more work than I'm able to right now
I know all about that. :)
Be excellent to each other. And... PARTY ON, DUDES! Abraham Lincoln
-
Anybody found a "nice" way to get users to create and use complex filters? I have simple filters and they work well: A drop down for Type: Name, and four different classes. If it's the name, then they get a drop down to select "Contains", "Starts with", "Ends with", "Does not contain" and so forth together with a text box. If it's one of three classes, you get a drop down for "Includes all of", "Includes any of", "Includes none of", and "Does not include", together with a dropdown list of valid values. The final class gets just "Is in" and "Is not in" and a dropdown list. All grouped up in a simple control that I feed a list, and it does the filtering. No problems. Now I've had a request for making it more complex:
"Name Contains 'ABCD' AND Class Includes any off <list> OR Otherclass Is not in <AnotherList>"
for example. Coding wise this is a doodle - that's partly why I made a filter control in the first place. It's trying to work out how to present it to an average user so it's easy to create, understand and edit that's giving me problems. I was thinking of a tree of some kind so it's obvious if the example above is
"A AND (B OR C)"
or
"(A AND B) OR C"
but I'm not sure a tree is that obvious to the average joe... Anyone seen a good way? And I'm not after code, just the presentation ideas - so this isn't a programming question! :laugh:
This message is manufactured from fully recyclable noughts and ones. To recycle this message, please separate into two tidy piles, and take them to your nearest local recycling centre. Please note that in some areas noughts are always replaced with zeros by law, and many facilities cannot recycle zeroes - in this case, please bury them in your back garden and water frequently.
I have read through this thread and have come to the conclusion that you all are thinking like programmers. The average user will not create a complex filter. Even above average users are unlikely to do so.(Most will do a simple filter they understand and transfer data to excel.) The real question is: How well do you know your users and how they use the system? In order for most to use a complex filter, it needs to be easy. And I mean really easy. That means saving complex filters and allowing them to choose them with a single click. A very limited number of these filters will likely fulfill the needs of 90%+ of your users, will save the company/users time, and will make the data set that gets discussed consistent (as everyone would likely pull it using the same filter). This does not take lots of work to do and you will be seen as a miracle worker. Write a good user manual and allow the <10% of the users to create/edit/save complex filters else you will get phone calls when needs change.
