design rules

1
 design rules

• Designing for maximum usability

– the goal of interaction design

• Designer need designing rules to follow in order to increase

the usability

• Design rules
– suggest how to increase usability
– differ in generality and authority
 Rules classification

• Design rules classified by two dimensions:

1. Generality: mean whether the rule can be applied to many

design situation or whether it is focussed on a more limited
application situation.

2. Authority: mean an indication of whether or not the rule

must be followed in design or whether it is only suggested.
 Types of design rules
• Standards
– Specific rules or guidelines, that measurable
– e.g. ISO 9241 defines usability as effectiveness, efficiency and
satisfaction with which users accomplish tasks

• Principles
– general understanding
– e.g. “an interface should be easy to navigate”

• Guidelines
– direction for design
– advice on how to achieve principle
– e.g. “use colour to highlight links”
 types of design rules
• standards
– specific design rules
– high authority Guidelines

increasing generality
increasing generality
– limited application
• principles
– abstract design rules
Standards
– low authority
– high generality
• guidelines increasing authority
increasing authority
– lower authority
– more general application
 Principles to support usability
Learnability
the ease with which new users can begin effective interaction and achieve
maximal performance

Flexibility
the multiplicity of ways the user and system exchange information

Robustness
the level of support provided the user in determining successful
achievement and assessment of goal-directed behaviour
 Principles of learnability
Predictability
– determining effect of future actions based on past
interaction history
– operation visibility

Synthesizability
– assessing the effect of past actions
– immediate vs. eventual honesty
 Principles of learnability (ctd)
Familiarity
– how prior knowledge applies to new system
– guessability; affordance

Generalizability
– extending specific interaction knowledge to new situations

Consistency
– likeness in input/output behaviour arising from similar situations or task
objectives
 Principles of flexibility
Dialogue initiative
– freedom from system imposed constraints on input dialogue
– system vs. user pre-emptiveness

Multithreading
– ability of system to support user interaction for more than one task at a
time
– concurrent vs. interleaving; multimodality

Task migratability
– passing responsibility for task execution between user and system
 Principles of flexibility (ctd)
Substitutivity
– allowing equivalent values of input and output to
be substituted for each other
– representation multiplicity; equal opportunity

Customizability
– modifiability of the user interface by user
(adaptability) or system (adaptivity)
 Principles of robustness
Observability
– ability of user to evaluate the internal state of the system from its
perceivable representation
– browsability; defaults; reachability; persistence; operation visibility

Recoverability
– ability of user to take corrective action once an error has been
recognized
– reachability; forward/backward recovery; commensurate effort
 Principles of robustness (ctd)
Responsiveness
– how the user perceives the rate of communication
with the system
– Stability

Task conformance
– degree to which system services support all of the
user's tasks
– task completeness; task adequacy
 Using design rules

increasing generality
Guidelines

increasing
generality
Design rules
• suggest how to increase usability
Standards
• differ in generality and authority

increasing
increasingauthority
authority
 Standards
• set by national or international bodies to ensure compliance
by a large community of designers standards require sound
underlying theory and slowly changing technology

• hardware standards more common than software high

authority and low level of detail

• ISO 9241 defines usability as effectiveness, efficiency and

satisfaction with which users accomplish tasks
 Guidelines
• more suggestive and general
• many textbooks and reports full of guidelines
• abstract guidelines (principles) applicable during early life
cycle activities
• detailed guidelines (style guides) applicable during later life
cycle activities
• understanding justification for guidelines aids in resolving
conflicts
 Golden rules and heuristics
• Useful check list for good design
• There are many rules but the most well used are:

– Nielsen’s 10 Heuristics (used in Heuristic Evaluation)

– Shneiderman’s 8 Golden Rules

– Norman’s 7 Principles

• Better design using these than using nothing!

 Nielsen’s 10 Heuristics
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation
 1. Visibility of system status

• The system should always keep users informed about what is

going on, through appropriate feedback within reasonable
time.

• Examples:

Figure 1.1: Password strength is shown as the password is entered

(e.g. Windows Live Account)
1. Visibility of system status
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:
2. Match between system and the real world
 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.
Supports undo and redo and a clear way to navigate.

• Examples:

Windows provide control and freedom in their application

 4. Consistency and standards

• Users should not have to wonder whether different words,

situations, or actions mean the same thing.

• Examples:
• linked styles
• Word, Excel, and PowerPoint all use the same style toolbar with the same primary
menu options: Home, Insert, Page Layout… Consistency results in efficiency
 5. Error prevention

