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
(47 intermediate revisions by 3 users not shown)
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 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">


* [[Moodle User Interface Guidelines:Introduction|Introduction]]
DRAFT DOCUMENT
<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 User Interface Guidelines:Help requested|Help requested: comment on these guidelines]]


==Moodle basics==
==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]]
* [[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==
==Moodle UI library==
Line 15: Line 26:
=== Elements ===
=== Elements ===
* [[Big Select List|Big Select List]]
* [[Big Select List|Big Select List]]
* Hierarchy Browsing List


* [[Tooltip|Tooltip]]
* [[Tooltip|Tooltip]]
* Links and Buttons
* [[Link|Link]]
* [[Button|Button]]
* [[Address Bar|Address Bar]] (URLs)


=== Interaction Styles ===
=== Interaction Styles ===
* [[Wizard|Wizard]]
* [[Wizard|Wizard]]
* [[Help Popups|Help Popups]]
* [[Help Popups|Help Popups]] (See [[Interface_guidelines#Linking_to_help|Linking to help]] for now)
* [[Feedback page|Feedback page]]
* [[Feedback page|Feedback page]]
* [[Form|Form]] (incomplete)
* [[Form|Form]] (incomplete)
Line 28: Line 40:
** [[Checkbox|Checkbox]]
** [[Checkbox|Checkbox]]
** [[Dropdown Lists|Dropdown lists]] (incomplete)
** [[Dropdown Lists|Dropdown lists]] (incomplete)
=== Still missing guidelines ===
* Building blocks
** [[Course Format|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)
* Command Popup Menu
* Dialog
* Popup Window
=== Guidelines that may one day be ===
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.
'''[[Major usability issues in Moodle]] (separate design projects)
'''
* [[Switch Button|Switch Button]]
* [[Add element|Add element]]
* [[Jump Navigation|Jump Navigation]]
* Move Element (Course front page model vs. quiz)
* Quick Inline Help ([http://www.pilpi.net/software/moodle/2009/06/18/inline-help/] for now)
* Further research required: Search
* Further research required: Editing modes
* Further research required: Data Listing
* Waiting for developments of Navigation 2.0: Tabs


== General design guidelines ==
== General design guidelines ==
* [[Progressive Disclosure|Progressive Disclosure]]
* [[Progressive Disclosure|Progressive Disclosure]]
* [[User Data Always Safe|User Data Always (Always) Safe]]  
* [[User Data Always Safe|User Data Always (Always) Safe]]  
* Feedback
* [[Feedback (User Interface Guideline)|Feedback]] (Incomplete)
** See [http://mahara.org/view/view.php?id=3482 presentation] ([http://mahara.org/artefact/file/download.php?file=14278&view=3482 alternate link]) of workshop by David Mudrak for the future direction of feedback
** GNOME: [http://library.gnome.org/devel/hig-book/stable/feedback.html.en Feedback]  
*** (for Desktop but still a great guide and mostly applicable to Moodle)
=== Relevant guidelines from other sites ===
=== 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-people.html.en Design for People]
Line 71: Line 55:
* [http://library.gnome.org/devel/hig-book/stable/principles-forgiveness.html.en Forgive the User]
* [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://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 ==
== See also ==
=== About writing these guidelines ===
* Further development on Talk page: [[Talk:Moodle_User_Interface_Guidelines]]
* Some pages use the [[Guideline template|Guideline template]], others are freeform prose
* '''[https://docs.moodle.org/20/en/Using_Moodle_book Using Moodle book]'''
 
=== Usability in Moodle ===
=== Usability in Moodle ===
* [[Usability|Usability]]
* [[Usability|Usability]]
Line 83: Line 71:
* UI coding: [[Interface_guidelines]]
* 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]]

Revision as of 14:14, 22 August 2011

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

Interaction Styles

General design guidelines

Relevant guidelines from other sites


See also

Usability in Moodle

Implementation advice

Retrieved from "https://docs.moodle.org/dev/index.php?title=Moodle_User_Interface_Guidelines&oldid=29251"
Powered by MediaWiki