Chapter 2 CSC409

Human Computer Interface (CSC 409)
Principles of Graphic User Interface (GUI) Design
Adedoyin I. OYEBADE
sacnet2015@gmail.com
Bowen University,
Iwo, Nigeria
November 14, 2023
OYEBADE A. (BU) CSC 409 November 14, 2023 1 / 31

Presentation Overview
1 Principles of GUI
Introduction
Effective and Intuitive GUI Design Principles
General GUI Design Principles
User Satisfaction

Introduction
1 An effective GUI design must ensure that users does not spend
much time in learning and understanding how the GUI
functions
2 According to the cognitive science based guidelines, human

memory limitations, attention, learning, decision making and
perception had to be taken into account when designing an
effective GUI

Effective and Intuitive GUI Design Principles
1 The four main principles here are

• Focus on users and their tasks instead of technologies used
• Consider functions first, presentation later
• Simplicity of GUI
• Promote learning and delivering information

Important Cognitive Psychology Theories
Guidelines For GUI Design
1 Cognitive Psychology Theories Guideline
• Schema Theory: It defines that knowledge is organized into
basic building blocks of knowledge, which also known as units
• Cognitive Load Theory (CLT) is an instructional design theory
that defines information processing which involves long-term
memory and, short-term memory or working memory
• Retention Theory:refers to the amount of information which
can be memorized and retained by learners within a given time
• Gestalt Law: This is one of the foundations for instructional
screen design. It is usually explained using 11 specific laws: law
of balance, law of continuation, law of closure, law of
figure-ground, law of focal point, law of isomorphic
correspondence, law of Pragnanz, law of proximity, law of
similarity, law of simplicity, and law of unity
1 Gestalt Laws
• Law of Balance/Symmetry - asymmetrical images or objects are
perceived as incomplete
• Law of Continuation - eyes tend to follow a direction as shown in
GUI
• Law of Closure - Shapes that are not fully closed are perceived
as incomplete
• Law of Figure-Ground - different foreground colours are
perceived as different things. Same applies to different
background colours
• Law of Focal Point - each GUI forms or page should have a focal
point
• Law of Isomorphic Correspondence - different users perceive
the same image or object differently
1 Gestalt Laws
• Law of Proximity - Objects that are near to each other are
perceived as a group, regardless of the attributes or functions
performed
• Law of Pragnanz - simple GUI design or GUI with balanced
layout are considered as good forms
• Law of Similarity - Similar objects being grouped together attract
more attention than similar objects being placed scattered
• Law of Simplicity - Users understand faster if the information
conveyed is simple
• Law of Unity/Harmony - Objects are perceived as one group if
there is connection or similar arrangement of the objects

GUI Diagram

Accessibility
Definition
Systems should be designed to be usable, without modification, by
as many people as possible
1 A system should be usable by people of diverse abilities,

without special design or modification. Originally, the term
accessibility in design was directed toward making a system
usable
2 Four Basic Characteristics of Accessibility
• Perceptibility assures that a system’s design can be perceived,
regardless of a person’s sensory abilities
• Operability assures that a system’s design can be used,
regardless of a person’s physical abilities
• Simplicity assures that all users can easily understand and use
the system, regardless of experience, literacy, or concentration
level
• Forgiveness assures that a system minimizes the occurrence of,
and consequences of, errors
Affordance or Perceived Affordance
1 This is the relationship between the user interface and the

underlying properties associated with it
2 system uses easily understandable objects as metaphors for

the sole purpose that users are able to identify its use or
function by just observing it
3 perceived affordance is the way the user perceives as being
possible based on how an object is presented or an object
should naturally imply what actions it supports through its
design and attributes.

Availability and Clarity
Definition
Availability: Make all objects available at all times.
Avoid the use of modes
1 All aspects of a system should be available at any time and in

any sequence
Definition
Clarity: The interface should be visually, conceptually, and
linguistically clear including
Visual elements, Functions, Metaphors, Words and text
1 The interface must be clear in visual appearance, concept, and wording
2 Visual elements should be understandable, relating to the user’s real-world concepts and functions.
3 Metaphors, or analogies, should be realistic and simple
4 Interface words and text should be simple, unambiguous, and free of computer jargon

Compatibility
Definition
Compatibility: Provide compatibility with the following:The user,
task and job, product and also adopting the user perceptive
1 User compatibility: Design must be appropriate and

compatible with the needs of the user or client
2 Task and job compatibility: The organization of a system
should match the tasks a person must do to perform the job.
The structure and flow of functions should permit easy
transition between tasks
3 Product compatibility: The intended user of a new system is
often the user of other systems or earlier versions of the new
system
4 Interface words and text should be simple, unambiguous, and
free of computer jargon
Configurability
Definition
Configurability: Permit easy personalization, configuration, and
reconfiguration of settings
1 The interface should be tailorable to individual users’ needs

and desires.
2 Permitting personalization, configuration, and reconfiguration
of settings for the users
• will lead to higher user satisfaction
• will enhances a sense of control, encourages an active role in
understanding, and allows for personal preferences and
differences in experience levels

