Note: You are currently viewing documentation for Moodle 3.8. Up-to-date documentation for the latest stable version of Moodle may be available here: Moodle User Interface Guidelines.

Development:Moodle User Interface Guidelines: Difference between revisions

From MoodleDocs
 
(110 intermediate revisions by 2 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 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: [[Development:Moodle User Interface Guidelines:Introduction|Introduction]]}}
<p class="note">
== About these guidelines ==
* [[Development:Moodle User Interface Guidelines:Introduction|Introduction]]
* [[Development:Guideline template|Guideline template]]


== User Interface Guidelines ==
DRAFT DOCUMENT
===Moodle basics===
<br /><br />
* Hierarchy of a Moodle site
 
* Page types and structure
Many of the pages below are incomplete or obsolete.
===Moodle UI library===
<br /><br />
==== Elements ====
 
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. [[Development:Moodle User Interface Guidelines:Introduction|More...]]
* [[Development:Moodle User Interface Guidelines:Help requested|Help requested: comment on these guidelines]]
 
==Moodle basics==
* [[Development:Page structure and types|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 ===
* [[Development:Big Select List|Big Select List]]
* [[Development:Big Select List|Big Select List]]
* Hierarchicy Browsing List
* Tabs
* Data Listing
* Tooltip
* Jump Navigation
* Command Popup Menu
* Dialog
* Switch
* Links and Buttons


==== Interaction styles ====
* [[Development:Tooltip|Tooltip]]
* Wizard
* [[Development:Link|Link]]
* Form (will be covered in some way but may be divided in smaller pieces)
* [[Development:Button|Button]]
* Search (will be covered in some way but may be divided in smaller pieces)
* [[Development:Address Bar|Address Bar]] (URLs)
* Editing modes  (will be covered in some way but may be divided in smaller pieces)
* Help


==== Proposed ====
=== Interaction Styles ===
* Quick Inline Help ([http://www.pilpi.net/software/moodle/2009/06/18/inline-help/] for now)
* [[Development:Wizard|Wizard]]
* [[Development:Help Popups|Help Popups]] (See [[Development:Interface_guidelines#Linking_to_help|Linking to help]] for now)
* [[Development:Feedback page|Feedback page]]
* [[Development:Form|Form]] (incomplete)
** [[Development:Radio button|Radio button]]
** [[Development:Checkbox|Checkbox]]
** [[Development:Dropdown Lists|Dropdown lists]] (incomplete)


=== General design guidelines ===
== General design guidelines ==
* [[Development:Progressive Disclosure|Progressive Disclosure]]
* [[Development:Progressive Disclosure|Progressive Disclosure]]
* [[Development:User Data Always (Always) Safe|User Data Always (Always) Safe]]
* [[Development:User Data Always Safe|User Data Always (Always) Safe]]  
* Feedback
* [[Development: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 ==
== See also ==
* Further development on Talk page: [[Development_talk:Moodle_User_Interface_Guidelines]]
* '''[[Using Moodle book]]'''
=== Usability in Moodle ===
* [[Development:Usability|Usability]]
* [[Development:Usability|Usability]]
* [[Usability_FAQ|Usability FAQ]]
* [[Usability_FAQ|Usability FAQ]]
=== Implementation advice ===
=== Implementation advice ===
* [[Development:Developer_documentation|Developer documentation]]
* [[Development:Developer_documentation|Developer documentation]]
* UI coding: [[Development:Interface_guidelines]]
* UI coding: [[Development:Interface_guidelines]]


== Todo ==
 
* [[Development: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:Developer|User Interface Guidelines]]
* [[Development:Moodle User Interface Guidelines:Glossary|Glossary]]
[[Category:Developer tools|User Interface Guidelines]]
[[Category:Usability|User Interface Guidelines]]
[[Category:Moodle User Interface Guidelines]]

Latest revision as of 11:46, 22 May 2010

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/38/en/index.php?title=Development:Moodle_User_Interface_Guidelines&oldid=72361"
Powered by MediaWiki