Let’s get to the bottom of it. In this series of online workshops, Vitaly Friedman, UX consultant and creative lead behind Smashing Magazine, will be taking a microscopic examination of common components and smart design patterns in navigation — on desktop and on mobile.

We’ll study 100s of hand-picked examples — all of them will be coming from user research and usability studies of real projects — proven to work or fail in practice.

The workshop includes:

• 1500+ workshop slides with practical examples and action points,
• 100 checklist cards on everything from carousels to web forms,
• Editable text file to adjust for your needs,
• Access to the evergreen deck, updated regularly,
• Live, interactive sessions,
• Hands-on exercises and reviews,
• All workshop recordings,
• Dedicated Q&A time for all your questions,
• A Smashing Certificate.

Note: If you already attended Vitaly’s “Smart Interface Design Patterns” workshop, it’s still worth attending this one.

We’ll spend 6h exploring all facets of navigation in detail, incl. complex filtering, mega-drop-downs, overlays and carousels, which we haven’t covered just yet. Plus, new examples and case studies and a thorough Q&A with review of your website/app navigation as well.

In this workshop, we’ll explore:

• How people use mobile interfaces and how we can optimize for touch input to avoid rage taps and rage clicks.
• How to drive traffic and engagement to important nav items, with examples on how to define and reflect priorities to highlight navigation that matters, while keeping the rest noticeable as well.
• Accordions, with layout and interaction design considerations for cards, FAQ, table of contents and pricing plans.
• Hamburger menu navigation, with guidelines and common mistakes to avoid.
• Bottom bar navigation, with examples and guidelines to get it done right on mobile.
• Overlay menus, and how to organize content well to avoid maintainability issues down the line.
• Mega-dropdowns, and how to deal with multi-level navigation to speed up the user interaction.
• Carousels, when to use them, when not to use them, and how to design them better to encourage interaction and increase click-through-rates.
• Filters and sorting, how to design them, where to place them, and how to make them work for your customers.
• Search, how to use autocomplete and how to display search results to maximize engagement.
• Breadcrumbs, and how to display the user’s path when there isn’t enough space to display it.
• Interaction of navigation menus, when to open/close navigation menus on tap/click/hover.
• Obscure navigation concepts like navigation queries, tap stories, curtain navigation, window split etc. that can drive engagement and conversion.
• Review of your website/app nav, to discuss some options to fix your navigation issues on spot.
• Design anti-patterns to prevent running into maintenance issues and “slow UX decay”.

Who is this workshop for?

This workshop is for interface designers, front-end designers and developers who’d love to be prepared for complex and time-consuming design challenges in navigation.

You’ll walk away with a toolbox of techniques and examples of doing things well — in your product, website, desktop app or mobile app.

About Vitaly Friedman

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing or speaking at a conference, he’s most probably running front-end/UX workshops and webinars. He loves solving complex UX, front-end and performance problems.

Time & Schedule

This remote workshop is split over two days. The schedule may change slightly based on how we are progressing through the material, giving time to answer questions as we go along. The workshop will be running from 9:00 AM PDT to 12:00 PM PT on Tuesday and Wednesday on August 31 and September 1.

• Thu, December 2, 09:00 – 12:00 AM PT (18:00 – 21:00 CET)
• Fri, December 3, 09:00 – 12:00 AM PT (18:00 – 21:00 CET)

You can always re-watch the sessions at a more convenient time and follow the workshop at your own pace.

Day 1

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:30 AM
How do people use mobile interfaces and how do we optimize our navigation to avoid rage taps and rage clicks? Defining priorities for navigation, accordions, hamburger menus, bottom bar navigation, overlay menus and mega-dropdowns.

11:30 AM – 12:00 PM
Q&A with Vitaly on the day’s material. Networking!

Day 2

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:30 AM
We’ll continue with mega-dropdowns and will dive into more complex multi-level navigation, filters, sorting and search. We’ll explore interaction of navigation menus, carousels, obscure navigation concepts and design anti-patterns.

11:30 AM – 12:00 PM
Q&A with Vitaly on the day’s material. Networking!

What hardware/software do you need?

To view the webinars, please install the Zoom client for Meetings, which is available for all the main OSs. It may take a little time to download and install, so please grab it ahead of time if you can.

You’ll need a lot of sleep reserves since it’s going to be a couple of packed sessions! Bring a lot of attention to detail and non-standard thinking to this one! ;-)