1. The document provides examples of system interfaces that follow principles of good user experience design. It discusses concepts like providing feedback on system processes, using natural language, giving users control and freedom, consistency, preventing errors, minimizing recall, flexibility, minimalist design, helping users diagnose errors, and providing help and documentation. 2. Each section includes examples of interfaces that demonstrate the principle, such as progress indicators, undo/redo functions, spell check, tooltips, shortcuts, and contextual help. 3. The examples show how concepts from visibility, language matching reality, user control, consistency, and other usability guidelines can be implemented in interfaces like Gmail, Excel, search tools, and help documentation.

2. 1. Visibility of System Status
The system should always keep users informed
about what is going on, through appropriate
feedback within reasonable time.

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

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

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

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

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

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

9. 4. Consistency and standards
Users should not have to wonder whether different
words, situations, or actions mean the same thing.
Follow platform conventions.

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

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

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

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

14. Examples
Type ahead for coding.. In a development
Shows preview of the fonts you are selecting. Instead
just font names..

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

16. Examples
Keyboard shortcuts accelerators.
Preview common functions results when the column is
selected in the left. More efficient that clicking on the
action toolbar

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

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

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

20. Examples
Provides immediate feedback with specific instructions.
Uses a funny image & copy, but provide viable
alternatives ( articles listings & link) &
ofcourse of action Report it.

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

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

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

24. With another topic on
How to rate the severity of usability problems