UI Heuristics - Workshop

WORKSHOP
UI Heuristics
WORKSHOP STRUCTURE
1.Nielsen’s 10 20 min
2.Tognazzini’s FPoID 20 min
3.Merge by T. Granollers 20 min
4.Practice 3 hours
5.Presenting practice results 1 hour
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
What you will need: Laptop, pen and paper
Materials: Nielsen’s 10, FPoID by Tog, N+T by TG, WPiDT by RB
UI HEURISTICS Workshop
Design = Output
What users see – is design
OUTPUT
Showing
information
Everything
Changed
In 1992
UI was born,
input methods
recognized
as new
business design
horizon
Everything “UI is totally new

world for business
and designer
communication.”
Changed “UI is so huge you

can’t even
understand how
by PC/Mac
much I mean at all”
Authors unknown
Think of UI as (new) input dimension in design

1. Designer output medium change: Paper to Digital (PC/Mac)
2. Static to Dynamic change of Output
3. Interrupt Output with Input. For fucking ever
4. Meaning (fun) out of Output-to-Input interruptions
5. Business value out of meaningful interruptions
Everything “UI is totally new

world for business
and designer
communication.”
Changed “UI is so huge you

can’t even
understand how
by PC/Mac
much I mean at all”
Authors unknown
Think of UI as (new) input dimension in design

Interaction Model
1992 UI
BIG BANG
Happened
somewhere
here
Design ≠ Output
OUTPUT
Design = Input
What user and related devices share, and how we process it – is also design
OUTPUT INPUT
Processing
Information
Output interruption cycle

Output then Input then Processing then Output
As software Lays
designer, mainly on
your value input side,
to business not output
Processing
Information
What is UI?
With the increased use of
personal computers and the
relative decline in societal
awareness of heavy machinery,
the term user interface is
generally assumed to mean
the graphical user interface,
while industrial control panel
and machinery control design
[…] refer to human-machine
interfaces
What is GOOD UI?

Generally, the goal of user interface design is to
produce a user interface which makes it easy
(self-explanatory), efficient, and enjoyable
(user-friendly) to operate a machine in the way
which produces the desired result
This generally means that the operator needs

to provide minimal input to achieve the desired
output, and also that the machine minimizes
undesired outputs to the human
What is GOOD UI?

1. Easy Self-explanatory
2. Efficient Task completed fast
3. Enjoyable User-friendly
4. Producing the desired result with

minimal input from the user
UX CONTEXT
USER INTERFACE
HEURISTICS
A heuristic technique often called
simply a heuristic, is any approach to
problem solving or self-discovery that
employs a practical method, not
guaranteed to be optimal, perfect, or
rational, but instead sufficient for
reaching an immediate goal
10
USABILITY
HEURISTICS
FOR
UI
DESIGN
by Jakob Nielsen ’91–95

10 1. Visibility of system
status
2. Match between system
USABILITY and the real world

3. User control and
HEURISTICS
freedom
4. Consistency and
standards
FOR 5. Error prevention

6. Recognition rather
than recall
UI 7. Flexibility and
efficiency of use
DESIGN
8. Aesthetic and
minimalist design
9. Help users recognize,
diagnose, and recover
from errors
10. Help and
by Jakob Nielsen ’91–95 documentation
Visibility of system 1. Visibility of system

status
status 2. Match between system

and the real world
3. User control and
freedom
The system should always keep 4. Consistency and
standards
users informed about what is 5. Error prevention
going on, through appropriate 6. Recognition rather
feedback within reasonable time. than recall
7. Flexibility and
efficiency of use
8. Aesthetic and
Think of yourself inside an elevator:
minimalist design
- Which floor you are at?
- Do you go up or down?
- Which floor you are going to?
from errors
- Are you moving now?
10. Help and
- How long will it take?
documentation
Match between 1. Visibility of system

status
system and the real 2. Match between system

and the real world
world 3. User control and

