A Better Multi-Select Widget: Open Source from Uzilla, LLC
Do your users know how to control click? Are you sure?
Table of Contents
Introduction
Uzilla, LLC presents a more usable way of allowing users to select multiple responses from a set of 5-40 options on the web.
In a recent usability test with non-information workers in an intranet application, we discovered that none of the users successfully selected multiple responses when presented in a HTML select element with multiple selection enabled. They simply did not know that control click existed.
To solve this problem, a new form of multi-select was crafted. In addition to creating an affordance for multiple selection, this system also provides better system status information.
Demo
View Demo: Without sequence and autocollapse, or In Edit Mode, or in the default sequence and autocollapse mode.
Rationale
The affordance and system status goals have already been described. For optimal performance, a sequencing option was also constructed for initial fillout tasks. The system uses principles of inobtrusive DHTML and reads the status from the checkboxes, allowing web application developers to specify checked states in normal ways.
Edit vs Create: Supporting Sequential Activity
If the task is not an edit, evidenced by no pre-selected checkboxes, and the inSequence flag is in it's default true state, the first div will be auto-expanded on load. Clicking "close" on the first container will automatically expand the second and so on.
If the user begins to edit in a non-sequential way, the auto sequencing is turned off.
Conserving Screen Real Estate and Visual Attention
With the auto-collapse flag in it's default true state, clicking edit on a container while another container is open auto-collapses the first open container.
Usage
Download the example and customize the checkbox groups.
The system uses a naming convention for divs and a bit of the UI coded into each checkbox grouping. There are two key divs required for each select: options_name and summary_name.
<div id="options_name">
<input type="checkbox" ...>
<input type="checkbox" ...>
<input type="button" value="Close" onClick="saveOptions(this.parentNode);">
</div>
<div id="summary_name"> </div>
For each set of options, the two divs should be constructed with a unique name following the options_ and summary_ string in the id fields.
Configuration
Each of these names should be listed in the multis javascript variable. The other options are documented below.
// CUSTOMIZABLE VALUES
var multis = "methods,datasources,lifecycle";
var isEdit = false; // Populated with the count of checked boxes at init
var inSequence = false; // Set to false to disable auto-sequential expansion
var autoCollapse = false; // Only allow one container to be expanded at a time
Compatibility
The system has been tested successfully on IE 6.0, Safari, and Mozilla and uses W3C compliant methods. Feedback to andy at uzilla dot net if you discover any incompatibilities.
License
This code is governed by the Mozilla Public License 1.1. This essentially just requires that if you improve the system, you offer the improvements back to the community.
Version History
- 06.25.04: Extra closing script tag removed from demos.
- 06.24.04: Released
About Uzilla, LLC
Uzilla, LLC aims to help make a more usable web. Other free tools from Uzilla include the fallout visualizer, tools for card sorting and web site heuristic review. The company's flagship product is a suite for web usability testing.
Other Open-source DHTML Interface Widgets