0% found this document useful (0 votes)
21 views23 pages

Prototyping and Usability Evaluation Methods

The document compares low-fidelity and high-fidelity prototypes, highlighting their definitions, materials used, purposes, costs, user perceptions, and advantages and disadvantages. It also discusses heuristic evaluation and pluralistic walkthrough as usability testing methods, detailing their processes, advantages, and limitations. Additionally, it covers interface metaphors and Don Norman's seven principles of design to create user-friendly interfaces.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
21 views23 pages

Prototyping and Usability Evaluation Methods

The document compares low-fidelity and high-fidelity prototypes, highlighting their definitions, materials used, purposes, costs, user perceptions, and advantages and disadvantages. It also discusses heuristic evaluation and pluralistic walkthrough as usability testing methods, detailing their processes, advantages, and limitations. Additionally, it covers interface metaphors and Don Norman's seven principles of design to create user-friendly interfaces.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Aspect Low-Fidelity Prototype High-Fidelity Prototype

Definition A simplified version of the product A more detailed, functional, and


using basic materials like paper or interactive simulation that closely
cardboard. It is not interactive or has resembles the final product in
limited interactivity. look and feel.

Materials Used Paper, cardboard, sketches, Real software tools like


storyboards, wireframes, index cards Macromedia Director, Visual
Basic, Smalltalk, or the actual
target environment

Purpose To quickly visualize ideas, gather To simulate the real system for
feedback early, and explore concepts detailed user testing, design
cheaply and rapidly validation, and system behavior
demonstration

Cost & Time Very cheap and quick to make and More costly and time-consuming
modify to build due to higher level of
detail

User Perception Users clearly understand it's a rough Users may mistakenly think it's
draft or early concept the final system due to its
polished appearance

Level of Detail Low fidelity: basic layout and concept High fidelity: includes real UI
(Fidelity) representation only elements, animations, partial
system logic

Use Case Used early in design to test ideas, Used later in development to test
layout, and flow functionality, usability, and design
consistency

Examples from - Sketches of screens - Interactive software demos


PDF - Storyboards - PowerPoint walkthroughs
- Index cards - Simulated UI with limited
- Wireframes backend functionality
- Cardboard mockups

Advantages - Quick feedback loop - Realistic simulation


- Easy to revise - Good for user interaction testing
- Helps identify complex issues
- Encourages creativity and
exploration

Disadvantages - Lacks interactivity - Time-consuming


- Might not capture real user - Expensive to develop
behavior - Risk of misleading stakeholders
- Not suitable for testing advanced
logic

Compromises Often uses horizontal prototypes Often uses vertical prototypes


Involved (broad features, shallow detail) (deep features, limited scope);
may still be limited in scope or
performance

1. HEURISTIC EVALUATION

Heuristic evaluation is one of the most commonly used expert-based methods in usability
testing. It involves a group of usability experts who evaluate an interface against a set of
predefined usability principles, also known as “heuristics.” The method is quick, cost-effective,
and highly beneficial for identifying usability problems in early design phases.

1⃣ Definition and Origin


Heuristic evaluation is a usability inspection technique developed by Jakob Nielsen. It is
designed to identify usability flaws in a user interface by comparing it against a set of usability
principles, such as Nielsen’s 10 heuristics (e.g., visibility of system status, error prevention,
flexibility). These heuristics act as guidelines to ensure the interface is user-centered, consistent,
and intuitive. The process does not involve real users, but instead relies on experts who think
like users while analyzing the system.

2️⃣ Role of Evaluators


Typically, 3–5 usability experts individually review the interface without consulting each other
initially. Each evaluator goes through the interface multiple times and identifies usability
problems based on the heuristics. After the individual evaluations are done, the findings are
aggregated and analyzed to discover recurring issues and prioritize them. This method ensures
both breadth and depth of evaluation, as different evaluators may uncover different issues.
3⃣ Process of Heuristic Evaluation
The evaluation process begins with a briefing where evaluators are introduced to the system
and the heuristics. Then, each expert independently explores the interface and notes any
usability violations. The violations are categorized based on severity (minor, major, critical).
After the review, the evaluators may come together for a debriefing session to consolidate their
findings and generate a comprehensive usability report. This report helps developers address
the most critical design flaws efficiently.

4️⃣ Usability Heuristics Used


