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

See also

Talk page: Development_talk:Moodle_User_Interface_Guidelines

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 [1])
• Glossary (See [2])