What is Heuristic Evaluation?

Heuristic evaluation is a way to check if a user interface (like an app or website) is easy to use. It helps
find problems with the design so they can be fixed.

Nielsen's Ten Heuristic Principles:

Visibility of system status:
The system should always show users what's happening, like loading or completing an action.
Example: Imagine you're downloading a file. A progress bar shows how much of the download is done.
This helps you know it's working.

Match between system and real world:

Use language and concepts that users understand, not technical terms. Make things appear in a logical
order.

Example: Instead of saying "Submit Form," a button could say "Send" because it's what people
understand better.

User control and freedom:

Users should be able to easily undo actions they didn't mean to do. Provide clear ways to exit actions or
dialogs.

Example: Like when you write a message but change your mind. You can easily delete it without any
trouble.

Consistency and standards:

Use the same words and actions consistently. Follow common design patterns.

Example: Think about how all the buttons in a website look the same. It's easier for you to know what to
do because they're consistent.

Error prevention:
Try to stop errors before they happen. If an action might cause a problem, ask the user to confirm first.

Example: Before you delete something important, the app asks, "Are you sure?" This stops you from
making a mistake.

Recognition rather than Recall:

Make things visible so users don't have to remember a lot. Provide help when needed, instead of making
users memorize instructions.
Example: Instead of making you remember your password, the app lets you use your fingerprint to log
in.

Flexibility and efficiency of use:

The system should be flexible to cater to both new and experienced users. Experienced users should have
shortcuts to speed up their interaction. Users should be able to customize frequent actions.

Example: if you're good with computers, you can use shortcuts to do things faster.

Aesthetic and minimalist design:

Keep dialogues clean and simple. Don't include unnecessary information. Too much information can
distract from important details.

Example: A website with only the important information and not a lot of flashy things is easier to
understand.

Help, diagnosis, and recovery from errors:

Error messages should be easy to understand and suggest a solution. They shouldn't use complicated
codes. The system should help users understand and recover from errors.

Example: If you try to log in with the wrong password, the app says, "Try again" instead of showing a
bunch of error codes.

Documentation and Help:

While it's best if the system is easy to use without instructions, sometimes help is needed. Any help
should be easy to find, focused on what the user needs to do, and not too long.

Example: Sometimes, websites have a "Help" section with easy-to-find answers to common questions,
like "How to change your password."

Shneiderman’s Eight Golden Rules:

Strive for Consistency: Make things work the same way in similar situations. Use the same words,
colors, and layout across your app or website. For example, on Instagram, double-tapping a picture
always likes it.

Cater to Universal Usability: Think about all kinds of users and their needs. Make your design
flexible so everyone can use it easily. For instance, providing keyboard shortcuts for power users.

Offer Informative Feedback: Whenever users do something, let them know what's happening. It
could be a small notification for simple actions or a bigger one for important ones. Like how Instagram
notifies you about new posts.
Design Dialogs to Yield Closure: Organize actions into clear groups with a beginning, middle, and
end. After completing a task, give users a clear next step.

Prevent Errors: Design your system so users can't make big mistakes. If they do, help them fix it
easily.

Permit Easy Reversal of Actions: Let users undo what they've done easily. This helps them feel less
stressed and encourages them to explore new options.

Support Internal Locus of Control: Users should feel like they're in control of the system. Design it
so they feel like they're making things happen.

Reduce Short Term Memory Load: Keep things simple and easy to remember. Don't overload users
with too much information at once.

Norman’s Seven Principles:

Use both knowledge in the world & knowledge in the head: Combine what people already know with
what the system provides.

Simplify task structures: Make tasks easy to understand and follow.

Make things visible: Ensure that important information is easy to see.
Get the mapping right: Make sure the user's mental model matches how the system works.
Convert constraints into advantages: Turn limitations into useful features.
Design for Error: Make it easy for users to recover from mistakes.
When all else fails – Standardize: Follow established standards to make things easier for users.

Guidelines for Information Display:

Show only relevant information: Display only what's needed for the current task.
Don't overload with data: Use a layout that makes it easy for users to quickly understand information.
Use standard labels and formats: Make sure labels and abbreviations are familiar to users.
Allow users to keep track of where they are: Provide a way for users to maintain their place in the
interface.

Give clear error messages: When something goes wrong, explain it clearly to the user.
Guidelines for Data Entry:

Minimize input actions: Make it easy for users to enter data with fewer steps.

Let users customize input: Allow users to input data in their preferred way.

Be flexible with input methods: Support different ways of entering data.

Disable irrelevant commands: Only show commands that make sense for the current task.

Provide help for input: Offer assistance for users when they're entering data.

Avoid unnecessary input actions: Don't make users do unnecessary tasks.

Simple Example:
Think about a weather app. It should only show current weather and maybe a forecast for the next few
days, not everything about the climate. And when you enter your location, it should predict it as you type,
so you don't have to type the whole thing.