Evaluators refer to well-established heuristics such as Nielsen’s 10 usability heuristics. These
include visibility of system status, match between system and the real world, user control and
freedom, consistency and standards, and error prevention, among others. Each heuristic acts
like a checklist to evaluate the effectiveness of the interface. For instance, if an error message
uses technical language, it violates the heuristic of “help users recognize, diagnose, and recover
from errors.”

5⃣ Advantages
Heuristic evaluation is quick, requires fewer resources, and can uncover a wide range of
usability issues before expensive development is done. It’s particularly effective in early design
stages and is often used before user testing. Since it doesn’t involve real users, it can be
conducted anytime and repeated frequently during design iterations.

6️⃣ Limitations
The method relies heavily on the experience of the evaluators. If the evaluators lack domain
knowledge or are inexperienced, they might overlook significant usability issues. Also, heuristic
evaluation might not uncover problems real users would face, since experts and users think
differently. Hence, it is often complemented with user testing.

Reference: UID CHP 5 (1)_merged.pdf – Pages 7–9, 14️–17 (Section: Heuristics of Nielsen,
Evaluation Techniques)

2️. PLURALISTIC WALKTHROUGH

Pluralistic Walkthrough is a collaborative usability evaluation technique that includes multiple


stakeholders — not just usability experts, but also designers, developers, and actual end users.
This method focuses on understanding usability issues through group discussion and collective
problem-solving.
1⃣ Definition and Purpose
A pluralistic walkthrough is a structured process in which users, designers, developers, and
usability experts participate in a guided step-by-step walkthrough of a user task. Unlike heuristic
evaluation, this method involves real users, making it more grounded in actual usage scenarios.
The primary goal is to identify usability issues collaboratively and understand different
perspectives on how users interact with the interface.

2️⃣ How It Works


A task scenario is selected based on a typical use case (e.g., “log in to your account and
purchase a product”). The group sits together and each member is given paper-based or screen-
based screenshots of the UI. Every participant individually reviews each screen, writes down
their thoughts about usability issues, and what they would expect to happen. Afterward,
everyone discusses their findings collectively. This format helps identify discrepancies in mental
models between users and developers.

3⃣ Stakeholder Involvement
This method stands out because it includes a wide range of participants. Designers can explain
design rationale, developers can discuss technical constraints, usability experts contribute with
best practices, and users share their expectations and frustrations. This diversity enriches the
feedback, often leading to discoveries that may not surface in expert-only evaluations.

4️⃣ Evaluation Focus


Pluralistic walkthroughs emphasize learnability and first-time user experiences. The technique is
especially useful in early design stages where paper prototypes, sketches, or wireframes are
available. Participants focus on whether users can intuitively figure out what to do at each step
and whether the system provides the right cues or guidance.

5⃣ Advantages
One of the biggest strengths of pluralistic walkthroughs is that they blend qualitative insights
with collaborative critique. They highlight gaps between user expectations and system behavior.
It also fosters team empathy — developers and designers get to see firsthand how users
perceive their product. Additionally, it is more engaging and democratic, as all voices are heard
equally.

6️⃣ Limitations
The process can be time-consuming and logistically challenging, especially if the product is
complex or if there are many participants. It also requires good facilitation to manage
discussions effectively and avoid groupthink. Moreover, it’s not scalable for large systems unless
broken into sub-tasks.
Reference: UID CHP 5 (1)_merged.pdf – Pages 9–13, 18–2️3 (Section: Evaluation Techniques,
Collaborative Walkthroughs)

Interface Metaphor (Easy-to-Understand Explanation)

Definition:
An interface metaphor is a way of designing computer interfaces using familiar ideas from the
real world so that users can easily understand how to interact with the system.

In simple words, it’s when a digital thing looks or acts like something users already know from
their everyday life.

Key Points to Remember:

1. Purpose of Interface Metaphors

o They help users quickly understand how to use a system by relating it to


something they already know.

o Example: If a user knows how folders work in real life, they can easily understand
how to use folders on a computer.

2️. Makes Learning Easier

o Instead of teaching users everything from scratch, metaphors allow them to use
their existing knowledge.

o This reduces the learning time and improves the overall user experience.

3. Combines Old Knowledge with New Ideas

o A metaphor connects familiar concepts with new digital features.

o It bridges the gap between users’ mental models and system functionality.

4️. Examples of Interface Metaphors

o File and Folder System: Just like we organize papers into folders, computers use
files and folders to organize documents.
o Trash Bin or Recycle Bin: Used for deleting files, like a physical trash can.

