Dropdown Lists: Difference between revisions
mNo edit summary |
|||
| (11 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
[[ Moodle User Interface Guidelines|Moodle User Interface Guidelines]] > '''Dropdown Lists''' | [[ Moodle User Interface Guidelines|Moodle User Interface Guidelines]] > '''Dropdown Lists''' | ||
{{Work in progress|forumurl=http://moodle.org/mod/forum/discuss.php?d=126884|info=<br /><br />'''Status: | {{Work in progress|forumurl=http://moodle.org/mod/forum/discuss.php?d=126884|info=<br /><br />'''Status: INCOMPLETE'''<br /> This is a guideline for a [[Moodle_User_Interface_Guidelines|Moodle Interface Guideline]]. Comments: [http://moodle.org/mod/forum/discuss.php?d=126884 developer forum thread] }} | ||
== Problem == | == Problem == | ||
| Line 7: | Line 7: | ||
== Forces: factors that affect selection == | == Forces: factors that affect selection == | ||
* There may be too little room for several radio buttons or even for a checkbox | * There may be too little room for several radio buttons or even for a checkbox | ||
* Dropdowns hide information, and thus slow down users. If users need to make selections in multiple dropdowns one after another, usage quickly becomes frustrating. Dropdowns often require very careful mouse manipulation as the vertical space that needs to be hit usually is not very big. If you click a couple of pixels off, you get to start all over again, and frustration adds up. | |||
== Solution == | == Solution == | ||
== Common mistakes == | == Common mistakes == | ||
Dropdown lists are used in Moodle too much, and should be replaced with a checkbox when the choice is just yes/no, or otherwise usually with radio buttons. | |||
Dropdown lists are used in Moodle (1.9) too much, and should be replaced with a checkbox when the choice is just yes/no, or otherwise usually with radio buttons. | |||
A dropdown menu is not a navigation menu, but a form element. Hiding the submit button and making the form element submit automatically when a value is selected raises serious accessibility issues: among others, keyboard navigation is seriously hindered on many browsers. Where one is needed, a navigation menu (usually a CSS styled unordered list in HTML) should be used. | |||
'''Never''' use single select boxes for selection of multiple items (ctrl/shift click to select multiple). Instead always use checkboxes. | |||
== Examples and implementation == | == Examples and implementation == | ||
=== Example title === | === Example title === | ||
== | == Related guidelines == | ||
[[Checkbox|Checkboxes]] and [[Radio button|Radio buttons]] should be used instead in most cases. | [[Checkbox|Checkboxes]] and [[Radio button|Radio buttons]] should be used instead in most cases. | ||
| Line 22: | Line 28: | ||
== Further information / Sources == | == Further information / Sources == | ||
[http://library.gnome.org/devel/hig-book/stable/controls-option-menus.html.en Drop-down Lists] | GNOME HIG: [http://library.gnome.org/devel/hig-book/stable/controls-option-menus.html.en Drop-down Lists] | ||
[[Category:Moodle User Interface Guidelines]] | |||
Revision as of 14:40, 15 May 2010
Moodle User Interface Guidelines > Dropdown Lists
Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.
Status: INCOMPLETE
This is a guideline for a Moodle Interface Guideline. Comments: developer forum thread
Problem
Context
Forces: factors that affect selection
- There may be too little room for several radio buttons or even for a checkbox
- Dropdowns hide information, and thus slow down users. If users need to make selections in multiple dropdowns one after another, usage quickly becomes frustrating. Dropdowns often require very careful mouse manipulation as the vertical space that needs to be hit usually is not very big. If you click a couple of pixels off, you get to start all over again, and frustration adds up.
Solution
Common mistakes
Dropdown lists are used in Moodle (1.9) too much, and should be replaced with a checkbox when the choice is just yes/no, or otherwise usually with radio buttons.
A dropdown menu is not a navigation menu, but a form element. Hiding the submit button and making the form element submit automatically when a value is selected raises serious accessibility issues: among others, keyboard navigation is seriously hindered on many browsers. Where one is needed, a navigation menu (usually a CSS styled unordered list in HTML) should be used.
Never use single select boxes for selection of multiple items (ctrl/shift click to select multiple). Instead always use checkboxes.
Examples and implementation
Example title
Related guidelines
Checkboxes and Radio buttons should be used instead in most cases.
Related issues in the tracker
TODO: go through the misuses of dropdown lists and create tickets
Further information / Sources
GNOME HIG: Drop-down Lists
