Human-Computer Interaction

Track A: Guidelines and Principles

Clemens Nylandsted Klokmose – September 20th 2021

Plan for the day

• Interaction styles
• Guidelines
• Principles
• Shneiderman’s Eight Golden Rules
• Norman’s Design Principles
Learning goals

• Understand …
• Different types of interaction styles and their pros and cons
• Different types of design rules for interactive systems and how they provide guidance
• Shneiderman’s Eight Golden Rules
• Norman’s Design Principles
• What an error is and can be
• Be able to …
• Explain Shneiderman’s eight golden rules
• Norman’s Design principles
• Find specific design guidance in user interface style guides and guidelines
Interaction styles in interfaces

• Direct manipulation
• Navigation and menu selection
• Form fill-in
• Command language
• Natural language
• Gestures
Direct manipulation
Navigation and menu selection
Form fill-in
Command language
Natural language interfaces
What can help us create great user interfaces?

• Guidelines
Low-level focused advice about good practices and cautions against
dangers.
• Principles
Mid-level strategies or rules to analyse and compare design alternatives.
• Theories
High-level widely applicable frameworks to draw on during design and
evaluation as well as to support communication and teaching.
Theories can also be predictive, such as those for pointing times by
individuals or posting rates for community discussions.
Guidelines

• Most specific, concrete level

• Shared language to promote consistency among multiple designers
in terminology usage, appearance, and action sequences
• Based on best practices, a good way to encapsulate experience
• Sometimes seen as too specific, incomplete, hard to apply, or even
wrong
 Research-Based Web Design & Usability Guidelines
https://www.usability.gov/sites/default/ les/documents/guidelines_book.pdf
fi
Generality and authority
• Principles
abstract design rules
• Golden rules and heuristics
more concrete and actionable
• Standards
(very) detailed design rules
• Design patterns
generic solution for a specific problem
• Guidelines
Rules for particular aspects of a design that can adhere to
many (types of) interfaces
• Style guides
Guidelines for specific devices, operating systems, widget
libraries
• Authority: whether a rule is just suggested or must be followed
• Generality: applies to many design situations or has narrower focus
Principles
From Shneiderman et al

• Determine users’ skill levels

• Identify the tasks
• Choose an interaction style
Determine users’ skill levels

• Novice or first-time user?

• Might know task but never seen the interface
• Restrict action possibilities as much as possible
• Provide informative feedback about accomplishments
• Knowledgable intermittent users?
• Knows task and interface, but uses software irregularly
• Structure in menus, consistent terminology and interfaces emphasising recognition over recall.
• Expert frequent users?
• Very familiar with the interface and task
• Feedback can’t get in the way
• Shortcuts to get things done faster
Identify the task

• Probably the most difficult problem in all of HCI!

• Break high-level tasks down in smaller (atomic tasks)
• Consider frequency of tasks
• Frequent actions might get dedicated keys/buttons
• Less frequent actions might need a modifier key, a context menu, or a
regular menu
• Infrequent actions or complex actions might require menu selections or
form fill-ins
• We will talk more about that later. ExpSys happens to be about this topic.
Choose an interaction style

• Direct manipulation
• Navigation and menu selection
• Form fill-in
• Command language
• Natural language
• Gestures
The Eight Golden Rules of
Interface Design
Eight golden rules
by Ben Shneiderman

1. Strive for consistency

2. Seek universal usability
3. Offer informative feedback
4. Design dialogues to yield closure
5. Prevent Errors
6. Permit easy reversal of actions
7. Keep users in control
8. Reduce short-term memory load
1. Strive for consistency
• Consistent sequences of actions should be required in similar situations
• Identical terminology should be used in prompts, menus, and help screens
• Consistent color, layout, capitalization, fonts, and so on, should be
employed throughout.
• Exceptions, such as required confirmation of the delete command or no
echoing of passwords, should be comprehensible and limited in number

• Consistency is key for predictability.

• UI style guides have the purpose to support consistency.
• Syntactic consistency: e.g. OK button always in the same place in a dialog
• Semantic consistency: OK button always has the same meaning/function
• Terminological consistency: OK function always has the same name
1. Strive for consistency

🤬
😍
2. Seek universal usability
• Recognize the needs of diverse users
• Design for plasticity, facilitating transformation of content.
• Novice to expert differences, age ranges, disabilities, international variations,
technological diversity each enrich the spectrum of requirements that guides design.
• Adding features for novices, such as explanations, and features for experts, such as
shortcuts and faster pacing, enriches the interface design and improves perceived
quality.

• Note: plasticity refers to the capacity of a user interface to be adapted,

for example to different platforms or user needs
• e.g. responsive web design, to support different size display devices
https://support.apple.com/en-us/HT201236
3. Offer informative feedback
• For every user action, there should be an interface feedback
• For frequent and minor actions, the response can be modest
• For infrequent and major actions, the response should be more
substantial

• For example, feedback that something is in progress

can be subtle
• Errors are a major incident and need substantial
feedback
• Understandable and actionable
• Actions that have a major consequence require
substantial feedback
3. Offer informative feedback
3. Offer informative feedback
3. Offer informative feedback
4. Design dialogues to yield closure
• Sequences of actions should be organized into groups with a beginning, middle,
and end.
• Informative feedback at the completion of a group of actions gives users the
satisfaction of accomplishment, a sense of relief, a signal to drop contingency
plans from their minds, and an indicator to prepare for the next group of actions.
• For example, e-commerce websites move users from selecting products to the
checkout, ending with a clear confirmation page that completes the transaction.