o Tree View in File Managers: Represents folders and subfolders in a branch-like


structure, like a family tree.

5. Steps to Create Good Metaphors

o Understand what the system is supposed to do (functionality).

o Identify areas where users may face problems.

o Generate metaphors that make the system feel familiar.

6️. Questions to Evaluate a Metaphor


Ask these while designing:

o Does the metaphor make sense to users?

o Is it easy to understand and represent?

o Will it be clear to your audience?

o Can it grow if more features are added? (Is it extensible?)

Don Norman, a pioneer in human-centered design, introduced seven fundamental principles to


guide the creation of usable interfaces. These principles focus on how users perceive and
interact with a system, aiming to make products intuitive, efficient, and error-resistant.

Let’s explore each principle in detail:

1. Visibility
Visibility refers to making important elements and available functions clearly visible to
the user. Users should be able to see what actions are possible without having to guess.
If users cannot see a feature, they are likely to assume it doesn’t exist.

Example: A music player should display play, pause, next, and volume buttons clearly. If the
pause button is hidden inside a menu, the user may get confused or assume the option doesn’t
exist.

Design Tip: Show controls when they are needed and make the most important actions
immediately accessible.

2️. Feedback
Feedback is about keeping users informed about what is going on. Every user action
should result in an immediate and informative response from the system. Feedback
reassures users that their input was received and processed.

Example: When uploading a file, a progress bar shows how much has been uploaded. This
visual feedback prevents the user from wondering if the upload is working.

Design Tip: Use sound, animation, visual cues, or messages to show results of actions (e.g.,
“Saved successfully” or “Error occurred”).

3. Affordance
Affordance refers to the perceived properties of an object that suggest how it should be
used. A well-designed element should naturally indicate how users can interact with it.

Example: A raised button suggests that it can be clicked. A slider with a handle implies
dragging left or right.

Design Tip: Design elements (buttons, sliders, links) so their shape and style clearly show
how they are supposed to be used.

4️. Mapping
Mapping is about the relationship between controls and their effects in the real world or
in the interface. A good design should ensure that the controls follow a logical layout so
users can intuitively predict what each control does.

Example: On a stove, the arrangement of knobs should match the burner positions. On-
screen, scrollbars should move in the direction of finger or mouse movement.

Design Tip: Arrange buttons, icons, and options so their placement reflects their function or
position.

5. Constraints
Constraints are design elements that limit possible actions and guide the user to prevent
errors. These can be physical (shape), cultural (symbols), or logical (disable certain
buttons until action is completed).
Example: A form’s “Submit” button is disabled until all required fields are filled. A USB cable
only fits one way.

Design Tip: Design the interface so that users can only do what is allowed, and prevent
invalid actions before they happen.

6️. Consistency
Consistency means that similar operations and elements should look and behave
similarly across the interface. Consistent layouts, colors, icons, and terminology reduce
the user's learning curve and cognitive load.

Example: If “OK” buttons are green and on the right throughout the app, keep them that
way on every screen.

Design Tip: Follow platform standards and maintain internal consistency in terms of layout,
labels, and behavior.

7. Conceptual Model
A conceptual model is the mental model that users form about how a system works. A
well-designed interface helps users develop a correct and useful understanding of the
system.

Example: The desktop metaphor helps users understand file management. Icons like “trash
bin” or “folder” represent real-world objects, which helps in understanding their purpose.

Design Tip: Build an interface that mirrors real-world experiences or logical patterns so users
can quickly understand how the system works.

Summary Table

Principle Key Idea Example

Show users what actions are Buttons for Play, Pause, Volume visible on
Visibility
available media app

Let users know what just


Feedback Progress bar during upload
happened
Principle Key Idea Example

Show how elements are meant to


Affordance Raised buttons suggest clicking
be used

Mapping Match controls to outcomes Stove knobs placed like burner layout

Grayed-out “Submit” button until fields


Constraints Prevent wrong actions
filled

Consistency Keep layout and behavior uniform Same button placement on every screen

Conceptual
Help users understand the system Folder and Trash icons on desktop
Model

Certainly! Below is a detailed explanation of Nielsen and Molich’s 10 User Interface Design
Heuristics (also called design rules). These principles, developed by Jakob Nielsen and Rolf
Molich, serve as a foundation for evaluating and designing user-friendly interfaces.

What Are They?

