Prototyping and Usability Evaluation Methods
Prototyping and Usability Evaluation Methods
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
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.
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)
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.
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)
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.
o Example: If a user knows how folders work in real life, they can easily understand
how to use folders on a computer.
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.
o It bridges the gap between users’ mental models and system functionality.
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.
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
Show users what actions are Buttons for Play, Pause, Volume visible on
Visibility
available media app
Mapping Match controls to outcomes Stove knobs placed like burner layout
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.
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.
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.
Summary Table
Match between system and Use familiar language and Trash bin icon for deleting
real world concepts files
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.
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.
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.
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
Conversing System and user talk like a dialogue Using a chatbot or voice command
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:
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.
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.
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?
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.
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.
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.
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.
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.
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.
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.
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
Show users what actions are Buttons for Play, Pause, Volume visible on
Visibility
available media app
Mapping Match controls to outcomes Stove knobs placed like burner layout
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