2

In this application there are several screens that guide a user through filling out criteria meant to complete specific queries. In order to facilitate the selection of multiple items we have created a custom listbox type of control that I would like to add an ignore type toggle to.

enter image description here

This custom control uses progressive disclosure to allow searching through and selecting items that are then shown in a read only fashion when the progressive disclosure expander button is not engaged. To picture this control it looks like a simple listbox but instead of having just a label at the top it has an additional down arrow button that is in the upper right corner so that it sits above the listbox but opposite of the associated label.

A few questions:

  • Should I try to create some type of icon inside of the control layout itself or should I try instead to make the ignore option separate from the control but just position it near the grid control in some fashion?
  • If I'm to make an icon for a toggle button what should the icon depict? I'm leaning towards a power symbol as used on common electronics.
  • Should I disable the associated listbox so that it cannot be edited? I'm leaning towards yes although there is some compelling stuff in the Windows UXGuide which suggests not disabling some subordinate controls.
  • I've been avoiding the idea of collapsing the listbox when that part of the query criteria is toggled to be ignored mainly because it would complicate the layout of forms that have several similar collapsible controls but would this be a preferred design? Are there ways to do this without making it seem awkward?

Other facts: Sometimes there are 3 or even 4 of these types of controls on a single form so it would be best if the toggle appears naturally associated with the intended list control and does not add too much noise or weight to the existing controls.

I'm open to any ideas or suggestions you may have, and I'll try to add a mock-up of the control if I get a chance.

Improve this question

1 Answer 1

Reset to default
3

If I understand your question, you want to be able to include all the terms in the query most of the time, but let users exclude them from the query temporarily without deleting them altogether. If I have that wrong, we'll burn that bridge when we cross it. I'm also going to assume there are enough other constraints that a list box in a form is the right approach, although it seems a bit hacky to start.

Rather than any special iconography, I would use text treatment and standard checkbox controls. At rest, the control shows all the terms. The included terms are in the standard text color, and the excluded terms are struck through and in the disabled text color.

When the mouse hovers over the control (or it gets keyboard focus), checkboxes appear. By hiding the affordance most of the time, you can keep the clutter factor down.

To help clarify the meaning of the control, you might want to add some more hover feedback over the controls themselves.

here's a sketch of the three states I'm describing: rest, hover, and hover over checkbox https://i.stack.imgur.com/JUg4y.png

Hope this helps!

Improve this answer
3
  • Great ideas! Since the control will at some times hold thousands of items I don't think I can show the disabled items at rest. What I've been doing instead is using that upper right drop down button to show an editable version of the list that has checkboxes, maybe I'll consider engaging this ui on mouse over as you suggest as it may be an easier way for the user to discover it. Besides all that, the ignore option that I'm looking to include is really a more higher level ignore that disregards that filter altogether. This would also behave differently than selecting all the items individually
    – jpierson
    Jan 28, 2011 at 17:55
  • Intersting. I wonder if there are other affordances that could work here. The way that address boxes work in modern email sites and clients, for example, might be a way to show a list of entries: "[Banana] [Tent] [Wrench] [Donkey Jaw Bone] +251 others". This could lend itself to having a single checkbox that would take the entire contents out of the query. An edit link or button could expand to something like the list box you currently use.
    – Pettiross
    Jan 29, 2011 at 5:50
  • Actually I already have a control similar to the one you describe. Currently I'm using it in cases wher users typically make a single selection but allows multipleto be selected vai combo box style dropown.
    – jpierson
    Jan 30, 2011 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.