These are general rules of thumb for good UI design. They help identify common usability issues
in software, websites, and applications, even before testing with users.

Let’s look at each heuristic:

1⃣ Visibility of System Status


Brief: The system should always keep users informed about what is going on.
Detailed: Users need timely and appropriate feedback after every action. For example,
showing a progress bar during file uploads, or a confirmation message after submitting a form
reassures users that the system is responding.

2️⃣ Match Between System and the Real World


Brief: The interface should use familiar language, icons, and conventions.
Detailed: Use terms and concepts that users understand from real life. For instance, a trash
bin icon for deleting files is intuitive because it mirrors real-world behavior. Avoid technical
jargon like “HTTP error 4️03”; say “Access Denied” instead.
3⃣ User Control and Freedom
Brief: Users should be able to undo actions and navigate freely.
Detailed: Users often choose actions by mistake. Providing an easy "undo," "cancel," or
"back" option gives users a sense of control. For example, Gmail’s “Undo Send” option allows
you to stop an email after clicking “Send.”

4️⃣ Consistency and Standards


Brief: Follow platform conventions so users don’t have to guess.
Detailed: Users expect consistent language, layouts, icons, and behavior. For example, a gear
icon typically represents settings. Don’t use it for something else, as it breaks user expectations.

5⃣ Error Prevention
Brief: Prevent problems before they occur.
Detailed: It’s better to prevent errors than to show error messages later. For instance,
disable the “Submit” button until all required fields are filled, or use auto-correct suggestions to
reduce input errors.

6️⃣ Recognition Rather Than Recall


Brief: Make options and instructions visible to reduce memory load.
Detailed: Users shouldn’t have to remember steps from one screen to another. For example,
dropdown menus or auto-fill suggestions help users choose instead of forcing them to recall
data.

7⃣ Flexibility and Efficiency of Use


Brief: Allow both novice and expert users to operate efficiently.
Detailed: Provide shortcuts or customization options for advanced users while keeping the
interface simple for beginners. For instance, Photoshop offers both menu commands and
keyboard shortcuts for experienced users.

8⃣ Aesthetic and Minimalist Design


Brief: Keep the interface clean and free of unnecessary elements.
Detailed: Every extra piece of information competes for the user's attention. Use only
essential elements to keep screens focused. Google’s homepage is a great example — clean and
purpose-driven.

9⃣ Help Users Recognize, Diagnose, and Recover from Errors


Brief: Show clear, understandable error messages.
Detailed: Error messages should be written in plain language, clearly state the problem, and
suggest a solution. For example, “Your password must contain at least 8 characters” is more
helpful than “Invalid input.”

Help and Documentation


Brief: Offer help and instructions when needed.
Detailed: Even though systems should be intuitive, users sometimes need guidance. Provide
searchable help, FAQs, or tooltips to assist them. For example, software like MS Word includes
helpful tooltips for each menu item.

Summary Table

Heuristic Brief Meaning Example

Progress bar during file


Visibility of system status Keep users informed
upload

Match between system and Use familiar language and Trash bin icon for deleting
real world concepts files

Allow undo, back, and cancel


User control and freedom Undo button in Gmail
options

Follow common platform Gear icon for settings across


Consistency and standards
conventions all apps

Prevent errors instead of only Disable “Next” button if fields


Error prevention
showing messages are incomplete

Show options to reduce


Recognition rather than recall Auto-suggestions in search
memory load

Provide shortcuts for advanced


Flexibility and efficiency of use Keyboard shortcuts in Excel
users

Aesthetic and minimalist


Keep it clean and focused Google homepage
design

Help users recognize and Use helpful, plain-language “Password must be at least 8
recover from errors error messages characters”

Help and documentation Provide guidance when needed Tooltips, help menus, FAQs
Here is a brief and clear explanation of Shneiderman’s 8 Golden Rules of Interface Design,
written in a paragraph format for easy memorization and exam use. These rules are
fundamental principles proposed by Ben Shneiderman to improve the usability and user
experience of interfaces.

Shneiderman’s 8 Golden Rules of Interface Design

1. Strive for Consistency


Consistency across the interface is key. Use the same design patterns, colors,
terminology, and layout throughout the system. This allows users to predict what will
happen and learn faster. For example, if one page uses a blue button to “Submit,” other
pages should use the same color and style for the same action.

2️. Enable Frequent Users to Use Shortcuts