freedom
4. Consistency and
standards
The system should speak the 5. Error prevention
users' language, with words, than recall
phrases and concepts familiar to 7. Flexibility and
the user, rather than system- efficiency of use
8. Aesthetic and
oriented terms. minimalist design
Follow real-world conventions, diagnose, and recover
from errors
making information appear in a 10. Help and
natural and logical order. documentation
User control 1. Visibility of system

status
and freedom 2. Match between system

and the real world
3. User control and
freedom
Users often choose system 4. Consistency and
standards
functions by mistake and will 5. Error prevention
need a clearly marked 6. Recognition rather
"emergency exit" to leave the than recall
7. Flexibility and
unwanted state without having to efficiency of use
go through an extended 8. Aesthetic and
minimalist design
dialogue. 9. Help users recognize,
from errors
Support undo and redo. 10. Help and
documentation
Consistency 1. Visibility of system

status
and standards 2. Match between system

and the real world
3. User control and
freedom
Users should not have to 4. Consistency and
standards
wonder whether different 5. Error prevention
words, situations, or actions 6. Recognition rather
mean the same thing. than recall
7. Flexibility and
efficiency of use
Follow platform conventions. 8. Aesthetic and
minimalist design
from errors
10. Help and
documentation
Error prevention 1. Visibility of system

status
2. Match between system
and the real world
Even better than good error 3. User control and
freedom
messages is a careful design 4. Consistency and
which prevents a problem from standards
occurring in the first place. 5. Error prevention
than recall
Either eliminate error-prone 7. Flexibility and
efficiency of use
conditions or check for them and 8. Aesthetic and
present users with a confirmation minimalist design
option before they commit to the 9. Help users recognize,
action. from errors
10. Help and
documentation
Recognition rather 1. Visibility of system

status
than recall 2. Match between system

and the real world
3. User control and
freedom
Minimize the user's memory load by 4. Consistency and
making objects, actions, and options standards
5. Error prevention
visible.
than recall
The user should not have to remember 7. Flexibility and
information from one part of the efficiency of use
dialogue to another. 8. Aesthetic and
minimalist design
Instructions for use of the system diagnose, and recover
should be visible or easily retrievable from errors
whenever appropriate. 10. Help and
documentation
Flexibility and 1. Visibility of system

status
efficiency of use 2. Match between system

and the real world
3. User control and
freedom
Accelerators (unseen by the 4. Consistency and
standards
novice user) may often speed up 5. Error prevention
the interaction for the expert user 6. Recognition rather
such that the system can cater to than recall
7. Flexibility and
both inexperienced and efficiency of use
experienced users. 8. Aesthetic and
minimalist design
Allow users to tailor frequent diagnose, and recover
from errors
actions. 10. Help and
documentation
Aesthetic and 1. Visibility of system

status
minimalist design 2. Match between system

and the real world
3. User control and
freedom
Dialogues should not contain 4. Consistency and
standards
information which is irrelevant 5. Error prevention
or rarely needed. 6. Recognition rather
than recall
7. Flexibility and
Every extra unit of information efficiency of use
in a dialogue competes with the 8. Aesthetic and
minimalist design
relevant units of information 9. Help users recognize,
and diminishes their relative diagnose, and recover
from errors
visibility. 10. Help and
documentation
Help users recognize, 1. Visibility of system

status
diagnose, and 2. Match between system

and the real world
recover from errors 3. User control and

freedom
4. Consistency and
standards
Error messages should be 5. Error prevention
expressed in plain language (no than recall
codes), precisely indicate the 7. Flexibility and
problem, and constructively efficiency of use
8. Aesthetic and
suggest a solution. minimalist design
from errors
10. Help and
documentation
Help and 1. Visibility of system

status
documentation 2. Match between system

and the real world
3. User control and
freedom
Even though it is better if the system 4. Consistency and
can be used without documentation, standards
5. Error prevention
it may be necessary to provide help
and documentation. than recall
7. Flexibility and
Any such information should be easy efficiency of use
to search, focused on the user's task, 8. Aesthetic and
minimalist design
list concrete steps to be carried out,
and not be too large. diagnose, and recover
from errors
10. Help and
documentation
First Principles
of Interaction
Design
by Bruce “Tog” Tognazzini
“ His extensive work in user-interface

