Hot answers tagged

40

See also iTunes 9 or later. It adds the ability to do "nested" AND / OR expressions, akin to how a programmer would do it with parenthesis:


34

The main problem non-technical users have with Boolean logic is understanding the difference between AND and OR because it doesn’t always correspond to natural language (e.g., “show me orders from New York and New Jersey” almost certainly means Location = NY OR Location = NJ). Often users tend to interpret "or" to be an an exclusive OR. Then there’s the ...


19

This one tested well with both the technical and non-technical users and can generate pretty much any possible database query... The benefits are that it's very clear and a user can drag and drop (or delete) any expression or group of expressions in the tree. The down side is how much space it consumes.


19

A dropdown list (or combobox) should already be a clear indication that you need to select an item from there, so wasting the first item by telling someone this is redundant and a poor idea. The only times that I would recommend having some other text in the dropdown are: when it is not essential to select an item when you want effectively to select ...


15

While there are a few different ways to do what your asking; I prefer the "free tag" input method (not sure if there is a better name for this component). Basically users are allowed to enter in terms/tags/values into an makeshift input. Suggested/autocompleted terms terms/tags appear to the user as they type. As terms are completed/selected they appear in ...


10

Radio buttons actually have a very different physical analogy than the paper one you mention: That's also why they are called radio button. I don't know who invented the combo box or how he came up with the idea. I don't think that anyone here will be able to state with confidence how the inventor came up with the idea. I do think your statement that ...


9

It depends on the level of sophistication of your users. We have something similar in the current version of the interface have left out grouping and fixed the conjunction between to terms to OR. Each term can be negated. Most users are fine with that kind of querying and most of them would not be able to formulate more advanced queries correctly. We are now ...


9

Your "All" option needs to be first, not last. Otherwise a user who needs all airlines might go through the list and tick all of them before he gets to the end of the list and sees that he could've accomplished it with a single click. In terms of text, either "All airlines" or "Any airline" is good (assuming that it's the same in your app). Icon ...


8

I like the way Apple Mail's rules work:


8

The Chosen javascript plugin may be exactly what you're after. It compiles all previous selections in a nice stack while letting you continue to make selections.


8

Dropdown lists came out of good design, just like radio buttons :). It's not about importing an analogy from the physical world, it's about providing a solution to a design problem. There was a need to let people choose out of a list of options, without having the list take up all your real estate. One solution would be to put the list inside a modal window, ...


6

The most obvious case when to prefer such a component over a classical one is when the user is able to input something of their own that doesn't yet exist in the system (e.g. tag/classify some items). This kind of input component works also as a direct way to both create new items and select those that already exist. The new items can then be ...


6

Looks like the Windows 7 UX Guide has some pointers specific to special values which they refer to as meta-options. The same recommendations are also made for meta-options wihtin ComboBoxes. Place options that represent All or None at the beginning of the list, regardless of sort order of the remaining items. Enclose meta-options in parentheses. ...


5

One way of doing this is to have radio buttons: * Existing Item | Choose item combobox | * New Item | Text field to make new item | You'd disable the the combo box when selecting "New Item" and vice versa. You could also compact this down to * Existing Item * New Item | Combo box OR Text field depending on what's selected | ...


5

Assuming you mean you want to show that the value has changed and therefore the user needs to hit "Save" you could do one of the following: Change the border of the control. This might be hard to spot or get confused with validation errors and may well remove the 3D appearance (depending on how you do it). Add some sort of mark (asterisk, dagger, ...


5

Did you see how GMail solved it? I think it's pretty elegant and efficient to use: No selection / text input: Text input without match (creates new label on enter):


5

If your users are advanced enough to know the hierarchy of a query, any graphical interface you give them has to be fluid enough not to get in their way. I think an interface based on dragging and dropping elements to create an implicit hierarchy is ideal. Here's an extended annotated visual example of how a user might construct the query (A and B) or ((not ...


5

On iOS devices, the "drop down" control is rendered as a large-target control that takes up half the screen and allows the user to swipe through the list easily. Whichever item is in the middle of the reticle is selected. This way, you only need to touch to activate the control, swipe to select, and touch again to confirm. These touches aren't superfluous ...


5

In general it is always descending. But for forecast, it is best to use ascending. Simply because forecast always means future, so always have date from now to the future. If you see weather forecast it is also ascending link. If you look at the stock market, it always shows dates in ascending order. If you think of 2020, I would suggest instead of giving ...


5

Long lists or where unavailable options don't matter When you have long lists, or where unavailable options don't matter, you can simply leave them out. Airline flight booking is an example of this. If I chose a starting point, I only care what my possible destinations are, and so this is far better than a list of all possible destinations with everything ...


4

Microsoft Access had a reasonable attempt at a simple database query UI by producing a visual version of "Query by Example" It has a more natural language that avoids need for nested UI, at the expense of occasionally slightly more redundant entries in lines. download bmml source – Wireframes created with Balsamiq Mockups


4

There is a jquery plugin to do this, called QueryBuilder, which do this in an interesting way : http://mistic100.github.io/jQuery-QueryBuilder/


4

Your first option is fine, except I'd list the selected items horizontally under the combo. This doesn't mess up your layout as much as the vertical list. The solutions that put the selected items within the visible row do not scale beyond two or three very short items, not to mention long ones. They also don't let you easily remove your items, because you ...


4

It should be listed. And the default behaviour of browser combox box dropdowns is to have the selected item as first item. Otherwise, clicking the combo box, it would be unclear how to retain the currently selected value once the drop down has opened. While clicking outside the combo box might reselect or reset to the currently selected value, it is much ...


4

Menus have been an integral part of a GUI, right from it's inception. The Xerox Star was the first GUI system with the WIMP (Windows, Icon, Menus and Pointer) metaphor. Later Mac was the first one to gain commercial success with it's Mac OS 1.1 in 1984. The earliest example of the interaction of scrolling a list/rolling out a list is the parchment paper ...


4

The first combo boxes I saw were a mix of pop-up menus paired with an EDITABLE text field (a combination of the two, hence 'combo'). In that context, they make much more sense. Here's a classic popup button: Whereas popup buttons were a menu that showed only the selected choice from the (un-editable) pop-up menu, combo boxes consisted of an editable text ...


4

Your situation is outside of the norm, so don't expect a guide to cover your situation exactly. Look for a similar principle and apply your judgement. I would argue that you should put the control in a group label (as per your first example) to clearly indicate that the settings are related to the control. Microsoft's guidelines assume that the controls ...


4

Grey out the invalid/not-available options in the output field. It is similar to the contextual menus we are so used to. Just make sure the user is aware of the relation between the two combo-boxes. Inthe mockup, C is selected for input and correspondingly, 1 and 4 are disabled in output. When you grey out the options, they are still visible, but, ...


4

I think that this is new ground without a consensus yet. For example, Wikipedia doesn't mention this on its GUI Widgets list. You've got the ASP.NET "Autocomplete Textbox". I think that name works, but is not completely clear as to whether the textbox accepts multiple values or not. If you allow new values to be entered, "autosuggest textbox" may be good ...


4

Type-ahead Filter: If the field when entered displays a drop-down of all eligible values, and when the user starts typing into the field the options in the drop-down is reduced by hiding non-matching values, then this is a type-ahead filter. Auto-Suggest Field: A type-ahead field which does not display the drop-down when first entered, instead waiting ...



Only top voted, non community-wiki answers of a minimum length are eligible