Ui UX Flashcards

This deck introduces the foundational concepts of User Interface (UI) and User Experience (UX) design, covering everything from core definitions and the difference between the two disciplines to widely used design principles and psychological laws. You'll explore usability heuristics, visual hierarchy, Gestalt principles, common reading patterns like the F-Pattern and Z-Pattern, and practical design rules such as the 60-30-10 color guideline. Together, these flashcards build a solid mental framework for understanding why certain design choices work better than others.

It's a great starting point for aspiring designers, developers who want to build more intuitive products, product managers looking to communicate better with design teams, or anyone preparing for a UX or UI interview. Even experienced designers can benefit from a quick refresher on the classic principles that continue to shape modern interfaces.

To get the most out of these flashcards, try to connect each concept to a real app or website you use every day. Spotting Fitts's Law in a button's size or Hick's Law in a simplified menu helps the ideas stick far better than passive memorization alone. Space your review sessions over several days rather than cramming everything at once, and consider revisiting the harder concepts like the Gestalt Principles or usability heuristics until they feel like second nature.

User Interface (UI) and User Experience (UX) are complementary disciplines that together determine how people interact with digital products. UI refers to the visual and interactive elements users directly engage with, including buttons, icons, typography, spacing, and color schemes. UX is the broader umbrella encompassing the overall experience, including usability, accessibility, performance, and the emotional impact a product creates. The popular shorthand captures this distinction well: UI is what you see, UX is how it feels. Strong products require attention to both, since a beautiful interface with poor usability frustrates users just as much as a usable but unattractive one undermines trust.

Foundational design principles guide both UI and UX work. Jakob Nielsen's ten usability heuristics remain essential touchstones, including visibility of system status, match between system and real world, user control and freedom, consistency and standards, error prevention, recognition rather than recall, flexibility and efficiency, aesthetic and minimalist design, helping users recover from errors, and providing help and documentation. These heuristics pair with established behavioral principles: Fitts's Law explains why larger, closer targets are faster to acquire, Hick's Law shows how more choices increase decision time, Miller's Law limits working memory to roughly seven items, and Jakob's Law reminds designers that users prefer familiar patterns borrowed from other sites they frequent. Together, these principles create a foundation for designing interfaces that respect how humans actually perceive, decide, and remember.

Visual perception is governed by additional rules that shape effective layouts. The Gestalt principles describe how the mind groups visual elements through proximity, similarity, closure, continuity, and figure-ground relationships. Visual hierarchy arranges elements to show their order of importance through size, color, contrast, spacing, and position. Designers also rely on established reading patterns like the F-pattern for text-heavy web content and the Z-pattern for landing pages, as well as compositional techniques such as white space management, contrast, and the 60-30-10 color rule. Underlying all of this are mathematical relationships like the golden ratio (1.618:1), which produces aesthetically pleasing proportions seen throughout nature and classical design.

Effective design begins with understanding how the human mind works. Cognitive load refers to the mental effort required to use a system, and good UX minimizes this load through clear design, familiar patterns, and progressive disclosure that reveals information only as needed. Recognition is easier than recall, so designers should make options visible rather than requiring users to retrieve information from memory. The principle of least surprise dictates that interfaces should behave as users expect, reducing the cognitive friction of unexpected behavior. Working memory holds only about four to seven chunks at once, which informs decisions about how many menu items, dashboard widgets, or form fields to show at any given moment.

Memory and attention follow predictable patterns that designers can leverage. The serial position effect shows that users remember the first (primacy) and last (recency) items in a list, so important navigation items belong at the beginning or end. The peak-end rule reveals that people judge an experience by its most intense moment and its ending, rather than its average quality. The Von Restorff effect, also called the isolation effect, makes distinctive items more memorable, which is why key calls-to-action stand out visually. Conversely, the mere exposure effect demonstrates that repeated exposure increases liking, which is why consistency and familiarity build comfort and trust over time.

Behavioral biases powerfully influence user decisions, and ethical designers understand these forces. The aesthetic-usability effect means attractive designs are perceived as more usable, even when objectively equal. The endowment effect increases perceived value once users feel ownership, which is why free trials and personalization boost conversion. Loss aversion makes people more motivated to avoid losses than acquire gains, so framing messages around what users stand to lose is often persuasive. Designers must navigate cognitive biases responsibly, distinguishing between helpful nudges like smart defaults and progressive disclosure from manipulative dark patterns that trick users into unintended actions such as hidden costs, confirmed shaming, or forced continuity. The same principles that make designs engaging can be misused, and ethical practice requires transparent, user-respectful application.

