Interface guidelines: Difference between revisions
From MoodleDocs
| (25 intermediate revisions by 9 users not shown) | |||
| Line 1: | Line 1: | ||
{{Work in progress}} | |||
This document is not authoritative, it is a collection of ideas and under construction. | This document is not authoritative, it is a collection of ideas and under construction. | ||
==Keeping it simple== | ==Keeping it simple== | ||
Use the minimum interface required to get the job done | 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== | ==Standard pages== | ||
See [[Address_Bar|Address Bar/URL UI guideline]] | |||
==One script per major function/page== | ==One script per major function/page== | ||
| Line 22: | Line 16: | ||
==Page layout== | ==Page layout== | ||
See: [[Page_structure_and_types#Implementation|Basic page _structure UI guideline]] | |||
==Form layout== | |||
See: [[Form|Form UI guideline]] | |||
==Dealing with tables== | ==Dealing with tables== | ||
| Line 305: | Line 28: | ||
==Standard navigation tools== | ==Standard navigation tools== | ||
See: | |||
# | * [[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== | ==URLs== | ||
See [[Address_Bar|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== | ==CSS naming== | ||
* Don't add font, color or layout definitions in code. This belongs to CSS theme files. | |||
* See [[Standards|theme standards]] | * See [[Standards|theme standards]] | ||
| Line 337: | Line 63: | ||
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. | 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]] | [[es:Manual de estilo de la interfaz]] | ||
[[ja:インターフェースガイドライン]] | [[ja:インターフェースガイドライン]] | ||
Revision as of 06:33, 23 October 2010
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.
See:
The information that was here has been incorporated to those pages
URLs
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)
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.
See also
- Usability
- Moodle User Interface Guidelines GSOC 2009 project
