Designing usable forms

From MoodleDocs
Revision as of 03:36, 17 June 2013 by Frédéric Massart (talk | contribs) (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...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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.