Information architecture (IA) is the structural design of information environments, organizing and labeling content to support findability and usability. It encompasses navigation systems, categorization schemes, and search functionality. A strong IA rests on understanding user mental models, often surfaced through techniques like card sorting, where participants organize topics into categories that reveal how they naturally group information. The output shapes sitemaps, navigation hierarchies, taxonomies, and the labels users see throughout the product. Effective IA reduces cognitive load by making it obvious where to find things, while weak IA produces the frustrating 'scent of information' problem where users abandon paths that don't feel like they lead somewhere useful.

Navigation comes in many forms, each suited to different contexts. Breadcrumb navigation shows users where they are within a hierarchy and offers quick paths back up the tree. Hamburger menus hide navigation behind a three-line icon, conserving space but risking discoverability. Sticky navigation remains visible while scrolling, improving access at the cost of screen real estate. Mega menus handle complex site structures like e-commerce catalogs with rich, multi-column dropdowns. Sidebar navigation works well for applications with many options, while bottom navigation bars serve mobile apps with three to five primary destinations that fall within thumb reach. Tab navigation organizes related content into shared spaces, and tag input fields let users compose collections of tokens for emails, categories, or keywords.

Search and filtering deserve dedicated attention in any information-rich product. Search should be prominently placed, usually top-right, with a magnifying glass icon, helpful placeholders, autocomplete suggestions, and consistent availability across pages. Search results need relevance ranking, clear result counts, filters and facets for refinement, sorting options, highlighted search terms, and meaningful handling of zero-result states through spelling suggestions or related content. Faceted search lets users narrow results by multiple attributes simultaneously. For browsing large datasets, pagination offers deterministic navigation, while infinite scroll suits discovery feeds but can trap users who need to find specific items. The best products carefully match their navigation and search patterns to user goals and content types.

Color is one of the most powerful tools in design, communicating emotion, hierarchy, and brand personality. The 60-30-10 color rule creates balanced compositions by dedicating 60% of the design to a dominant color, 30% to a secondary color, and 10% to an accent color that draws attention to key elements. Color psychology informs these choices: red signals urgency or error, green conveys success or affirmation, blue builds trust and calm, yellow attracts attention, and orange feels friendly and action-oriented. Color harmony principles like complementary, analogous, triadic, and monochromatic schemes ensure pleasing combinations, while understanding color temperature (warm versus cool) helps set the emotional tone. Beyond aesthetics, color must meet accessibility standards; the Web Content Accessibility Guidelines (WCAG) require contrast ratios of at least 4.5:1 for normal text and 3:1 for large text, ensuring readability for users with visual impairments.

Typography shapes how users read, scan, and absorb information. Typography hierarchy uses different sizes, weights, and styles to create clear distinction between headings, subheadings, and body text, guiding readers through content. Optimal line height (leading) is typically 1.4 to 1.6 times the font size for body text, while line length should stay between 50 and 75 characters for comfortable reading. Kerning adjusts space between specific letter pairs, particularly important in headings and logos, while tracking applies uniform spacing across a text block and is especially valuable at small or large sizes. Designers pair fonts thoughtfully, often contrasting serif and sans-serif options, and rely on modular scales built from mathematical ratios to maintain harmony. Responsive typography uses relative units like rem and viewport units to scale fluidly across screen sizes.

Layout and composition tie color and typography together into coherent interfaces. Responsive design ensures layouts adapt gracefully across desktop, tablet, and mobile viewports, with mobile-first design increasingly the norm as it forces focus on core functionality under constrained conditions. Grid systems, often based on twelve columns, provide structural alignment, while the eight-point grid system sizes and spaces all elements in multiples of eight pixels for visual consistency. Whitespace, also called negative space, is never wasted; it improves readability, creates focus, and gives designs room to breathe. Designers must also consider how design styles evolve, from skeuomorphic interfaces that mimic real-world objects, to flat design that emphasizes simplicity, to Material Design's blend of flat aesthetics with subtle depth, to neumorphism's controversial soft shadows that often fail contrast requirements.

