Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Moodle User Interface Guidelines: Difference between revisions

From MoodleDocs
Line 1: Line 1:
__NOTOC__
__NOTOC__
{{Work in progress|forumurl=http://moodle.org/mod/forum/discuss.php?d=126884|info=<br /><br />'''The greatest risk of this effort is that developers may not find it when they need it, while designing parts of Moodle. '''Please help:  look at what is here already now, and comment: How could it serve ''your'' development work better? What aspects of user interface design would you need clear guidelines on? If there is any reason you might not use the guidelines, please tell me about it in the [http://moodle.org/mod/forum/discuss.php?d=126884 developer forum thread]. See also: [[Moodle User Interface Guidelines:Introduction|Introduction]]}}
{{Work in progress|forumurl=http://moodle.org/mod/forum/discuss.php?d=126884|info=<br /><br />'''The greatest risk of this effort is that developers may not find it when they need it, while designing parts of Moodle. '''Please help:  look at what is here already now, and comment: How could it serve ''your'' development work better? What aspects of user interface design would you need clear guidelines on? If there is any reason you might not use the guidelines, please tell me about it in the [http://moodle.org/mod/forum/discuss.php?d=126884 developer forum thread]. See also: [[Moodle User Interface Guidelines:Introduction|Introduction]]}}
== About these guidelines ==
 
* [[Moodle User Interface Guidelines:Introduction|Introduction]]
* [[Moodle User Interface Guidelines:Introduction|Introduction]]
* [[Guideline template|Guideline template]]
* [[Guideline template|Guideline template]]


===Moodle basics===
==Moodle basics==
* Hierarchy of a Moodle site
* Hierarchy of a Moodle site
* Page types and structure
* Page types and structure
Line 11: Line 11:
* Groups
* Groups


===Moodle UI library===
==Moodle UI library==
UIs are built of Elements and Interaction Styles (bigger wholes, which are built of Elements).
UIs are built of Elements and Interaction Styles (bigger wholes, which are built of Elements).
==== Elements ====
=== Elements ===
* [[Big Select List|Big Select List]]
* [[Big Select List|Big Select List]]
* Hierarchy Browsing List
* Hierarchy Browsing List
Line 28: Line 28:
* Popup Window
* Popup Window


==== Interaction Styles ====
=== Interaction Styles ===
* Wizard (or Assistant?)
* Wizard (or Assistant?)
* Form (will be covered in some way but may be divided in smaller pieces)
* Form (will be covered in some way but may be divided in smaller pieces)
Line 41: Line 41:
*  Quick Inline Help ([http://www.pilpi.net/software/moodle/2009/06/18/inline-help/] for now)
*  Quick Inline Help ([http://www.pilpi.net/software/moodle/2009/06/18/inline-help/] for now)


=== General design guidelines ===
== General design guidelines ==
* [[Progressive Disclosure|Progressive Disclosure]]
* [[Progressive Disclosure|Progressive Disclosure]]
* [[User Data Always (Always) Safe|User Data Always (Always) Safe]]
* [[User Data Always (Always) Safe|User Data Always (Always) Safe]]

Revision as of 15:02, 6 July 2009

Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.

The greatest risk of this effort is that developers may not find it when they need it, while designing parts of Moodle. Please help: look at what is here already now, and comment: How could it serve your development work better? What aspects of user interface design would you need clear guidelines on? If there is any reason you might not use the guidelines, please tell me about it in the developer forum thread. See also: Introduction


Moodle basics

  • Hierarchy of a Moodle site
  • Page types and structure
  • Roles
  • Groups

Moodle UI library

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

Elements

  • Tabs
  • Jump Navigation
  • Tooltip
  • Links and Buttons
  • Switch (or Toggle?)
  • Command Popup Menu
  • Dialog
  • Popup Window

Interaction Styles

  • Wizard (or Assistant?)
  • Form (will be covered in some way but may be divided in smaller pieces)
  • Search (will be covered in some way but may be divided in smaller pieces)
  • Editing modes (will be covered in some way but may be divided in smaller pieces)
  • Blocks
  • Filters
  • Modules
  • Help

Proposed

  • Quick Inline Help ([1] for now)

General design guidelines

See also

Implementation advice

Todo