Development:Interface guidelines

2007-04-04T14:39:01Z

Pbaxter: Altered tabs heading (was displaying as nested unsorted list)

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

==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==

# 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

===Tabs===

.userinfobox {
border-top:0 none;
padding-top:0;
margin-top:0;
}

#mod-forum-user .forumpost,
#course-user .section .content {
border-top:0 none;
}

#course-user .section {
background-color:#fff;
padding:1em;
}

#course-user .section h2 {
margin-top:0;
}

#user-view .tabs td,
#user-edit .tabs td,
#mod-forum-user .tabs td {
padding-bottom:0;
}

#user-edit .generalbox {
width:100%
}

.mod-glossary .glossarydisplay tr,
.mod-glossary .glossarydisplay td {
border:0 none !important;
padding-bottom:0;
}

.mod-glossary td.entryboxheader {
height:0 !important;
background-color:#fff;
}

.mod-glossary .entrybox {
padding:0;
}

.tabs {
width:auto;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
padding-bottom:0;
border-bottom:0 none;
}

#user-view .tabs {
width:80%;
}

.tabs tr,
.tabs .left,
.tabs .right {
background:url(pix/tab/tabsbg_x2.gif) bottom left repeat-x
}

.tabs .side {
border-bottom:0 none
}

.tabs td {
padding:0
}

.tabs .left {
width:0
}

.tabs .right {
width:75%
}

.tabrow {
width:100%;
margin:0;
border-collapse:collapse
}

.tabrow td {
padding:0 0 0 14px;
height:34px;
border-width:0
}

.tabs .r1 {
margin-bottom:1px
}
.tabrow td.selected {
border-width: 0px
}

.tabs .r0 .active {
background:url(pix/tab/left.gif) bottom left no-repeat
}

.tabs .r1 .active {
background:url(pix/tab/left2.gif) bottom left no-repeat
}

.tabs .r0 .inactive {
background:url(pix/tab/left_inactive.gif) bottom left no-repeat
}

.tabs .r1 .inactive {
background:url(pix/tab/left_inactive2.gif) bottom left no-repeat
}

.tabs .r0 .activetwo {
background:url(pix/tab/left_active2.gif) bottom left no-repeat
}

.tabs .r1 .activetwo {
background:url(pix/tab/left_active2.gif) bottom left no-repeat
}

.tabs,
.tabs tr,
.tabs .td,
.tabrow,
.tabrow tbody,
.tabrow tr,
.tabrow td {
background-color:transparent
}

.tabrow th {
display:none
}

.tabrow td .tablink {
padding:0 14px 0 0;
/*display:block;*/
white-space:nowrap;
line-height:32px;
text-align:center;
text-decoration:none;
height:34px;
width:auto
}

.tabs .r0 .active .tablink {
background:url(pix/tab/right.gif) bottom right no-repeat
}

.tabs .r1 .active .tablink {
background:url(pix/tab/right2.gif) bottom right no-repeat
}

.tabs .r0 .inactive .tablink {
background:url(pix/tab/right_inactive.gif) bottom right no-repeat
}

.tabs .r1 .inactive .tablink {
background:url(pix/tab/right_inactive2.gif) bottom right no-repeat
}

.tabs .r0 .activetwo .tablink {
background:url(pix/tab/right_active2.gif) bottom right no-repeat
}

.tabs .r1 .activetwo .tablink {
background:url(pix/tab/right_active2.gif) bottom right no-repeat
}

.tabrow td .tablink a {
width:auto;
line-height:32px
}

.tabs .r0 .active:hover {
background:url(pix/tab/left_hover.gif) bottom left no-repeat
}

.tabs .r0 .active:hover .tablink {
background:url(pix/tab/right_hover.gif) bottom right no-repeat;
line-height:32px
}

.tabs .r0 .inactive:hover {
background:url(pix/tab/left_inactive.gif) bottom left no-repeat
}

.tabs .r0 .inactive:hover .tablink {
background:url(pix/tab/right_inactive.gif) bottom right no-repeat;
line-height:32px
}

.tabs .r1 .active:hover {
background:url(pix/tab/left_hover2.gif) bottom left no-repeat
}

.tabs .r1 .active:hover .tablink {
background:url(pix/tab/right_hover2.gif) bottom right no-repeat;
line-height:32px
}

.tabrow .last span {
padding:0 1px 0 0;
display:block;
background:url(pix/tab/right_end.gif) bottom right no-repeat
}

.tabs .r0 .selected {
background:url(pix/tab/left_active.gif) bottom left no-repeat
}

.tabs .r1 .selected {
background:url(pix/tab/left_active2.gif) bottom left no-repeat
}

.tabs .r0 .selected .tablink {
background:url(pix/tab/right_active.gif) bottom right no-repeat;
line-height:32px
}

.tabs .r1 .selected .tablink {
background:url(pix/tab/right_active2.gif) bottom right no-repeat;
line-height:32px
}

/*.tabrow td.selected:hover {
background:url(pix/tab/left_active.gif) bottom left no-repeat;
}

.tabrow td.selected .tablink:hover {
background:url(pix/tab/right_active.gif) bottom right no-repeat;
}*/

.user-content h2 {
margin:0;
padding:0 1em
}

.user-content {
background-color:#FFFFFF;
border:1px solid #D1D7DC;
border-top-width:0;
padding:0.5em
}

===Tabs===

.tabs {
font-size:0.8em
}
.tablink a:link,
.tablink a:visited {
color:#000066;
}

.tablink a:hover {
text-decoration: none;
}

.selected .tablink a:link,
.selected .tablink a:visited {
color:#000000;
}

==Dealing with tables==

Use the print_table function whenever possible.

==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...
# Pages within activity modules should call navmenu() to generate the appropriate navigation menu.

==URLs==

# 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 ...

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
# At the very least, such actions which are implemented as links should forward to a confirmation page which *does* use buttons

==CSS naming==

* See [[Standards|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.

[[Category:Developer]]

[[es:Manual de estilo de la interfaz]]
[[ja:インターフェースガイドライン]]

MoodleDocs - User contributions [en]

Development:Interface guidelines