Designing usable forms - Revision history

Devdocsbot: Protected "Designing usable forms": Developer Docs Migration ([Edit=Allow only administrators] (indefinite))

2022-06-17T06:40:10Z

Protected "Designing usable forms": Developer Docs Migration ([Edit=Allow only administrators] (indefinite))

← Older revision	Revision as of 06:40, 17 June 2022
(No difference)

Devdocsbot: Update migration status and path

2022-06-17T06:38:09Z

Update migration status and path

← Older revision		Revision as of 06:38, 17 June 2022
Line 1:		Line 1:
			{{Template:Migrated\|newDocId=/general/development/policies/designing-usable-forms}}
	Here are some guidelines to help you to improve the user experience of complex and less complex forms.		Here are some guidelines to help you to improve the user experience of complex and less complex forms.

Tsala: Category:Moodle User Interface Guidelines

2013-06-17T06:25:54Z

Category:Moodle User Interface Guidelines

← Older revision		Revision as of 06:25, 17 June 2013
Line 79:		Line 79:
	* place more important sections and settings at the top of the form;		* place more important sections and settings at the top of the form;
	* do not intersperse collapsed or expanded sections - the expanded sections should be at the top.		* do not intersperse collapsed or expanded sections - the expanded sections should be at the top.

			[[Category:Moodle User Interface Guidelines]]

Fmcorz: /* Re-use existing names */

2013-06-17T05:35:47Z

Re-use existing names

← Older revision		Revision as of 05:35, 17 June 2013
Line 26:		Line 26:

	* '''General''': Often used to name the first section (expanded by default), except when inappropriate or too vague		* '''General''': Often used to name the first section (expanded by default), except when inappropriate or too vague
	* '''Content''': Describes a section defining the content, for example, the files available in a File resource, ~~which forms~~ the content of a Page.		* '''Content''': Describes a section defining the content, for example, the files available in a File resource, or the visual content of a Page resource.
	* '''Appearance''': A section which contains options affecting appearance and display.		* '''Appearance''': A section which contains options affecting appearance and display.
	* '''Availability''': Contains the options affecting the availability of the content.		* '''Availability''': Contains the options affecting the availability of the content.

Fmcorz: /* Labelling settings */

2013-06-17T05:24:07Z

Labelling settings

← Older revision		Revision as of 05:24, 17 June 2013
Line 3:		Line 3:
	= Labelling settings =		= Labelling settings =

	Settings/fields in a form should have a descriptive label (not too long) that gives a clear idea of what the setting is for. Do not rely ''Help'' popups to compensate for an poor label. If the user has to open and read the ''Help'' popup to find out what the setting is about, then your label is not clear enough.		Settings/fields in a form should have a descriptive label (not too long) that gives a clear idea of what the setting is for. Do not rely on ''Help'' popups to compensate for an poor label. If the user has to open and read the ''Help'' popup to find out what the setting is about, then your label is not clear enough.

	= Naming sections =		= Naming sections =

Fmcorz: /* Think about the flow */

2013-06-17T05:23:54Z

Think about the flow

← Older revision		Revision as of 05:23, 17 June 2013
Line 75:		Line 75:
	The flow of a form is important. Think about the user who will land on the page and scan through the form.		The flow of a form is important. Think about the user who will land on the page and scan through the form.

	~~Try to:~~
	* group together sections with similar content;		* group together sections with similar content;
	* group settings with similar content within sections;		* group settings with similar content within sections;
	* place more important sections and settings at the top of the form;		* place more important sections and settings at the top of the form;
	* intersperse collapsed or expanded sections - the expanded sections should be at the top.		* do not intersperse collapsed or expanded sections - the expanded sections should be at the top.

Deraadt: Fixing grammar

2013-06-17T04:04:11Z

Fixing grammar

Show changes

Fmcorz: Created page with "Here are some guide lines to help you improving the user experience with complex and less complex forms. = Labeling the settings = The settings/fields in a form should have a d..."

2013-06-17T03:36:18Z

Created page with "Here are some guide lines to help you improving the user experience with complex and less complex forms. = Labeling the settings = The settings/fields in a form should have a d..."

New page