Consistency
Definition
Consistency: Consistency is uniformity in appearance, placement,
and behavior within the user interface
1 A system should look, act, and operate the same throughout

2 Similar components should
• Have a similar look,Have similar uses, Operate similarly.
• The same action should always yield the same result
• The function of elements should not change.
• The position of standard elements should not change.
3 Consistency is important because it can reduce requirements

for human learning by allowing skills learned in one situation
to be transferred to another like it.

Consistency
1 Effect of inconsistency in GUI design

• More specialization by system users
• Greater demand for higher skills
• More preparation time and less production time
• More frequent changes in procedures
• More error-tolerant systems (because errors are more likely)
• More kinds of documentation.
• More time to find information in documents.
• More unlearning and learning when systems are changed.
• More demands on supervisors and managers
• More things to do wrong

Control
Definition
Control: Control is feeling in charge, feeling that the system is
responding to your actions
1 The control must be in the following
• The user must control the interaction
• The context maintained must be from the perspective of the
user
• The means to achieve goals should be flexible and compatible
with the user’s skills, experiences, habits, and preferences
• Avoid modes because they constrain the actions available to the
user.
• Permit the user to customize aspects of the interface, while
always providing a proper set of defaults
2 Control is achieved when a person, working at his or her own
pace, is able to determine what to do, how to do it, and then is
easily able to get it done
Familiarity
Definition
Familiarity: Familiarity enable people to get started and become
productive quickly
1 Designers must use the following

• Employ familiar concepts and use a language that is familiar to
the user
• Keep the interface natural, mimicking the user’s behavior
patterns.
• Use real-world metaphors
• Operations should mimic one’s behavior patterns
• Dialogs should mimic one’s thought processes and vocabulary
• Icons or images should look like the real-world objects they
represent

Feedback
1 This is the ability of the system to be able to tell the user what
next to do in the process of using the system
2 It can be in form of graphics or text to the system status

Flexibility
Definition
Flexibility: Flexibility is the system’s ability to respond to individual
differences in people.
1 Flexibility is accomplished by providing multiple ways to access

application functions and perform tasks.
2 A system must be sensitive to the differing needs of its users,
enabling a level and type of performance based upon:
• Each user’s knowledge and skills
• Each user’s experience
• Each user’s personal preference
• Each user’s habits
• The conditions at that moment
3 Permit people to choose the method of interaction that is most
appropriate to their situation
4 The system must be scalable
Forgiveness
Definition
Forgiveness: Forgiving system keeps people out of trouble.
1 The system should be able to

• Tolerate and forgive common and unavoidable human errors
• Prevent errors from occurring whenever possible
• Protect against possible catastrophic errors.
• Provide constructive messages when an error does occur

2 Prevent errors from occurring by anticipating where mistakes
may occur and designing to prevent them
3 When errors do occur, present clear instructions on how to

correct them

Immersion
Definition
Immersion: Immersion is a state of mental focus so intense that
awareness and sense of the “real world” is lost.
1 When immersion exists, the general result is a feeling of joy
and satisfaction
2 When a person’s perceptual and cognitive systems are

underutilized, one can become bored and apathetic
3 In design, provide conditions that foster immersion

• Challenges that can be overcome
• Context where a person can focus without significant distraction
• Clearly defined goals
• Immediate feedback about actions and overall performance.
• A feeling of control over actions, activities, and the environment.

Learnability
1 is related to how the user uses the system whether the user
will be able to use the system easily by simply recognizing the
system or whether the user should recall everything by
memorizing it.
• It must be consistent(Similar look and use) and must be
standard.

Low Physical Effort
1 Users should be able to achieve task easily
• Low usage time for every user on the application design

Obviousness
Definition
Obviousness: A system should be easily learned and understood.
1 The design of a control should suggest how it is to be

operated. The suggestion is called Affordance
2 Strong clues to the operation of objects should be presented
3 A user should know the following

• What to look at, What it is, What to do,
When to do it, Where to do it, Why to do it,
How to do it
4 A system should be understandable, flowing in a

comprehensible, obvious, and meaningful order

Operability
Definition
Operability: Operability requires that a system always be usable,
regardless of a person’s physical abilities.
1 Operability is achieved by minimizing repetitive actions and

sustained physical effort, fostering control use through making
their intents obvious and their sizes large enough for easy
activation, and positioning screen information and controls so
they can be easily accessed whether sitting or standing
2 Operability also requires that the design be compatible with

assistive technologies

Perceptibility
Definition
Perceptibility: Assure that a system’s design can be perceived,
regardless of a person’s sensory abilities.
1 Every user must be able to perceive a design, regardless of

sensory abilities
2 Designing for perceptibility involves using redundant coding

methods (e.g., iconic as well as textual presentation, color as
well as monochromatic presentation)
3 Its provide compatibility with assistive sensory technologies

Recovery
Definition
Recovery: This is the ability of the system to return to a certain
point if difficulty arise
1 This is to ensure users never lose their work as a result of
• An error on their part.
• Hardware, software, or communication problems.
2 The return point could be the previous action, previous screen,

