Skip to main content
Generalhashgraph-online

mapping-cultural

Apply cultural mapping — using shared conventions (icons, colors, gestures, metaphors) to convey what a control does when natural spatial mapping isn''t available. Use when designing icon-based UIs, choosing colors for status indicators, picking gestures for touch interfaces, or selecting metaphors to make abstract operations concrete (the trash can, the gear, the magnifying glass). Cultural mappings are weaker than spatial ones — they require prior learning — but they''re the workhorse of icon-driven interfaces. The risk is assuming a convention is universal when it''s actually domain-specific.

Stars
336
Source
hashgraph-online/awesome-codex-plugins
Updated
2026-05-27
Slug
hashgraph-online--awesome-codex-plugins--mapping-cultural
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/hashgraph-online/awesome-codex-plugins/HEAD/plugins/HDeibler/universal-design-principles/plugins/interaction-and-control-principles/skills/mapping-cultural/SKILL.md -o .claude/skills/mapping-cultural.md

Drops the SKILL.md into .claude/skills/mapping-cultural.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

Mapping — cultural (convention and signaling)

Cultural mapping carries meaning through shared convention. The user knows the gear means "settings" because they've seen it a thousand times before. They know red means stop, green means go, yellow means slow. They know the trash can means delete and the magnifying glass means search. None of these mappings is innate — they all had to be learned somewhere — but within a culture that recognizes them, they're effectively free.

Cultural mapping is the workhorse of icon-driven interfaces, because the spatial form of mapping is rarely available for software UI. You can't physically place a "settings" control next to "the settings"; settings are abstract. So you reach for a metaphor — a gear, a wrench, a sliders icon — and rely on the user's prior exposure to interpret it.

When cultural mapping works

A cultural mapping works when three conditions are met.

The convention is genuinely universal in your audience. A red stop sign is universal in driving cultures. A floppy disk for "save" is recognizable to most adults in industrialized cultures, though weakening as a generation that never used floppies grows up. A mortarboard hat for "education" is universal in cultures with that academic tradition.

The convention is the dominant convention, not one of several. A magnifying glass for "search" is dominant. A gear for "settings" is dominant. But a globe icon could mean "internet," "international," "translation," or "external link" — none of those is the dominant interpretation, so the icon needs a label. When two conventions compete, you need disambiguation.

The cost of misinterpretation is low or recoverable. If a user clicks the gear thinking it's settings and it turns out to be "advanced filtering," the cost is one click and a moment of recalibration. If a user clicks the trash can thinking it deletes the current item and it actually empties their entire account, the cost is catastrophic. Strong conventions can carry low-stakes operations; high-stakes operations need explicit labels even when conventions exist.

The four sources of cultural meaning

Cultural mappings draw on four kinds of prior knowledge.

Pictographic — direct visual reference to a real-world object. The trash can looks like a trash can; the camera icon looks like a camera; the lock icon looks like a padlock. These are the most transparent kind of cultural mapping because they require only that the user has seen the object before. They survive across most cultures because the underlying object is widely known.

Indexical — visual reference to a sign or symbol whose meaning is established. A red octagon means stop because road signage has trained people to read it that way. The "@" symbol means email because email systems adopted it. The hash mark "#" means tag because Twitter and other platforms made it so. These conventions have to be learned, but once learned they're robust.

Metaphoric — borrowing the visual form of one domain to suggest the function of another. The "desktop" metaphor in operating systems borrows from physical desks and folders. The "cart" icon in e-commerce borrows from supermarket shopping carts. The "feed" icon (parallel curved lines like a radio antenna) borrows from broadcasting. These metaphors require both that the user knows the source domain and that they recognize the borrowing.

Arbitrary — purely conventional symbols with no inherent meaning. The hamburger menu (three horizontal lines) means "menu" because designers agreed it would. The kebab menu (three vertical dots) means "more options" by similar agreement. These are the most fragile mappings because they have no anchor in physical reality or other domains; they only work because users have been trained.

Choosing icons that map well

When you need an icon for a function, the order of preference is usually:

  1. A standard icon for that function (gear for settings, magnifying glass for search). Use the dominant convention if one exists.
  2. An icon that pictographically resembles the function (a trash can for delete, a camera for take-photo). Even if it isn't the standard convention, it's likely interpretable.
  3. An icon paired with a text label. Adding a label is not failure; it's insurance against an unfamiliar convention. For functions used infrequently, always pair the icon with a label.
  4. A text-only label. When no good icon exists and the function is important, just say what it does in words. "Settings" as text is more reliable than an unfamiliar icon.

The decision often comes down to: how confident are you that your audience will recognize this convention? When in doubt, label.

Worked examples

A "share" icon

