Unlocking UI Metaphor Design: Types, Methods, and Real‑World Examples

Metaphor design is a widely used yet rarely discussed concept; users often encounter it without knowing what it truly is.

In simple terms, metaphor design maps familiar real‑world objects to interface elements, making unfamiliar or complex concepts and operations easier to understand.

It is not the same as skeuomorphism; metaphor is a broader concept that fills interfaces with various metaphorical elements. This article classifies common metaphor elements by visual, auditory, and tactile interaction types and presents four metaphor design methods for reference.

1. Visual Metaphors – Static

1.1 Text Metaphors

Textual metaphors in interfaces fall into two categories: functional naming language and product definition language.

Common functional naming examples include “unlock”, “navigate”, “login”, etc. These names use real‑world meanings (e.g., navigation as guiding a route) to help users remember functions.

Product definition language includes terms like “market” in an app store or “assistant” in a file helper, conveying both function and emotional resonance.

1.2 Color and Material Metaphors

Two forms of color metaphor exist: indicative design (e.g., green icons for online status, red for busy) and atmosphere creation (e.g., blue theme in Alipay to suggest security).

Material metaphor makes interfaces feel less rigid, such as a reading app using a paper‑like texture to simulate a real book.

1.3 Graphic Metaphors

Graphic elements with metaphorical features turn complex actions into familiar visual cues. Examples include a lock for password, a rocket for acceleration, a palette for theme, a gear for settings, a globe for browser, an umbrella for security, etc.

2. Visual Metaphors – Dynamic

2.1 Behavioral Metaphors Based on User Habits

These simulate real‑world gestures and actions, such as swipe, pinch, rotate, drag, placing files in a recycle bin, adding items to a shopping cart, or slide‑to‑unlock.

2.2 Physical Property Metaphors

Designers mimic natural physical properties: page‑turning effects in e‑readers, ripple feedback on touch, acceleration and inertia in page transitions, etc.

3. Auditory Metaphors

Sound effects that map to interactions, such as the trash‑can sound when deleting a file, paper‑rubbing sounds when turning pages in an e‑book, or game sounds that reinforce actions (e.g., planting a seed, shooting, zombie noises).

4. Tactile Metaphors

Simulated touch feedback that mirrors real‑world sensations, like the haptic feel of the iPhone 7 home button, 3D Touch shortcuts, or vibration feedback during collisions in games.

Design Methods for UI Metaphors

The essence of UI metaphor design is linking an interface element to a real‑world counterpart, extracting similar attributes so users can instantly recognize the element’s meaning or function. The four approaches are:

Conceptual Metaphor : e.g., desktop interfaces in operating systems mimic a physical desk.

Feature‑Based Metaphor : e.g., using a shield icon to represent security software.

Structural Metaphor : e.g., email client folders unfolding like a drawer.

Behavioral Metaphor : e.g., dragging a file to the recycle bin simulates discarding paper.

Effective metaphor design can convey functionality succinctly, align with users' mental models, and guide correct actions.

The summarized types and methods aim to inspire designers with practical insights.