Dropdown Lists: Difference between revisions

Revision as of 17:16, 8 August 2009

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

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 may raise serious accessibility issues. Where one is needed, a navigation menu (usually a CSS styled unordered list in HTML) should be used.

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

@@ Line 10: / Line 10: @@
 == Solution ==
 == Common mistakes ==
-Think about how many detailed mouse clicks it's going to take to choose, say, Times New Roman.
-* First, you have to click on the down arrow.
-* Then, using the scroll bar, you have to carefully scroll until Times New Roman is in view. Many of these dropdowns are carelessly designed to show only two or three items at a time, so this scrolling is none too easy, especially if you have a lot of fonts. It involves either carefully dragging the thumb (with such a small range of movement, it's probably unlikely that this will work), or clicking repeatedly on the second down arrow, or trying to click in the area between the thumb and the down area -- which will eventually stop working when the thumb gets low enough, annoying you even further.
-* Finally, if you do manage to get Times New Roman into view, you have to click on it.
-* If you miss, you get to start all over again.
-Now multiply by 10, if, say, you want to use a fancy font for the first letter in each of your chapters, and you're really unhappy. -[http://www.joelonsoftware.com/uibook/chapters/fog0000000060.html Joel on Software]
 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 may raise serious accessibility issues. Where one is needed, a navigation menu (usually a CSS styled unordered list in HTML) should be used.
+See also: [http://www.joelonsoftware.com/uibook/chapters/fog0000000060.html Joel Spolsky's take on this]
 == Examples and implementation ==

Documentation