testing and design,
including publishing the first edition, in

September, 1978, and seven subsequent
editions of The Apple Human Interface
Guidelines,
played an important role in the direction

of Apple's product line from the early days
of Apple into the 1990s “ Tog + Don + Jakob =
1. Aesthetics
Aesthetics
2. Anticipation
3. Autonomy
Principles 4. Color
5. Consistency
6. Defaults
q Aesthetic design should be left to
7. Discoverability
those schooled and skilled in its
application: Graphic/visual designers 8. Efficiency of the User
9. Explorable Interfaces
q Fashion should never trump usability 10. Fitts's Law
11. Human-Interface Objects
q User test the visual design as
thoroughly as the behavioral design 12. Latency Reduction
13. Learnability
14. Metaphors
15. Protect Users' Work
16. Readability
17. Simplicity
18. State: Track it
19. Visible Interfaces
1. Aesthetics
Anticipation
2. Anticipation
3. Autonomy
Principle 4. Color
5. Consistency
6. Defaults
q Bring to the user all the 7. Discoverability
information and tools needed 8. Efficiency of the User
for each step of the process 9. Explorable Interfaces

10. Fitts's Law
Software and hardware systems should attempt to anticipate the 11. Human-Interface Objects
user’s wants and needs ..
12. Latency Reduction
.. Anticipation requires that designers have a deep understanding of 13. Learnability
both the task domain and the users in order to predict what will be
needed. 14. Metaphors
It also requires sufficient usability testing to ensure the goal has been 15. Protect Users' Work
met: If a tool or source for information is there on the screen, but 16. Readability
users can’t find it, it may as well not even be present.
17. Simplicity
18. State: Track it
1. Aesthetics
Autonomy
2. Anticipation
3. Autonomy
Principles 4. Color
5. Consistency
6. Defaults
q The computer, interface, and task
7. Discoverability
environment all “belong” to the user, but user-
autonomy doesn’t mean we abandon rules 8. Efficiency of the User
q Enable users to make their own decisions, 10. Fitts's Law
even ones aesthetically poor or behaviorally
less efficient
q Exercise responsible control 13. Learnability

q Use status mechanisms to keep users 14. Metaphors
informed 15. Protect Users' Work
16. Readability
q Ensure status information is accurate
17. Simplicity
q Keep status information up to date and within
easy view 18. State: Track it
1. Aesthetics
Color
2. Anticipation
3. Autonomy
Principles 4. Color
5. Consistency
6. Defaults
q Any time you use color to convey
7. Discoverability
information in the interface, you should
also use clear, secondary cues to convey 8. Efficiency of the User
the information to those who cannot see 9. Explorable Interfaces
the colors presented 10. Fitts's Law
q Test your site to see what color-blind
individuals see
13. Learnability
q Do not avoid color in the interface just 14. Metaphors
because not every user can see every color 15. Protect Users' Work
16. Readability
q Do not strip away or overwhelm color cues
17. Simplicity
in the interface because of a passing
graphic-design fad 18. State: Track it
1. Aesthetics
Consistency
2. Anticipation
3. Autonomy
Principles 4. Color
5. Consistency
6. Defaults
Levels of Consistency: 7. Discoverability
8. Efficiency of the User
1. Top level consistency 9. Explorable Interfaces
2. Consistency across products 10. Fitts's Law

3. The overall look & feel 12. Latency Reduction
4. Visible structures 13. Learnability

14. Metaphors
5. Invisible structures 15. Protect Users' Work
6. Interpretation of user behavior 16. Readability

