Help
Add this page to your book
Show book (0 pages)
Suggest pagesStyle guide/Specialized form elements
This document is a work in progress.
This document is part of the MediaWiki style guide. This section concerns itself with specialized interface control elements.
Contents |
[edit] General Notes
From time to time, an interface will call for a specialized control element. These elements duplicate the functionality of existing elements (such as radio button sets) but are easier for the user to understand.
[edit] Elements
[edit] Toggle Controls
A toggle control is a specialized control that can take the place of a single checkbox. Normally, the psychology of a checkbox indicates only a "positive" toggle (the options are "active" or null). In cases where the choice is binary, a toggle is useful.
(Note that a toggle is semantically the same as a radio set with only two options.)
Toggles should have obvious, written values ("enable" and "disable", "on" and "off", etc.). The values should exist within the "bed" of the toggle so as to reduce user confusion as to what the value is set to.
Choice of color for the toggle bed should be carefully considered. Generally, the "negative" state can be left neutral (grey) while the "positive" state should be colored green. In cases where the negative state requires strong consideration (for example, disabling a security measure), the negative bed can should be given an alert color (red or orange).
[edit] Call-to-Action Control
A call-to-action control is not really a form "element" in that it is part of a form; rather, it is a control that drives the user to engage in an activity (usually filling out another form).
User activities which are considered desirable can be elevated as "calls to action." These controls are interesting to the user in some way or another: they are usually brightly colored (alert colors) and invite exploration and attention.
In most MediaWiki installs, "redlinks" are considered a lightweight form of a call-to-action (note comments below about color). Another canonical example in many web applications is "create an account."
Careful consideration must be applied when choosing color for calls-to-action. In general, "cool" colors (such as blues, greens, and purples) fall "into the background" and are ignored by the user (unless the site is primarly designed with warm colors).
Alert colors (warm) are best. However, color selection is radically limited to the color orange.
- Yellow colors as generated by computer monitors are weak choices. Monitors (and televisions) do not easily produce color in the yellow spectrum (pixels are RGB only). Yellow is further a poor choice because of its low intensity.
- Red colors are psychological stressors to human beings. Humans are hard-wired to recognize the color as "bad".
[edit] Scaled Thermometer
A scaled thermometer is a display element that is usually used when displaying the average of several values. Scaled thermometers have set values on a pointilist range (e.g., 1 through 5, or 1 through 10, etc.).
When displaying values such in a thermometer, the actual, real value being displayed should be included as a number before the thermometer itself.
If there is additional metadata that could be important (such as the number of entries used in the calculation of the thermometer's value), this should appear below the thermometer, right aligned, and in a smaller font of less-intense color.
[edit] Unscaled Thermometer
Unscaled thermometers are useful when the values to be displayed are vague.
If there is a value judgement that can be applied to the value displayed on the thermometer, both color and text should be used to indicate the value. "Bad" values are red, "moderate" values orange, and "good" values should be green. The text displayed is contextual based upon the display element's purpose.
If there is no value judgement to an unscaled thermometer (there is no "good" or "bad" value), then the color should be a more intense chrome color.
[edit] Star Bar
A star bar is a control designed for user input within a set "Likert" scale (e.g., numbers between 1 and 5, or 1 and 10, etc.). The user selects the value by clicking on the value they most prefer. A star bar is a modified version of a radiobutton set.
When building a star bar, it is important to understand the various states that a star bar can exist in:
- Unset State - this is the star bar before any user interaction
- Hover State - this is the star bar's appearance as the user is interacting with it directly
- Set State - this is the star bar's appearance once the user has interacted with it but before the values have been saved
- Saved State - this is the star bar's appearance after results have been saved to the server.
Since color alone should never be an indicator of state, unselected stars should be of smaller size than selected stars.
Hover state should be differentiated than set or saved state. This is most easily accomplished by altering the background. Keep in mind that many users will have poor eyesight, so indicators should be bold and obvious.
Hover and set states should utilize an alert color. Saved states should utilize chrome colors.
Since many controls of this nature necessitate the ability for the user to "clear" previous ratings, a control must be included to empty the value. A trash can is an ideal icon for this purpose; clicking on it will reset the value to "0".
Note that it is not necessary to utilize stars for this control; circles or even squares can be just as effective, depending on context.
[edit] Progress Monitor
Wizard interfaces - multi-step forms - can benefit greatly from a progress monitor. This is an indication control that provides feedback to the user concerning the steps required or available in the wizard as well as where they are within the wizard's process.
Progress monitors should never compete for attention with the individual steps in the wizard. They should utilize chrome colors exclusively.
If possible, all steps should be displayed. Optional steps can be marked as such, but otherwise steps are assumed to be required.
If the user is required to make a branching choice during the course of the wizard, the progress monitor should be updated to reflect the new position and addtional steps. If steps are removed as a result of this action, they should not be displayed.
Ideally, the progress monitor should be "hot". Clicking on a completed step will bring the user back to that step (with no loss of session information). Passing back through a previously-completed step will overwrite that data with new information.
It is not necessary to number steps within a progress meter.
[edit] Text-Only Progress Monitors
A variation on this control is to include a vertical list of steps. This list should be located on the right side of the user's screen and appear as bullet points. The monitor in this case should be colored as chrome.
