Real-World Metaphors in UI

UI patterns borrowed from the physical world reduce the learning curve because users already know how they work. A card feels like something you can pick up. A carousel feels like flipping through a stack. A drawer feels like it slides out from the side. These metaphors carry affordance — the user knows what to do before reading any instructions.

Use them deliberately, not decoratively.

Common Metaphors and When to Use Them

Card

A card is a bounded, self-contained unit of content — like a physical index card or a product on a shelf.

Use when:

• Content items are discrete and comparable (products, people, articles, tasks)
• Each item needs to be scanned quickly and potentially acted on
• Items benefit from a visual thumbnail, image, or icon