Interaction design shapes how users accomplish tasks, and well-designed patterns make complex actions feel natural. Affordances are visual cues that suggest how an element should be used: buttons look pressable, sliders look draggable, and clear affordances reduce guesswork. Feedback provides immediate response to user actions, confirming that a system has received input and showing what is happening through loading states, button presses, or error messages. Calls-to-action (CTAs) guide users toward desired outcomes with action-oriented language like 'Sign Up' or 'Buy Now,' ideally placed above the fold where they receive maximum visibility. Micro-interactions, such as button hover states, pull-to-refresh gestures, or like-button animations, add delight while reinforcing usability. Together, these patterns form the vocabulary of interaction that experienced designers deploy instinctively.

Forms and inputs are among the most consequential components, since they directly capture user data. Input fields should always have visible labels rather than relying on placeholder text, which disappears during typing and creates accessibility issues. Inline validation provides immediate feedback as users type or move between fields, reducing errors and frustration compared to validation only at submission. Forms should group related fields, use single-column layouts where possible, mark optional fields rather than required ones, and leverage smart defaults and autocomplete to minimize effort. Checkboxes handle independent multi-select options, radio buttons handle mutually exclusive choices, and dropdowns work best for four to fifteen options, with autocomplete preferred for longer lists. Multi-step forms with progress indicators break complex flows like checkout into manageable pieces, reducing cognitive load and abandonment.

Beyond forms, designers work with a vast library of established component patterns. Modals trap focus, respond to the Escape key, and clearly indicate how to close, but should be used sparingly because they interrupt workflow. Tooltips provide brief additional information on hover or focus, while popovers offer richer click-triggered content. Toasts and snackbars deliver non-intrusive temporary confirmations, alerts and banners communicate persistent system messages, and badges show notification counts. Carousels and sliders require stoppable auto-rotation and clear manual controls. Cards group related information and actions, accordions collapse and expand content sections, and data tables present structured information with sortable columns, pagination, and responsive strategies for mobile. Mastering these patterns allows designers to assemble interfaces that feel familiar, efficient, and respectful of user attention.

Accessibility (often abbreviated a11y) means designing products that can be used by people with disabilities, including visual, auditory, motor, and cognitive impairments. Inclusive design goes further, accounting for diverse users from the start rather than retrofitting accommodations. The Web Content Accessibility Guidelines (WCAG) provide the global standard, organized around four principles: Perceivable (information must be presentable in ways users can perceive), Operable (UI components and navigation must be operable), Understandable (information and operation must be understandable), and Robust (content must work with current and future technologies, including assistive technologies). Conformance is measured at three levels: Level A (minimum), Level AA (the standard target for most sites), and Level AAA (enhanced, not always achievable). Designing against these criteria produces products that work for the broadest possible audience.

Technical accessibility relies on semantic HTML and ARIA (Accessible Rich Internet Applications) attributes. Semantic HTML uses elements according to their meaning, such as header, nav, main, article, and footer, rather than generic divs, giving screen readers and search engines the structural context they need. ARIA fills gaps where semantic HTML is insufficient, offering roles, states, and properties that assistive technologies can interpret. Landmark roles like banner, navigation, main, complementary, and contentinfo let screen reader users jump efficiently between major page regions. ARIA live regions announce dynamic content changes politely or assertively. Forms must associate labels with fields, mark required inputs, link error messages via aria-describedby, and indicate invalid state with aria-invalid. Touch targets should be at least 44x44 pixels on iOS or 48x48 on Android to accommodate users with motor impairments.

Inclusive design recognizes that disability is diverse and situational. Beyond permanent disabilities, users experience temporary impairments (an ear infection affecting hearing) and situational limitations (holding a baby while shopping, limiting one-handed phone use). The curb cut effect demonstrates that features designed for disabled users often help everyone: captions aid deaf users but also help people in noisy environments, while curb cuts serve wheelchair users but also strollers and luggage. Designers should consider color blindness (affecting roughly 8% of men and 0.5% of women), vestibular disorders that require respecting prefers-reduced-motion, dyslexia-friendly typography choices, photophobia, and cognitive accessibility through plain language. Tools like screen readers (NVDA, JAWS, VoiceOver, TalkBack), high contrast mode, and zoom support are essential to test with, and accessibility audits combining automated scanning with manual review remain the gold standard for compliance.