Three competing conventions exist: an upward arrow out of a box (Apple's preferred), a node-and-edge graph (Android's preferred), and a chain link (sometimes used for "copy link"). None is universal. A user accustomed to one platform may not immediately recognize the other. The right approach in cross-platform software is often to use the platform-native icon — Apple's icon on Apple devices, Android's icon on Android — paired with a brief label on the first encounter.

A status indicator color

Green = good, red = bad, yellow = warning. This convention is so strong it survives even in interfaces designed for color-blind users (where it's typically supplemented with shape: green check, red X, yellow triangle). But the convention is culture-specific in some details — in some Asian cultures red can mean "auspicious" or "celebration," not "stop." For globally deployed software, the safe path is to use the convention but reinforce it with a non-color cue.

A gesture for "dismiss"

Swipe down to dismiss a modal. Swipe up to dismiss a notification. Swipe right to archive. Swipe left to delete. All of these conventions exist in some apps. None is universal. New users typically need explicit onboarding to learn any of them, and once learned the conventions are sticky — changing them in a redesign generates user complaint disproportionate to the change.

The lesson: gesture-based cultural mappings are weaker than icon- or color-based ones, because the gesture itself is invisible. Provide a discoverable visual cue (an arrow, a swipe hint, a brief animation on first use) for any gesture you rely on.

"Filter" vs. "Sort"

Two icons compete: a funnel (filter) and an "A-to-Z" arrow or up-down arrows (sort). Many users confuse them, especially when both appear together in a toolbar. The fix is usually to label both — the icons alone are insufficient because the conventions are not strong enough to distinguish two related but different operations.

Refresh / reload

A circular arrow is the dominant convention for "refresh." It's strong enough that most users recognize it without a label. But in contexts where "refresh" is rarely used, or where the arrow could be confused with "undo" (also sometimes a curved arrow), a label removes ambiguity.

The "more" menu

The kebab menu (three vertical dots) is now the dominant convention for "more options" or "context menu." It is recognized by most desktop and mobile users. But it's a relatively recent convention — it's purely arbitrary, and it took years of consistent use across major platforms to become dominant. New conventions of this kind take longer to spread than designers usually expect.

Common anti-patterns

Using a domain-specific icon as if it were universal. A developer-tools icon (a wrench-and-screwdriver) for a non-developer audience. A database icon (a stack of cylinders) for a non-technical user. A musical-notation icon for a non-musician. These conventions exist within their domain and are nearly invisible outside it. Use only the conventions your actual audience shares.

Relying on color alone for status. Red borders, green check marks, yellow warnings — they all fail for the substantial fraction of users with color vision deficiencies. Always pair color with a second cue (shape, label, position).

Inventing a new convention and assuming it will catch on. Designers occasionally try to introduce a novel icon for a common function (a custom "search" icon that isn't a magnifying glass). Even if it's well-designed, users will struggle, because they don't know the convention and have no way to learn it except by trial. Stick with the dominant convention unless you have a very strong reason to deviate.

Cultural conventions assumed across regions. A mailbox icon shaped like a US-style flag-and-flag mailbox is meaningless in countries with different mail-collection conventions. A pound-symbol icon ("£") might mean "British currency," "weight in pounds," or "tag depending on region." International products need to verify regional recognition or default to language-localizable text.

Using a label-bearing icon and then duplicating the label. "[gear icon] Settings" with the icon and label adjacent is fine. "[Settings: gear icon and word]" with the gear inside the word redundantly is just clutter. If you have a label, the icon is decoration; if you have an icon, the label is reinforcement. Pick a primary and let the other support it.

When natural and cultural mapping can be combined

Cultural conventions can supplement natural mappings rather than replace them. A volume slider that goes up for louder (natural mapping) and is shown with a speaker icon at one end (cultural mapping reinforcing the meaning) is stronger than either alone. A brightness slider that goes right for brighter (cultural convention) with a sun icon at the bright end (cultural reinforcement) is doubly clear. Stack mappings when you can afford the visual cost.

Heuristic checklist

Before relying on a cultural mapping, ask: Is this convention dominant in my audience, or just one of several? If multiple competing conventions exist, label. Has my audience definitely been exposed to this convention? If you're unsure, label or test. What is the cost of misinterpretation? If high, label regardless of convention strength. Does the icon survive across cultures, regions, and abilities? If not, supplement.

Related sub-skills

  • mapping-natural — for the (rare, valuable) cases where you don't have to fall back to convention.
  • iconic-representation — when and how iconic conventions form and stabilize.
  • recognition-over-recall — cultural mappings work because users recognize, not recall.
  • consistency — once a convention is established within your product, applying it consistently strengthens the mapping for your users specifically.

See also

  • references/icon-vocabulary.md — a working catalog of dominant icon conventions and where they come from.