Moodle User Interface Guidelines: Difference between revisions
From MoodleDocs
(A stub to get the actual guidelines started) |
(Note about plan not to migrate this page to the new developer resources. See template for more info.) |
||
| (155 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
{{Template:WillNotMigrate}} | |||
= | __NOTOC__ | ||
<p class="note"> | |||
* [[Moodle User Interface Guidelines: | DRAFT DOCUMENT | ||
== Moodle UI | <br /><br /> | ||
Many of the pages below are incomplete or obsolete. | |||
<br /><br /> | |||
These guidelines were produced as part of a student project in 2009, and are not yet official Moodle guidelines. | |||
</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== | |||
* [[Page structure and types|Page structure and different page types]] | |||
* [https://docs.moodle.org/20/en/Roles_and_capabilities 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|Big Select List]] | * [[Big Select List|Big Select List]] | ||
== | * [[Tooltip|Tooltip]] | ||
* [[Link|Link]] | |||
* [[Button|Button]] | |||
* [[Address Bar|Address Bar]] (URLs) | |||
=== Interaction Styles === | |||
* [[Wizard|Wizard]] | |||
* [[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]] | |||
** [[Dropdown Lists|Dropdown lists]] (incomplete) | |||
== General design guidelines == | |||
* [[Progressive Disclosure|Progressive Disclosure]] | * [[Progressive Disclosure|Progressive Disclosure]] | ||
* [[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] | |||
* [http://developer.fellowshipone.com/patterns/ Design Patterns Library & Code Standards] by Fellowship technologies | |||
== 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]] | |||
=== Implementation advice === | |||
* [[Developer_documentation|Developer documentation]] | |||
* UI coding: [[Interface_guidelines]] | |||
[[Category:Developer tools|User Interface Guidelines]] | |||
[[Category:Usability|User Interface Guidelines]] | |||
[[Category:Moodle User Interface Guidelines]] | |||
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...
Moodle basics
Moodle UI library
UIs are built of Elements and Interaction Styles (bigger wholes, which are built of Elements).
Elements
- 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
- Design Patterns Library & Code Standards by Fellowship technologies
See also
- Further development on Talk page: Talk:Moodle_User_Interface_Guidelines
- Using Moodle book
Usability in Moodle
Implementation advice
- Developer documentation
- UI coding: Interface_guidelines
