Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Interface guidelines: Difference between revisions

From MoodleDocs
mNo edit summary
Line 31: Line 31:
==Form layout==
==Form layout==


See: [[Form|Form]] UI guideline
See: [[Form|Form UI guideline]]  


==Dealing with tables==
==Dealing with tables==
Line 40: Line 40:


See:  
See:  
* [[Page_structure_and_types#Basic_page_structure|Basic_page_structure]]
* [[Page_structure_and_types#Basic_page_structure|Basic_page_structure UI guideline]]
* [[Link|Links]]
* [[Link|Link UI guideline]]
* [[Button|Buttons]]
* [[Button|Button UI guideline]]


The information that was here has been incorporated to those pages
The information that was here has been incorporated to those pages


==URLs==
==URLs==
See [[Address_Bar]]
See [[Address_Bar|Address Bar UI guideline]]


==Buttons vs links==
==Buttons vs links==


See: [[Button]] and [[Link]]
See: [[Button]] and [[Link]] UI guidelines.


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

Revision as of 13:51, 12 August 2009

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. See also: Usability

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

Activity modules

  • 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

...

Page layout

  1. Print headings with print_heading, use the CSS hooks for IDs and Classes
  2. Print boxes around text using print_simple_box, use the CSS hooks for IDs and Classes

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

  1. 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)

Related topics

Robin Good's Latest News. "Interaction Design Meets Online Real Estate" 1 Mar. 2005 http://www.masternewmedia.org/news/2005/03/01/interaction_design_meets_online_real.htm

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.


pt:Guia para interface