This batch is a subset from NNGroup’s “Visual Design” topic covering design systems, icons, visual style, motion, and visual testing. Strung together in one sentence:Design systems are “engineering visual rules to be reusable,”Icons/signifiers are “using graphics to let users see at a glance what they can do,”Visual style(skeuomorphism → flat → glassmorphism) is “the fashion cycle of skins,”Motion is “letting the interface speak through movement, but with restraint,”Visual testing is “don’t guess—use methods to verify whether it looks good and works well.”
First, clarify a few recurring core terms:
- Signifier: visual cues on the interface that “tell you what you can do here” (underline = clickable, dropdown arrow = expandable). Not decoration—they are “operation instructions.”
- Recognition vs. Interpretation: two hurdles for icons—whether you can recognize that this is a “star” (recognition), and whether in this interface the star actually means “bookmark/favorites” or “rating” (interpretation). Passing both hurdles is required for usability.
- Interaction Cost: users treat every click as “currency” and don’t want to waste it. Make things that should be clickable look clickable; don’t make non-clickable things pretend to be clickable.
- Attitudinal data vs. Behavioral data: what users “say” they like (attitudinal) ≠ what users “do” smoothly (behavioral). Visual testing needs both, but don’t trust words alone.
The full text has six clusters + one misfit section: ① Design systems and style guides → ② Icons and signifiers → ③ Visual style evolution → ④ Clickable element identification + banner blindness → ⑤ Animation and motion → ⑥ Visual testing → ⑦ 3 articles not belonging to visual design (research/team methods, briefly summarized and attributed). Each section includes core principles / Why / counterexamples.
1. Design Systems & Style Guides
Sources: 2 articles: Design Systems 101 / Design Systems vs. Style Guides
Core principle: A design system is the “parent,” and a style guide is the “child.” A design system = a complete set of reusable standards (components + patterns + style + code + design files), so that multiple teams in a large company don’t have to reinvent the wheel while still maintaining consistency; a style guide only governs “the rules for one type of style” (how to write copy / what colors and fonts to use / how frontend implements it).
Inclusion relationship in one diagram: Design System ⊃ { Style Guide + Component Library + Pattern Library + Additional Resources (Figma files/Logo/fonts/icons) }.
| Elements | English | What it is | Examples |
|---|---|---|---|
| Component Library | Component Library / Design Library | Standardized, reusable individual UI elements (buttons, input boxes, navigation bars), each with design specifications (color/size/states: default · hover · disabled · clicked) + code (HTML/CSS/JS) | GitHub Primer, Google Material Design (buttons include color/states/code) |
| Pattern Library | Pattern Library | High-level patterns assembled from multiple components(page headers, form layouts, search), solving “how to arrange” rather than “which part to use” | Atlassian page header (title + breadcrumbs + search + button), Mailchimp form/navigation patterns |
| Style Guide | Style Guide | Documents focused on “one category of style” (see three types in the table below) | IBM Carbon (usage/style/code + accessibility + code sandbox), USWDS (U.S. government, unifying all agencies) |
Don’t confuse Component Library vs. Pattern Library: Component Library = parts list (one button); Pattern Library = how parts are combined (one complete page header).
Three types of style guides(each owned by different teams):
| Type | What it governs | Who maintains it | Change frequency |
|---|---|---|---|
| Content Style Guide | Writing tone, grammar, formatting, ensuring consistent voice across the product | Content team / Content strategist | Medium (Wise uses it to unify content tone) |
| Brand Style Guide | Brand foundational elements such as colors, fonts, Logo, imagery | In-house design team or agency | Low (few changes) |
| Frontend Style Guide | Design philosophy of UI elements + code snippets, shared by designers and developers | UX team + developer support | Medium-high |
How to choose: three implementation approaches for design systems(three-way tradeoff among cost, customization, and brand consistency):
| Approach | Cost | Customization | Brand consistency | When to use |
|---|---|---|---|---|
| Adopt existing | Low | Low | Relatively low | Tight budget, urgent timeline—start directly with Material Design / Bootstrap |
| Adapt existing | Medium | Medium | Medium | Have some brand requirements but limited resources—modify on top of an existing system |
| Create from scratch | High | High | High | Large companies with strict brand tone and sufficient resources—build a fully brand-aligned system from scratch |
Why: When large companies have multiple teams designing and developing in parallel, without a system you get “the same button in ten different looks.” The benefits of a system are reduced communication costs for cross-team collaboration, improved efficiency (designers don’t redraw common components, developers reuse existing code and save testing), and brand consistency (NASA’s 1976 Graphics Standards Manual NHB 1430.2 is a classic example, even writing in principles such as “the logo should be treated as a large-scale headline, language should be concise so vehicle drivers can read it quickly”).
Counterexamples / Notes: A design system is not “build once and done”—it must have a dedicated team or senior individual contributors maintaining it continuously(product designers + UI/UX + frontend + researchers), otherwise it becomes outdated and drags down the experience; it also requires senior management support to secure budget, and its long-term value must be communicated upward.
2. Icons & Signifiers
Sources: 6 articles: Icon Usability / Usability Testing of Icons / Accordion Icons / The Floppy Disk Icon / The Proliferation of Sparkles / (signifiers run throughout)
2.1 Two hurdles + four criteria for icon usability
Core principle: Whether an icon is usable first depends on two hurdles—Recognition(whether you can recognize what shape is drawn, whether a star looks like a star) and Interpretation(what function it represents in this context, star = favorites or rating). If you can’t even recognize the shape, there’s no way to talk about meaning.
Counterexample (recognition): The same simple shape is often misidentified—Ribbon mistaken for Keyhole; shopping bag mistaken for briefcase; YouTube’s shopping bag icon mistaken for lock or clipboard; Saks Fifth Avenue’s menu icon mistaken for document. Counterexample (interpretation): Multiple apps use the same “storefront” icon, and users interpret it wildly differently—Nordstrom/Sephora as “find physical store,” Ramp as “check suppliers,” DSW as “shopping category menu.” The same icon is understood very differently depending on users’ background/experience/culture.
Why: Don’t assume users inherently understand your icons—test recognition and interpretation early in design.
Four quality criteria for icon usability(proposed in “Usability Testing of Icons”, must be tested separately to know what to fix):
| Criterion | English | What to ask | How to test |
|---|---|---|---|
| Findability | Findability | Can users quickly find the icon on the page? | In-context · Time-to-Locate test (record time to find + first-click accuracy) |
| Recognition | Recognition | Do users understand what the icon means? | Out-of-context · show the icon alone and ask “what does this mean” (don’t let users reverse-infer from labels) |
| Information Scent | Information Scent | Can users correctly guess “what will happen after clicking”? | Contextual testing (give basic context such as “this is on an e-commerce site”) + A/B testing to look at interaction rate and “quick backs” (quick back = clicked in and was disappointed) |
| Attractiveness | Attractiveness | Is the icon good-looking? | Rating (1–7 scale) or pick most/least favorite and explain why |
Evaluation method matrix(from “Icon Usability”—isolated vs. context + evaluation timing):
| Research question | What attribute to test | Method | Timing |
|---|---|---|---|
| Does this icon look like a timer? | Recognition | Isolated recognition survey (shown alone without label)/ contextual screenshot test | Early design stage |
| Will users associate the timer icon with “new arrivals”? | Interpretation | Isolated survey / in-interface contextual test | Early design stage or when prototypes exist |
| Do users like the icon’s appearance? | Attractiveness | Isolated rating (semantic differential / Likert scale) / preference test | Early design stage or redesign |
| Is the icon suitable for the task “find new arrivals”? | Relevance | Contextual usability testing / Contextual A/B testing | After prototype is available or after launch |
| Do users notice / can users find the icon? | Discoverability · Findability | Contextual usability testing or click testing | After prototype is available or after launch |
| Can users tap or click the icon easily and accurately? | Target Acquisition | Contextual usability testing (follow touch target size guidelines) | After prototype is available or after launch |
Three phases of testing: Strategize phase: Use out-of-context methods (recognition / information scent) to explore multiple solutions; Execute phase: First test attractiveness in isolation to select a solution, then shift to in-context testing (time-to-locate) as the interface is refined; Assess phase: Post-launch benchmark testing + continuous A/B optimization. Avoid testing bias: Task wording must not hint at the icon’s meaning; use multiple phrasings with synonyms and omit brand-specific terms.Standard usability testing is not enough——It can reveal that an icon has problems, but cannot distinguish between "not noticed" and "unclear meaning" (in one redesign, users did not interact with the clock icon for "Recently Viewed", but it was impossible to tell whether they did not notice it or did not understand it), so it cannot be used as the sole icon evaluation method.
2.2 Accordion Icons: Which Signifier Works Best (Accordion Icons study)
Core principle: The icon for an Accordion (collapsible content block) must convey "expand content, stay on this page" rather than "navigate to a new page".Conclusion: The Caret (∨) performs best, the Plus sign is second best, and the right arrow → is almost equivalent to having no icon.
Study design: Mobile website prototypes from 11 different industries (e-commerce / news / education, etc.) × 5 icon variants (Caret / Plus / Right arrow / No icon / Foil — a distractor icon for control), recording two types of data: click location (text label / icon / middle blank space / other) + user expected outcome (expand or navigate to new page).
| Icon | User expectation of "stay on page / expand" effect | Click behavior |
|---|---|---|
| Caret ∨ | Strongest, significantly outperforms the foil icon and no icon | Statistically significantly more likely to click the icon rather than the text label |
| Plus + | Relatively strong, slightly worse than Caret but better than the foil icon | —— |
| Right arrow → | No significant improvement, effect close to the foil icon (the right arrow also implies "navigate to a new page") | —— |
| No icon / Foil | Users are significantly more likely to think "it will navigate to a new page" | When there is no icon, users click the text label, not the blank space where the icon would be |
Why: Strong visual signifiers are critical for user actions — no icon or an irrelevant icon increases confusion. The "stay-on-page rate" for standard icons (Caret/Plus/right arrow) did not significantly deviate from 50%, indicating they do not strongly imply staying or leaving on their own; however, the Foil and no icon conditions significantly led users to think they would leave the page.
Counterexamples / Design recommendations:① Do not assign different functions to labels and icons (e.g., "click label to navigate, click icon to expand") — users may click either; ② Do not use the right arrow as an accordion affordance; ③ Menu items should either all expand submenus or all navigate to new pages; do not mix them, especially with right-aligned icons, which are most confusing.
2.3 Floppy Disk = Save: Familiar ≠ Appropriate (The Floppy Disk Icon)
Core principle: Icon recognition relies on "interface exposure experience" rather than "familiarity with the physical object". The floppy disk has long been obsolete, but due to long-standing interface conventions,83% of respondents still recognize it as Save(another 13% recognized it as "disk/storage device"; the study icon was a simple black floppy disk outline). It has evolved from a "Similar Icon" to a "Reference Icon" (a visual convention like the old telephone handset for phone, or paper airplane = send).
Now: The floppy disk icon remains widely retained in enterprise/professional systems (TreeAge Pro Healthcare 2025, ArcGIS Pro), because these systems prioritize stability, efficiency, and familiarity; changing icons in dense toolbars actually reduces expert user efficiency.
But "familiar ≠ appropriate": The "Save" behavior has evolved — cloud sync / export locally / generate new version / download / autosave record current state, which long ago outgrew the old concept of "click Save to write to disk". User associations for three save-related icons:
| Icon | Primary user association | Recommended context |
|---|---|---|
| Floppy disk | Save: 83% | Saving current work, suitable for traditional desktop tools |
| Circular arrow (loop) | Sync/Refresh: 73% | Data synchronization or update |
| Down arrow + container | Download: 78% | Saving files locally |
Counterexamples / Design recommendations: ① Pair with text labels ("Save/Download/Sync"); ② Do not use the floppy disk to represent non-traditional save actions (choose appropriate icons for export, cloud sync, and version management instead); ③ Retain an explicit "Save" control even when autosave is available, to give users psychological reassurance; ④ Keep icon style consistent within the interface, and do not mix icons with conflicting metaphors; ⑤ Test even the most familiar icons in their specific context; ⑥ Account for long-time users who rely on icon shapes rather than text; removing familiar icons outright will reduce usability.For new groups who have never seen a floppy disk (teenagers / tech beginners), this recognition may fail.
2.4 Overuse of the Sparkles Icon: ✨ Inconsistent Meaning (Sparkles Icon)
Core principle: The Sparkles icon has become ubiquitous in recent years (often used to indicate AI features), but its meaning is completely unstandardized, making it a classic cautionary example of an "emerging icon used at scale too early".
Origins and problems: It originated as a representation of special effects in image/video editing software, then evolved into a symbol of "special/new content" (influenced by the sparkles emoji). In a study of 107 people, user associations with it were extremely divergent:
| Associated meaning | Percentage (n=107, with 95% confidence interval) |
|---|---|
| Saving or bookmarking items | 16.82%(10.82%–25.12%) |
| Visual effects or optimization options | 16.82%(10.82%–25.12%) |
| Important/special information (e.g., new content) | 11.22%(6.39%–18.73%) |
| Rewards or success affirmation | 6.54%(2.98%–13.12%) |
| Ideas / tips / help information | 4.67%(1.74%–10.75%) |
Counterexamples (conflicting interpretations across apps): Plane Finder uses it to indicate "new features" but it was misread as "add content/discounts"; Lyft uses it for promotions but it was taken as "current location/bookmark"; Ulta uses it for "Explore" but it was taken as "recommended products/new products"; Starbucks uses double stars for offers but the meaning is unclear. Visually, it is also too similar to the star icon used for "favorites/bookmarks", worsening confusion.
Counterintuitive finding regarding AI: The sparkles icon implies "behind-the-scenes magic, easy problem solving", but not a single person in the study associated it with "AI"——because it is used across too many scenarios at once: effects/rewards/ads/new content, etc. This "magic metaphor" may also obscure AI risks (bias, limitations).
Why / How to use it now: The sparkles icon currently has no globally unified meaning, and is only appropriate in three scenarios — ① Image/video editing (retaining the special effects semantics); ② Highlights (marking special content,must be paired with a label such as "New!"); ③ AI features (it can currently indicate AI-driven functionality, but its symbolic meaning will fade as AI becomes widespread; the priority is that the function meets needs rather than branding it as AI).General principle for emerging icons: must test + iterate, and supplement with labels/prompts to reduce learning cost.
III. Evolution Cycle of Visual Styles (Skeuomorphism → Flat → Neumorphism / Glassmorphism)
Sources: 2 articles: Skeuomorphism / Glassmorphism. Visual styles are like fashion, cycling repeatedly.
3.1 Skeuomorphism: Two Uses + Decline
Core principle: Skeuomorphism = using real-world physical elements in digital interfaces to reduce user learning cost. It has two distinctly different uses, do not confuse them:
- Functional learning aid(Good): Icons mimic real-world objects to borrow users’ existing mental models — trash can = delete, folder = storage, floppy disk = save. This remains effective today (macOS still uses folder / dog-eared paper icons).
- Visual design trend(Prone to excess): An aesthetic style that overemphasizes physical realism — wood/leather textures, bookshelves, paper corners, shadow gradients to create 3D depth. It peaked in the early 2010s and was widely criticized afterward.
Counterexamples (cost of the visual trend): Early iBooks/Kindle imitated physical bookshelves, and note-taking apps used leather covers — these felt approachable but introduced three problems: ① Slow loading (complex textures consume computing power); ② Cluttered interfaces (excessive decoration distracts from core functions); ③ Unintuitive interactions (Pizza Hut's "tilt the device to select toppings" overemphasized physical operation and became hard to understand).
Style cycle: Skeuomorphism → Flat (minimalist, function-first, but excessive minimalism leads to unclear interaction cues such as button clickability) → Neumorphism (attempted to combine flat simplicity with skeuomorphic 3D, using subtle shadows/raised effects for layering, but low contrast harms accessibility, and unclear interactions make it hard to tell what is clickable). Why: Good design must balance innovation and familiarity — skeuomorphism reminds us that we can integrate elements users know into innovative experiences.
3.2 Glassmorphism: Frosted Glass Style (since 2020)
Core principle: Glassmorphism = simulating frosted glass, placing translucent elements over complex backgrounds (gradients/images) to create layering and depth. It has been widely adopted in Apple and Microsoft design systems since 2020.
Three core characteristics:① Opacity (lower opacity reveals more of the background); ② Background Blur (heavier blur makes background elements harder to discern); ③ Strokes and Gradients (low-opacity strokes create an illusion of "thickness"; gradient strokes + gradient fills create depth on monochrome backgrounds).
Applications in design systems: Apple SwiftUI (iPadOS/macOS), the "Acrylic" material in Microsoft Fluent Design System, Apple Vision Pro interfaces.
Counterexamples / Best practices(Core risk = translucency causes insufficient contrast, illegible text):
- Ensure contrast meets WCAG: Use tools (Figma Contrast plugin, WillowTree Contrast) to sample and check contrast against gradients/complex backgrounds;
- Increase background blur: Use heavy blur on complex backgrounds (video/images) to reduce distraction and help users focus on content; simple backgrounds can use lighter blur — low opacity + low blur makes the background overly distracting;
- Provide users with transparency adjustment options: For example, Apple accessibility settings allow "Reduce Transparency / Increase Contrast", replacing glass components with solid colors;
- Baseline when budget is limited: Meet WCAG contrast by default, do not harm low-vision users.
Why: Glassmorphism can enhance layering and visual appeal, but must be used carefully to avoid accessibility issues — use it sparingly on elements that need emphasis, follow mature design systems to reduce risk, and balance usability with accessibility. (For comparison with Apple’s latest "Liquid Glass", see Apple HIG: Liquid Glass New Design Language + SF Symbols + Typography (iOS 26 Visual System). )
IV. Clickable Element Recognition + Banner Blindness (Clickability & Banner Blindness)
Sources: 2 articles: Beyond Blue Links / Banner Blindness Revisited. One positive, one cautionary: the former covers "how to make clickable things look clickable", the latter covers "content that looks like ads will be ignored".
4.1 Making Clickable Elements Recognizable (Beyond Blue Links)
Core principle: Flat or not, interactive components must retain sufficient clickability cues. Interaction Cost——Users treat clicks as currency, hate repeatedly hunting for clickable items, and cannot tolerate clicking with no response. Make a clear distinction between "static content" and "clickable areas".
| Element | Do | Don't / Counterexample |
|---|---|---|
| Reduce click uncertainty | Link appearance should be clearly distinguishable; static elements must not use link colors; keep hyperlink appearance consistent across the whole site | Do not force users to "wipe the screen" (repeatedly scan with the mouse) to test what is clickable — large areas on Tom's of Maine looked clickable but only a small number of green elements actually were |
| Text Links | Blue is safest; other colors work as long as they clearly differ from body text; navigation/peripheral lists may omit underlines (position already provides a cue); test for color-blind distinguishability | Patient Safety: blue headings look clickable but are not; images are clickable but give no indication; Starbucks' site-wide consistent green links = positive example |
| Buttons | Should have at least button-like traits (rectangular / preferably rounded corners), intuitively look like a button even without 3D effects; TaskRabbit's clear borders = positive example | Do not make non-button elements such as headings look like buttons; do not pile up too many colored boxes of varying sizes; Menagerie Climb's orange box looks like a button but is not clickable; GNC makes category headings look like buttons |
| Images and Graphics | Clicking a small image should open an enlarged view; associated elements of image + icon + text should be clickable as a whole (to enlarge the target area); Trader Joe's announcement list icons are effective | Do not cram multiple different action options into one image (unless clearly presented with a list/buttons) |
| Symbols and Icons | Icons used as links must be easy to recognize; pair them with text labels if they are not clear enough | Arrow icons can slightly hint clickability but do not overuse them (they are unintuitive and easy to miss); CNN's arrows enhance the clickability of black boxes but are still not as good as traditional designs |
Why: Deviating from traditional link design to enhance clickability is feasible, but excessive deviation causes confusion and backfires.
4.2 Banner Blindness: Content that looks like ads gets ignored (Banner Blindness)
Core principle: Banner Blindness = users automatically ignore "content that looks like ads or content placed in ad positions" to improve efficiency (a form of Selective Attention). It has persisted since 1997, and as design and advertising evolve, users' ability to ignore such content keeps growing.
Four trigger mechanisms:
| Mechanism | Meaning | Empirical evidence / counterexamples |
|---|---|---|
| Ad placement | Content in customary ad positions such as the top and right sidebar is ignored | Eye-tracking study: users did not look at all at top ads on Google SERPs (even when they departed from traditional banner styles) |
| Visuals that "look like ads" | Features such as colored backgrounds, rectangles, special formatting, and text embedded in graphics trigger ignoring | A blue rectangular ad in an article on bacnyc.org was completely ignored because its style differed |
| Proximity poisoning | Genuine content near ads is mistakenly judged as ads by association (Gestalt "proximity" principle) | On apartmenttherapy.com, users glanced at the right sidebar, judged it to be ads, and ignored the DIY tutorial video inside it |
| Hot-potato effect | Once irrelevant content is seen in an area, gaze is quickly moved away, and that area is even avoided on other webpages | On cascada.travel, the right sidebar contained both relevant content and ads, but users labeled it an "ad zone" at a glance and never looked again |
Mobile: On small screens, ads are often embedded within content areas and hard to avoid (a Samsung Galaxy ad that appeared suddenly attracted multiple fixations);Faux Ads——large images/graphics are misjudged as ads because of their different style (a section on generac.com containing installation information was ignored because it looked like an ad).
Counterexamples / How to prevent "content poisoning":① Choose appropriate colors/fonts/backgrounds/styles so genuine content does not take on an "ad look";② Conduct usability testing to check whether key content in top banners/right sidebars is ignored;③ Do not mix ads and content in the same visual area.Why: Ads are necessary for internet business models and cannot be removed entirely, but designers must optimize content presentation to ensure users do not miss important information because it looks like an ad.
V. Animation & Motion in UX
Sources: 1 article: The Role of Animation and Motion in UX
Core principle: UI animation must be subtle, brief, and understated. Its greatest strength is also its weakness——it grabs attention quickly (peripheral vision is sensitive to motion, an instinct originally for detecting danger), so any irrelevant motion is a distraction. Animation should serve as a "smooth and easily perceivable visual feedback tool," not transition filler. It helps users build a mental model of the system.
Six uses of motion:
| # | Use | How to use / positive examples | Counterexamples |
|---|---|---|---|
| 1 | Feedback | Lets users perceive that an action has been received; addresses change blindness (users missing static feedback). On Epicurious, words in the shopping list turn from gray to black after input to indicate acceptance; Airtable's drag-and-drop column reorder animation previews the new order | On Cuisinart, the cart badge has no animation after adding an item and is far from the button, making it easy to miss and leading to duplicate additions |
| 2 | State Change | Intuitively indicates that the interface has switched to a different state. In Material Design, a pencil icon changes to a "+" to signal a mode switch from "edit" to "add"; loading indicators/skeleton screen shimmer animations indicate loading | When Hipmunk loads, it simultaneously shows a flying chipmunk + numbers counting 0→754 + placeholders + progress bar + ellipses; too many animations weaken each other |
| 3 | Spatial Metaphor and Navigation | Helps users understand positions and paths in the information space and prevents disorientation (especially on mobile). iOS Photos zoom animation for switching between "year/month/day"; Amtrak sliding between ticket-purchase pages to show process progression; WebMD accordion with scroll + expand animation so users know they have not jumped to a new page; smooth scrolling for anchor links on The Met website | WebMD counterexample: accordion content jumps straight to the top of the screen with no animation, making users think they have arrived at a new page |
| 4 | Signifier | Uses motion to indicate how to interact. The Apple Music "Now Playing" card slides up into place, hinting it can be pulled down to close; Car2Go list items give a brief bounce on swipe, indicating that swiping reveals more options | —— |
| 5 | Attention Grabbing | Benign when used sparingly. On Refinery29, a radiating halo on a poll slider knob in an article enhances indication | On Outline, moving curves on content pages serve no purpose and draw attention away from the content |
| 6 | Attention Hijacking (dark pattern) | (This is a negative use) Using motion to mislead users and trigger fear/loss aversion | On warmlydecor.com, a flashing countdown clock claims a "sale is ending soon" (every item always shows less than 1 hour remaining no matter when you visit), activating loss aversion to force impulse purchases |
Why / overarching counterexample principle: Appropriate motion improves experience (conveying feedback, state changes, preventing disorientation, adding signifiers), but overuse causes annoyance, distracts attention, and ultimately harms experience. Judgment criterion: Is this animation "helping users understand," or is it just "attention-seeking/manipulative"?
VI. Testing Visual Design
3 source articles: Testing Visual Design / Using the Microsoft Desirability Toolkit / Mood Boards
6.1 Two major categories of visual testing: attitudinal vs behavioral
Core principle: Visual design testing falls into two categories——Attitudinal(collecting subjective feelings/opinions, suitable for evaluating aesthetics and brand consistency) and Behavioral(observing actual interaction, suitable for evaluating the impact of visual design on task completion and usability). "Users say it looks good" ≠ "Users can use it smoothly"; both types are needed.
Attitudinal methods(usually use static images, no real interaction required):
| Method | Purpose | How to do / notes |
|---|---|---|
| 5-Second Test | Evaluate first impression | Show the design for 5 seconds then hide it, record "gut reactions"; do not tell users the duration in advance |
| First-Click Test | Evaluate whether content can be found accurately | Give a task, record the first click; suitable for interfaces where users have clear goals |
| Preference Testing | Compare preference among 2–3 designs | Ensure differences are significant, control changed elements, randomize display order to avoid order bias |
| Add visual questions after usability testing | Evaluate overall impression | Conduct behavioral tasks first, then do attitudinal evaluation to avoid affecting behavioral testing |
Four questioning methods for evaluating responses: Open-ended preference explanation (rich in detail but may be vague and off-topic, suitable for moderated + unmoderated)/ Open-ended word selection (concrete and unrestricted, but time-consuming to analyze and requires grouping into themes, suitable for moderated)/ Closed-ended word selection (easy to analyze + validates brand attributes, but less likely to discover new insights, suitable for moderated; randomize word order)/ Numeric rating scales (fast quantification, but limits new insights, suitable for unmoderated).
Behavioral methods:① Eyetracking (analyzes visual focus points/dwell time, evaluates layout effectiveness, optimizes CTA visibility, produces gaze plots + heatmaps);② A/B testing (compares performance of two versions on click-through rate/conversion rate, evaluates the impact of color/typography/layout on behavior).
6.2 Microsoft Desirability Toolkit
Core principle: Uses Controlled Vocabulary(preset word list for users to select from) to measure users' attitudes toward an interface. Developed by Joey Benedek and Trish Miner in2002, the original version included118 product reaction word cards to evaluate emotional responses.
Why use controlled vocabulary instead of free description: Reduces semantic uncertainty during analysis (when people freely say "appealing," everyone understands it differently). But it cannot eliminate problems entirely (some people have a negative bias toward "complex").
How to adjust the word list (for visual desirability testing):
- Include relevant words that could describe the interface + add specific words according to research goals;
- Remove words that relate only to function/content/performance(such as "controllable" "too technical");
- Shorten to under 25 words to reduce reading fatigue; randomize order to reduce selection bias;
- Must include positive/negative/neutral words to fully reflect attitudes. Examples: Positive = Friendly · Empowering; Negative = Irrelevant · Patronizing; Neutral = Stable · Approachable. No real user interaction is needed; showing screenshots/mockups is sufficient.
Five data analysis techniques(with empirical numbers):
- Word frequency ranking (e.g., 71% selected "Fresh" to describe the design);
- Compare differences across user groups (54% of experienced users selected "Exciting" vs only 13% of novice users selecting the same word);
- Compare design versions (83% of users described the new version as "Professional" vs only 20% describing the old version);
- Evaluate brand-trait consistency (predefine which words match brand positioning, count selection proportion);
- Venn diagram visualization for grouping——example: young users (18–25) selected "Innovative/Fresh," older users (35+) selected "Trustworthy/Professional," and the overlapping area shows both groups selected "Simple/Clean" (take the top 5 descriptive words per group to make the diagram).
Applicable for: Measuring differences in visual desirability across multiple versions, comparing perceptions across user groups, evaluating whether a design conveys brand traits.
6.3 Mood Boards
Core principle: A Mood Board is a visual tool that uses collages of images/videos/text to convey a "specific feeling." It translates abstract emotional words into visible visual directions, is easy for people without design experience to understand, aligns team direction, and reduces miscommunication.
Why use / examples: Emotional words alone ("inspiring/energetic/bright") establish tone but cannot directly guide visuals; through a mood board (scenes of young workers working hard + urban energy landscapes + blue-yellow color scheme), the team can clarify the style. Uses: defining UI primary colors and visual characteristics, placing tone keywords/marketing concepts/interaction patterns as reference for subsequent style guides, collaborative team inspiration gathering.
When to create: Early design stage (new product or major redesign, the "Define/Ideate" stage of design thinking); team collaboration (led by UI/visual designers, with participation from product owners/design leads/content managers).Recommend creating multiple versions to explore different visual themes (two mood boards for the same travel app can convey completely different themes, helping the team narrow the gap). Can also be used for Personas (visualizing interests/residence/occupation).
How to make one (6 steps):① Audit existing brand identity/style guides to ensure consistency;② Choose tools (physical whiteboards are hands-on but inconvenient for remote work/hard to save and share; digital tools Miro/Mural/FigJam facilitate real-time collaboration);③ Choose mood——discuss target user feelings, define 4–5 keywords, use dictionaries/mind maps to find synonyms, analyze subtle differences, and group them;④ Collect visual resources (Google Images/social media/Pinterest/Behance/physical magazines);⑤ Arrange (enlarge or center the most important resources, group similar items, use white space to maintain hierarchy);⑥ Share and collect feedback (annotate with sticky notes, green = keep/red = avoid).
Counterexamples: Do not pile up large numbers of screenshots/examples — this will bias the mood board toward "functionality" rather than "a specific emotion," making it better described as a "competitive analysis board / reference board" rather than a mood board; do not place mutually contradictory images on the same mood board — if you have multiple concepts, create separate boards.
VII. 4 articles that do not belong to visual design (misfits, briefly described and labeled)
These 4 articles are categorized under the "Visual Design" directory, but their topics actually belong to the user research methods or team / analysis domains; only pointer-style brief descriptions are provided here, without detailed expansion.
| Article | Actual category | One-sentence key point |
|---|---|---|
| Affinity Diagramming | Research methods / collaborative synthesis | A collaborative mapping method that clusters scattered observations/ideas by theme using sticky notes. 3 steps: write sticky notes independently (5–10 minutes; color coding can distinguish quotes vs observations) → group into themes and apply labels → prioritize and use dot voting to determine action items. Also known as affinity mapping / snowballing; easily confused with card sorting (the latter is mainly for information architecture). Dos: screen large datasets first / encourage diverse perspectives (diverge-converge) / define themes clearly; Don'ts: do not over-categorize (allow one sticky note to be copied into multiple groups), do not ignore small groups. |
| UX Mapping Methods · Visual Design Guidelines | Research methods / visual diagramming (touches on visual design but the core is the map) | The process of visually polishing UX maps (empathy maps / journey maps / service blueprints / roadmaps). When to prioritize visual quality: when the audience is broad / for public display / when impact is high. 6 steps: choose a tool (PPT/Excel/Figma) → build a visual system (headings 60–80 pt, body text 12–18 pt black, 3–6 color palette) → build the base structure (matrix or swimlanes; use thicker gray/black structure lines) → add content (place main labels first) → refine (alignment / even distribution / legend). Maps almost always start from rough drafts before being refined; do not pursue beauty for beauty's sake — improve through testing and feedback. |
| Groupthink in UX Work | Team process / decision-making psychology | Suboptimal decision-making caused by suppressing individual views in pursuit of consensus and harmony (especially common in highly cohesive teams). Of Irving Janis's eight symptoms, four are common in UX: collective rationalization / illusion of unanimity (silence mistaken for consensus) / self-censorship / direct pressure on dissenters. Prevention methods for five scenarios: brainstorming (set the rule "there are no stupid ideas" + independent thinking first), workshops (clarify that the facilitator only guides and does not decide + diverge-converge + dot voting), focus groups (diverse recruitment + warm-up), trend-chasing (competitor testing + weigh costs), remote work (rotating facilitation + anonymous feedback + clear communication rules). |
| Downsides of NPS | Analysis / metrics | Net Promoter Score NPS (proposed by Fred Reichheld) asks "How likely are you to recommend us to a friend?" (0–10): Detractors 0–6 / Passives 7–8 / Promoters 9–10. Downsides: limited recommendation ability (having no one to recommend to does not mean the product is bad), easily manipulated (inducing high scores / only sending to satisfied customers), information loss (ignores 7–8 passives; both 0 and 6 count as detractors with no way to distinguish them), requires larger sample size (to achieve a 15% margin of error you need about 88 people vs only about 40 for ordinary rating scales). Improvements: record each user's actual score to calculate the mean + error analysis, pair with other metrics such as task completion rate/time, do not use NPS alone. |
Sourced from NNGroup Topics / Visual Design — Visual Design (design system and icon subset, 19 articles). The parent article on usability testing methods / heuristics / attitude vs behavioral data can be found at NNGroup Usability Testing and the 10 Usability Heuristics (full table of 10 heuristics · application to complex applications · user pleasure hierarchy · testing methods: 5-user rule / recruitment / remote / task scenarios / step-by-step tasks / attitude vs behavior / 4-step analysis / small-sample error / competitive evaluation); for component-level icon/control usage see Apple HIG Component Decision Manual (63 components · when to use which); for Apple's latest glass style see Apple HIG: Liquid Glass New Design Language + SF Symbols + Typography (iOS 26 Visual System). Images/videos/original files (accordion experiment diagrams, banner blindness eye-tracking videos, motion mov/mp4 files, Desirability Venn diagram, etc.) are retained in sources.
Sources and related materials
- NNGroup Usability Testing and the 10 Usability Heuristics (full table of 10 heuristics · application to complex applications · user pleasure hierarchy · testing methods: 5-user rule / recruitment / remote / task scenarios / step-by-step tasks / attitude vs behavior / 4-step analysis / small-sample error / competitive evaluation)
- Apple HIG Component Decision Manual (63 components · when to use which)
- Apple HIG: Liquid Glass New Design Language + SF Symbols + Typography (iOS 26 Visual System)