0% found this document useful (0 votes)
68 views70 pages

Week 3

The document discusses guidelines, principles, theories and models for human-computer interaction design. It provides examples of guidelines including Apple's guidelines for designing menus for the iWatch, National Cancer Institute's usability guidelines, and guidelines for organizing displays, accessibility, getting users' attention, facilitating data entry, and an organization's own guidelines. Guidelines provide specific design recommendations and best practices to promote consistency among designers.

Uploaded by

yamkela
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
0% found this document useful (0 votes)
68 views70 pages

Week 3

The document discusses guidelines, principles, theories and models for human-computer interaction design. It provides examples of guidelines including Apple's guidelines for designing menus for the iWatch, National Cancer Institute's usability guidelines, and guidelines for organizing displays, accessibility, getting users' attention, facilitating data entry, and an organization's own guidelines. Guidelines provide specific design recommendations and best practices to promote consistency among designers.

Uploaded by

yamkela
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 70

Human Computer Interaction

(HCIN101)

3. Guidelines, principles,
theories and models
Agenda

1. References
2. Introduction
3. Guidelines
4. Principles
5. Theories
6. Models
7. Summary

Week 3 (Guidelines, Principles, Theories


3/16/2023
and Models) 2
References

◼ References
1. Shneiderman, Plaisant, Cohen, Jacobs & Elmqvist (2018).
Designing the User Interface: Strategies for Effective
Human-Computer Interaction. Pearson
o Chapter 3
2. Rogers, Preece & Sharp (2015). Interaction Design:
Beyond Human-Computer Interaction. John Wiley
o Chapter 3.3 (Conceptual models)
o Chapter 14.5 (Predictive models)

Week 3 (Guidelines, Principles, Theories


3/16/2023
and Models) 3
Introduction
• Good user interface requires an understanding of:
– Human
– Use and context
– Technology
– Development

Week 3 (Guidelines, Principles, Theories


3/16/2023 4
and Models)
Introduction
◼ Good design requires an understanding of:

Week 3 (Guidelines, Principles, Theories


3/16/2023
and Models) 5
Introduction

◼ In Week 2 we discussed the following human