Expert users often prefer to work faster. Interfaces should support this by providing
keyboard shortcuts, abbreviations, or customizable features that reduce the number of
steps for experienced users. For instance, pressing Ctrl+C for copy is a common shortcut
that speeds up work.

3. Offer Informative Feedback


Every user action should result in some feedback from the system. The response can be
simple for minor actions (like a click animation) or more detailed for major processes
(like showing a progress bar during file uploads). This reassures users that the system is
working and responding.

4️. Design Dialogues to Yield Closure


User interactions should have a clear beginning, middle, and end. The interface should
make it obvious when a task is completed successfully by providing confirmation
messages. For example, showing “Your payment was successful” after completing a
transaction gives users confidence that their action worked.

5. Offer Error Prevention and Simple Error Handling


The design should prevent users from making errors in the first place by using smart
defaults, confirmations, and constraints. But when errors do happen, the system should
guide users with clear and constructive messages on how to fix them. For instance, if a
form field is left empty, highlight it and say “This field cannot be empty.”

6️. Permit Easy Reversal of Actions


Users should be allowed to undo or redo actions to recover from mistakes easily. This
increases user confidence and reduces hesitation. Examples include an “Undo” option in
word processors or a “Back” button during form submissions.

7. Support Internal Locus of Control


The system should let users feel in control of their actions, not forced or limited by the
interface. They should be able to initiate tasks rather than only responding to system
prompts. A good example is allowing users to “Force Quit” a non-responsive application
instead of waiting indefinitely.

8. Reduce Short-Term Memory Load


Interfaces should avoid forcing users to remember too much at once. Instead, keep
relevant information visible and accessible. Use dropdowns, tooltips, and icons to guide
users, especially in complex tasks. For instance, limiting app icons on a phone screen to
4️–5 items helps avoid cognitive overload.

ISO/IEC Standards in UI/UX Design (Paragraph Format Explanation)

In the world of user interface (UI) and user experience (UX) design, ISO/IEC standards play a
vital role in ensuring quality, usability, and consistency across software systems. These standards
are developed by international organizations like ISO (International Organization for
Standardization) and IEC (International Electrotechnical Commission), and they act as global
guidelines for designing user-friendly digital products. Below are some of the most important
ISO/IEC standards that directly influence UI/UX practices:

The most widely recognized standard is ISO/IEC 2️5010:2️011, which defines the overall quality of
a software product. This standard breaks quality into eight key attributes: functional suitability,
performance efficiency, compatibility, usability, reliability, security, maintainability, and
portability. For UI/UX design, the usability aspect is particularly important, as it includes sub-
factors like operability, user error protection, learnability, and accessibility. This helps designers
focus on building interfaces that are easy to use and accessible to everyone, including people
with disabilities.

To support this quality model, ISO/IEC 2️502️3:2️016️ provides a way to measure and evaluate
these quality characteristics. This standard offers specific metrics, such as task completion rate,
error frequency, and time taken to complete a task. In UI design, this helps in collecting real
usability data during user testing, ensuring that the interface truly meets user expectations.

When it comes to visual elements like icons, ISO/IEC 11581-1:2️000 and ISO/IEC 11581-2️:2️000
provide guidance. These standards define how icons should be designed, labeled, and used in
user interfaces. They ensure that icons are consistent, easy to recognize, and universally
understandable. For example, icons for ‘save,’ ‘delete,’ or ‘settings’ must clearly represent their
functions to avoid confusion. This is especially important in cross-cultural designs where a
symbol might have different meanings in different regions.

Documentation is another key element in user experience, and ISO/IEC 2️6️512️:2️011 provides
detailed guidelines for creating software user documentation. It outlines how help files,
manuals, and instructional content should be written and presented. The goal is to ensure that
users can easily find help when they are stuck, and that instructions are clear, concise, and well-
organized.

In today’s connected world, devices are often operated remotely or through assistive
technologies. ISO/IEC 2️4️752️-1:2️014️ addresses this by defining a framework for universal
remote interfaces. It enables users to control devices (like smart TVs or thermostats) using
alternative methods such as voice commands, screen readers, or touch interfaces. It promotes
accessibility by making interfaces usable by people with different abilities.

Following this, ISO/IEC 2️4️752️-2️:2️014️ goes a step further by specifying how these remote
interfaces should be technically implemented. It defines the concept of a "user interface
socket," which acts as a bridge between the device and the remote interface, ensuring smooth
interaction regardless of the input method.

