Moodle User Interface Guidelines: Difference between revisions

Latest revision as of 13:08, 4 January 2023

Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.

DRAFT DOCUMENT

Many of the pages below are incomplete or obsolete.

These guidelines were produced as part of a student project in 2009, and are not yet official Moodle 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

Moodle UI library

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

Elements

Big Select List

Interaction Styles

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

General design guidelines

Relevant guidelines from other sites

Design Patterns Library & Code Standards by Fellowship technologies

@@ Line 1: / Line 1: @@
+{{Template:WillNotMigrate}}
 __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 feel you can not benefit from 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]]}}
+<p class="note">
+DRAFT DOCUMENT
+<br /><br />
+Many of the pages below are incomplete or obsolete.
+<br /><br />
-* [[Moodle User Interface Guidelines:Introduction|Introduction]]
+These guidelines were produced as part of a student project in 2009, and are not yet official Moodle guidelines.
-* Some pages use the [[Guideline template|Guideline template]], others are freeform prose
+</p>
+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. [[Moodle User Interface Guidelines:Introduction|More...]]
 * [[Moodle User Interface Guidelines:Help requested|Help requested: comment on these guidelines]]
 ==Moodle basics==
-* Hierarchy of a Moodle site ([http://moodle.org/mod/forum/discuss.php?d=115620 one attempt])
 * [[Page structure and types|Page structure and different page types]]
-* Roles
+* [https://docs.moodle.org/20/en/Roles_and_capabilities Roles and capabilities]
-* Groups
+* [[Groups]]
 ==Moodle UI library==
@@ Line 16: / Line 28: @@
 === Elements ===
 * [[Big Select List|Big Select List]]
-* Hierarchy Browsing List
-* Data Listing
-* Tabs
+* [[Tooltip|Tooltip]]
-* Jump Navigation
+* [[Link|Link]]
-* Tooltip
+* [[Button|Button]]
-* Links and Buttons
+* [[Address Bar|Address Bar]] (URLs)
-* Command Popup Menu
-* Dialog
-* Popup Window
 === Interaction Styles ===
-* Wizard (or Assistant?)
+* [[Wizard|Wizard]]
-* Form
+* [[Help Popups|Help Popups]] (See [[Interface_guidelines#Linking_to_help|Linking to help]] for now)
+* [[Feedback page|Feedback page]]
+* [[Form|Form]] (incomplete)
 ** [[Radio button|Radio button]]
 ** [[Checkbox|Checkbox]]
-* Search (will be covered in some way but may be divided in smaller pieces)
+** [[Dropdown Lists|Dropdown lists]] (incomplete)
-* Editing modes  (will be covered in some way but may be divided in smaller pieces)
-* Blocks (not a technical guide but a guideline how what to take into account when using a block as a part of a design)
-* Filters
-* Modules (not a technical guide but a guideline how what to take into account when using a module as a part of a design)
-* Help
-== Guidelines in development ==
+== General design guidelines ==
-* [[Switch Button|Switch Button]]
+* [[Progressive Disclosure|Progressive Disclosure]]
-* [[Add element|Add element]]
+* [[User Data Always Safe|User Data Always (Always) Safe]]
+* [[Feedback (User Interface Guideline)|Feedback]] (Incomplete)
+=== Relevant guidelines from other sites ===
+* [http://library.gnome.org/devel/hig-book/stable/principles-people.html.en Design for People]
+* [http://library.gnome.org/devel/hig-book/stable/principles-broad-userbase.html.en Don't Limit Your User Base]
+* [http://library.gnome.org/devel/hig-book/stable/principles-match.html.en Create a Match Between Your Application and the Real World]
+* [http://library.gnome.org/devel/hig-book/stable/principles-consistency.html.en Make Your Application Consistent]
+* [http://library.gnome.org/devel/hig-book/stable/principles-feedback.html.en Keep the User Informed]
+* [http://library.gnome.org/devel/hig-book/stable/principles-simplicity.html.en Keep It Simple and Pretty]
+* [http://library.gnome.org/devel/hig-book/stable/principles-user-control.html.en Put the User in Control]
+* [http://library.gnome.org/devel/hig-book/stable/principles-forgiveness.html.en Forgive the User]
+* [http://library.gnome.org/devel/hig-book/stable/principles-direct-manipulation.html.en Provide Direct Manipulation]
-==== Proposed ====
-*  Quick Inline Help ([http://www.pilpi.net/software/moodle/2009/06/18/inline-help/] for now)
-== General design guidelines ==
+* [http://developer.fellowshipone.com/patterns/ Design Patterns Library & Code Standards] by Fellowship technologies
-* [[Progressive Disclosure|Progressive Disclosure]]
-* [[User Data Always (Always) Safe|User Data Always (Always) Safe]]
-* Feedback
 == See also ==
+* Further development on Talk page: [[Talk:Moodle_User_Interface_Guidelines]]
+* '''[https://docs.moodle.org/20/en/Using_Moodle_book Using Moodle book]'''
+=== Usability in Moodle ===
 * [[Usability|Usability]]
 * [[Usability_FAQ|Usability FAQ]]
-* [[Major usability issues in Moodle]] (separate design projects)
 === Implementation advice ===
 * [[Developer_documentation|Developer documentation]]
 * UI coding: [[Interface_guidelines]]
-== Todo ==
+[[Category:Developer tools|User Interface Guidelines]]
-* [[Moodle User Interface Guidelines:Problem-Solution Summary Table|Problem-Solution Summary Table]] (TODO: See [http://www.hillside.net/patterns/writing/patterns.htm#E.1.1])
+[[Category:Usability|User Interface Guidelines]]
-* [[Moodle User Interface Guidelines:Glossary|Glossary]]
+[[Category:Moodle User Interface Guidelines]]

Documentation