aspects
1. Physical abilities and physical processes
2. Cognitive abilities and cognitive processes
3. Personality differences
4. Cultural and international diversity
5. Note: 4 and 5 (self study, Chapter 2 in Shneiderman et.
al. (2018)

Week 3 (Guidelines, Principles, Theories


3/16/2023
and Models) 6
Introduction
◼ The human body for interaction
1. Vision
2. Hearing
3. Touch
4. Taste
5. Smell
6. Body movement
7. Body temperature
8. Body smell (odour)
◼ Note: what is the difference between 1 to 5 and 6 to 8?

Week 3 (Guidelines, Principles, Theories


3/16/2023
and Models) 7
Introduction
◼ Physical human characteristics affect (e.g., age, size
of hands, etc.) affect how we interact with user
interfaces
o Any example?
◼ Physical abilities affect our cognitive abilities
o Any examples? What is the implication for user interface
design?
◼ Performance load = ?
o Implications for design?
◼ Users have different abilities: implications for design?
o Universal usability (“compromises” and “multiple versions”
)

Week 3 (Guidelines, Principles, Theories


3/16/2023
and Models) 8
Introduction

• Guidelines: Low-level focused advice (recommendations)


about good practices and cautions against dangers.
• Principles: Mid-level strategies or rules to analyze 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.
• Models: simple representations (textual or graphic) of
complex phenomena

Week 3 (Guidelines, Principles, Theories


3/16/2023 9
and Models)
Guidelines

• Shared (common) understanding to promote


consistency among multiple designers in use
of terms, appearance, and action sequences
• Based on best practices
• Criticism: too specific, incomplete, hard to
apply, and sometimes wrong
• Proponents: based on experience from the
field of practice
Week 3 (Guidelines, Principles, Theories
3/16/2023 10
and Models)
Guidelines (continued)

• Example
– Apple and Microsoft guidelines for desktop-interface design have been
followed by other guidelines for Web and mobile devices
– Example of Apple guidelines for designing menus for the iWatch:

Week 3 (Guidelines, Principles, Theories


3/16/2023 11
and Models)
Guidelines

• Example: National Cancer Institute’s guidelines (see


www.usability.gov) include:
– Standardize task sequences
– Ensure that embedded links are descriptive
– Use unique and descriptive headings
– Use check boxes for binary choices
– Develop pages that will print properly
– Use thumbnail images to preview larger images

Week 3 (Guidelines, Principles, Theories


3/16/2023 12
and Models)
Guidelines

• Guidelines for organizing the display:


– Smith and Mosier (1986) offer five high-level goals
1. Consistency of data display
2. Efficient information assimilation by the user
3. Minimal memory load on the user
4. Compatibility of data display with data entry
5. Flexibility for user control of data display

Week 3 (Guidelines, Principles, Theories


3/16/2023 13
and Models)
Mobile HCI Design Constraints/Guidelines.
• Design constraints
• Smaller screen size
• Touch data entry can cause errors
• Battery-power limitations
• Data download speed or access

Design Guidelines
• Spatial consistency
• Show high-level information
• Minimize number of steps (taps)
• Minimize data entry
• Focus on goals and optimize tasks
• Emerging standards from manufacturers
• Any other constraints and corresponding
guidelines?

Week 3 (Guidelines, Principles, Theories


3/16/2023 14
and Models)
Guidelines

• Guidelines for Accessibility


– Promote accessibility for users with disabilities, e.g.:
• Provide a text equivalent for every non-text element
• For any time-based multimedia presentation, synchronize equivalent
alternatives
• Information conveyed with color should also be conveyed without it
• Title each frame to facilitate identification and navigation
– The goal of the allow users with disabilities to use screen
readers and other technologies to access content
• References:
– U.S. Access Board: http://www.access-board.gov/508.htm
– World Wide Web Consortium (W3C):
http://www.w3.org/TR/WCAG20/

Week 3 (Guidelines, Principles, Theories


3/16/2023 15
and Models)
Guidelines

• Guidelines for getting the user’s attention


– Intensity
– Marking
– Size
– Choice of fonts
– Inverse video
– Blinking
– Color
– Audio

Week 3 (Guidelines, Principles, Theories


3/16/2023 16
and Models)
Guidelines

• Guidelines to facilitate data entry


• Consistency: similar sequences of actions to speed learning
• Minimum user input: Fewer input actions mean greater
operator productivity, and usually less error
• Minimum memory load: data entry should not require users
to remember lengthy lists of codes
• The format of data-entry information should be linked closely
to the format of displayed information (e.g., dashes in
telephone numbers; any other (very common))
• Flexibility: experienced users prefer to be in control, e.g.,
– To enter information in a sequence that they can control, e.g., select
the color first or size first, when clothes shopping

Week 3 (Guidelines, Principles, Theories


3/16/2023 17
and Models)
Guidelines
• Example of guidelines for an organization: an organizations
can develop their own guidelines
• Example Cerner’s website guidelines for designers and
developers (describes 3 sizes of icons to be used in all
electronic products (https://design.cerner.com/)

Week 3 (Guidelines, Principles, Theories


3/16/2023 18
and Models)
Principles
• Principles are more fundamental, widely applicable,
and highly enduring than guidelines.
• Principles provide (Need) more clarification
• The following principles are discussed :
1. Major Fundamental principles
i. Determine user’s skill levels
ii. Identify the tasks
iii. Choose an interactive style
2. Five primary interaction styles
3. Common principles (e.g., 8 golden rules of interface
design; Nielsen’s Heuristics)
4. Example of a principle: Prevent errors
5. Automation and human control

Week 3 (Guidelines, Principles, Theories


3/16/2023 19
and Models)
Fundamental principles ONE: Determine user’s skill levels

• “Know thy user”


1. Characteristics of users, e.g., what are examples of users xtics?
o Age, gender, physical and cognitive abilities, education, cultural
or ethnic background, training, motivation, goals and
personality
2. Design goals based on skill level
i. Novice or first-time users
ii. Knowledgeable intermittent users/intermediate users
iii. Expert frequent users
• Multi-layer designs

Week 3 (Guidelines, Principles, Theories


3/16/2023 20
and Models)
Fundamental principles: Determine user’s skill
levels
• Exercise
You are designing video game. The profile of users are
new, knowledgeable and expert users. Explain how you
would use the “Multi-layer” design principle to improve.
Your answer should cover two aspects of the
application.

Week 3 (Guidelines, Principles, Theories


3/16/2023 21
and Models)
Fundamental principles TWO: Identify the task

• Task Analysis: usually involves long hours observing


and interviewing users.
– Example: Decomposition of high level tasks

Week 3 (Guidelines, Principles, 22


3/16/2023
Theories and Models)
Fundamental principles: Identify the task
– Example: Relative task frequencies

Week 3 (Guidelines, Principles, 23


3/16/2023
Theories and Models)
Fundamental principles THREE: Choose an interaction style

Types of interaction styles.


1. Direct manipulation
2. Menu selection
3. Form fill-in
4. Command language
5. Natural language, e.g.,
speech recognition
• Advantages and
disadvantages
– Implications for design?

Week 3 (Guidelines, Principles, 24


3/16/2023
Theories and Models)
The 8 Golden Rules of Interface Design
1. Strive for consistency
2. Cater to universal usability
3. Offer informative feedback
4. Design dialogs to yield closure
5. Prevent errors
6. Permit easy reversal of actions
7. Keep users in control
8. Reduce short-term memory load
• Note: these are very broad and should be tailored to
specific domains
• Describe any two ways principles may assist user interface
design?
• Describe any two strategies to implement to achieve rule 8
(i.e., reduce short-term memory overload)
Week 3 (Guidelines, Principles, Theories
3/16/2023 25
and Models)
10 Nielsen’s Usability Principles to Improve UI design

Week 3 (Guidelines, Principles, Theories


3/16/2023 26
and Models)
Prevent errors FOUR.

• This is a very important principle


• Make error messages specific, positive in tone, and
constructive
• Preventing errors: strategies
– Correct actions
i. Gray out inappropriate actions
ii. Selection rather than freestyle typing (any example?)
iii. Automatic completion
– Complete sequences
• Single abstract commands
– Universal usability (any example?)
Week 3 (Guidelines, Principles, Theories
3/16/2023 27
and Models)
Automation and human control: FIVE
• Both humans and computers have their capabilities and
limitations

Week 3 (Guidelines, Principles, Theories


3/16/2023 28
and Models)
Automation and human control (continued)

• There is ongoing debate on locus of control


– Humans in control vs. autonomous system (agents)
• Successful integration:
– Users can avoid:
• Routine, tedious, and error prone tasks
– Users can concentrate on:
• Making critical decisions, coping with unexpected
situations, and planning future actions

Week 3 (Guidelines, Principles, Theories


3/16/2023 29
and Models)
Automation and human control (continued)

• Supervisory control needed to deal with real world


open systems (i.e., context in which infinite and
decisions events and system failure is possible)
– e.g. air-traffic controllers with low frequency, but
high consequences of failure
– FAA regulation: design should place the user in
control and automate only to improve system
performance, without reducing human
involvement

Week 3 (Guidelines, Principles, Theories


3/16/2023 30
and Models)
Automation and human control (continued)

• Goals for autonomous agents


– Knows user's preferences
– Makes proper inferences
– Responds to new situations
– Performs competently with little guidance

Week 3 (Guidelines, Principles, Theories


3/16/2023 31
and Models)
Automation and human control (continued)

• User modeling for adaptive interfaces


– keeps track of user performance
– adapts behavior to suit user's needs
– allows for automatically adapting system to suit user, e.g.,
• response time, length of messages, density of feedback, content
of menus, order of menu items, type of feedback, content of help
screens
– can be problematic
• system may make surprising changes
• user must pause to see what has happened
• user may not be able to:
– predict next change
– interpret what has happened
– restore system to previous state

Week 3 (Guidelines, Principles, Theories


3/16/2023 32
and Models)
Automation and human control (continued)

• Alternative to agents: adaptable interface


– user control, responsibility, accomplishment
– expand use of control panels
• style sheets for word processors
• specification boxes of query facilities
• information visualization tools

Week 3 (Guidelines, Principles, Theories


3/16/2023 33
and Models)
Automation and human control (concluded)
• Example of adaptable interface: Users employ control panels
to set physical parameters, such as the cursor blinking speed
or speaker volume, and to establish personal preferences
such as time/date formats, color schemes, or the content of
start menus.

Week 3 (Guidelines, Principles, Theories


3/16/2023 34
and Models)
Automation and human control (concluded)

Question: Adaptable vs Adaptive interfaces


You are designing an application (EaziMeals) for
students to order meals on campus. Identify one
aspects each of the application which may be
implemented as:
1. Adaptive interface (automatically initiates)
2. Adaptable interface (deliberate and conscious choice)

Week 3 (Guidelines, Principles, Theories


3/16/2023 35
and Models)
Theories
• Various theories have been developed to help improve user
interface design
• These theories are derived from principles and beyond the
specifics of guidelines
• Some theories are:
– Descriptive
– Explanatory
– Prescriptive
– Predictive
• Some theories are based on human skills
– Motor (e.g., pointing a mouse)
– Perceptual (e.g., finding an item on display)
– Cognitive (e.g., planning sequence of actions to perform a
task)

Week 3 (Guidelines, Principles, Theories


3/16/2023 36
and Models)
Theories

• Descriptive theory
– Describes an object, action, event, etc. as it is
– Provides consistent terms and concepts for thinking about a
problem
• Explanatory theories are useful for:
– Observing behavior
– Describing activity
– Conceiving of designs
– Comparing high-level concepts of two designs
– Training
• Predictive theories:
– Enable designers to compare proposed designs for execution
time or error rates (objective evaluation, why?)
– Useful in user modeling for adaptive interfaces. How?

Week 3 (Guidelines, Principles, Theories


3/16/2023 37
and Models)
Consistency theory
Consistency through grammar
Consistent user interface goal
– Definition is elusive – multiple levels sometimes in conflict
– Mostimes advantageous to be consistent

Consistent Inconsistent A Inconsistent B


delete/insert character delete/insert character delete/insert character
delete/insert word remove/bring word remove/insert word
delete/insert line destroy/create line delete/insert line
delete/insert paragraph kill/birth paragraph delete/insert paragraph

Inconsistent action verbs


– Take longer to learn, cause more errors, slow down users, and
are harder for users to remember
Week 3 (Guidelines, Principles,
3/16/2023 3-38
Theories and Models)
Contextual theories
• Micro-HCI Theories
– Focus on measurable performance (such as speed and errors) on
multiple standard tasks taking seconds or minutes in laboratory
environments
• Design-by-levels
• Stages of action (discussed later)
• Consistency

• Macro-HCI Theories
– Focus on case studies of user experience over weeks and months, in
realistic usage contexts with rich social engagement
• Contextual
• Dynamic

Week 3 (Guidelines, Principles, Theories


3/16/2023 39
and Models)
Contextual theories (concluded)

• User actions are situated by time and place


– You may not have time to deal with shortcuts or device dependent syntax (such as
on mobile devices) when hurried
– Physical space is important in ubiquitous, pervasive and embedded devices, e.g. a
museum guide stating information about a nearby painting
• A taxonomy for mobile device application development
could include:
– Monitor and provide alerts, e.g. patient monitoring systems
– Gather information
– Participate in group collaboration
– Locate and identify nearby object or site
– Capture information about the object and share that information
• Question: Give an example each of how micro and macro
HCI theories may be used in user interface design
Week 3 (Guidelines, Principles, Theories
3/16/2023 40
and Models)
Taxonomy

• Taxonomy:
– Orders a complex set of phenomena, e.g.,
classification:
1. Users (novices, knowledgeable, experts)
2. Interaction styles (any example, from this slide?)
– Allows useful comparisons
– Guides designers
– Used in both descriptive and explanatory
theories

Week 3 (Guidelines, Principles, Theories


3/16/2023 41
and Models)
Models

• Model is an oversimplification of reality

• Some models are


– Descriptive
– Explanatory
– Predictive
• Some models are based on human capacity
– Motor
– Perceptual
– Cognitive
o Why these models important? To match to design to human
capacity and limitations

Week 3 (Guidelines, Principles, Theories


3/16/2023 42
and Models)
Conceptual, semantic, syntactic, and lexical
model
• Foley and van Dam* four-level approach (according to the way we
categorize in computing)
– Conceptual level:
• User's mental model of the interactive system (discussed later)
– Semantic level:
• Describes the meanings conveyed by the user's command input and by the
computer's output display
– Syntactic level:
• Defines how the units (words) that convey semantics are assembled into a
complete sentence that instructs the computer to perform a certain task
– Lexical level:
• Deals with device dependencies and with the precise mechanisms by which a user
specifies the syntax
• Approach is convenient for designers
– Top-down nature is easy to explain
– Matches the software architecture
– Allows for useful modularity during design

Week 3 (Guidelines, Principles, Theories


3/16/2023
3-43
and Models)
Designer’s and user’s models

• Stage 1: developers create system by making assumptions about stakeholders and anticipate task
they perform
• Stage 2 – Stakeholders use the system, taking advantage of contextual factors (e.g., background
knowledge, goals and objectives, work context)

Week 3 (Guidelines, Principles, Theories


3/16/2023 44
and Models)
Mental models (MM)
• MM: This is an internal construction of an external world.
• People often make assumptions about how to perform a task
• Users assumptions (often incomplete and inaccurate) about an interface
affect how they use it
• Design also make assumptions about the interface they create
• The goal of UI is to create ensure designers’ and users’ models match
• Question: discuss any two strategies to ensure designers’ and users’
models match

Week 3 (Guidelines, Principles, Theories


3/16/2023 45
and Models)
Stages of action models
• Norman's seven stages of action
1. Forming the goal
2. Forming the intention
3. Specifying the action
4. Executing the action
5. Perceiving the system state
6. Interpreting the system state
7. Evaluating the outcome

• Norman's contributions
– Context of cycles of action and evaluation.
– Gulf of execution: Mismatch between the user's intentions and the
allowable actions
– Gulf of evaluation: Mismatch between the system's representation
and the user’s expectations

Week 3 (Guidelines, Principles, Theories


3/16/2023 46
and Models)
Stages of action models
• Norman's seven stages of action (an explanatory model)
– Source: Stone et. al. (2006)

Week 3 (Guidelines, Principles, Theories


3/16/2023 47
and Models)
Stages of action models
• Norman's Gulf of execution and Gulf of evaluation

• Source: Preece et. al. (2014)


Week 3 (Guidelines, Principles, Theories
3/16/2023
3-48
and Models)
Stages of action models (concluded)

• Four principles of good design


– State and the action alternatives should be visible
– Should be a good conceptual model with a consistent system image
– Interface should include good mappings that reveal the relationships
between stages
– User should receive continuous feedback
• Four critical points where user failures can occur
– Users can form an inadequate goal
– Might not find the correct interface object because of an
incomprehensible label or icon
– May not know how to specify or execute a desired action
– May receive inappropriate or misleading feedback

Week 3 (Guidelines, Principles, Theories


3/16/2023 49
and Models)
Perceptual, cognitive,
and motor
• Perceptual or cognitive subtasks models
– E.g., Predicting reading times for free text, lists, or
formatted displays
• Motor-task performance models
– E.g., Predicting keystroking or pointing times

Week 3 (Guidelines, Principles, Theories


3/16/2023 50
and Models)
Cognitive models
• Information processing
models: basis for predicting
human performance
• Best known is Human
Processor Model or
Model Human Processor
(MHP)

Week 3 (Guidelines, Principles, Theories


3/16/2023 51
and Models)
Cognitive models
• MHP (c.f. Week 2 lecture)
– Human sensory system, i.e., visual, hearing and touch
– Cognitive processes (attention, memory, etc.)

Week 3 (Guidelines, Principles, Theories


3/16/2023 52
and Models)
Cognitive models

Simplex One as a Simplistic Theory


• Constructed as five zones or modules of cognition
which are partially independent of each other.
• Each module possesses both memory and local
processing capacity, each of which is acting as a
von Neumann machine
• Entire system behaves as parallel processing
system
• Provides a simple model which Interactive System
designer, Computer scientist, etc. can apply to
solve of real-world computing problems.
Week 3 (Guidelines, Principles, Theories
3/16/2023 53
and Models)
Cognitive models

Adams, R and Landon, P. 2003. Principles and Concepts for Information and Communication Technologies Design. Journal of Visual Impairment and
Blindness, October.

5 Zones to consider →
Week 3 (Guidelines, Principles, Theories
3/16/2023 54
and Models)
Cognitive models
• GOMS
– A cognitive model (developed by Card, Moran, and Newell)
– Represents a group of human information processing
techniques
– Used by interface designers to predict human behaviour
– A person’s behaviour is analyzed in terms of four
components:
• Goals – something that the user wants to accomplish (Delete word)
• Operators – basic perceptual, cognitive, or motor actions used to
accomplish goals, or actions that the software allows user to make (e.g.
PRESS-ENTER-KEY or CLICK-MOUSE)
• Methods – procedures (sequences) of subgoals and opertors that
accomplish a goal
• Selection rules – personal rules users follow in deciding what method to
use in a circumstance (determine which method when there is more than
one)

Week 3 (Guidelines, Principles, Theories


3/16/2023 55
and Models)
GOMS continued …
• GOMS is one of the most validated methods in Human Computer
Interaction (HCI)
• The model assumes expert user and well-defined tasks
• There are various limitations to this technique, e.g.:
– Task in question must be analyzed in terms of the procedural (how to
do it) knowledge.
– Represents only skilled behavior. Not useful for ill-defined problem
solving, exploration, etc. Cognitive walkthrough is useful for
exploratory behavior by novices.
– Need to start with a list of top-level tasks or user goals. List must be
provided outside of GOMS.
• GOMS is useful for uncovering a frequent goal supported by a very
inefficient method and changing design to include a more efficient
method.

Week 3 (Guidelines, Principles, Theories


3/16/2023 56
and Models)
GOMS continued …

• There are many variations of GOMS, e.g:


• Keystroke Level Model (KLM) by Stuart Card:
– Simplest form of GOMS
– Consists of the sum of subtasks and required overhead,
i.e., the sum of the time of :
• Pointing –P, Homing –H, Drawing –D, Mental operator–M, Waiting
for system response– R
• Other types of GOMS
1. Touch Level Model (TLM)
2. Finger Level Model (FLM)

Week 3 (Guidelines, Principles, Theories


3/16/2023 57
and Models)
KLM

• Performance Measurement
▪ Focus on how long tasks take to complete or how objectives are
met.
▪ Requires very rigorous test designs and extensive resources
• Keystroke Level Model (KLM)
• Choose representative user task scenarios
• Specify design to point that keystrokes defining actions can be
listed
• List keystrokes (operators) required to perform task
• Insert mental operators at points user needs to stop and think
• Look up standard execution time for each operator
• Add up the execution times for the operators
• Total is estimated time to complete task

Week 3 (Guidelines, Principles, Theories


3/16/2023 58
and Models)
KLM continued …

Standard Execution Times


Operator Description Time (sec)

K Keystroke (including Expert (90wpm): 0.12


combination of keys) Average skilled (55wpm): 0.20
Average non-skilled (40wpm): 0.28
Worst: 1.2
H Homing 0.4sec
B/BB Click mouse button 0.1sec/ 2*0.1
P Pointing mouse to target 0.8 to 1.5 (average: 1.1
(Can use Fitt’s law to calculate)
M Mental activity (or “look at” 1.35

Week 3 (Guidelines, Principles, Theories


3/16/2023 59
and Models)
KLM continued …
Example: Predict the time for closing a Window
1. Using keyboard commands (CTRL +F4 Method)
2. Using the icon option
3. Using File option
Example 3: File Option approach
Home to mouse (H) 0.40
Look at File (M) 1.35
Point to file (P) 1.10
Click on File (B) 0.28
Look at Close (M) 1.35
Point at Close (P) 1.10
Click at Close (B) 0.28
Total 5.86s

Week 3 (Guidelines, Principles, Theories


3/16/2023 60
and Models)
KLM continued …

Example: Delete a file by dragging icon to trash


1. Initiate delete. (M)
2. Find file icon. (M)
3. Point to file icon. (P)
4. Press & hold button. (B)
5. Verify icon reverse video. (M)
6. Find trash icon. (M)
7. Drag file to trash icon. (P)
8. Verify trash reverse video. (M)
9. Release button. (B)
10. Verify bulging trash icon. (M)
11. Find original window. (M)
12. Point to window. (P) 3P + 2B + 7M =

Week 3 (Guidelines, Principles, Theories


3/16/2023 61
and Models)
Fitts’ Law (the placement of objects on a screen)

• A robust model of human psychomotor behavior


• It enables the prediction of human movement
and human motion based on rapid, aimed
movement, not drawing or writing.
• The model is based on time and distance.
Note that this law was developed long before the
mouse or other pointing devices (or any digital
device) but is applicable to directly applicable to
the placement of objects on a screen
Week 3 (Guidelines, Principles, Theories
3/16/2023 62
and Models)
Summary of Fitts’s Law.
• Fitts's Law is applied to the design of interactive objects in
graphical displays. As the size of an object increases the
selection time goes down and as the distance between the
user's starting point and the object decreases so to does
the time taken to make the selection. Conversely, small
objects, placed far away from the user's starting position
take longest to select.
Implications:
• Therefore, designers should aim to make objects as close
to one another when they are used in the same sequence
chain. They should also try to make the interactive
elements of the screen as large as is sensible with the
amount of space available. Small objects spread apart take
the longest time to select; avoid this combination of design
features as much asWeek
possible.
3 (Guidelines, Principles, Theories
3/16/2023 63
and Models)
Fitts’ Law continued ...

MT = a + b log2(2D/W)

• MT – Movement Time
• a,b – regression coefficients (a= intercept; b= slope)
• D – amplitude or distance from starting point
to center of target
• W – width of target

Index Difficulty
• ID = Log2(2D/W)
• Increases by one bit for each doubling of distance (amplitude) and
halving of width
• Big targets at close range acquired faster than small targets at long
range
Week 3 (Guidelines, Principles, Theories
3/16/2023 64
and Models)
Fitts’ Law Index of Difficulty example
ID example
ID = Log2(2D/W)

Calculate the index of difficulty in moving from


1) A to B
2) B to A
3) Which is more difficult A to B or B to A ?

Week 3 (Guidelines, Principles, Theories


3/16/2023 65
and Models)
Fitts’ Law ID example continued ...
A

10 40
B

20
ID = Log2(2D/W)
1) A to B: ID = log2(2*40/20) = log2(4)
2) B to A: ID = log2(2*40/10) = log2(8)
3) It is therefore easier to move from A to B as
the ID is lower.

Week 3 (Guidelines, Principles, Theories


3/16/2023 66
and Models)
X

Q S
• Given that a user’s initial starting point is X, if the distance to Q is 5 and
the distance to S is 3 while their sizes are 80 and 96 respectively.
Determine the button (either Q or S) with the easiest route of navigation.

• Find the solution.

Week 3 (Guidelines, Principles, Theories


3/16/2023 67
and Models)
Summary
• This lecture covered:
• User interface design guidelines and examples
1. User interface design principles, two popular principles
– : Nielsen’s Heuristics
– 8 Golden rules
– Their application in user interface design
2. User interface design theories, classified as:
– Descriptive, Explanatory, Prescriptive
– Perceptual, cognitive and motor
– Design-level
– Model by Foley and van Dam
– Consistency
– Contextual
3. Models:
– Mental models
– Norman’s stages of action
– MHP
– Simplex
– GOMS (KLM, TLM, FLM)
– Fitt’s law

Week 3 (Guidelines, Principles, Theories


3/16/2023 68
and Models)
Questions and Feedback

?
Week 3 (Guidelines, Principles, Theories
3/16/2023
and Models) 69
End of Session

Week 3 (Guidelines, Principles, Theories


3/16/2023 70
and Models)

You might also like