User research grounds design decisions in evidence rather than assumption. Qualitative methods answer why and how questions through rich, small-sample techniques like interviews, contextual inquiry (observing users in their natural environment), diary studies (capturing longitudinal behavior), and think-aloud protocols during usability testing. Quantitative methods answer what and how many questions through larger-sample techniques like surveys, analytics, and A/B testing. Triangulation combines multiple methods to increase confidence in findings, while affinity diagramming organizes observations into themes during synthesis. User personas synthesize research into fictional but realistic representations of target users, capturing demographics, goals, behaviors, and pain points. User journey maps visualize the process users follow to accomplish goals, including touchpoints, emotions, and pain points across the experience.

Usability testing observes real users interacting with a product to identify problems and validate decisions. Moderated sessions let researchers probe deeper in real time, while unmoderated sessions scale more easily and reach diverse participants remotely. Guerrilla testing offers rapid, informal feedback in public spaces. Tree testing validates information architecture by having users locate items in a text-only hierarchy, and first-click testing predicts task success by checking whether users' initial clicks head in the right direction. The System Usability Scale (SUS) provides a quick ten-item questionnaire that yields a comparable usability score, while task success rate and time on task offer more granular performance metrics. Eye tracking validates visual hierarchy by showing where users actually look, and heatmaps reveal click, tap, and gaze patterns across a page.

Metrics translate user experience into business-relevant signals. Conversion rate measures the percentage of users completing desired actions, while funnel analysis tracks drop-off at each stage of sequential flows like checkout. Retention rate captures the percentage of users returning after first use (often measured at Day 1, Day 7, and Day 30), with churn rate as its inverse. Daily Active Users (DAU) and Monthly Active Users (MAU) gauge engagement, and the DAU/MAU ratio indicates stickiness. Customer satisfaction (CSAT), Net Promoter Score (NPS), and Customer Effort Score (CES) measure subjective experience. A/B testing compares two design variants on measurable outcomes, but requires careful attention to statistical significance, adequate sample size, and patience to avoid the winner's curse and novelty effects that distort early results. Continuous discovery keeps research ongoing throughout product development rather than confining it to a single upfront phase.

Design systems are the connective tissue that keeps products consistent as teams scale. A design system is a collection of reusable components, guidelines, and standards covering UI components, patterns, and design principles. Atomic design offers a useful mental model, organizing systems into atoms (basic elements like buttons and inputs), molecules (simple component combinations), organisms (complex sections like headers), templates (page-level layouts), and pages (specific instances). Underlying these are design tokens, named entities that store visual attributes like colors, typography, and spacing in formats usable across platforms, often transformed into CSS custom properties, iOS constants, or Android resources. Component libraries pair these tokens with reusable, documented components, while an eight-point grid system keeps spacing and sizing consistent and simplifies responsive design.

Design processes provide frameworks for moving from problem to solution. Design Thinking structures human-centered innovation into five stages: Empathize, Define, Ideate, Prototype, and Test. The Double Diamond model captures the same journey as Discover (diverge into research), Define (converge on the right problem), Develop (diverge into solutions), and Deliver (converge on the right solution). Lean UX emphasizes rapid experimentation, minimum viable products, and validated learning over comprehensive documentation, while Agile UX integrates design work into development sprints, keeping design slightly ahead of implementation. Design sprints compress these activities into a five-day process (Map, Sketch, Decide, Prototype, Test) pioneered by Google Ventures. Prioritization frameworks like Jobs-to-be-Done, the Kano Model, and MoSCoW help teams decide what to build first.

Design handoff and operations ensure that good design reaches production accurately. Handoff includes specifications for spacing, colors, and fonts; assets like icons and images; interaction notes; and complete component states. Design QA reviews implemented work against specifications to catch discrepancies, while design documentation records decisions, patterns, and guidelines for future team members. DesignOps optimizes the design team's workflows, tools, and processes so designers can focus on design rather than logistics. Specialized roles emerge in mature organizations: UX researchers lead studies, information architects structure content, content designers craft microcopy, design system managers govern evolution, and design technologists bridge design and code. As organizations mature along the UX maturity model, moving from absent to user-driven, design becomes a strategic capability that demonstrably improves conversion, reduces support costs, and increases retention.