Development:Moodle User Interface Guidelines

NOTE: these guidelines were produced as part of a student project in 2009, and are not official Moodle guidelines. In fact, many of the pages below are currently incomplete or obsolete. They still need a lot of work to be regarded as useful and authoritative guidelines.

These guidelines are to be used as a UI reference library by Moodle developers when creating user interfaces.

It does not catalogue all the elements in use in Moodle, but is intended a reference of reusable elements sharing that common Moodle style. We aim to update this reference as new common practices appear. More...

• Help requested: comment on these guidelines

Moodle basics

• Hierarchy of a Moodle site (one attempt)
• Page structure and different page types
• Roles and capabilities
• Groups

Moodle UI library

UIs are built of Elements and Interaction Styles (bigger wholes, which are built of Elements).

Elements

• Big Select List
• Hierarchy Browsing List

• Tooltip
• Link
• Button
• Address Bar (URLs)

Interaction Styles

• Wizard
• Help Popups (See Linking to help for now)
• Feedback page
• Form (incomplete)
  • Radio button
  • Checkbox
  • Dropdown lists (incomplete)

General design guidelines

• Progressive Disclosure
• User Data Always (Always) Safe
• Feedback (Incomplete)

Relevant guidelines from other sites

• Design for People
• Don't Limit Your User Base
• Create a Match Between Your Application and the Real World
• Make Your Application Consistent
• Keep the User Informed
• Keep It Simple and Pretty
• Put the User in Control
• Forgive the User
• Provide Direct Manipulation

Missing guidelines

Unwritten guidelines

• Building blocks
  • Course Format
  • Block (not a technical guide but a guideline how what to take into account when using a block as a part of a design)
  • Filter
  • Module (not a technical guide but a guideline how what to take into account when using a module as a part of a design)
• Dialog
• Popup Window
• Link lists (menus)
• Page Heading

Proposed elements

We will probably need a process to get these accepted across the community

• Edit-in-place (more patterns)

Guidelines that require further research/discussion

Development:Major usability issues in Moodle (separate design projects)

These are plans to create new interaction styles, switch existing conventions for more usable ones, or issues that are still unclear and need to be further discussed to become actual guidelines.

• Switch Button
• Add element
• Jump Navigation
• Move Element (Course front page model vs. quiz)
• Quick Inline Help ([1] for now)
• Further research required: Search
• Further research required: Editing modes
• Further research required: Data Listing
• Waiting for developments of Navigation 2.0: Tabs
• Command Popup Menu

See also

Using Moodle book

About writing these guidelines

• Some pages use the Guideline template, others are freeform prose

Usability in Moodle

• Usability
• Usability FAQ

Implementation advice

• Developer documentation
• UI coding: Development:Interface_guidelines

Todo

• Problem-Solution Summary Table (See [2])
• Glossary (See [3])