17. Simplicity
18. State: Track it
1. Aesthetics
Consistency
2. Anticipation
3. Autonomy
Principles 4. Color
5. Consistency
6. Defaults
q It is just important to be visually 7. Discoverability
inconsistent when things act 8. Efficiency of the User
differently as it is to be visually
consistent when things act the same
10. Fitts's Law
q Over time, strive for continuity, not 11. Human-Interface Objects
consistency 12. Latency Reduction
13. Learnability
q “The most important consistency is
14. Metaphors
consistency with user expectations”—
William Buxton 15. Protect Users' Work
16. Readability
17. Simplicity
18. State: Track it
1. Aesthetics
Defaults
2. Anticipation
3. Autonomy
Principles 4. Color
5. Consistency
6. Defaults
q Defaults within fields should be easy 7. Discoverability
to “blow away”
q Defaults should be “intelligent” and
responsive 10. Fitts's Law
q Replace the word “default” with a 12. Latency Reduction
more meaningful and responsive term
13. Learnability
14. Metaphors
q Both your vocabulary and visual
design must communicate the scope 15. Protect Users' Work
of a reversion 16. Readability
17. Simplicity
18. State: Track it
1. Aesthetics
Discoverability
2. Anticipation
3. Autonomy
Principles 4. Color
5. Consistency
6. Defaults
q Any attempt to hide complexity 7. Discoverability
will serve to increase it
q If you choose to hide complexity, 9. Explorable Interfaces

do so in the showroom only 10. Fitts's Law
q If the user cannot find it, it does
not exist
13. Learnability
q Controls and other objects 14. Metaphors
necessary for use of software 15. Protect Users' Work
should be visibly accessible at all
16. Readability
times
17. Simplicity
18. State: Track it
1. Aesthetics
Discoverability
2. Anticipation
3. Autonomy
Principles 4. Color
5. Consistency
6. Defaults
q There is no “elegance” 7. Discoverability
exception to discoverability
q Controls do not belong in the 9. Explorable Interfaces
middle of the content area 10. Fitts's Law
q Communicate your gestural
vocabulary with visual diagrams
13. Learnability
q Strive for Balance 14. Metaphors
q User-test for discoverability
16. Readability
17. Simplicity
18. State: Track it
1. Aesthetics
Efficiency
2. Anticipation
3. Autonomy
of the User 4. Color

5. Consistency
6. Defaults
q Look at the user’s productivity, not the
7. Discoverability
computer’s
q Keep the user occupied 9. Explorable Interfaces
10. Fitts's Law
q To maximize the efficiency of a business or
other organization you must maximize 11. Human-Interface Objects
everyone’s efficiency, not just the efficiency 12. Latency Reduction
of the IT department or a similar group 13. Learnability
14. Metaphors
q The great efficiency breakthroughs in
software are to be found in the 15. Protect Users' Work
fundamental architecture of the system, 16. Readability
not in the surface design of the interface 17. Simplicity
18. State: Track it
q Error messages should actually help
1. Aesthetics
Explorable
2. Anticipation
3. Autonomy
Interfaces 4. Color
5. Consistency
6. Defaults
q Give users well-marked roads and
7. Discoverability
landmarks, then let them shift into
four-wheel drive 8. Efficiency of the User
q Sometimes you do have to provide 10. Fitts's Law
deep ruts
q Offer users stable perceptual cues for 12. Latency Reduction
a sense of “home” 13. Learnability
q Make Actions reversible 14. Metaphors

q Always allow “Undo”
16. Readability
q Always allow a way out 17. Simplicity
q Make it easy and attractive to stay in 18. State: Track it

