UI/UX Exam Notes

Technologies in UI/UX

Technologies like HTML, CSS, and JavaScript are crucial for building websites and apps. Tools like Figma and Adobe XD aid in design and testing, while Bootstrap ensures responsiveness across devices. Testing with real users is facilitated by tools like Maze and UsabilityHub.

Causes of Accidents in UI/UX Design

Accidents occur due to poor layout, unclear instructions, lack of feedback, cluttered UI, and absence of an undo option. Clear, simple, and forgiving designs are essential to prevent user errors.

Ergonomics and Human-Computer Interaction (HCI)

Ergonomics focuses on physical comfort, while HCI emphasizes digital comfort. Both aim to enhance user experience by creating comfortable, efficient, and user-friendly systems both physically and digitally.

Good and Bad Design Examples

Good design is simple, clear, and user-friendly, exemplified by Google's search page, Duolingo, and Apple's iPhone settings. Bad design includes overcrowded websites, poorly designed forms, and small clickable buttons on mobile devices.

User vs. Developer Fault

Mistakes often stem from bad design, making it the developer's fault. However, if the design is clear and the user ignores instructions, it becomes the user's fault.

Human-Computer Interaction (HCI) Explained

HCI is the study of how people interact with computers and digital devices, aiming to make technology simple, pleasant, and efficient to use. It involves user interface design, usability testing, and accessibility.

HCI - History, Purpose, and Related Sciences

HCI's history spans from large, scientist-used computers to today's touchscreens and voice assistants. Its purpose is to make technology easy to use, avoid mistakes, improve satisfaction, and work for all users. Related fields include psychology, design, computer science, cognitive science, sociology, and ergonomics.

Usability, Efficiency, Effectiveness, and Satisfaction

Usability, efficiency, effectiveness, and satisfaction are interconnected elements that define a good user experience. High usability leads to efficiency and effectiveness, which in turn drive user satisfaction.

Usability Concept and Related Terms

Usability refers to the ease and pleasantness of using a product, encompassing learnability, efficiency, memorability, error handling, and satisfaction. Good usability examples include Google's homepage, while poor usability is seen in cluttered airline booking sites.

Usability Testing

Usability testing involves observing real users interacting with a product to identify problems and improve user experience. It includes planning, participant selection, task creation, test execution, results analysis, and design improvement.

Human-Computer vs. Human-Human Interaction

Human-computer interaction requires clear communication, feedback, error prevention, and emotional design. Understanding both human-computer and human-human interaction helps designers create more natural, helpful, and user-friendly digital systems.

Input and Output Channels in HCI

Input channels (keyboard, mouse, touchscreen, microphone, camera, sensors) are how users send information to the computer, while output channels (screen, speakers, vibration, lights) are how the computer communicates back.

Visual Features and the Hermann Grid

Visual features (color, shape, size, lines, movement, contrast, patterns) help users understand designs. The Hermann Grid illusion demonstrates that our eyes can be tricked, emphasizing the need for careful design to avoid confusion.

Key Concepts - Adaptation, Blind Spots, Color Differentiation, and Intensity

Adaptation involves how our eyes adjust to changes in light. Blind spots are areas we can’t see. Color differentiation is how we distinguish colors, and intensity refers to color brightness. These principles impact how users perceive and interact with on-screen elements.

Purpose of Color in UI/UX

Color attracts attention, sets mood, provides meaning, and improves accessibility. Factors include contrast, color blindness, cultural meanings, consistency, and branding.

Sensation vs. Perception

Sensation is the raw data received through senses, while perception is the brain's interpretation of that data based on experiences and context.

Factors Influencing Perception

Perception is influenced by past experiences, expectations, attention, cultural background, context, motivation, physical state, and social influence.

Field of View and Viewing Angle in Interface Creation

Field of View (FoV) refers to how much content is visible on the screen at once, and Viewing Angle is the angle at which users view the screen, both impacting how designers must arrange content on different devices.

Contrast and the Stroop Effect

Contrast enhances clarity in design, while the Stroop Effect demonstrates how conflicting information can cause confusion, influencing design choices for readability and user interaction.

Signal Processing Concepts

Size and depth perception, brightness perception, and color perception impacts how users interact and interpret designs, ensuring the focus is on core elements.

What is Color?

Color consists of hue, saturation, and brightness, affecting psychology, space perception, and usability.