In short, ISO/IEC standards in UI/UX design help designers build digital products that are easy to
use, visually consistent, and accessible to all types of users. These standards guide the design of
interfaces, icons, help documentation, and even remote access tools. Adhering to them ensures
global usability, user satisfaction, and system quality, which are the core goals of good UX
design.

Tip for Memory:


You can remember it with a simple categorization:

• ISO/IEC 2️5010 → Quality Model

• ISO/IEC 2️502️3 → How to Measure Quality

• ISO/IEC 11581 → Icon Design Standards

• ISO/IEC 2️6️512️ → Help & Documentation

• ISO/IEC 2️4️752️ → Universal Remote Interfaces

What is Interaction in UI/UX?

Interaction refers to how a user communicates or engages with a system (like a website, app, or
software). It includes the actions users perform (like clicking, typing, swiping) and how the
system responds to those actions. The goal of interaction design is to make this process smooth,
efficient, and user-friendly.

Types of Interaction (as per UID Chapter 4️)

1. Instructing
This is the most basic form of interaction where users issue commands to the system to perform
a task.
Example: Typing a command in the terminal or clicking a “Save” button.

2️. Conversing
Here, the interaction happens in a question–answer style like a conversation.
Example: Chatbots or virtual assistants like Siri or Google Assistant.

3. Manipulating
Users interact with objects directly by dragging, dropping, resizing, or rotating.
Example: Dragging files to a folder, zooming an image with two fingers.

4️. Exploring
This involves navigating through an interface, discovering features or information.
Example: Browsing a shopping app, using a GPS map to find a location.


Summary Table

Type Description Example

Instructing Giving commands or inputs Clicking "Print"

Conversing System and user talk like a dialogue Using a chatbot or voice command

Manipulating Directly interacting with objects Dragging, zooming, resizing

Exploring Moving through UI to find things Browsing a site or app

An interface metaphor is a design technique where familiar real-world concepts are used to
help users understand digital systems. For example, the “recycle bin” on a desktop computer
uses the metaphor of a trash can to represent deleting files. It leverages what users already
know to make interactions more intuitive.

Now, when designing or choosing a metaphor, we need to evaluate it using five specific criteria:

1. How much structure does it provide?

This means: To what extent does the metaphor offer a logical, organized framework that helps
guide the user in understanding how the system works?

⏺ Why it matters: A good metaphor doesn’t just describe a single feature; it should help users
mentally model how the entire system is organized. The more structure it provides, the easier it
is for users to predict what will happen next.

Example: The “desktop” metaphor provides a strong structure — you have files
(documents), folders (directories), and trash (recycle bin). It maps clearly to an office
environment and helps users relate to how data is managed.

Poor metaphor: Using a “cloud” without defining its structure — users may not know what is
stored, where, or how to access it.

2️. How much is relevant to the problem?

This asks: Does the metaphor align closely with the task the user is trying to perform?
⏺ Why it matters: Relevance means that the metaphor actually helps solve or explain the
problem at hand. An unrelated or confusing metaphor may distract users instead of helping
them.

Example: A shopping cart metaphor is highly relevant in e-commerce platforms because it


directly relates to the action of adding items for later purchase.

Bad example: Using a “tree” metaphor to explain a music playlist app might not make sense
— it's not clear how songs relate as branches or leaves.

3. Is it easy to represent?

This question asks: Can you visually or functionally implement the metaphor in a way that is
simple and understandable?

⏺ Why it matters: If a metaphor is too complex to draw, animate, or explain through UI


elements, it will confuse users instead of guiding them. Simplicity in visual or interactive
representation is key.

Example: Folders and icons are easy to represent — they have clear shapes and functions. A
folder icon looks like a real file folder, and its function is intuitive.

Bad example: A metaphor like “galaxy” for project management may be abstract and difficult
to represent with concrete buttons and menus.

4️. Will the audience understand it?

This evaluates: Is the metaphor culturally, socially, and technologically familiar to your users?

⏺ Why it matters: A metaphor is only useful if your users recognize it. If it's culturally specific or
outdated, it may fail. Designers must consider the user's age, background, education, and digital
experience.

Example: A “book” metaphor for an e-book reader works well because almost everyone
understands how books are structured — covers, pages, bookmarks, etc.

Caveat: A “floppy disk” for the save icon is becoming outdated for younger users who have
never used one. It may be time to rethink that metaphor.


