ITEC 129: User Experience Design (UXD) and Human–Computer Interaction (HCI)

Comprehensive vocabulary flashcards covering Units 1 through 6 of User Experience Design: UX vs. UI, HCI, user research methods, personas, empathy maps, information architecture, wireframing, layout principles, typography pairing, and prototyping.

User Experience (UX)

The overall experience a person has when interacting with a product, service, or system, focusing on usability, accessibility, performance, emotional response, and how easy, efficient, and enjoyable the product is before, during, and after use.

User Interface (UI)

The visual and interactive elements on screen that users directly interact with, including buttons, menus, icons, typography, colors, and layouts.

Human–Computer Interaction (HCI)

A field focused on the technical interaction between a user and a computer, prioritizing interface behavior, input/output methods, and usability principles mostly during use.

Empathy Design

The practice of understanding users by seeing the world from their perspective and recognizing their emotions, frustrations, motivations, and challenges through observation and listening.

Qualitative Research (in UXD)

A branch of research focusing on understanding the 'how' and 'why' of user thoughts, behaviors, opinions, and experiences rather than numerical data.

User Interview

A qualitative research method that involves sitting with a user and asking questions about how they complete tasks in existing applications or how they would want to perform tasks in a newly developing application.

Direct Observation

A qualitative research method where the researcher enters the user's real environment or context to observe them as they perform their jobs or tasks.

Diary Study

A qualitative research method where users record their thoughts, emotions, behaviors, and experiences over a period of time, such as days or weeks, while interacting with a process, product, or system.

User Persona

A fictional profile created from research findings that represents a distinct user type, highlighting their background, goals, pain points, behaviors, and needs to guide design decisions.

Empathy Mapping

A visual activity and tool that helps designers examine user perspectives and uncover needs by categorizing user data into what the user says, thinks, feels, and does.

User Journey

A mapped sequence showing the end-to-end steps a user takes when interacting with a product or service, illustrating their experiences and frustrations at each stage.

Information Architecture (IA)

An area of design that focuses on how content and features are organized and structured so users can navigate easily and find what they need.

Global Navigation

A primary navigation structure, such as a main top-level menu, that remains visible and consistent across all pages of a website or application.

Local Navigation

Sub-menus or section-specific navigation links that allow users to explore pages within a particular section or category of a digital system.

Contextual Navigation

In-line links or navigation items embedded directly within body content to point users to related topics or resources.

Card Sorting

A user research method in which participants organize labeled items into categories to help designers create intuitive navigation based on user mental models.

Open Card Sorting

A card sorting method where participants sort labeled cards into groups and create their own category names for each group.

Closed Card Sorting

A card sorting method where participants are provided with predefined category names and asked to sort labeled cards into those existing categories.

Mental Model

What a user believes about how a system, application, or website functions, influencing how they predict actions and interact with an interface.

Sitemap

A visual or textual representation of an application or website's hierarchical structure, illustrating how screens or pages connect to one another.

User Flow

A step-by-step visual diagram illustrating the sequence of actions, screens, and decision points a user moves through to complete a specific goal or task.

Wireframing

The process of creating a basic visual representation of a digital interface focusing on layout, content placement, and functionality without styling elements like colors, typography, or detailed images.

Low-Fidelity Sketching

Quick, simple drawings created on paper, whiteboards, or digital tools using basic shapes such as boxes and lines to rapidly explore interface layouts without visual detailing.

Scale (Visual Design Principle)

The design principle of utilizing relative sizing among elements to signal their relative importance and rank within a composition.

Visual Hierarchy

The visual-design principle of guiding the user's eye across an interface so that elements are attended to in the direct order of their importance.

Balance (Visual Design Principle)

The principle occurring when visual weight or signals are evenly distributed across both sides of an imaginary axis, either symmetrically or asymmetrically.

Contrast (Visual Design Principle)

The principle of placing visually dissimilar elements together using differences in color, size, shape, or weight to convey that the elements differ in function or meaning.

Gestalt Principles

A set of visual perception principles describing the human tendency to organize and perceive an entire whole rather than just disconnected individual components.

Proximity (Gestalt)

A Gestalt principle stating that design elements placed close to one another are perceived by users as related.

Similarity (Gestalt)

A Gestalt principle stating that elements sharing visual characteristics, such as color, shape, or typographic styling, are perceived as related or equivalent in function.

Continuity (Gestalt)

A Gestalt principle stating that the human eye instinctively follows lines, curves, and alignment paths to navigate layout flow.

Closure (Gestalt)

A Gestalt principle stating that the human brain automatically fills in missing visual details to perceive an incomplete shape or boundary as whole.

Mobile-First Thinking

A design strategy prioritizing the smallest screen layout before expanding features and content outwards for larger screens like tablets and desktops.

Whitespace

Also called negative space, this is the unmarked space between and around layout elements that enhances readability, visual balance, and click or touch precision.

Visual Design

The phase of UX design that combines colors, typography, images, spacing, and layout to communicate information clearly and reinforce branding.

Typography Pairing

The practice of selecting and combining two or more typefaces (such as Serif and Sans-Serif) to establish visual hierarchy, contrast, and readability across an interface.

Mock-up

A static, visually detailed design that displays colors, typography, and styling to demonstrate exactly how the final digital product will look.

Prototype

An early interactive version of a design that connects screens to simulate task flows, test system interactions, and gather user feedback before development.

Low-Fidelity Prototype

A rough, simple interactive version of a design—such as paper sketches or clickable wireframes—focusing strictly on structure and flow rather than visual polish.

High-Fidelity Prototype

A realistic, detailed interactive model featuring complete styling, typography, colors, and behaviors that closely mimics the look and feel of the final application.

Hotspots

Clickable interactive areas or elements, such as buttons and back links, defined within a prototype to trigger navigation between screens.

Feedback Loop

The iterative cycle in UX design of testing a prototype, gathering feedback, identifying problems, redesigning, updating the prototype, and testing again.