Usability Guidelines

Version: 31.01.2012

General Guidelines
Title Aesthetic and minimalist design Description Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Applications should attempt to anticipate the users wants and needs. Do not expect users to search for or gather information or evoke necessary tools. Bring to the user all the information and tools needed for each step of the process. Use status mechanisms to keep users aware and informed. Keep status information up to date and within easy view. Yes No N/A Comments

Anticipation

Autonomy

Usability Guidelines

Version: 31.01.2012

Title Consistency and standards

Description Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. The user interface should be consistent: all labels should be titled in the same way, the user should be addressed in the same manner, etc. Avoid uniformity. Make objects consistent with their behavior. Make objects that act differently look different.

Yes No N/A

Comments

Usability Guidelines

Version: 31.01.2012

Title Defaults

Description Defaults should be easy to blow away: Fields containing defaults should come up selected, so users can replace the default contents with new material quickly and easily. Defaults should be intelligent and responsive. Do not use the word default in an application or service. Replace with Standard, Use Customary Settings, Restore Initial Settings, or some other more specific terms describing what will actually happen.

Yes No N/A

Comments

Usability Guidelines

Version: 31.01.2012

Title Effective interfaces

Description Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work. Effective interfaces do not concern the user with the inner workings of the system. Work is carefully and continuously saved, with full option for the user to undo any activity at any time. Effective applications and services perform a maximum of work, while requiring a minimum of information from users. Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate errorprone conditions or check for them and present users with a confirmation option before they commit to the action.

Yes No N/A

Comments

Error prevention

Usability Guidelines

Version: 31.01.2012

Title Explorable interfaces

Description Make Actions reversible. Always allow Undo. Always allow a way out. Users should never feel trapped. They should have a clear path out. Use large objects for important functions (Big buttons are faster). Accelerators -unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

Yes No N/A

Comments

Fitts Law

Flexibility and efficiency of use

Help and documentation

Usability Guidelines

Version: 31.01.2012

Title Help users recognize, diagnose, and recover from errors

Description Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. Make it faster. Eliminate any element of the application that is not helping. Be ruthless. The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow realworld conventions, making information appear in a natural and logical order. Choose metaphors well, metaphors that will enable users to instantly grasp the finest details of the conceptual model. Good metaphors are stories, creating visible pictures in the mind.

Yes No N/A

Comments

Latency reduction

Match between the system and the real world

Metaphors

Usability Guidelines

Version: 31.01.2012

Title Protect users work

Description Ensure that users never lose their work as a result of error on their part, the vagaries of Internet transmission, or any other reason other than the completely unavoidable, such as sudden loss of power to the client computer. Text that must be read should have high contrast. Favor black text on white or pale yellow backgrounds. Avoid gray backgrounds. Use font sizes that are large enough to be readable on standard monitors. Pay particular attention to the needs of older people.

Yes No N/A

Comments

Readability

Usability Guidelines

Version: 31.01.2012

Title Recognition rather than recall

Description Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. Users should be able to log off at work, go home, and take up exactly where they left off. Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. Avoid invisible navigation.

Yes No N/A

Comments

Track state

User control and freedom

Visibility

Usability Guidelines

Version: 31.01.2012

Specific Guidelines
Title Actions Description A confirmation should be presented to the user for actions which can not be undone. Flashing banners and Flash ads should be avoided. - The breadcrumb is used to signal the location of the user in the application structure. - The breadcrumb should update with movement between pages. - The breadcrumb does not need to be displayed on the first page. - The breadcrumb should consist of links where each item is linked to the corresponding page. - Microsoft Internet Explorer 7 and newer - Mozilla Firefox - Google Chrome - Safari 5 and newer - Opera 10.6 and newer Yes No N/A Comments

Banners

Breadcrumb

Browser compatibility

Usability Guidelines

Version: 31.01.2012

Title Content

Description - Longer articles should have an introduction paragraph which explains the purpose of the article and summarizes its content. - All texts should be as short as possible, but thorough enough to communicate the necessary information. - Each paragraph should consist of a single thought. - Paragraphs can have subtitles. - Using specialized language should be avoided. - All texts should be composed in a clear and easy to understand language. - Lists should be displayed as bullet lists. Numbered lists should be used only for hierarchies or process steps. - Numbers should be written as numbers and not words.

Yes No N/A

Comments

Usability Guidelines

Version: 31.01.2012

Title Differentiating different types of objects

Description Different object types should be differentiated visually. In forms buttons should be used only for primary actions, links should be used for secondary actions. - The system should provide a positive emotion. - The user interface should be simple and logical. - The design should utilize calm colors. - The system should not seem complex. - Flashing elements should be avoided. - Finding information should be fast. - Information should be provided to the user in expected places. - Forms should have input masks which help the user understand what type of information should be entered in specific fields. - Form fields should have inline validation.

Yes No N/A

Comments

Emotions

Finding information

Forms

Usability Guidelines

Version: 31.01.2012

Title HTML

Description The HTML should be valid and correspond to the selected doctype. HTML can be validated by using an online tool: http://validator.w3.or g - Info messages should be written in clear and easy to understand language. - An error message should be polite, concise and constructive. - A message should not display error codes or messages in a language which is different from the user interface language. - A message should include a problem description and a solution or information for how to avoid the same error from occurring in the future. Information should not disappear. The user should be warned when an action can result in information loss.

Yes No N/A

Comments

Info messages

Information loss

Usability Guidelines

Version: 31.01.2012

Title Links

Description A website can have three types of links which should be styled correspondingly: - Internal page links (anchors) - Links to other pages - Links to other websites A link should have a visually distinct hover state. An already accessed link should be displayed in a different color. It is not recommended to display links spanning over multiple rows. A link should not be titled Click here or Read here.

Yes No N/A

Comments

Localization

System processes should not be partially translated which could result in parts of the process pages to be presented in one language and other parts of the process in another language. Making mistakes should be difficult.

Making mistakes

Usability Guidelines

Version: 31.01.2012

Title Mouse and keyboard use

Description - The number of clicks should be kept to a minimum. - The mouse and keyboard should not be used in a mixed way. - Each page should have a unique title. - All browser windows should display titles in a cohesive fashion: Page title website title. Each user elements purpose and need should be clear and understandable. A user should not need to ask what is the purpose or meaning of a certain element. The system should have a minimal response time, where different views and services should be loaded as fast as possible. The interface should be comfortably viewable on a 1024x768 resolution display.

Yes No N/A

Comments

Page titles

Purpose and needs of actions

Response time

Screen resolution

Usability Guidelines

Version: 31.01.2012

Title Scrolling

Description - The view should not scroll horizontally unless specifically designed to be used that way. - Double scrolling should be avoided. This can apply to big text fields or modal windows. The search results page should display: - The search term - Number of results - Which part of the page was searched - An option to make a new search It should be possible to move to a specific page from the search results. Pressing the browser Back button should take the user precisely to the same location in the search results.

Yes No N/A

Comments

Search

Tables

Tables should have a distinct header. Each column should have a title. It should be possible to continue a task after a period of time without the user being forced to start from scratch.

Task continuation

Usability Guidelines

Version: 31.01.2012

Title URL-s

Description Each page should have a humanreadable URL which is accessible through a deep-link. - The user should be required to log in as late in the process as possible. - After authentication the user should be taken back to the page where the authentication was started. - Log in and log out buttons should be located in the same place. - The users role should be visible in the header of the page. - Videos should not be played automatically but only when the user specifically requests for the video to be played. - Videos should be embedded in pages.

Yes No N/A

Comments

User authentication

Videos