1. Aesthetics
Fitts’s
2. Anticipation
3. Autonomy
Law 4. Color
5. Consistency
6. Defaults
q The time to acquire a target is a
7. Discoverability
function of the distance to and size of
the target 8. Efficiency of the User
q Multiple Fitts: The time to acquire 10. Fitts's Law
multiple targets is the sum of the
time to acquire each
q Fitts’s Law is in effect regardless of 13. Learnability
the kind of pointing device or the
14. Metaphors
nature of the target
q Fitts’s Law requires a stop watch test 16. Readability
17. Simplicity
18. State: Track it
1. Aesthetics
Human-Interface
2. Anticipation
3. Autonomy
Objects 4. Color
5. Consistency
6. Defaults
q Human-interface objects can be seen,
7. Discoverability
heard, felt, or otherwise perceived
q Human-interface objects have a standard 9. Explorable Interfaces
way of being manipulated 10. Fitts's Law
q Human-interface objects have standard 11. Human-Interface Objects
resulting behaviors 12. Latency Reduction
q Human-interface objects should be 13. Learnability
understandable, self-consistent, and stable 14. Metaphors
q Use a new object when you want a user to
16. Readability
interact with it in a different way or when it
will result in different behavior 17. Simplicity
18. State: Track it
1. Aesthetics
Latency
2. Anticipation
3. Autonomy
Reduction 4. Color
5. Consistency
6. Defaults
q Wherever possible, use multi-threading to
7. Discoverability
push latency into the background
q Reduce the user’s experience of latency 9. Explorable Interfaces
q Keep users informed when they face delay 10. Fitts's Law
q Make it faster to begin with 11. Human-Interface Objects
Eliminate any element of the application that is not helping. 13. Learnability
Be ruthless.
14. Metaphors
Consider the car hurtling down the road at 27 meters per second 15. Protect Users' Work
while the user, eyes fixed on the flat panel display, waits to learn
which of ACDC’s many fine works he’s currently enjoying. Imagine 16. Readability
the rich irony when the accident report reveals it was “Highway to
Hell.” 17. Simplicity
18. State: Track it
1. Aesthetics
Learnability
2. Anticipation
3. Autonomy
Principles 4. Color
5. Consistency
6. Defaults
q Limit the Trade-Offs
7. Discoverability
q Avoid only testing for learnability
How do you decide whether learnability or usability is most
10. Fitts's Law
important?
The first thing you must do is identify frequency of use: Are you
working on a product or service that will be used only once or 12. Latency Reduction
infrequently, or is it one that will be used habitually?
13. Learnability
If it’s single-use, the answer is clear: Learnability. 14. Metaphors
If someone will use this every day, eight hours a day for the rest of
his or her life, the answer is equally clear: Usability. 15. Protect Users' Work
Next, who is the buyer? If the person who will use it habitually will 16. Readability
also make the buying decision, a product’s reputation for
17. Simplicity
learnability may be a key factor in making the sale. That’s why you
want to identify the most important of the two, then attack both. 18. State: Track it
1. Aesthetics
Metaphors,
2. Anticipation
3. Autonomy
Use of 4. Color
5. Consistency
6. Defaults
q Choose metaphors that will enable users
7. Discoverability
to instantly grasp the finest details of the
conceptual model 8. Efficiency of the User
q Bring metaphors “alive” by appealing to 10. Fitts's Law
people’s perceptions–sight, sound, touch, 11. Human-Interface Objects
and proprioception/kinesthesia – as well
as triggering their memories
13. Learnability
q Expand beyond literal interpretation of 14. Metaphors
real-world counterparts 15. Protect Users' Work
16. Readability
q If a metaphor is holding you back,
17. Simplicity
abandon it
18. State: Track it
1. Aesthetics
2. Anticipation
Protect Users’ 3. Autonomy
Work
4. Color
5. Consistency
6. Defaults
q Ensure that users never lose their work
7. Discoverability
This principle is all but absolute. 9. Explorable Interfaces