a recent closure point, or the beginning of some
predetermined period, such as back 10 screens or some
number of minutes.
3 The goal is stability, or returning easily to the right track when

a wrong track has been taken.
4 Recovery should be obvious, automatic, and easy and natural

to perform.
Reducing cognitive burden
1 This is the ability of the system to use low memory which will
enhance the learning effect of the user

Responsiveness
Definition
Responsiveness: The system ability to rapidly response to the
user’s request
1 All requests to the system must be acknowledged in some way
2 Feedback may be visual, such as a change in the shape of the

mouse pointer, or textual, such as text taking the form of a
message
3 Never leave the screen blank for more than a moment,

because the user may think the system has failed.

Simplicity
Definition
Simplicity: This is achieved when everyone can easily understand
and use a system regardless of experience, literacy, or
concentration level.
1 Ways to provide simplicity
• Use progressive disclosure, hiding things until they are needed i.
e.Hide more sophisticated and less frequently used functions
• Provide an obvious visual hierarchy.
• Provide defaults.
• Minimize screen alignment points
• Make common actions simple at the expense of uncommon
actions being made harder.
• Provide uniformity and consistency
• Eliminate unnecessary elements
2 The goal, then, is to provide a complex system while masking
the complexity through a simple interface
User Satisfaction
1 This is the ability of the user to do what he intended to do
• Avoid false positive: activities that occur when I don’t aim them
to occur
• Avoid false negative: activities that don’t occur when I aim it to

occur.

Chapter 2 CSC409

Uploaded by

Document Information

Original Description:

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

Chapter 2 CSC409

Uploaded by

Copyright:

Available Formats

Human Computer Interface (CSC 409)

Principles of Graphic User Interface (GUI) Design

November 14, 2023

OYEBADE A. (BU) CSC 409 November 14, 2023 1 / 31

OYEBADE A. (BU) CSC 409 November 14, 2023 2 / 31

2 According to the cognitive science based guidelines, human

OYEBADE A. (BU) CSC 409 November 14, 2023 3 / 31

1 The four main principles here are

• Consider functions ﬁrst, presentation later

• Promote learning and delivering information

OYEBADE A. (BU) CSC 409 November 14, 2023 4 / 31

OYEBADE A. (BU) CSC 409 November 14, 2023 7 / 31

OYEBADE A. (BU) CSC 409 November 14, 2023 8 / 31

1 A system should be usable by people of diverse abilities,

1 This is the relationship between the user interface and the

2 system uses easily understandable objects as metaphors for

OYEBADE A. (BU) CSC 409 November 14, 2023 10 / 31

1 All aspects of a system should be available at any time and in

1 The interface must be clear in visual appearance, concept, and wording

3 Metaphors, or analogies, should be realistic and simple

OYEBADE A. (BU) CSC 409 November 14, 2023 11 / 31

1 User compatibility: Design must be appropriate and

1 The interface should be tailorable to individual users’ needs

OYEBADE A. (BU) CSC 409 November 14, 2023 13 / 31

1 A system should look, act, and operate the same throughout

3 Consistency is important because it can reduce requirements

OYEBADE A. (BU) CSC 409 November 14, 2023 14 / 31

1 Effect of inconsistency in GUI design

OYEBADE A. (BU) CSC 409 November 14, 2023 15 / 31

1 Designers must use the following

OYEBADE A. (BU) CSC 409 November 14, 2023 17 / 31

2 It can be in form of graphics or text to the system status

OYEBADE A. (BU) CSC 409 November 14, 2023 18 / 31

1 Flexibility is accomplished by providing multiple ways to access

1 The system should be able to

• Prevent errors from occurring whenever possible

• Protect against possible catastrophic errors.

• Provide constructive messages when an error does occur

3 When errors do occur, present clear instructions on how to

OYEBADE A. (BU) CSC 409 November 14, 2023 20 / 31

2 When a person’s perceptual and cognitive systems are

3 In design, provide conditions that foster immersion

• Context where a person can focus without signiﬁcant distraction

• Clearly deﬁned goals

• Immediate feedback about actions and overall performance.

• A feeling of control over actions, activities, and the environment.

OYEBADE A. (BU) CSC 409 November 14, 2023 22 / 31

1 Users should be able to achieve task easily

• Low usage time for every user on the application design

OYEBADE A. (BU) CSC 409 November 14, 2023 23 / 31

1 The design of a control should suggest how it is to be

2 Strong clues to the operation of objects should be presented

3 A user should know the following

4 A system should be understandable, ﬂowing in a

OYEBADE A. (BU) CSC 409 November 14, 2023 24 / 31

1 Operability is achieved by minimizing repetitive actions and

2 Operability also requires that the design be compatible with

OYEBADE A. (BU) CSC 409 November 14, 2023 25 / 31

1 Every user must be able to perceive a design, regardless of

2 Designing for perceptibility involves using redundant coding

3 Its provide compatibility with assistive sensory technologies

OYEBADE A. (BU) CSC 409 November 14, 2023 26 / 31