heuristics

1. Visibility of System Status

The system should always keep users informed

about what is going on, through appropriate

feedback within reasonable time.

Examples

Upload button is enabled until its clicked, Then it is

replaced with a progress indicator until the file has

finished uploading

Progress message and indicator shows while

application loads.

Feedback message is displayed when an action is

performed. Password strength Indicator should be shown when

New Password is created.

2. Match between system and the real world

The system should speak the users' language, with

words, phrases and concepts familiar to the user,

rather than system-oriented terms. Follow real-world

conventions, making information appear in a natural

and logical order.

Examples

See this example of Itune. It uses the easy common language to

differentiate Music, Movies etc.. Easy to understand

The language is primarily appropriate for the audience

of students and parents. One exception is the use of

the word "Bursar" instead of "fees/costs." The site

even puts "(fees/costs)" in parentheses to clarify what

a Bursar is. If there needs to be clarification, there is

no reason not to use the simpler term in the first place.

3. User control and freedom

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.

Examples

Search is easy to access, Enter info, execute or cancel.

Very clearly shows in which page I am in & where can I

go next. Each available option

Examples

Clearly indicates selected row , column and the

equation. With available action to apply or cancel.

Undo & Redo buttons are available in the toolbar. If we

make any mistakes.

4. Consistency and standards

Users should not have to wonder whether different

words, situations, or actions mean the same thing.

Follow platform conventions.

Examples

Gmail - Organizational folders looks the same like the

Client email application. Inbox, Drafts & sent mail

All the available controls toolbar looks the same across

excel, word, PowerPoint etc..

5. Error prevention

Even better than good error messages is a careful

design which prevents a problem from occurring in

the first place. Either eliminate error-prone conditions

or check for them and present users with a

confirmation option before they commit to the action.

Examples

Disable the update button when its clicked. So that it

cannot be clicked twice by accident.

Make the Primary action prominent with a distinct color

or large area. Cancel & Secondary are just shown

wihtout importance.

Auto recommend option controls the mis-spelling

Auto focus on inputs prevents source of frustration

6. Recognition rather than recall

Even better than good error messages is a careful

design which prevents a problem from occurring in

the first place. Either eliminate error-prone conditions

or check for them and present users with a

confirmation option before they commit to the action.

Examples

Type ahead for coding.. In a development

Shows preview of the fonts you are selecting. Instead

just font names..

7. Flexibility and efficiency of use

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.

Examples

Keyboard shortcuts accelerators.

Preview common functions results when the column is

selected in the left. More efficient that clicking on the

action toolbar

8. Aesthetic and minimalist design

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.

Examples

Search menu exemplifies the 4 principles of visual design

Contrast: bold test is used for the two labels in the search

Repetition: Orange, Blue & Green text match the media types

Alignment: Strong left alignment of text, right aligned drop down.

Proximity: Light rule is use to separate tags from the other options

Sufficient padding & spacing keep this timesheet from

being a visual nightmare.

Header & Footers rows, as well as the summary

column use different colors to indicate they are

distinct from the content

9. Help users recognize, diagnose, and recover

from errors

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.

Examples

Provides immediate feedback with specific instructions.

Uses a funny image & copy, but provide viable

alternatives ( articles listings & link) &

ofcourse of action Report it.

10. Help and documentation

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.

Examples

Contextual help & tips are very clear and easy to navigate

Embedded videos can be used to showcase features

as well as get people started using the product very

easily.

Examples

Help tips are displayed on hover, answering the most

likely questions about a field or instructions.

Help opens a new browser window tab with a full set of

help resources, Search, FAQ, Video tutorials &

Customer forums.

With another topic on

How to rate the severity of usability problems