10. Fitts's Law
Users should not lose their work as a result of error on their
part, the vagaries of Internet transmission, or any other 11. Human-Interface Objects
reason other than the completely unavoidable, such as 12. Latency Reduction
sudden loss of power to a client computer without proper
power protection. 13. Learnability
14. Metaphors
We’ve gotten so used to being the victim of data loss that
we often don’t even notice it. 15. Protect Users' Work
16. Readability
17. Simplicity
18. State: Track it
1. Aesthetics
Readability
2. Anticipation
3. Autonomy
Principles 4. Color
5. Consistency
6. Defaults
q Text that must be read should have high contrast
7. Discoverability
q Use font sizes that are large enough to be 8. Efficiency of the User
readable on standard displays 9. Explorable Interfaces
10. Fitts's Law
q Favor particularly large characters for the actual
data you intend to display, as opposed to labels 11. Human-Interface Objects
and instructions. 12. Latency Reduction
13. Learnability
q Menu and button labels should have the key
14. Metaphors
word(s) first, forming unique labels
q Test all designs on your oldest expected user 16. Readability
population 17. Simplicity
There’s often an inverse relationship between the “prettiness” 18. State: Track it
of a font and its readability.
1. Aesthetics
Simplicity
2. Anticipation
3. Autonomy
Principles 4. Color
5. Consistency
6. Defaults
q Balance ease of installation vs. ease of use
7. Discoverability
q Avoid the “Illusion of Simplicity” 8. Efficiency of the User
q Use Progressive Revelation to flatten the
learning curve 10. Fitts's Law
q Do not simplify by eliminating necessary 12. Latency Reduction
capabilities
13. Learnability
14. Metaphors
16. Readability
17. Simplicity
18. State: Track it
1. Aesthetics
State:
2. Anticipation
3. Autonomy
Track it! 4. Color

5. Consistency
6. Defaults
q Because many of our browser-based
7. Discoverability
products exist in a stateless environment,
we have the responsibility to track state as 8. Efficiency of the User
needed 9. Explorable Interfaces
10. Fitts's Law
q State information should be stored in 11. Human-Interface Objects
encrypted form on the server when they log
off
13. Learnability
q Make clear what you will store & protect the 14. Metaphors
user’s information 15. Protect Users' Work
16. Readability
17. Simplicity
18. State: Track it
1. Aesthetics
Visible
2. Anticipation
3. Autonomy
Navigation 4. Color
5. Consistency
6. Defaults
q Make navigation visible
7. Discoverability
q Limit screen counts by using overlays
The World Wide Web, for all its pretty screens and fancy buttons, is, in effect,
an invisible navigation space. 10. Fitts's Law
True, you can always see the specific page you are on, but you cannot see
anything of the vast space between pages.
Once users reach our sites or web-based applications, we must take care to
reduce navigation to a minimum and make sure the remaining navigation is
clear and natural. 13. Learnability
Ideally, present the illusion that users are always in the same place, with the 14. Metaphors
work brought to them, as is done with the desktop metaphor.
16. Readability
17. Simplicity
18. State: Track it
UI HEURISTICS
UI HEURISTICS
Workshop
Workshop
Workshop Time
4 - 6 persons per team
Check point Yes Taköe No N/A
q Helping questions you will need to answer 1 .5 0 –

UI HEURISTICS
UI HEURISTICS
Workshop
Workshop
1. Visibility and system state
q Does the application include a visible title page,

section or site? 1 .5 0 –
q Does the user always know where it is located? 1 .5 0 –
q Does the user always know what the system or
application is doing? 1 .5 0 –
q Are the links clearly defined? 1 .5 0 –
q Can all actions be visualized directly? (No other
actions are required) 1 .5 0 –
UI HEURISTICS
UI HEURISTICS
Workshop
Workshop
2. Connection between the system and the real

world, metaphor usage and human objects
q Does information appear in a logical order for the

user? 1 .5 0 –
q Does the design of the icons correspond to
everyday objects? 1 .5 0 –
q Does every icon do the action that you expect? 1 .5 0 –

q Does the system use phrases and concepts familiar
to the user? 1 .5 0 –
UI HEURISTICS
UI HEURISTICS
Workshop
Workshop
3. User control and freedom
q Is there a link to come back to initial state or

homepage? 1 .5 0 –
q Are the functions “undo” and “re-do”

implemented? 1 .5 0 –
q Is it easy to come back to an earlier state of the

