Principles and Techniques of Design complexity of the underlying system,

Quarter 2 – Lesson 6 focusing on the most important aspects and

interactions.
UI/UX Material Components Design & Principles • It abstracts away technical details to make
of Platforms the system is more understandable to users.
Lesson 6.A EXAMPLES IS DESKTOP: FOLDER ICON
DOCUMENT ICON AND TRASH BIN ICON
>Mental Model – a model
that we develop in our heads
that describe how that object
may work.
- A reasonable mental model can be formed
by just looking at and perhaps holding the
object,Must be taught, or learned by > 2. VISIBILITY, FEEDBACK AND ERROR
trial/error HANDLING
An object that helps you form a • A good conceptual model provides feedback
mental model: tousers about the consequences of their actions.
• Holes for something to be • The model should also help users understand
Inserted example yung sa gunting the Big hole is errors and guide them in recovering from
for several fingers, yung small hole para sa thumb mistakes.
•Mga buttons sa relo pinipihit lang para malaman
yung functions > (trial/error)
Conceptual Models > 3.LEARNABILITY AND CONSISTENCY
- A conceptual model in Human-Computer • The conceptual model should be designed to
Interaction (HCI) is a high-level representation or facilitate easy learning for new users.
abstraction that helps • It should be intuitive and align with users' existing
users understand how a computer system or knowledge and mental models.
application works • Elements and actions within the system
- Essential in HCI because they shouldadhere to a consistent conceptual model to
bridge the gap between the reducecognitive load and make the system
user's mental model and the predictable.
system's actual design and functionality. > 4. USER-CENTERED DESIGN
Projecting Conceptual Models • The development of a conceptual model
• To create a conceptual model, designers use should be based on user research and
information from >user research, such as feedback to ensure that it meets the needs
interviews, surveys, or observations. and expectations of the target audience.
• They then use this information to develop STEPS TO CREATE A CONCEPTUAL MODEL
visual representations of how users perceive and
interact with the system or product. Needed for Conceptual Model:
Visualizing Conceptual Model 1) Tasks
• The representations can take many forms, 2) Objects
including> flowcharts, diagrams, wireframes, or 3) Actions/Attributes to Objects
prototypes.
• The ability to quickly and easily sketch
conceptual models can save significant
amounts of time in UI design and help create
more intuitive applications.
Key Aspects of a Conceptual Model in HCI 1). Identify Tasks
• Identify the tasks that your users need to
> 1. ABSTRACTION & METAPHORS accomplish.
• Use language that is familiar to them and avoid
• A conceptual model simplifies the using technical jargon or unfamiliar concepts.
 • A visual clue to its function and use.
• A flat surface may afford sitting.
• A button might afford pushing.
>Types of Affordances
1. Implicit Affordances
2. Explicit Affordances
• Graphic • Language • Pattern • Animated
2). Identify Objects 3. Negative Affordances
• Identify the physical objects or concepts 4. False Affordances
that are relevant to those tasks.
>Implicit Affordances
• Implicit affordance, in the context of design and
human-computer interaction, refers to design
elements or objects that suggest a particular action
or interaction without explicit visual cues or
instructions.
• Users might intuitively understand how to interact
with an element based on their prior knowledge.
3). Assign Actions and Attributes to Objects (Hindi alam kasi walang clues or visual cues, only
• Once you've identified the objects, assign actions by trial and error lang malalaman through
and attributes to them based on how intuition)
your users will interact with them. >Explicit Affordances
• Explicit affordance refers to the clear and easily
perceivable indications or cues in a design that
suggest how an object or element can be used or
what actions can be performed with it.
• Essential for creating intuitive and user-friendly
designs, as they reduce the cognitive load on users
by making it clear how to interact with an object or
interface element.
(alam kasi meron ng mga clues or cues na
4). Use Consistent Terminology nagsasabi such as Graphics. Languages, Patterns
and Animation)
• To avoid confusion, use consistent terminology - 2.1 Graphic Affordances
throughout your product. (Eto yung mga icons or symbols)
Steps to create Conceptual Model • Graphic affordance refers to the visual cues
For example, if you use the term “Desserts" on one ordesign elements within a user interface that
screen of your mobile app, don't rename it as provide users with clues about how to interact with
“Confectionery" elsewhere. specific
Ex: Buttons
It’s important to remember that. a person’s - 2.2 Language Affordances
mental model is constantly (Eto yung mga text or sulat)
evolving and subject to change. It’s • Refers to the idea that language, both in terms of
influenced by new experiences with written text and spoken communication, can afford
your product, other technologies, and various actions or interactions within a particular
day to day life. context.
If you ignore your customers’ mental Example: Textual Interfaces
Models. users will feel frustrated when using your
product. They’ll struggle to learn and - 2.3 Pattern Affordances
remember how the system works. (eto yung mga familiar patterns)
Ultimately leading to product • Refers to the recognition or understanding of
abandonment. patterns in a design or system that suggest possible
Affordances actions or behaviors to users.
• It relates to the idea that when users encounter
• According to Norman (1988) an affordance is the familiar patterns, they can infer how to interact with
design aspect of an object which or navigate a system without explicit instructions.
suggest how the object should be used; Example: Consistent Layouts
 - 2.4 Animated Affordances
(eto yung gumagalaw na graphics)
• Refers to design elements in user interfaces that
use
motion or animation to provide visual cues or hints
about how a user can interact with them.
Example: Drag-and-Drop, yung hand na gumagalaw
sa vending machine na para pindot or push/click
guide
>Negative Affordances
• Visual cues or characteristics that convey the
message that a particular action is not possible, not
recommended, or may lead to an undesirable
outcome.
• They help prevent users from making unintended
or
harmful interactions.
Example: Disabled Buttons
>False Affordances
• Refers to a design element that appears to suggest
a particular action or behavior to users but does
notactually support that action.
• False affordances can lead to user
confusion,frustration, and errors.
• It's important to avoid or minimize false
affordances in user interface design to ensure clarity
and
usability.
Example: Non-Clickable Text