5. How extensible is it?

This final question explores: Can the metaphor adapt and grow as new features are added?

⏺ Why it matters: Good metaphors are scalable. If your system evolves (e.g., new tools,
workflows), the metaphor should still apply. If it’s too narrow, you’ll need to invent a new
metaphor later, which causes confusion.

Example: The “desktop” metaphor is extensible — you can add sticky notes, clocks, printers,
or shared folders without breaking the user’s mental model.

Poor metaphor: A “toolbox” may work for simple tools, but if the app expands into social
collaboration or AI-driven functions, it may no longer make sense.

DECIDE Framework – A Structured Approach to UI/UX Evaluation

In user interface (UI) and user experience (UX) design, evaluating a product is as crucial as
designing it. A good evaluation ensures that the interface meets user needs, works efficiently,
and provides a satisfying experience. To perform such evaluations in a systematic and thoughtful
manner, the DECIDE framework is often used. Introduced in the field of Human-Computer
Interaction (HCI), DECIDE is an acronym that outlines six key steps for planning and conducting
usability evaluations. It provides a structured guideline for designers, developers, and
researchers to assess digital systems and make data-driven improvements.

D – Determine the goals the evaluation addresses

The first step in the DECIDE framework is to clearly define the goals of the evaluation. This
means asking: Why are we conducting this evaluation? What do we want to learn or improve?
Goals may vary depending on the stage of the design. For instance, during the early phase of
development, the goal might be to identify usability issues in a prototype. Later in the process,
the goal may shift to comparing the efficiency of two interface designs or understanding how
users feel about a new feature. Without setting clear and specific goals, the evaluation can lose
direction, and the results may be vague or unhelpful. Setting well-defined goals helps focus the
rest of the evaluation process and ensures that the right methods and questions are used.


E – Explore the specific questions to be answered

Once the goals are established, the next step is to break them down into specific research
questions. These questions guide what kind of data should be collected during the evaluation.
They help evaluators stay focused and ensure the findings are actionable. For example, if the
goal is to test the ease of use of a new checkout page, some related questions could be: “Are
users able to complete a purchase without errors?”, “How long does it take for users to finish
the checkout process?”, or “Do users understand the payment options clearly?” These questions
not only clarify the objective but also help in choosing appropriate tools and metrics for data
collection later on.

C – Choose the evaluation paradigm and techniques to answer the questions

After the goals and questions are set, the next step is to choose the appropriate evaluation
paradigm and methods. An evaluation paradigm refers to the overall approach to how the
evaluation will be conducted. There are typically three types of evaluation paradigms: user
testing (empirical), inspection methods (expert-based), and analytical or model-based
approaches. Within each paradigm, several techniques may be applied. For example, under user
testing, one may use think-aloud protocols, observation, or A/B testing. Under inspection
methods, heuristic evaluation or cognitive walkthroughs might be used. The choice of
techniques depends on factors such as time, budget, team expertise, and the type of data
needed—whether qualitative or quantitative.

I – Identify the practical issues

Evaluation doesn't happen in a vacuum—it involves real people, tools, and time. That’s why it’s
critical to identify practical issues that might affect the success of the evaluation. These include
logistical aspects such as recruiting the right participants, setting up the environment (lab or
remote testing), preparing test materials like scenarios and tasks, choosing suitable recording
tools, and deciding how long the sessions should last. It also involves considering budget
constraints and the availability of skilled personnel. If practical issues are ignored or
underestimated, the quality of the evaluation may suffer, and the collected data could become
invalid or incomplete.

D – Decide how to deal with the ethical issues


Ethical considerations are vital in any user research. At this stage, the evaluator must make sure
that participants are treated with respect and their rights are protected. This includes obtaining
informed consent, explaining the purpose of the study, ensuring data privacy and
confidentiality, and allowing participants to withdraw at any point without consequences.
Ethical evaluation also involves being honest about how the data will be used and stored.
Particularly in usability studies that involve observation or tracking user behavior, transparency
and user trust are essential. Institutions often have review boards or ethical committees that
must approve such studies, especially in academic or medical environments.

E – Evaluate, interpret, and present the data