Comparing Color and Light

Color is how we perceive light reflected by objects, dependent on light wavelengths. Light enables us to see color through interaction with objects.

HSV (Hue, Saturation, Value) Color Model

HSV (Hue, Saturation, Value) color model is a way to represent colors based on human perception.

Pantone Color Model

Pantone Color Model is a standardized color matching system used in printing, design, and fashion, ensuring color consistency across devices and materials through unique color codes.

RGB vs. CMYK Color Models

RGB is for screens (Red, Green, Blue – additive), while CMYK is for printing (Cyan, Magenta, Yellow, Black – subtractive).

Effect of Sound on the Interface

Sound can enhance user experience but must be balanced, accessible, and user-controlled. Visual cues should also accompany sounds for accessibility.

Effect of Touch on the Interface

Touch enhances user interaction, offering intuitive and direct engagement. Touch enhances user experience by making interactions more direct, efficient, and engaging, but requires thoughtful design to ensure accuracy and responsiveness.

Primary, Warm/Cool, and Complementary Contrasts

Primary contrasts use red, blue, and yellow for bold attention. Warm/cool contrasts create strong visual interest. Complementary contrasts use colors opposite each other for vibrant elements.

Brightness/Intensity, Brightness, and Saturation Contrasts

Brightness/Intensity Contrast deals with lightness and darkness of colors, while Saturation Contrast is about how vivid or muted the colors appear creating emphasis.

Contrast and Chromatic Aberration

Contrast in design helps elements stand out, while chromatic aberration causes color fringes around edges. Chromatic aberration is a distortion where colors don’t focus correctly, causing color fringes around edges.

Gestalt Theory Principles

Gestalt Theory simplifies visual perception. Key points include Proximity, Similarity, Continuity, Closure, Figure-Ground, and Symmetry.

Perception and Order in Gestalt Theory

We perceive visual elements in a structured and organized way. Principles of this are proximity, similarity, continuity, closure, figure-ground, and symmetry.

Symmetry, Relative Size, and Closure

Symmetry provides balance, relative size helps gauge distance, and closure allows incomplete shapes to be seen as complete.

Proximity, Continuity, and Uniform Connectedness

Proximity groups elements, continuity favors smooth patterns, and uniform connectedness creates visual unity.

Figure-Ground, Simplicity, and Prägnanz

Figure-ground separates subject from background, simplicity interprets scenes clearly, and Prägnanz favors stable forms.

Recognition-Based vs. Memory-Based Interfaces

Recognition-based interfaces (icons, menus) lower cognitive effort, while memory-based (passwords, commands) require recall and increase effort.

Sensory Memory Experiment (Sperling)

The aim of the experiment was to investigate how much information sensory memory can hold and how long it lasts through showing participants a grid briefly, and testing recall.

Long-Term Memory (LTM) and Interface Development

Long-Term Memory (LTM) and Interface Development involve structured knowledge storage influencing perception with familiarity and mental models.

User Characteristics, Habits, and Mental Models

User characteristics influence interaction and learning, habits shape expectations, and mental models guide understanding of interfaces; consistency enhances usability and satisfaction.

Short-Term Memory (STM) Characteristics and Interfaces

Accommodate STM limitations through progressive disclosure, auto-completion, and undo/redo features for easier use.

Designer vs. User Mental Models

Designers often have differing mental models of a product than intended users. Good design seeks to reconcile these.

Designer Mental Models and Product Demand

A designer’s mental model affects how a product is structured, which in turn influences how easily users can learn, use, and enjoy the product — all of which affect its market demand.

Affordance

Affordance suggests how an object should be used, essential for intuitive interfaces. The different types of affordance in interfaces include Visual, Physical, Symbolic, and Pattern-based.

Mapping in UX/UI

Mapping connects user actions to results, guiding user actions. Good and Well design Mappings are easy to use and natural to understand

User Error Prevention

User error happens when designs confuse users or don’t guide them well. You should ensure tasks clear, with helpful hints.

Metaphors in UI/UX Design

Metaphors use familiar objects/ideas to ease understanding in interfaces, relating something new to something known.

Rules for Metaphor Design

Metaphors/icons should offer instant insight, be general, associate with a system, have main features, and be culturally clear.

Stages of Metaphor Design Method

