UI Patterns & Anti-Patterns

Some things just feel right: clicking a trash can icon to delete, or tapping a hamburger menu to see more options. These aren’t accidents — they’re UI patterns.

Patterns are recognizable solutions to common problems. But just like in coding, some patterns are so common they’re almost invisible — and others? They’re best avoided.

Today, we’ll explore the best (and worst) patterns in UI design — so you can build interfaces that are both familiar and functional.

✅ Common UI Design Patterns

These patterns work because they’re predictable and user-tested:

📦 Card Layouts

Used for: articles, product listings, profiles

  • Visual containers with consistent size and spacing
  • Easy to scan and tap

📍 Modals & Dialogs

Used for: alerts, confirmations, form inputs

  • Should be focused and dismissible
  • Avoid nesting modals inside modals

🔍 Search with Suggestions

Used for: product search, location input

  • Real-time results help users feel in control
  • Use loading indicators and keyboard navigation

📱 Bottom Navigation

Used for: mobile apps

  • Easier to reach with thumbs than top tabs
  • Limit to 3–5 core actions

📄 Progressive Disclosure

Used for: onboarding, settings, complex forms

  • Show only what’s needed, reveal more on demand
  • Keeps UI clean and focused

🚫 Common UI Anti-Patterns

These might look clever, but they often hurt usability:

🎭 Mystery Meat Navigation

Icons without labels (e.g., just a star, just a cube)

  • Users don’t know what they do until they click
  • Always pair icons with text if possible

🚧 Infinite Spinners

Loaders with no feedback

  • Users don’t know if the app is stuck or still working
  • Show a message, estimated time, or skeleton content

🐇 Overloaded Carousels

Rotating banners, often on homepages

  • People rarely interact with slide 2 or 3
  • Consider a static hero instead

🧩 Inconsistent Controls

Different buttons for the same action

  • “Submit” vs “Send” vs “Done” — pick one!
  • Keep interactions consistent across screens

🧱 Walls of Text

Massive unbroken paragraphs

  • Use headings, bullet points, and spacing
  • Respect the reader’s attention span

🧠 Why Patterns Matter

People don’t read interfaces — they scan them.

Using familiar patterns reduces learning time, improves accessibility, and helps users accomplish tasks quickly.

Misusing patterns — or inventing new ones without reason — leads to confusion, frustration, and lost engagement.

“Good design is as little design as possible.” — Dieter Rams

🧪 Your Challenge

Pick an app or website you use regularly. Ask yourself:

  • What design patterns do you see?
  • Are there any anti-patterns that bug you?
  • How would you fix them?

Sketch your improved version or annotate a screenshot. If you’ve built something already, revisit it with these principles in mind.

🔗 Further Reading

Next up: we’ll bring it all together and introduce a capstone project — your opportunity to design an interactive app from start to finish.