Designing User Interface:

Conceptual Model:
Understand what users need to do and how they will do it. For example, if users are primarily searching
for information, the interface should support easy searching.

Interaction Mode:
Decide on the best way for users to interact with the system. For instance, if users prefer browsing,
provide intuitive browsing options.

Why User Interfaces are Poor:

Reasons include lack of proper training for developers, diverse knowledge needed, rapid technology
changes, and poor management.
Basic Human Characteristics:
Problem Solving: Humans like solving problems but prefer solvable ones.

Learning: Learning is constant but can be challenging. Users rely on prior learning to support new
tasks.

Model Building: Users build mental models of their world and prefer simple models.

Design Principles:

Visibility:
Make functions visible so users know what to do next. For example, clearly label elevator controls.

Example: Elevator controls should clearly indicate where to insert the room key for operation.

Affordance:
Objects should indicate how to use them. For instance, buttons should look clickable.

Example: Buttons on a screen should visually indicate that they can be pressed.

Mapping:
Controls should relate to their effects. Good mapping makes interactions intuitive.

Example: Font selection options should visually represent the appearance of each font.

Feedback:
Users should receive immediate responses to their actions. For example, clicking a button should produce
a visual or auditory response.

Example: When a button is clicked, it should produce a sound or highlight to indicate the action was
received.

Constraints:
Limit possible actions to prevent errors. Constraints can be physical, cultural, or logical.

Example: Deactivate menu options that are not applicable in certain situations to prevent user errors.

Consistency: Interfaces should have similar operations for similar tasks. Consistency makes interfaces
easier to learn and use.
Example: Always use the same key combinations for common operations, like Ctrl+C for copy, Ctrl+V
for paste, etc.

GUI: Graphic User Interface

Definition: GUI is the way users interact with a program or device using visual elements like icons,
buttons, menus, etc., arranged in a user-friendly pattern.

Importance: GUI determines how easy and enjoyable it is to use a product, giving it an identity and
character.

Requirements of a GUI:

Functional: Easy to use without needing training.

Aesthetic: Pleasing to look at, identifiable, and visually high-quality.
Communicable: Clearly expresses its purpose and operation, culturally and contextually compatible.

Role of Aesthetics:

Functionality: Aesthetic design is not just about looks but also about how well the interface works.
Incorporation: Aesthetics are integrated into interfaces through graphic design, balancing art and
mathematics.

Principles of Visual Design:

Order & Composition: Arranging elements like size, shape, texture, etc., in a visually pleasing way.
Form Follows Function: The design should reflect its purpose. For example, an arrow's shape
indicates its function to point in a direction.

Principles of GUI Design:

Balance, Unity, Proportion, Harmony, Direction, Rhythm, Symmetry, Pattern, Emphasis, Contrast,
Movement: These principles guide the arrangement of elements to create a harmonious and usable
interface.
Graphic Design Principles:
Clustering Principle: Organizing similar controls into visually separate blocks with titles for each
block.

Font Choice: Using simple, easy-to-read fonts like Arial or Helvetica to enhance readability.

Examples of Unsatisfactory GUIs:

GUIs lacking color contrast, differentiation, and identity, leading to confusion and errors.

ICON Design:
Simple, easily understandable icons using gradient colors to depict time progress through animation,
taking up minimal screen space and computing memory.

Aesthetics:
Ordered Grid: Organized rows and columns for better composition.
Visual Balance: Symmetrical or asymmetrical placement of elements for a balanced look.
Low Visual Noise: Minimal clutter or crowding for a clean interface.
Color & Graphics: Simple colors and graphics with no fancy labels for a clear and pleasant
appearance.

Icon Design
Icons are small visual symbols used in interfaces to represent functions or actions. Well-designed icons
save space, are quickly recognizable, easily remembered, and help make interfaces usable internationally.

Standard Parts of an Icon:

 Border
 Background
 Image
 Label
Icon Design Principles:
Coherency: Icons should be consistent in size, color, and metaphor.
Legibility: Use large objects, bold lines, and simple shapes for clear visibility.
Recognition and Recall: Choose familiar metaphors and concrete objects for easy understanding.
Use Color Sparingly: Design in black and white first, adding color later if necessary.
Cultural and International Issues: Avoid using text or symbols specific to one culture.

Do's and Don'ts:

Do: Test and redesign icons iteratively, starting with simple sketches.

Don't: Always use icons; sometimes words are better for abstract concepts.
Typography: Use font sizes and styles that are legible and appropriate for different text elements.

Principles of Visual Interface Design:

Avoid Clutter: Keep the interface clean and free of unnecessary visual noise.
Use Contrast and Similarity: Distinguish and organize elements using visual differences and
similarities.

Provide Visual Structure: Create a flow and hierarchy in the interface.

Use Consistent Imagery: Ensure that images and styles are cohesive and contextually appropriate.