This presentation discusses the 10 usability heuristics by Jakob Nielsen for User Interface Design and evaluates a simple mobile UI against these principles.

1. 10 Usability Heuristics for User
Interface Design
Present By : Ishara Amarasekera

2.  The Project is being evaluated against Jakob Nielsen's
10 general principles for interaction design.
Introduction
2

3.  The application evaluated is a Dashboard which
displays individual's health profile.
 User interactions are highly limited as the information
displayed are derived from the contextual data
retrieved through hard and soft sensing.
 UI mockups are only for the web-based application.
 UI mockups for mobile application is not presented
here.
About the application
3

4. Peter Jackson
Age :
Weight :
Height :
Location :
46
65 Kg
182.88 cm
Columbia. MA
Health Profile
Physical Health
Mental Health
Sleeping Disorders
Brain Disorders
Stress Level
Depression Level
How Healthy Are you ?
Family and Care Support
Your Mental Fitness

5. Your Current Location Back

6. Peter Jackson
Age :
Weight :
Height :
Location :
46
65 Kg
182.88 cm
Columbia. MA
Health Profile
Physical Health
Mental Health
Sleeping Disorders
Brain Disorders
Stress Level
Depression Level
How Healthy Are you ?
Family and Care Support
Your Mental Fitness

7. Sleeping Pattern Monitored During Last Week
Summary
The variation of your sleeping pattern indicates that you are having a sleeping disorder.
Tips to avoid disorders : Increase the amount of sleep.
Make sure you sleep during 10.00 p.m to 2.00 am.
Increase the amount of water intake
Sleeping Disorders
Sleeping Disorder
Level
Back

8.  The system should always keep users informed
about what is going on, through appropriate
feedback within reasonable time.
1. Visibility of system status
8

9. 1. Progress message and indicator shows the health status.
2. A feedback message (notifications) pops up when the
user requires to take an action.
3. Password strength is shown as the password is entered
1. Visibility of system status
How Healthy Are you ?
Brain Disorders
9

10.  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.
2. Match between system and the
real world
10

11. 1. Organize categories to match real world contexts.
2. Using non technical words and phrases.
3. The branches and hierarchy of a
mind map can be easily reorganized
visually in a non-linear manner.
A better indication of Physical
and Mental body.
2. Match between system and the
real world
11

12.  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.
3. User control and freedom
12

13. 1. Clearly marks where the person is and where they
can go by showing the selection in each tab and
navigations.
2. Clearly indicate editable areas.
3. Search is easy to open, enter info,
execute or cancel.
3. User control and freedom
13

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

15. 1. Similar indicators are used to display overall status.
2. Stick to a theme, use of same colors and fonts.
4. Consistency and standards
15

16.  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.
5. Error prevention
16

17. 1. Since most of the inputs are not taken from the
user, error prevision was not a major concern.
2. For weight and height add range or picker to avoid
user inputting inaccurate data.
5. Error prevention
17

18.  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.
6. Recognition rather than recall
18

19. 1. Objects, actions, and options are made clear and visible by
adding lots of images.
2. User do not have to read through values as the health
status are displayed using bar indicators and graphs.
6. Recognition rather than recall
19

20.  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.
7. Flexibility and efficiency of use
20

21. 1. Add images to indicate the back, exit and notification to
identify the options easier.
2. Preview common features on one plane to understand at a
quick glance.
7. Flexibility and efficiency of use
21

22.  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.
8. Aesthetic and minimalist design
22

23. 1. The following features are consider to have a Aesthetic
and minimalist design
 Contrast: bold text is used for labels in headings
 Repetition: the same indicators are
used to indicate status.
 Alignment : strong left alignment is
given for text
Proximity: a light colors frames are used
to separate one set of content from another.
8. Aesthetic and minimalist design
23

24.  Error messages should be expressed in plain language
(no codes), precisely indicate the problem, and
constructively suggest a solution.
9. Help users recognize, diagnose,
and recover from errors
24

25. 1. When the users tries to save an incorrect value for picture (size),
height or weight, system will not allow user to save it.
“Invalid Data. Enter value between XXXX and XXXX”
2. At the sign up and login the email and password validation is done
an prompts appropriate error messages.
“Incorrect Email ID. ”
“Your password or email is incorrect. Please recheck and sign in again”
25
9. Help users recognize, diagnose,
and recover from errors

26.  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.
10. Help and documentation
26

27. 1. No help menu or documentation is considered as
the application is easy to understand to use.
27
10. Help and documentation

28. Heuristics Availability
Visibility of system status Yes
Match between system and the real world Yes
User control and freedom Yes
Consistency and standards Yes
Error prevention No
Recognition rather than recall Yes
Flexibility and efficiency of use Yes
Aesthetic and minimalist design Yes
Help users recognize, diagnose, and recover from errors Yes
Help and documentation No
Conclusion
28