application? 1 .5 0 –
UI HEURISTICS
UI HEURISTICS
Workshop
Workshop
4. Consistency and standards
q Do the same actions always have the same results? 1 .5 0 –

q Do the icons have the same meaning everywhere? 1 .5 0 –
q Is the information displayed consistently on every
page? 1 .5 0 –
q Are the colours of the links standard? If not, are
they suitable for its use? 1 .5 0 –
q Do navigation elements follow the standards?
(Buttons, check box, ...) 1 .5 0 –
UI HEURISTICS
UI HEURISTICS
Workshop
Workshop
5. Recognition rather than memory,

learning and anticipation
q Is it easy to use the system for the first time? 1 .5 0 –

q Is it easy to locate information that has already
been searched for before? 1 .5 0 –
q Can you use the system at all times without
remembering previous screens? 1 .5 0 –
q Is all content needed for navigation or task found
in the “current screen”? 1 .5 0 –
q Is the information organized according to logic
familiar to the end user? 1 .5 0 –
UI HEURISTICS
UI HEURISTICS
Workshop
Workshop
6. Flexibility and efficiency of use
q Are there keyboard shortcuts for common

actions? 1 .5 0 -
q If there are, is it clear how to use them? 1 .5 0 -
q Is it possible to easily perform an action done
earlier? 1 .5 0 -
q Does the design adapt to the changes of screen
resolution? 1 .5 0 -
q Is the use of accelerators visible to the normal
user? 1 .5 0 -
q Does it always keep the user busy? (without
unnecessary delays) 1 .5 0 -
7. Help users recognize, diagnose

and recover from errors
q Does it display a message before taking

irreversible actions? 1 .5 0 -
q Are errors shown in real time? 1 .5 0 -

q Is the error message that appears easily
interpretable? 1 .5 0 -
q Is some code also used to reference the error? 1 .5 0 -

8. Preventing errors
q Does a confirmation message appear before

taking the action? 1 .5 0 -
q Is it clear what information needs to be entered in

each box on a form? 1 .5 0 -
q Does the search engine tolerate typos and

spelling errors? 1 .5 0 -
9. Aesthetic and minimalism design
q Is the information short, concise and accurate? 1 .5 0 -
q Is each item of information different from the rest

and not confused? 1 .5 0 -
q Is the text well organized, with short sentences

and quick to interpret? 1 .5 0 -
10. Help and documentation
q Is there the "help" option? 1 .5 0 -

q If so, is it visible and easy to access? 1 .5 0 -
q Is the help section aimed at solving problems?
1 .5 0 -
q Is there a section of frequently asked questions
(FAQ)? 1 .5 0 -
q Is the help documentation clear, with examples? 1 .5 0 -
11. Save the state and protect the

work
q Can users continue from a previous state (where

they had previously been or from another
device)?
1 .5 0 -
q Is "Autosave" implemented? 1 .5 0 -
q Does the system have a good response to

external failures? (Power cut, internet not working,
...)
1 .5 0 -
12. Colour and readability
q Do the fonts have an adequate size? 1 .5 0 -

q Do the fonts use colours with sufficient contrast
with the background? 1 .5 0 -
q Do background images or patterns allow the
content to be read? 1 .5 0 -
q Does it consider people with reduced vision? 1 .5 0 -

13. Autonomy
q Does it keep the user informed of system status? 1 .5 0 -
q Moreover, is the system status visible and

updated? 1 .5 0 -
q Can the user take their own decisions?

(Personalization) 1 .5 0 -
14. Defaults
q Does the system or device give the option to

return to factory settings? 1 .5 0 -
q If so, does it clearly indicate the consequences of

the action? 1 .5 0 -
q Is the term "Default" used? 1 .5 0 -

15. Latency reduction
q Is the execution of heavy work transparent to the

user? 1 .5 0 -
q While running heavy tasks, is remaining time or

some animation shown? 1 .5 0 -
Jakob Nielsen’s Heuristics List

