Development:Interface guidelines
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.
- 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 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.