• Important for actions that are not immediate and span over a
longer time or multiple steps
4. Design dialogues to yield closure
5. Prevent errors
• As much as possible, design the interface so that users cannot make serious errors
• For example, gray out menu items that are not appropriate and do not allow alphabetic characters
in numeric entry fields.
• If users make an error, the interface should offer simple, constructive, and specific instructions for
recovery
• For example, users should not have to retype an entire name-address form if they enter an invalid
zip code but rather should be guided to repair only the faulty part
• Erroneous actions should leave the interface unchanged, or the interface should give instructions
about restoring the state.

• Different options for handling errors:

• Involve the user with dialogs
• Prevent the error or its consequences on system level
5. Prevent errors
6. Permit easy reversal of actions
• As much as possible, actions should be reversible.
• This feature relieves anxiety, since users know that errors can be undone,
and encourages exploration of unfamiliar options.
• The units of reversibility may be a single action, a data-entry task, or a
complete group of actions, such as entry of a name-address block

• Providing UNDO functions

• As a basic rule, all actions should be reversible
• Not always possible
• Communication (e.g. email), IoT, smart environments, machines, cars, …
• Not trivial (conceptually as well as technically)
• Write a text, copy it into the clipboard, undo the writing, the text is still in the
clipboard…
6. Permit easy reversal of actions
7. Keep users in control
• Experienced users strongly desire the sense that they are in charge of the
interface and that the interface responds to their actions.
• They don’t want surprises or changes in familiar behavior, and
• They are annoyed by tedious data-entry sequences, difficulty in obtaining
necessary information, and inability to produce their desired result.

• Avoid non-causality
• The system should be predictable
• Current developments are in contrast:
• AI
• Intelligent agents
• Smart environments
7. Keep users in control
8. Reduce short-term memory load
• Humans have limited capacity for information processing in short-term memory
• Avoid interfaces in which users must remember information from one display and then
use that information on another display.
• It means that cellphones should not require reentry of phone numbers, web site locations
should remain visible and lengthy forms should be compacted to fit a single display.

• The system should remember, not the user

• Make information that is required visible
• Recognition is easier than recall
8. Reduce short-term memory load
Errors

• “If an error is possible, someone will make it” (Norman)

• Errors are not all the same
• Different errors need different ways of addressing them. Consider:
• How errors can be prevented in the design of UIs
• How errors can be managed when they happen

• Error:
Any situation in which an action sequence does not lead to the intended result.
• This can be for two reasons:
• An error in planning resulting in wrong choice of action
• Misinterpretation, or applying an incorrect mental model
• An error in execution: slipping up in executing the action sequence
• “I didn’t want to do that”
 Errors
Human Failure

Unintentional Intentional

Error Non-compliance

Action error Thinking error Situational

Routine Exceptional
Rule-based Knowledge-based
Operational slip Memory lapse mistake mistake
Errors

• Slip
• A physical action goes wrong
• E.g., Hit the wrong button by mistake
• Lapse
• Forget to perform a required or important action
• E.g., forgetting to set the resolution of a video before export
• Rule-based mistake
• Assuming certain actions will adhere to a rule but they don’t
• Continuing to edit an online document even though the internet connection is lost
• Knowledge-based mistake
• Wrong mental model of the software used
• E.g., not saving a file in a desktop application because the user is used to cloud-based apps that autosave
Don Norman’s principles
From The Design of Everyday Things (1988)

• Visibility
• Feedback
• Affordances
• Natural Mapping
• Constraints
• Consistency
Don Norman’s principles
From The Design of Everyday Things (1988)

• Visibility
• Feedback
• Affordances
• Natural Mapping
• Constraints
• Consistency
Visibility

Functionality is visible for the person using the interface

• Important advantages of GUIs compared to command-line interfaces

• Screen space is still a limited resource (especially on mobile)!
• Focus on commonly used functionality and user expertise
Affordances

“All action possibilities latent in the environment, objectively

measurable and independent of the individual’s ability to recognize
them, but always in relation to the actor and therefore dependent on
their capabilities.”
J.J. Gibson, The Ecological Approach to Visual Perception (1979).
Affordances

Inspired by physical objects

Affordances

A (perceived) affordance suggests

(or gives a clue about) an action possibility
Affordances

the texture suggest friction, something to

grab onto and drag
Natural mapping
There should be a natural mapping between controls and their effect

• In other words, the commands you give to the system should result
in an expected reaction.
• Exploits (spatial) analogies, metaphors, and cultural standards.
Constraints

Constrain the possible actions, either to manage complexity or avoid mistakes.

• Physical constraints: e.g., an ethernet cable does not fit into a USB port; the
mouse cursor cannot go beyond the visible screen area
• Cultural constraints: e.g., red vs. green – off vs. on, danger vs. safe, succeed vs.
fail
• Semantic constraints: based on our knowledge of the world, e.g., deciding where
to put the windshield of a motorcycle when putting a piece of Lego together
• Logical constraints: goes hand-in-hand with a good conceptual model, users will
logically deduce what follows next (e.g., scroll down to see more)
Eight golden rules Design Principles
by Ben Shneiderman by Don Norman

1. Strive for consistency • Visibility

2. Seek universal usability • Feedback
3. Offer informative feedback • Affordances
4. Design dialogues to yield closure • Natural Mapping
5. Prevent Errors • Constraints
6. Permit easy reversal of actions • Consistency
7. Keep users in control
8. Reduce short-term memory load