Interface guidelines: Difference between revisions

Latest revision as of 14:44, 27 May 2022

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

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.

This document is not authoritative, it is a collection of ideas and under construction.

Keeping it simple

Use the minimum interface required to get the job done. Order the elements by contexts. Give the user a strong orientation where the places are to do several things.

Standard pages

See Address Bar/URL UI guideline

One script per major function/page

...

Page layout

See: Basic page _structure UI guideline

Form layout

See: Form UI guideline

Dealing with tables

Use the print_table function whenever possible.

Standard navigation tools

See:

The information that was here has been incorporated to those pages

URLs

See Address Bar UI guideline

Buttons vs links

See: Button and Link UI guidelines.

The information that was here has been integrated to those documents.

Language strings

Use your own language strings in a separate file. Don't use existing language files from moodle.php or other lang files. So translators can translate in the contexts in different ways as terms are used in the special learning culture.

CSS naming

Don't add font, color or layout definitions in code. This belongs to CSS theme files.
See theme standards

Linking to help

Help buttons should be on the right of the thing (as an exception it can be left, if the thing is right-aligned)

@@ Line 1: / Line 1: @@
+{{Template:WillNotMigrate}}
+{{Work in progress}}
 This document is not authoritative, it is a collection of ideas and under construction.
@@ Line 8: / Line 11: @@
 ==Standard pages==
-===Activity modules===
+See [[Address_Bar|Address Bar/URL UI guideline]]
-*''index.php'' - lists all instances for that module in a course
-*''view.php'' - displays a particular instance
-*''config.html'' - configure an instance of the module
-===Blocks===
-*''config.html'' - configure an instance of the block
 ==One script per major function/page==
@@ Line 23: / Line 18: @@
 ==Page layout==
+See: [[Page_structure_and_types#Implementation|Basic page _structure UI guideline]]
-# Print headings with print_heading, use the CSS hooks for IDs and Classes
-# Print boxes around text using print_simple_box, use the CSS hooks for IDs and Classes
 ==Form layout==
-# Show the more important settings at the top
+See: [[Form|Form UI guideline]]
-# Each entry should have a label, and if necessary, a help file
-# If there are more than 10 options, split them into required and optional/extra/advanced parameters
 ==Dealing with tables==
@@ Line 41: / Line 30: @@
 ==Standard navigation tools==
-# All pages should call print_header, and supply a standard navigation path to be displayed in it. Where possible, it should look like: COURSE >> INDEX >> INSTANCE >> SUBPAGES...
+See:
-# Pages within activity modules should call navmenu() to generate the appropriate navigation menu.
+* [[Page_structure_and_types#Basic_page_structure|Basic page structure UI guideline]]
+* [[Link|Link UI guideline]]
+* [[Button|Button UI guideline]]
+The information that was here has been incorporated to those pages
 ==URLs==
+See [[Address_Bar|Address Bar UI guideline]]
-# URLs should be as short as possible.
-# No underscores in parameter names or files names
-# Never use two words when one would do.
 ==Buttons vs links==
-This is a hard one to define ...
+See: [[Button]] and [[Link]] UI guidelines.
-The Google Web Accelerator issue definitely provides some pointers here:
-# Actions which can modify the state of Moodle (data files, database, session information) should be performed through buttons
+The information that was here has been integrated to those documents.
-# At the very least, such actions which are implemented as links should forward to a confirmation page which *does* use buttons
 ==Language strings==
-# Use your own language strings in a separate file. Don'tuse existing language files from moodle.php or other lang files. So translators can translate in the contexts in different ways as terms are used in the special learning culture.
+# Use your own language strings in a separate file. Don't use existing language files from moodle.php or other lang files. So translators can translate in the contexts in different ways as terms are used in the special learning culture.
 ==CSS naming==
@@ Line 80: / Line 65: @@
 The article presents a view of virtual spaces with the focus on human actions. It reminded me of communicative approaches like Moodle. The interface serves as the handle of all the communication tools.
+==See also==
+* [[Usability]]
+* [[Moodle_User_Interface_Guidelines|Moodle User Interface Guidelines]] GSOC 2009 project
+[[Category:Coding guidelines|Interface]]
+[[Category:Moodle User Interface Guidelines]]
 [[pt:Guia para interface]]
 [[es:Manual de estilo de la interfaz]]
 [[ja:インターフェースガイドライン]]

Documentation