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
m (New page: Moodle User Interface Guidelines > '''Guideline template''' This guideline template acts as instructions on how to write a guideline. It ...)
 
(This page will not be migrated to new devdocs)
 
(19 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[ Moodle User Interface Guidelines|Moodle User Interface Guidelines]] > '''Guideline template'''
{{Template:WillNotMigrate}}


This guideline template acts as instructions on how to write a guideline. It  describes what should appear under each heading. For relevant guidelines (patterns) on pattern writing, I have referred to relevant sections in [http://www.hillside.net/patterns/writing/patternwritingpaper.htm A Pattern Language for Pattern Writing].
[[ Moodle User Interface Guidelines|Moodle User Interface Guidelines]] > '''Checkbox'''


{{Work in progress|forumurl=http://moodle.org/mod/forum/discuss.php?d=126884|info=<br /><br />'''This is a guideline template for a [[Moodle_User_Interface_Guidelines|Moodle Interface Guideline]]. Comments: [http://moodle.org/mod/forum/discuss.php?d=126884 developer forum thread] '''}}
== Problem ==
== Problem ==
Describe the problem this guideline is a solution to. Imagine the situation in which a developer is when they need this guideline, and describe it as briefly as possible, but still being detailed enough to enable the reader to recognize if this guideline is what they need or not. Ensure the problem is also kept separate from the constraints of the Solution.
You want to know if a user wants to enable an option or not.
 
* You want the user to make a binary choice: an option is on or not.
Example: [[Progressive_Disclosure#Problem|Progressive disclosure#Problem]]
* You may also have several related options, amongst which the user can select zero or more.
 
Further information: [http://www.hillside.net/patterns/writing/patterns.htm#B.1 Mandatory Elements Present]


== Context ==
== Context ==
Describe the situation/context a developer is in when they need this guideline. Do not repeat information already in the problem section.
You are designing a form.
 
UI design problems are always being solved in a specific context, or situation. Sometimes, you can describe the context by mentioning the <nowiki>guidelines</nowiki> that have already been applied. It depends on the context which forces  (see the following heading) are prioritized while selecting a solution.
 
Example: [[Progressive_Disclosure#Context]]
 
Further information: [http://www.hillside.net/patterns/writing/patterns.htm#B.1 Mandatory Elements Present]


== Forces: factors that affect selection ==
== Forces: factors that affect selection ==
* Radio buttons and dropdown menus are too verbose for a binary choice
* Dropdown menus hide the other choice


List all the consideration that appear that affect choosing the solution. These often appear as points for or against the Solution. Formulate them so that they are independent of the solution and just relate to the problem. This is to make the guideline [http://www.hillside.net/patterns/writing/patterns.htm#B.4 Single-Pass Readable].
== Solution ==


Forces: The often contradictory considerations that must be taken into account when choosing a solution to a problem.  
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:


Further information: [http://www.hillside.net/patterns/writing/patterns.htm#B.1 Mandatory Elements Present]
[] Show me the money


'''For example, ''' while writing the guideline for progressive disclosure, the following force was identified:
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. If there are several related options, group them under the same caption.
: "Administrators need to 'lock' the show/hide button [of progressive disclosure] because on some sites the functionality is needed by everybody"


'''To make it independent of the solution''', I included only the force (problematic consideration) in it here, and moved the solution (locking the show/hide button) into the Solution part of the guideline:
Money display:    [] Show me the money
                    [] Only show big money


: "Some functionality that is rarely needed on some Moodle sites may be always-required basic functionality on other sites."
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.
 
Further information: [http://www.hillside.net/patterns/writing/patterns.htm#B.3 Visible Forces]
 
== Solution ==
 
For on/off choices where there are two options,  
 
Create a checkbox with an id attribute. Add a <label for="id_of_checkbox"> element '''after''' the checkbox. As the text content of the label element, write the result of checking the box:
 
[] 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.)


(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.)
A special case: Sometimes you may want users to be capable of selecting multiple items in a set, but limit the number of items (a kind of a mix between radio buttons and checkboxes). HTML does not support this limitation directly, but it has to be scripted either in Javascript or server side, in PHP.


== Common mistakes ==
== Common mistakes ==


Do not express the option label as a question: "Do you want to see the money?"
* 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.
* '''Never''' use single select boxes for selection of multiple items (which require user to ctrl/shift click items, to select multiple). Instead '''always''' use checkboxes.


Do not invert the option to negative voice: "Don't show me the money". Most times, only positive voice should be used.
TODO: Add further common mistakes from [http://moodle.org/mod/forum/discuss.php?d=126481]


Do not use radio buttons or dropdowns when there are only two choices.
== Examples and implementation ==


== 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 guidelines ==
Line 65: Line 53:
* Radio buttons
* Radio buttons
* [[Switch Button|Switch Button]]
* [[Switch Button|Switch Button]]
* Sometimes extra options should be hidden with [[Progressive disclosure|Progressive disclosure]]
* Sometimes extra options should be hidden with [[Progressive Disclosure|Progressive disclosure]]




== Related issues in the tracker ==
== Related issues in the tracker ==
* 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 and radio buttons in most of Moodle (http://moodle.org/mod/forum/discuss.php?d=126481 )
** TODO: See [[User:Frank_Ralf/Moodle_forms1#Checkboxes]]


== 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?]
* [https://developer.gnome.org/hig/3.14/check-boxes.html.en GNOME HIG: Check Boxes]
 
[[Category:Moodle User Interface Guidelines]]

Latest revision as of 14:44, 27 May 2022


Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.


Moodle User Interface Guidelines > Checkbox

Problem

You want to know if a user wants to enable an option or not.

  • You want the user to make a binary choice: an option is on or not.
  • You may also have several related options, amongst which the user can select zero or more.

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. If there are several related options, group them under the same caption. 

Money display:     [] Show me the money
                   [] Only show big 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.)

A special case: Sometimes you may want users to be capable of selecting multiple items in a set, but limit the number of items (a kind of a mix between radio buttons and checkboxes). HTML does not support this limitation directly, but it has to be scripted either in Javascript or server side, in PHP.

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.
  • Never use single select boxes for selection of multiple items (which require user to ctrl/shift click items, to select multiple). Instead always use checkboxes.

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

Retrieved from "https://docs.moodle.org/dev/index.php?title=Checkbox&oldid=63137"
Powered by MediaWiki