Use proper design methods, avoid mixing them, and add labels if needed, coordinated for visual consistency across the design.

Stages of Metaphor Design Abstraction Process

Begin with reality, identify features, simplify the image, test and optimize for screens in a step-by-step abstraction process.

Analyze the metaphor design process

Involves understanding a concept, selecting right metaphor type with abstraction. Ensure consistency, consider cultural. metaphors/icons help users immediately understand functions without needing reading instructions.

Text Properties in User Interface Design

Use uppercase for labels, lowercase for text, Serif for long blocks, Sans Serif for labels. Use italic or bold for emphasis, structured with short columns.

Interface Evaluation Concepts

Interface evaluation assesses interface effectiveness for usability, efficiency, and satisfaction.

Hawthorne Effect and Evaluation Methods

The Hawthorne effect describes altered user behavior during observation, while laboratory methods offer controlled data and field methods provide realistic insights.

Interface Evaluation Process

Evaluation process consists of defining goals, preparing and conducting evaluations, then iterating based on the result. Types of users include Novice, Intermediate, Expert, Domain Expert depend on familiarity and role within system.

Language and Common Errors in Interfaces

Language in user interfaces should be simple, clear, and easy to understand. Errors include difficult words, unclear meanings.

Types of Users and Interface Evaluation

Types of users in evaluating interfaces are new, experienced, children, elderly, disabled. Evaluation tests if interface is good for each user type.

Experimental Evaluation

Experimental evaluation is testing a program, app, or website with real users to find the problems to help to make user experience better

Evaluation Methods - Field Tests, Heuristic Evaluation, and Field Methods

Evaluation can take many forms, field tests, heuristic evaluation, and field methods are a few.

Evaluation method - Survey-Based Methods, Acceptance Tests, and Observational Methods

Another form of evaluation - survey-based methods, acceptance tests, and observational methods are also used for good evaluation.

Cognitive Walkthroughs, Experiment Design, and Interface Evaluation Methods

Analzying different method by cognitive walkthroughs, experiment design, and interface evaluation methods

Usability Principle - visibility of navigation and visibility of system status

Visibility of navigation helps see where they are in the system and and visibility of system status helps the user to know what is happening

Usability Principles - consistency with real-world systems; real-world metaphors – idiomatic design

Consistently with real world systemsUsers can rely on familiar concepts, reducing the learning curve and idiomatic design, helps users grasp new systems quickly by connecting them to familiar experiences.

Usability Principles - user control and freedom; toolbars; focus management

By having user control and freedom, this increases confidence and flexibility, toolbars is to help make key functions accessible and Focus Management is to reduced comfusion by logical focus movement

Usability Principles - feedback; consistency and standards; inconsistency

With a good feed back and consistency helps make apps easy and comfortable to use. Inconsistency should be only used when it helps the user understand something better and doesn’t cause confusion.

Usability Principles - from and functionality; error prevention; emphasis on recognition rather than recall; flexibility and efficiency of use.

These principles help create user-friendly and efficient interfaces with good flow and prevent issues and has multiple ways for the same task.

Usability Principles - Proper distribution by knowledge level and Aesthetic and minimalist design approached.

All the different user level approach and a Good clean interfaces can improve the users experiance make the interface look more trust worthy

Usability Principles - Provides to users on the right way to make their actions and performace

Giving the best guidance to use to help to recognize and fix the errors, while also making it to be fast.

Usability Principles - Should avoid anything that can ruin the focus and effciency.

Interfaces should minimize unnecessary visual, audio, or interactive distractions that could interrupt the user's focus or cognitive flow and efficiently with users navigation.

Usability Principles - Documentation should provide help for users and menus

Having accessible and quick documentation and Good organized menus can make it a better process for a users point of view

Usabiltiy principles - what needed to be done for them to perform effcient action on it

Navigation provides feed bake and actions to complete, and there is easy ways to data to be entered and tabs that are organized

User Centered Design (UCD)

User-Centered Design (UCD) is the approach to what the user is and want to use depending on what to do for the process

What makes design effective?

Understanding the User and User Interaction, is needed to make a good an effective design

What are the different rules and how is that useful?

10:Minute rule,Two second rules, 3 clicke rules, which are there to help make a effective UX Design

What are the things that could be used?

Heatmaps breadcrumps , etc are to focus on layout, and usability