Usability Percentage = # of gained points
Average by heuristic Mate 1 Mate 2 … Mate N
Visibility of system status 10 9
Match between system and the real world 10 7
User control and freedom 10 7
Consistency and standards 10 2
Error prevention 10 9
Recognition rather than recall 10 8
Flexibility and efficiency of use 10 5
Aesthetic and minimalist design 10 4
Help users recognize, diagnose, and recover from errors 10 6
Help and documentation 10 8
Usability Percentage (UP, %) 100% 65%

Bruce Tognazzini Heuristics List

Usability Percentage: (# of gained points) * 100% / (# of all points - #N/A)

Aesthetics 3
Anticipation 1
Autonomy 6
Color 4
Consistency 7
Defaults 4
Discoverability 9
Efficiency of the User 5
Explorable Interfaces 7
Fitts's Law 4
Human-Interface Objects 5
Latency Reduction 4
Learnability 2
Metaphors 4
Protect Users' Work 1
Readability 5
Simplicity 4
State: Track it 3
Visible Interfaces 2
Usability Percentage (UP, %) 100.00%
Merged Nielsen+Tog lists

Usability Percentage: (# of gained points) * 100% / (# of all points - #N/A)

Visibility and system state 1
Connection between the system and the real world .5
User control and freedom 1
Consistency and standards 3.5
Recognition rather than memory 1.5
Flexibility and efficiency of use 2
Help users recognize, diagnose and recover from errors 1.5
Preventing errors 2
Aesthetic and minimalism design 1
Help and documentation 1
Save the state and protect the work 1
Colour and readability 1.5
Autonomy 0
Defaults 1.5
Latency reduction 0
Usability Percentage (UP, %) 32.75%

UI Heuristics - Workshop

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UI Heuristics - Workshop

Uploaded by

Copyright:

Available Formats

WORKSHOP

Everything “UI is totally new

Changed “UI is so huge you

Think of UI as (new) input dimension in design

Everything “UI is totally new

Changed “UI is so huge you

Think of UI as (new) input dimension in design

Output interruption cycle

What is GOOD UI?

This generally means that the operator needs

What is GOOD UI?

4. Producing the desired result with

by Jakob Nielsen ’91–95

USABILITY and the real world

FOR 5. Error prevention

Visibility of system 1. Visibility of system

status 2. Match between system

Match between 1. Visibility of system

system and the real 2. Match between system

world 3. User control and

User control 1. Visibility of system

and freedom 2. Match between system

Consistency 1. Visibility of system

and standards 2. Match between system

Error prevention 1. Visibility of system

Recognition rather 1. Visibility of system

than recall 2. Match between system

Flexibility and 1. Visibility of system

efficiency of use 2. Match between system

Aesthetic and 1. Visibility of system

minimalist design 2. Match between system

Help users recognize, 1. Visibility of system

diagnose, and 2. Match between system

recover from errors 3. User control and

Help and 1. Visibility of system

documentation 2. Match between system

“ His extensive work in user-interface

including publishing the first edition, in

played an important role in the direction

for each step of the process 9. Explorable Interfaces

q Exercise responsible control 13. Learnability

2. Consistency across products 10. Fitts's Law

4. Visible structures 13. Learnability

6. Interpretation of user behavior 16. Readability

q If you choose to hide complexity, 9. Explorable Interfaces

of the User 4. Color

q Make Actions reversible 14. Metaphors

q Make it easy and attractive to stay in 18. State: Track it

This principle is all but absolute. 9. Explorable Interfaces

Track it! 4. Color

Check point Yes Taköe No N/A

q Helping questions you will need to answer 1 .5 0 –

1. Visibility and system state

Check point Yes Taköe No N/A

q Does the application include a visible title page,

2. Connection between the system and the real

Check point Yes Taköe No N/A

q Does information appear in a logical order for the

q Does every icon do the action that you expect? 1 .5 0 –

3. User control and freedom

Check point Yes Taköe No N/A

q Is there a link to come back to initial state or

q Are the functions “undo” and “re-do”