L1: Principles and Techniques

Visualizing Conceptual Model

of Design for ICT Content • The representations can take many forms,
Development including flowcharts, diagrams, wireframes,
or prototypes.
UI/UX Material Components Design • The ability to quickly and easily sketch
& Principles of Platforms conceptual models can save significant
amounts of time in UI design and help
Mental Model- a model that we develop in create more intuitive applications.
our heads that describe how that object may
work. Key Aspects of a Conceptual Model in HCI
ABSTRACTION & METAPHORS
- A conceptual model simplifies the
complexity of the underlying system,
focusing on the most important
aspects and Interactions. It abstracts
away technical details to make the
system more understandable to
users.

VISIBILITY, FEEDBACK AND ERROR

HANDLING
- A good conceptual model provides
feedback to users about the
Conceptual Models consequences of their actions. It
A conceptual model in Human-Computer makes the system's state and
Interaction (HCI) is a high-level available actions visible and
representation or abstraction that helps understandable.
users understand how a computer system
or application works LEARNABILITY AND CONSISTENCY
- The conceptual model should be
Conceptual Models are essential in HCI designed to facilitate easy learning
because they bridge the gap between the for new users.
user's mental model and the system's actual - It should be intuitive and align with
design and functionality. users' existing knowledge and
mental models.
Projecting Conceptual Models - Elements and actions within the
• To create a conceptual model, designers system should adhere to a
use information from user research, such as consistent conceptual model to
interviews, surveys, or observations. reduce cognitive load and make the
• They then use this information to develop system predictable.
visual representations of how users
perceive
and interact with the system or product.
 ● These visual cues are often based
USER-CENTERED DESIGN on the physical characteristics of
- The development of a conceptual real-world objects or the way users
model should be based on user expect things to behave in a digital
research and feedback to ensure environment.
that it meets the needs and Example: Buttons
expectations of the target audience.
2.2 Language Affordances
Affordances ● Refers to the idea that language,
● According to Norman (1988) an both in terms of written text and
affordance is the design aspect of an spoken communication, can afford
object which suggest how the object various actions or interactions within
should be used; a particular context.
● A visual clue to its function and use. Example: Textual Interfaces

2.3 Pattern Affordances

Types of Affordances ● Refers to the recognition or
1. Implicit Affordances understanding of patterns in a
● Implicit affordance, in the context of design or system that suggest
design and human-computer possible actions or behaviors to
interaction, refers to design users.
elements or objects that suggest a ● It relates to the idea that when users
particular action or interaction encounter familiar patterns, they can
without explicit visual cues or infer how to interact with or navigate
instructions. a system without explicit
Example: hyperlinks, scrolling on touch instructions.
devices Example: Consistent Layouts

2. Explicit Affordances 2.4 Animated Affordances

● Explicit affordance refers to the clear ● Refers to design elements in user
and easily perceivable indications or interfaces that use motion or
cues in a design that suggest how animation to provide visual cues or
an object or element can be used or hints about how a user can interact
what actions can be performed with with them.
it. ● Animations can draw attention,
guide users, and make the
2.1 Graphic Affordances interaction more intuitive and
● Graphic affordance refers to the engaging.
visual cues or design elements Example: Drag-and-Drop
within a user interface that provide
users with clues about how to
interact with specific elements or
objects.
3. Negative Affordances 2. Manipulating
● Visual cues or characteristics that ● Enable user to manipulate the object
convey the message that a particular as people manipulate the real world
action is not possible, not object.
recommended, or may lead to an
undesirable outcome. 3. Exploring
● They help prevent users from ● Enables the user to discover the
making unintended or harmful application environment.
interactions. ● User can explore application from
Example: Disabled Buttons physical or virtual space.

4. False Affordances 4. Conversing

● Refers to a design element that ● The system behaves like a human
appears to suggest a particular partner rather than a machine that
action or behavior to users but does simply obeys user’s orders.
not actually support that action. ● It requires almost no learning of new
● False affordances can lead to user skills
confusion, frustration, and errors.
Example: Non-Clickable Text Types of Interface
1. CLI – Command Line Interface
L2: Interaction Types ● Users communicate with the
Interaction Design (IxD) computer by typing text-based
● Interaction design (IxD) is a critical commands into a terminal or
component of Human-Computer command prompt.
Interaction (HCI) that focuses on ● CLI is commonly used in software
creating meaningful and effective development, system administration,
interactions between users and and scripting.
digital systems or products.
2. GUI – Graphical User Interface
Interaction Types ● GUI interactions involve using
- various ways in which users can graphical elements such as icons,
interact with digital systems, buttons, menus, and windows to
devices, or interfaces. interact with a computer system.
● Users typically use a mouse and
1. Instructing touchscreens to manipulate these
● Instructing involves users providing elements.
explicit commands, requests, or ● GUIs are common in desktop and
directives to a computer system or mobile applications.
application, and the system
responds accordingly. 3. NUI – Natural User Interface
● NUI interactions aim to create more
intuitive and natural ways for users
to interact with computers, such as
 touch, gesture, voice, and facial
recognition.
● These interactions mimic real-world
actions.

Natural Mappings
● Refers to a design in which the
system’s controls represent or
correspond to the desired outcome
● When controls map to the actions
that will result, systems are faster to
learn and easier to remember.
● Designers can create natural
mappings in several ways, including
the three common patterns below:
a. Spatial Similarity
b. Conceptual or metaphorical
similarity
c. Behavioral similarity

4. VR/AR – Virtual and Augmented

Reality
● These environments offer immersive
and spatial interactions where users
can manipulate virtual objects and
interact with augmented content
overlaid on the real world.

BCI – Brain-Controlled Interface

● BCI interactions enable users to
control a computer or device using
their brain signals.
● While still in experimental stages,
BCIs hold promise for applications in
healthcare and assistive technology.