Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Checkbox: Difference between revisions

From MoodleDocs
Line 52: Line 52:
== Related issues in the tracker ==
== Related issues in the tracker ==


MDL-19659 - Usability test: Proper display of configuration variables' default values
* MDL-19659 - Usability test: Proper display of configuration variables' default values; related: http://moodle.org/mod/forum/discuss.php?d=124533
* TODO: turn dropdowns into checkboxes (http://moodle.org/mod/forum/discuss.php?d=126481 )


== Further information / Sources  ==
== Further information / Sources  ==
* [http://moodle.org/mod/forum/discuss.php?d=126481 Alternatives to yes/no dropdown menus?]
* [http://moodle.org/mod/forum/discuss.php?d=126481 Alternatives to yes/no dropdown menus?]
* [http://library.gnome.org/devel/hig-book/stable/controls-check-boxes.html.en GNOME HIG: Check Boxes]
* [http://library.gnome.org/devel/hig-book/stable/controls-check-boxes.html.en GNOME HIG: Check Boxes]

Revision as of 14:59, 8 August 2009

Moodle User Interface Guidelines > Checkbox

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.

This is a Moodle Interface Guideline. Comments: developer forum thread

Problem

You want to know if a user wants to enable an option or not. In other words, you want an option with two choices

Context

You are designing a form.

Forces: factors that affect selection

  • Radio buttons and dropdown menus are too verbose for a binary choice
  • Dropdown menus hide the other choice

Solution

Create a checkbox with an id attribute. Add a label for the checkbox after the checkbox (in left-to-right languages, on the right of the checkbox). As the text content of the label element, write the result of checking the box:

[] Show me the money

Moodle forms have a left column for the descriptions of the elements in forms, and a right column for the element itself. Checkboxes should have a easy-to-scan short caption on the left column, so that items are easy to find. Both the checkbox and the actual label of the checkbox on its right side should describe the exact meaning.

Money display:     [] Show me the money

Determine a reasonable default for the value: checked, or unchecked. the reasonable default should be such that if a user does not notice the option, they probably do not mind leaving it to default. If no reasonable default can be determined, you may want to consider highlighting the checkbox in the form it is in, since it is impossible to make a checkbox a required field per se.

(Another use of the checkbox is to require users to always check a checkbox, i.e. "[ ] I have read and I accept the terms and conditions", but in this case it is not really an option at all.)

Common mistakes

Do not express the option label as a question: "Do you want to see the money?"

Do not invert the option to negative voice: "Don't show me the money". Most times, only positive voice should be used.

Do not use radio buttons or dropdowns when there are only two choices.

TODO: Add further common mistakes from [1]

Examples and implementation

Some examples of good and bad implementation:

  • Course settings (course/edit.php) - BAD: uses dropdown yes/no rather than checkbox, uses question (is this a metacourse?)
  • Updating or adding database module (course/modedit.php?update=19&return=1) - BAD: uses dropdown yes/no for ratings and comments. Also asks question Require approval?
  • In general, a review of each modules is needed as we have similar issues with assignment (prevent late submissions, etc.)

Related guidelines


Related issues in the tracker

Further information / Sources