Navigation patterns that drive REAL impact

Published Nov 27, 2024

The Wireframe:

• The truth about navigation patterns
• Four patterns that drive results
• How to make faster UI decisions in Figma

The Truth About Navigation in 2024

Here's something controversial: Your innovative navigation pattern probably isn't that innovative. And that's okay.

I've learned that navigation isn't where you want to reinvent the wheel. Your users come with expectations built from years of using other products. Fighting those expectations is like swimming upstream—you're just making everything harder.

But that doesn't mean all navigation should look the same. Let's break down what actually works.

Four Navigation Patterns That Drive Real Results

1. Priority and Progressive Disclosure

This is my go-to pattern for complex products. Instead of overwhelming users with every possible option, show what matters most first.

How I implement it:

• Start with core features in the main nav
• Hide power user features in submenus
• Use analytics to validate what belongs where

2. Off-Canvas Navigation

Perfect for products with extensive features but limited screen real estate. The key is knowing when to use it.

When to use it:

• Mobile-first products
• Desktop apps needing maximum content space
• Products with deep feature sets

When to avoid it:

• Simple products with few navigation items
• Products where quick navigation between sections is crucial
• Experiences requiring constant tool access

3. Sticky vs. Fixed Navigation

This one's simple but often misused. Here's my rule of thumb:

Use sticky navigation when:

• Users need constant orientation (like in a complex dashboard)
• Quick actions are crucial (like save or publish buttons)
• The content is long but navigation needs remain consistent

Use fixed navigation when:

• Screen space is at a premium
• The navigation hierarchy is simple
• You need to maintain context across scroll positions

4. Bottom Navigation

Recommended by LinkedIn

Are design systems just a bandaid, Figma tips for UI3,… UX Collective 3 months ago What’s next for Figma, senior in 2 years, UX designer… UX Collective 2 months ago Creativity is the only thing, moving from Figma to… UX Collective 2 weeks ago

Mobile designers, listen up. Bottom navigation isn't just a pattern—it's a necessity for modern mobile apps. But there's a right and wrong way to do it.

The right way:

• 3-5 items maximum
• Clear icons + short labels
• Most important actions within thumb reach
• Consistent across all main screens

The wrong way:

• Cramming in 6+ items
• Using unclear icons without labels
• Hiding it on scroll
• Changing it between screens

The Bottom Line

The best navigation isn't the most innovative—it's the one users don't have to think about. Before you try to reinvent navigation, ask yourself:

1. Does this actually solve a user problem?
2. Will this make the product more money?
3. Is this worth the cognitive load on users?

If you can't answer "yes" to at least two of these, stick with proven patterns.

Together with Framer

Designing a Website 🤝🏻 Building a Website

If you’re a designer tasked to create and publish visually stunning websites, there’s a tool for that. If you want to boost creativity while speeding up the overall web development process, you need Framer—no coding required.

The next best no-code website builder for designers, Framer:

• feels and works like Figma and other design tools you know
• lets you publish your design as a real website in seconds
• supports breakpoints, animations, and even a whole CMS

Plus, you can even import designs from Figma using our Figma-to-Framer plugin so you don’t have to start from scratch.

Are you ready to learn how Framer can streamline your web development process? Learn more now.

How to make faster UI decisions in Figma

To make faster UI decisions, you need two things:

1. A foundation of understanding what's important to your business and customer goals
2. A deep understanding of the tools you're using

I teamed up up with Ridd (host of Dive Club) because we kept seeing the same problem: designers who can think but struggle to execute, or designers who can execute but struggle with strategy.

So we created "How to Think, How to Do", a limited-time offer that bundles our courses together for 50% off.

Get Making UX Decisions and Advanced Figma Academy 2.0 for the price of one.

We've taught designers at companies like Stripe, Microsoft, Amazon and Shopify and the list continues to grow.

This is the only time we will ever bundle these courses.

Offer ends this Friday.

See you next week,

Tommy