Here are some guide lines to help you improving the user experience with complex and less complex forms.

= Labeling the settings =

The settings/fields in a form should have a descriptive name (not too long) which gives a clear idea of what this setting is for. Do not solve an inaccurate label by adding a ''Help'' popup. If the user has to open and read the ''Help'' popup to find out what the setting is about, then your label is not clear enough!

= Naming the sections =

Having collapsible sections to simplify the forms is not enough, properly naming the sections is a key factor of usable forms.

'''Remember:''' If the user has to expand the section to know what it contains, the section name is not good enough.

== Be accurate, clear, and concise ==

Use short, clear and concise section names. When a section is collapsed by default, it is really important that its name tells the user if the setting he is looking for is part of this section or not. If it does, the user can easily scan the form and find the adequate section.

But keep in mind that if the section names are too long scanning the form will become more difficult.

== Ban ambiguous names ==

You will easily find yourself declaring a new section ''Miscellaneous'', ''Advanced settings'' or even ''Additional options'', but you must definitely not! It is sometimes very difficult to re-arrange your sections to prevent the ambiguous ones, but remember that a user should be able to guess the content of the section just by reading its name.

Also, if the section name is too ambiguous, the user will not remember what was part of the section when visiting your form for a second, third, or nth time... thus ruining your efforts of improving the user experience.

== Re-use existing names ==

* '''General''': Often used to name the first section, except when inappropriate or too vague
* '''Content''': Describes a section defining the content. E.g. the files available in a File resource, the content of a Page, ...
* '''Appearance''': A section which contains options affecting the appearance and display.
* '''Availability''': Contains the options affecting the availability of the content.

== Avoid using 'Options' or 'Settings' ==

It is usually implied that a section contains settings or options so you should not use those terms in any of your sections names. But, in some rare occasions you might want to be more descriptive if another section uses a slightly similar name.

* Wrong: ''Appearance settings'', it should be ''Appearance'';
* Acceptable: ''Submission options'' when you have another section called ''Submission types'' for example.

== Merging sections ==

If you end up with two sections with very few settings inside them, it is sometimes preferable to merge them into one section. But how do we keep an accurate section name then?

Well, if the section name is still being concise including too subjects (e.g. ''Foo & bar''), then the settings related to 'Foo' and 'Bar' could probably be placed in that one section.

= Sparingly use 'Show more/less' =

If you are tempted to use the 'Show more/less' functionality, it is probably because you have a section with many settings inside them. If so, you could probably try to split the section into multiple ones.

But there are some rare cases where those settings do not fit in another section, or are too trivial, then you might want to hide them behind a 'Show more' button.

Though, please keep in mind that this is not a recommended practice as it does not give any clue to the user of what is hidden behind the 'Show more'. Also, due to the current coding design of Moodle forms, they can be displayed randomly throughout the section, which could confuse the user.

Try your best before you use this feature!

= Adequate number of fields and sections =

Do not overload a section with too many settings, if you happen to have too many settings it is likely that your section could be split into more sections. An average of 5 to 6 settings per section seems a good compromise, it allows the user to quickly scan the content of the section without missing anything.

There is nothing wrong in having very few settings in a section. You can even only have one single setting in a section, but you can only do so when the setting could not be placed in any other section without affecting the accuracy of the section name.

Also remember that in the same way that too many settings in one section is not a good practice, a form with too many sections is not a good practice either. Try to find a right balance between both.

= Expanding more sections =

A form with 2 sections or less will expand its sections by default. Once there are more than 2 sections, all the sections but the first one will be collapsed. Any other section containing required settings will be expanded by default as well.

You should not often change this default behaviour, but if you do, keep in mind that expanding too many sections in a form will void the benefits of having collapsible sections.

And if you end up with a section being expanded by default because it contains one required setting, you might want to consider moving this only setting into a more important section, which is already expanded by default.

= Think about the flow =

The flow of the form is important. Think about the user who will land on the page and scan through the form.

* Group sections with similar content at the same place;
* Within sections, group settings with similar content;
* Place more important sections and settings at the top of the form;
* Do not randomly collapse or expand sections, the expanded sections should be at the top.