The final step in the DECIDE framework is to analyze the collected data, interpret the results,
and communicate the findings effectively. This involves sorting through both qualitative data
(such as user feedback, video recordings, observation notes) and quantitative data (such as task
completion time, error rates, and satisfaction scores). Once the data is evaluated, conclusions
are drawn in relation to the original goals and questions. The findings should then be presented
in a clear and meaningful way, often through reports, visualizations, or presentations. It’s also
important to make practical recommendations for improving the interface based on these
insights. A well-executed evaluation ends not with just data, but with actionable improvements
and a deeper understanding of user needs.

Conclusion

The DECIDE framework offers a comprehensive and structured approach to evaluating user
interfaces and user experiences. By guiding evaluators through the steps of determining goals,
asking the right questions, choosing appropriate methods, considering logistics and ethics, and
finally analyzing the data, DECIDE ensures that evaluations are meaningful, ethical, and results-
driven. It turns a complex, multi-step process into a logical and manageable workflow. For UI/UX
designers, following this framework can lead to better product decisions, more satisfied users,
and overall design success.

Norman’s 7 Design Principles — Explained in Detail

Don Norman, a pioneer in human-centered design, introduced seven fundamental principles to


guide the creation of usable interfaces. These principles focus on how users perceive and
interact with a system, aiming to make products intuitive, efficient, and error-resistant.
Let’s explore each principle in detail:

1. Visibility
Visibility refers to making important elements and available functions clearly visible to
the user. Users should be able to see what actions are possible without having to guess.
If users cannot see a feature, they are likely to assume it doesn’t exist.

Example: A music player should display play, pause, next, and volume buttons clearly. If the
pause button is hidden inside a menu, the user may get confused or assume the option doesn’t
exist.

Design Tip: Show controls when they are needed and make the most important actions
immediately accessible.

2️. Feedback
Feedback is about keeping users informed about what is going on. Every user action
should result in an immediate and informative response from the system. Feedback
reassures users that their input was received and processed.

Example: When uploading a file, a progress bar shows how much has been uploaded. This
visual feedback prevents the user from wondering if the upload is working.

Design Tip: Use sound, animation, visual cues, or messages to show results of actions (e.g.,
“Saved successfully” or “Error occurred”).

3. Affordance
Affordance refers to the perceived properties of an object that suggest how it should be
used. A well-designed element should naturally indicate how users can interact with it.

Example: A raised button suggests that it can be clicked. A slider with a handle implies
dragging left or right.

Design Tip: Design elements (buttons, sliders, links) so their shape and style clearly show
how they are supposed to be used.

4️. Mapping
Mapping is about the relationship between controls and their effects in the real world or
in the interface. A good design should ensure that the controls follow a logical layout so
users can intuitively predict what each control does.

Example: On a stove, the arrangement of knobs should match the burner positions. On-
screen, scrollbars should move in the direction of finger or mouse movement.

Design Tip: Arrange buttons, icons, and options so their placement reflects their function or
position.

5. Constraints
Constraints are design elements that limit possible actions and guide the user to prevent
errors. These can be physical (shape), cultural (symbols), or logical (disable certain
buttons until action is completed).

Example: A form’s “Submit” button is disabled until all required fields are filled. A USB cable
only fits one way.

Design Tip: Design the interface so that users can only do what is allowed, and prevent
invalid actions before they happen.

6️. Consistency
Consistency means that similar operations and elements should look and behave
similarly across the interface. Consistent layouts, colors, icons, and terminology reduce
the user's learning curve and cognitive load.

Example: If “OK” buttons are green and on the right throughout the app, keep them that
way on every screen.

Design Tip: Follow platform standards and maintain internal consistency in terms of layout,
labels, and behavior.

7. Conceptual Model
A conceptual model is the mental model that users form about how a system works. A
well-designed interface helps users develop a correct and useful understanding of the
system.

Example: The desktop metaphor helps users understand file management. Icons like “trash
bin” or “folder” represent real-world objects, which helps in understanding their purpose.
Design Tip: Build an interface that mirrors real-world experiences or logical patterns so users
can quickly understand how the system works.

Summary Table

Principle Key Idea Example

Show users what actions are Buttons for Play, Pause, Volume visible on
Visibility
available media app

Let users know what just


Feedback Progress bar during upload
happened

Show how elements are meant to


Affordance Raised buttons suggest clicking
be used

Mapping Match controls to outcomes Stove knobs placed like burner layout

Grayed-out “Submit” button until fields


Constraints Prevent wrong actions
filled

Consistency Keep layout and behavior uniform Same button placement on every screen

Conceptual
Help users understand the system Folder and Trash icons on desktop
Model

You might also like