• Even better than good error messages is a careful design

which prevents a problem from occurring in the first place.

• Examples:
• whenever you discover an error message,
ask if that error could have been prevented.
5. Error prevention

25
 6. Recognition rather than recall

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

• Examples:
• visited hyper text links
 6. Recognition rather than recall

Figure 3.1: Type ahead for coding in a development environment (e.g. Visual studio
2008)
 6. Recognition rather than recall

Figure 3.2: Just font name Figure 3.3: Previews the fonts you can pick
from, instead of just the font name
 7. Flexibility and efficiency of use

• Allow users to tailor certain aspects of the system, e.g. level of

help, frequent actions. An operation should be achievable in
the minimum number of steps necessary. Supply defaults
where appropriate.

• Examples:
• Bookmarks, sitemaps, and personalization all fall under this
heuristic.
 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:
• Structure reduces complexity.
• Are there too many icons?
• Do we need all those divider lines?
• “Less is more” is the theme here.
 9. Help users recognize, diagnose, recover
from errors
• Error messages should be expressed in plain language (no
codes), precisely indicate the problem, and constructively
suggest a solution.

• Examples:
• A good example of this can be found in
most e-commerce interfaces. If a user
forgets to enter data in a required field,
the system presents an error message
and pinpoints which fields are missing
data.
 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:
• This heuristic deals with the end-user's access to help and
documentation. How useful is our help tab? Who actually gets
our training materials? Who is allowed to contact our help
desk?
 Norman’s 7 Principles
Seven Principles for Transforming Difficult Tasks into Simple
Ones:
1. Use both knowledge in the world and knowledge in the head.
2. Simplify the structure of tasks.
3. Make things visible
4. Get the mappings right.
5. Use the power of constraint.
6. Design for error.
7. When all else fails, standardize.
1. Use both knowledge in the world and
knowledge in the head

• Knowledge in the world we don't have to overload our short

term memory by having to remember too many things (icons,
buttons and menus).
• knowledge in the head may be harder to retrieve and
involves learning, it is more efficient for tasks which are used
over and over again (e.g. like Control P for Print is an example
of this).

• Don’t make your audience remember what page number they

are on, show them clearly
 2. Simplify the structure of tasks
• More choices means more control, but makes a system more
difficult to use

• To simplify tasks:
– Reduce number of choices for complex tasks
– Provide mental aids to help users to keep track of stages in the complex
tasks.
– Provide more information about the task and better feedback
– Automate the tasks or part of it
2. Simplify the structure of tasks

36
 3. Make things visible
• The user must be able to figure out what to do with the
object and be able to understand that an action has been
completed.

• The user interface should provide the user with information,

feed-forward, to decide which actions he/she should
undertake.

• Example: I couldn’t understand my hot water heater because

I couldn’t see inside it. Now they make electric kettles clear so
that you can see the water boil
 4. Get the mappings right
• Make sure that the user can figure out what to do, and the
user can tell what is going on.

• For example, It should be obvious what the function of a

button or menu is. From past experience, users understand
that clicking on an underlined phrase should take them
somewhere else.

• You can provide an overview map of your site so that your

user can design their own mental map of how things work.
 5. Use the power of constraint
• Design the product in such a way that only one action is
possible or logical in any given situation.

• For example, menus only display the actions which can be

carried out at that time (other options are dimmed which
means the command is not available).
 6. Design for error

• Assume that any error will be made. A user will make errors
so the system should be designed to anticipate all possible
errors and allow the user to correct them.
 7. When all else fails, standardize
• When something can not be explained in any way completely
logical or culturally, make sure a universal standard is
followed.

• For example -Put the logo in the top left in English and top
right in Urdu/Sindhi etc
 Shneiderman’s 8 Golden Rules
1. Consistency (terms, icons, data / command flow)
2. Enable frequent users to use shortcuts
3. Offer informative feedback
4. Design dialogs with closure (beginning  end)
5. Offer error prevention and simple error handling (automatic
completion, well-defined messages)
6. Permit easy reversal of actions (undo)
7. User in control
8. Reduce short-term memory load
 References
1. http://www.usask.ca/education/coursework/skaalid/theory/
interface.htm
• Ten Usability Heuristics:
2. http://www.useit.com/papers/heuristic/heuristic_list.html

3. http://www.nowwhichway.com/designpractice/lectures-pdf
/DonaldNorman_4_Principles.pdf