Revision as of 07:49, 4 August 2008

Principles for Usable Design

Usefulness

Value: The system should provide necessary utilities and address the real needs of users.
Relevance: The information and functions provided to the user should be relevant to the user's task and context.

Consistency

Consistency and standards

Follow appropriate standards/conventions for the platform and the suite of products. Within an application (or a suite of applications), make sure that actions, terminology, and commands are used consistently:

Colours have meanings at Moodle: (e.g. yellow means question mark,...)
Icon can be checked at /server/moodle/pix in order to be consistent with them
Upload image/file: Different interfaces when you upload image and file. Have one common standard for content management interface (with added functions for image dialog box as needed)
How to rol/unenrol users: there is a standard about how to do so
The use of the tab keyborard is from up to down and from left to right generally. However there are some exceptions that happen when there are too many icons before the item that usually users want to access.
Tab guidelines: several guidelines mentioned in Jakob Nielsen's Website should be followed:

Alternate between views within the same context.
It logically chunks the content behind the tabs so users can easily predict what they'll find when they select a given tab. (Card sorting is one option for researching this "mini-IA" problem. If you don't find clearly distinct groupings, then tabs are likely the wrong interface control for managing your content.)
Users don't need to simultaneously see content from multiple tabs.
The tabs are roughly parallel in nature.
The currently selected tab is highlighted. This is a really important feature that has not been implemented in Moodle tabs.
The unselected tabs are clearly visible and readable.
The current tab is connected to the content area, just as it would be if we were shuffling several physical index cards that had tabs stuck to them.
The labels are short and use plain language, rather than made-up terms.
The labels in the rightmost example above use Title-Style Capitalization: each word's first letter is uppercased.
There's only one row of tabs.
The row of tabs is on top of the panel — not on the sides or the bottom where users would often overlook them.
The scope controlled by the tabs should be obvious from the visual design.
Fast response time ensures that clicking a new tab immediately brings the corresponding panel to the front. This is probably achieved through AJAX, but the programming technique is not important. What is important is to make the action fast enough (ideally <0.1 s) that people feel there's a physical connection between their mouse click and the appearance of the chosen panel.

Previous consistency errors

Editing: Words “Edit” and “Update” both used to mean the same thing. “Update” meaning can be ambiguous. Universal change to “edit” as “update” can refer to updating system/saving/refreshing
Resources selection from activities area on topic page: User looking into available (uploaded) course resources from this link in the activities box is not given any indication about what type of document is being listed. Add the accepted descriptive icon beside the name of listed resources (e.g. Word, folder, PDF).
Resource entry: When you enter the resource screen, there is space for a resource summary but this sometimes but not always appears with the resource icon and name on the topics page where you are placing the resources link – depends on resource type. Consistently add resource summary to topic section where linked, but allow it to be edited out easily.

Real-world conventions

Use commonly understood concepts, terms and metaphors, follow real-world conventions (when appropriate), and present information in a natural and logical order (e.g. ISO/IEC 11581 Icon symbols and functions).

Simplicity

Simplicity: Reduce clutter and eliminate any unnecessary or irrelevant elements.
Visibility: Keep the most commonly used options for a task visible (and the other options easily accessible).
Self-evidency: Design a system to be usable without instruction by the appropriate target user of the system: if appropriate, by a member of the general public or by a user who has the appropriate subject-matter knowledge but no prior experience with the system. Display data in a manner that is clear and obvious to the appropriate user.

Communication

Feedback: Provide appropriate, clear, and timely feedback to the user so that he sees the results of his actions and knows what is going on with the system.
Structure: Use organization to reinforce meaning. Put related things together, and keep unrelated things separate.
Sequencing: Organize groups of actions with a beginning, middle, and end, so that users know where they are, when they are done, and have the satisfaction of accomplishment.
Help and documentation: Ensure that any instructions are concise and focused on supporting the user's task.

Error Prevention and Handling

Forgiveness: Allow reasonable variations in input. Prevent the user from making serious errors whenever possible, and ask for user confirmation before allowing a potentially destructive action.
Error recovery: Provide clear, plain-language messages to describe the problem and suggest a solution to help users recover from any errors.
Undo and redo: Provide "emergency exits" to allow users to abandon an unwanted action. The ability to reverse actions relieves anxiety and encourages user exploration of unfamiliar options.

Efficiency

Efficacy: (For frequent use) Accommodate a user’s continuous advancement in knowledge and skill. Do not impede efficient use by a skilled, experienced user.
Shortcuts: (For frequent use) Allow experienced users to work more quickly by providing abbreviations, function keys, macros, or other accelerators, and allowing customization or tailoring of frequent actions.
User control: (For experienced users) Make users the initiators of actions rather than the responders to increase the users’ sense that they are in charge of the system.

Workload Reduction

Supportive automation: Make the user’s work easier, simpler, faster, or more fun. Automate unwanted workload.
Reduce memory load: Keep displays brief and simple, consolidate and summarize data, and present new information with meaningful aids to interpretation. Do not require the user to remember information. Allow recognition rather than recall.
Free cognitive resources for high-level tasks: Eliminate mental calculations, estimations, comparisons, and unnecessary thinking. Reduce uncertainty.

Usability Judgment

It depends: There will often be tradeoffs involved in design, and the situation, sound judgment, experience should guide how those tradeoffs are weighed.
A foolish consistency...: There are times when it makes sense to bend or violate some of the principles or guidelines, but make sure that the violation is intentional and appropriate.

Note: this information was extracted of the page General guidelines and adapted to be used for Moodle developpers.

@@ Line 16: / Line 16: @@
 * '''How to rol/unenrol users''': there is a standard about how to do so
 * The use of the '''tab keyborard''' is from up to down and from left to right generally. However there are some exceptions that happen when there are too many icons before the item that usually users want to access.
+* Tab guidelines: several guidelines mentioned in [http://www.useit.com/alertbox/tabs.html Jakob Nielsen's Website] should be followed:
+# Alternate between views within the same context.
+# It logically chunks the content behind the tabs so users can easily predict what they'll find when they select a given tab. (Card sorting is one option for researching this "mini-IA" problem. If you don't find clearly distinct groupings, then tabs are likely the wrong interface control for managing your content.)
+# Users don't need to simultaneously see content from multiple tabs.
+# The tabs are roughly parallel in nature.
+# '''The currently selected tab is highlighted'''. This is a really important feature that has not been implemented in Moodle tabs.
+# The unselected tabs are clearly visible and readable.
+# The current tab is connected to the content area, just as it would be if we were shuffling several physical index cards that had tabs stuck to them.
+# The labels are short and use plain language, rather than made-up terms.
+# The labels in the rightmost example above use Title-Style Capitalization: each word's first letter is uppercased.
+# There's only one row of tabs.
+# The row of tabs is on top of the panel — not on the sides or the bottom where users would often overlook them.
+# The scope controlled by the tabs should be obvious from the visual design.
+# Fast response time ensures that clicking a new tab immediately brings the corresponding panel to the front. This is probably achieved through AJAX, but the programming technique is not important. What is important is to make the action fast enough (ideally <0.1 s) that people feel there's a physical connection between their mouse click and the appearance of the chosen panel.
 === Previous consistency errors ===

Documentation

Student projects/Usability issues/T7: Difference between revisions