Coming Jan 2022! 6h video + UX training

Coming soon!

6h video + live UX training

January 2022

100 Smart Interface Design Patterns & Examples. 6h Video + Live UX Training.

25 video lessons + live online UX training.
For front-end developers and UI/UX designers.
Coming in January 2022.

Get notified when it’s ready

Guidelines & best practices for common components in modern interfaces.

Inventing a new solution for every problem takes time, and too often it’s just unnecessary. We can rely on bulletproof design patterns to avoid issues down the line. This course helps with just that.

We’ll study 100s of hand-picked examples — from complex navigation to filters, modals, tables and forms. We’ll dive into fine intricacies of accessibility, interaction design and usability. And: we’ll design and review each other’s work, together, live.

Vitaly on stage, presenting at Nordic.js in 2019. Watch the intro + sample

In this video course, we’ll explore:

Lesson number:

Designing for Touch

Chances are high that most of your customers use their mobile devices to access your digital products these days. Let’s see how we use devices and how we need to adjust our workflows for touch.

Duration

Lesson number:

Accordions

The workhorse of all interfaces — the good ol’ accordion, or expander. The pattern is everywhere, but too often it’s wrong or inconsistent. Let’s explore common usability traps, gotchas and best practices.

Duration

Lesson number:

Navigation

On mobile, we don’t have much space to display our elaborate navigation options. Let’s discover how we can deal with common navigation issues and which design patterns we can apply to do so.

Duration

Lesson number:

Hamburger

Oh, the infamous hamburger icon! Should it live in the upper right corner or at the bottom of the screen, floating as customers are scrolling and swiping by? Or should we abandon it altogether and use “Menu” instead? Let’s find out.

Duration

Lesson number:

Filters

We often use filters to reduce the scope of results, e.g. to adjust pricing or reduce the number of displayed products. How do we design filters and where do we place them — on mobile and on desktop?

Duration

Lesson number:

Mega-Dropdowns

Complex websites often rely on complex navigation. When a website houses thousands of pages, often combined with micro-websites and hundreds of subsections, eventually the navigation will go deep and broad. And with such a complex multi-level navigation, showing the breadth of options requires quite a bit of space.

For decades, a common behavior for this kind of navigation is to open the menu on mouse hover. And for decades, a common user’s complaint about this pattern has been the absolute lack of certainty and control about how and when the sub-navigation opens and closes.

Duration

Lesson number:

Carousels

It’s common for us as designers to dismiss carousels at first sights. Carousels are noisy, distracting and take up a lot of space. However, when designed well, carousels can serve their purpose well — drive engagement and increase conversion. We just need to move away from the generic view of a carousel towards approaches that usually work slightly better.

Duration

Lesson number:

Modals

Modals, overlays, pop-ups, popovers... they all are disruptive, annoying and frustrating. By their nature, they always interrupt us, slow us down, and often cause more harm than help. Yet sometimes they can be very useful, especially when we need user’s input or don’t want users to lose context while informing them about something important.

In this session, we take a closer look at modals, what kinds of models we can use, how to deal with all of them, and how to design them better without annoying users along the way.

Duration

Lesson number:

Footnotes

A wonderful yet forgotten UI component that’s left behind in all the conversations about navigation — the footnote, or sidenote. Too often, these notes are found scattered at the bottom of the page. Perhaps they deserve a slightly better placement after all.

Duration

Lesson number:

Configurators

Perhaps you have a multi-page wizard, or you’d like your customers to customize your product, or maybe you are designing a language-teaching interface where users complete a series of tasks in a specific order? In all these cases, we need to ensure that users can easily move between steps and complete the task without being slowed down by the UI.

Duration

Lesson number:

Tables

How do we deal with complex enterprise tables, with filtering, sorting, search and inline editing? A deep-dive into the intricate world of complex tables, with design patterns to keep close.

Duration

Lesson number:

Feature Comparison

Chances are high that you’re allowing your customers to select one of the options or variations of your product. However, to choose one of them, they need to be able to compare them easily. And your task is to quickly bring them to the product they will love. How do we get there, especially when we have hundreds of features to compare by?

Duration

Lesson number:

Date Pickers

No date picker is like the other one: they come in various forms and flavors, from date input to date range picker, at times with filters, requirements and input limitations. How can we make date input easy and painless? We’ll dive in and explore dozens of examples.

Duration

Lesson number:

Schedule & Calendars

How do we design interfaces for products which involve some sort of a schedule table — a TV guide, a multi-track music festival or an appointment calendar? We need to reduce complexity to the essence and allow users to navigate all the details without overwhelming them. Let’s figure out how.

Duration

Lesson number:

Sliders

Imagine a helpless little slider masked as a duration filter and tucked away in a sidebar on an airline website. So often such sliders are difficult to manipulate, and too often they frustrate customers and slow down the entire experience. Let’s find out when it makes sense to employ sliders, and how we can make them more usable.

Duration

Lesson number:

Timelines

Every history textbook and every sport event will have some sort of a timeline at their heart: a flow of historic events, or a tennis match timeline, or perhaps a boxing match protocol. So what if you want to provide your customers with an insight into dozens of events happening within a particular timeframe?

Duration

Lesson number:

Maps

With zooming in and out in place, maps seem to be quite obvious to get right. Indeed, they are — unless there are elements that need to be displayed on the map. What if we want to display pins to locations on a shopping mall map? Or what about an election results map with autocomplete, filters, and search? That’s where maps become slightly messier and more complex.

Duration

Lesson number:

Seat Selection

What if we combine all the previous challenges into one? Imagine you are selling tickets for a cinema, a baseball stadium, or an opera house. Surely you’ll want to provide your customers with an overview of available seats, and allow them to select the best seat as well. The challenge is to do it well on mobile. Let’s tackle this beast!

Duration

Lesson number:

Bringing Personality Back to the Web

The web has become quite generic and soulless, hasn’t it? Every single website looks alike, and only few websites manage to convey a unique and charming personality. As a result, nothing is particularly memorable, and only few sites manage to connect with us emotionally.

But we can do better and be charming and unique and attractive without breaking accessibility and usability. Let’s dive into a few techniques to achieve just that!

Duration

Lesson number:

Privacy UX

With GDPR and CCPA in place, we need to think twice about how we ask customers for their data, or specifically, how do we get permissions if we really need them. It’s really the art of asking tough questions at the right time and in the right way.

Let’s take a look at infamous and omnipresent cookie prompts and see how we can make better privacy-related design decisions without hurting the bottom line.

Duration

Lesson number:

Web Forms

Very often forms are inaccessible and difficult to use, with awkward live validation and notorious error messages; not to mention a birthday date-picker starting from 2021, a tiny newsletter checkbox, disabled “submit” buttons and horrendously evil CAPTCHAs in the disguise of street signs and crosswalks. So let’s fix web forms for good!

Duration

Lesson number:

Disabled Buttons

In this segment, we’ll look into common usability issues with disabled buttons, how to fix these issues and when disabling buttons actually makes sense. We’ll start from the beginning, looking into when disabled buttons cause more trouble than help.

Duration

Lesson number:

Modals

Customers are rarely excited about modals, be it overlays, pop-overs or slide-ins. Usually all these beasts are uninvited and unwelcome, interrupting user’s ongoing tasks, and demanding user’s full attention. Yet sometimes we do need them. Let’s see how we can make them better.

Duration

Lesson number:

Trip Planners

One of the common problems in trip planners is information density. We need to show plenty of options, along with a complex form, filters, and real-time pricing updates. Let’s figure out how to bring it all together in an interface that is easy to use for customers.

Duration

Lesson number:

Sorting

When exploring products, we usually filter first. Then, to reduce the scope of available results, we sort. But how do we design a sorting experience that helps customers get to the comfortable range when exploring products?

In this session, we’ll look into design patterns for making sorting more obvious and useful for our customers. Let’s explore which sorting options are important, where to place them, and how to design them better.

Duration

Lesson number:

Infinite Scroll

Infinite scroll can be frustrating. It’s out of user’s control, it’s difficult to remember the position where you are left off, and usually it’s impossible to send a link to the current state in the infinite list. Plus, reaching the footer is an adventure of its own.

However, infinite scroll can work well in practice. In this session, we’ll look into the downsides of infinite scroll and how to fix them for good. We’ll also explore how we can combine infinite scroll, the “load more“ pattern and good ol’ pagination to make the exploration of items easier and more efficient.

Duration

Lesson number:

Search

When customers have a good idea of what they are looking for, they use search. And as they do, they expect autocomplete suggestions to show up. Let’s find out how we can design search UX and autocomplete UX to help customers get to their goal faster.

We’ll explore how we search and how we iterate on search phrases, how to refine the interaction design with the search bar, how to show autocomplete suggestions and when to hide them, how many to show and the important details to reveal while users are searching.

Duration

Lesson number:

Authentication

Password recovery is one of the most expensive features as a good number of customers who attempt to recover password never manage to log in. So how can we make authentication and password recovery slightly more obvious and slightly less frustrating?

In this session, we’ll look into authentication in general, design patterns around login/password, 2-factor-authentication, password phrase, magic sign-in as well as just the right timing to ask for email and password to ensure an accurate input that people can easily remember.

Duration

Lesson number:

Summary

Giddy up — you made it! Well done! Now, let’s wrap up and recap everything we’ve learned in the course and see how it all fits together, and how you can apply all the insights to your regular design work.

Duration

Let’s transform the web into a pleasing and delicious place!

Get once, watch forever. New videos added regularly.

Not just a video course: a growing library of videos & examples. With 25 lessons available today, and more added every few months.

Ideal for interface designers, UI engineers and developers who’d love to be prepared for complex front-end challenges.

Table of Contents →

  1. Lesson number:

    Designing for Touch

    Chances are high that most of your customers use their mobile devices to access your digital products these days. Let’s see how we use devices and how we need to adjust our workflows for touch.

  2. Lesson number:

    Accordions

    The workhorse of all interfaces — the good ol’ accordion, or expander. The pattern is everywhere, but too often it’s wrong or inconsistent. Let’s explore common usability traps, gotchas and best practices.

  3. Lesson number:

    Navigation

    On mobile, we don’t have much space to display our elaborate navigation options. Let’s discover how we can deal with common navigation issues and which design patterns we can apply to do so.

  4. Lesson number:

    Hamburger

    Oh, the infamous hamburger icon! Should it live in the upper right corner or at the bottom of the screen, floating as customers are scrolling and swiping by? Or should we abandon it altogether and use “Menu” instead? Let’s find out.

  5. Lesson number:

    Filters

    We often use filters to reduce the scope of results, e.g. to adjust pricing or reduce the number of displayed products. How do we design filters and where do we place them — on mobile and on desktop?

  6. Lesson number:

    Mega-Dropdowns

    Complex websites often rely on complex navigation. When a website houses thousands of pages, often combined with micro-websites and hundreds of subsections, eventually the navigation will go deep and broad. And with such a complex multi-level navigation, showing the breadth of options requires quite a bit of space.

    For decades, a common behavior for this kind of navigation is to open the menu on mouse hover. And for decades, a common user’s complaint about this pattern has been the absolute lack of certainty and control about how and when the sub-navigation opens and closes.

  7. Lesson number:

    Carousels

    It’s common for us as designers to dismiss carousels at first sights. Carousels are noisy, distracting and take up a lot of space. However, when designed well, carousels can serve their purpose well — drive engagement and increase conversion. We just need to move away from the generic view of a carousel towards approaches that usually work slightly better.

  8. Lesson number:

    Modals

    Modals, overlays, pop-ups, popovers... they all are disruptive, annoying and frustrating. By their nature, they always interrupt us, slow us down, and often cause more harm than help. Yet sometimes they can be very useful, especially when we need user’s input or don’t want users to lose context while informing them about something important.

    In this session, we take a closer look at modals, what kinds of models we can use, how to deal with all of them, and how to design them better without annoying users along the way.

  9. Lesson number:

    Footnotes

    A wonderful yet forgotten UI component that’s left behind in all the conversations about navigation — the footnote, or sidenote. Too often, these notes are found scattered at the bottom of the page. Perhaps they deserve a slightly better placement after all.

  10. Lesson number:

    Configurators

    Perhaps you have a multi-page wizard, or you’d like your customers to customize your product, or maybe you are designing a language-teaching interface where users complete a series of tasks in a specific order? In all these cases, we need to ensure that users can easily move between steps and complete the task without being slowed down by the UI.

  11. Lesson number:

    Tables

    How do we deal with complex enterprise tables, with filtering, sorting, search and inline editing? A deep-dive into the intricate world of complex tables, with design patterns to keep close.

  12. Lesson number:

    Feature Comparison

    Chances are high that you’re allowing your customers to select one of the options or variations of your product. However, to choose one of them, they need to be able to compare them easily. And your task is to quickly bring them to the product they will love. How do we get there, especially when we have hundreds of features to compare by?

  13. Lesson number:

    Date Pickers

    No date picker is like the other one: they come in various forms and flavors, from date input to date range picker, at times with filters, requirements and input limitations. How can we make date input easy and painless? We’ll dive in and explore dozens of examples.

  14. Lesson number:

    Schedule & Calendars

    How do we design interfaces for products which involve some sort of a schedule table — a TV guide, a multi-track music festival or an appointment calendar? We need to reduce complexity to the essence and allow users to navigate all the details without overwhelming them. Let’s figure out how.

  15. Lesson number:

    Sliders

    Imagine a helpless little slider masked as a duration filter and tucked away in a sidebar on an airline website. So often such sliders are difficult to manipulate, and too often they frustrate customers and slow down the entire experience. Let’s find out when it makes sense to employ sliders, and how we can make them more usable.

  16. Lesson number:

    Timelines

    Every history textbook and every sport event will have some sort of a timeline at their heart: a flow of historic events, or a tennis match timeline, or perhaps a boxing match protocol. So what if you want to provide your customers with an insight into dozens of events happening within a particular timeframe?

  17. Lesson number:

    Maps

    With zooming in and out in place, maps seem to be quite obvious to get right. Indeed, they are — unless there are elements that need to be displayed on the map. What if we want to display pins to locations on a shopping mall map? Or what about an election results map with autocomplete, filters, and search? That’s where maps become slightly messier and more complex.

  18. Lesson number:

    Seat Selection

    What if we combine all the previous challenges into one? Imagine you are selling tickets for a cinema, a baseball stadium, or an opera house. Surely you’ll want to provide your customers with an overview of available seats, and allow them to select the best seat as well. The challenge is to do it well on mobile. Let’s tackle this beast!

  19. Lesson number:

    Bringing Personality Back to the Web

    The web has become quite generic and soulless, hasn’t it? Every single website looks alike, and only few websites manage to convey a unique and charming personality. As a result, nothing is particularly memorable, and only few sites manage to connect with us emotionally.

    But we can do better and be charming and unique and attractive without breaking accessibility and usability. Let’s dive into a few techniques to achieve just that!

  20. Lesson number:

    Privacy UX

    With GDPR and CCPA in place, we need to think twice about how we ask customers for their data, or specifically, how do we get permissions if we really need them. It’s really the art of asking tough questions at the right time and in the right way.

    Let’s take a look at infamous and omnipresent cookie prompts and see how we can make better privacy-related design decisions without hurting the bottom line.

  21. Lesson number:

    Web Forms

    Very often forms are inaccessible and difficult to use, with awkward live validation and notorious error messages; not to mention a birthday date-picker starting from 2021, a tiny newsletter checkbox, disabled “submit” buttons and horrendously evil CAPTCHAs in the disguise of street signs and crosswalks. So let’s fix web forms for good!

  22. Lesson number:

    Disabled Buttons

    In this segment, we’ll look into common usability issues with disabled buttons, how to fix these issues and when disabling buttons actually makes sense. We’ll start from the beginning, looking into when disabled buttons cause more trouble than help.

  23. Lesson number:

    Modals

    Customers are rarely excited about modals, be it overlays, pop-overs or slide-ins. Usually all these beasts are uninvited and unwelcome, interrupting user’s ongoing tasks, and demanding user’s full attention. Yet sometimes we do need them. Let’s see how we can make them better.

  24. Lesson number:

    Trip Planners

    One of the common problems in trip planners is information density. We need to show plenty of options, along with a complex form, filters, and real-time pricing updates. Let’s figure out how to bring it all together in an interface that is easy to use for customers.

  25. Lesson number:

    Sorting

    When exploring products, we usually filter first. Then, to reduce the scope of available results, we sort. But how do we design a sorting experience that helps customers get to the comfortable range when exploring products?

    In this session, we’ll look into design patterns for making sorting more obvious and useful for our customers. Let’s explore which sorting options are important, where to place them, and how to design them better.

  26. Lesson number:

    Infinite Scroll

    Infinite scroll can be frustrating. It’s out of user’s control, it’s difficult to remember the position where you are left off, and usually it’s impossible to send a link to the current state in the infinite list. Plus, reaching the footer is an adventure of its own.

    However, infinite scroll can work well in practice. In this session, we’ll look into the downsides of infinite scroll and how to fix them for good. We’ll also explore how we can combine infinite scroll, the “load more“ pattern and good ol’ pagination to make the exploration of items easier and more efficient.

  27. Lesson number:

    Search

    When customers have a good idea of what they are looking for, they use search. And as they do, they expect autocomplete suggestions to show up. Let’s find out how we can design search UX and autocomplete UX to help customers get to their goal faster.

    We’ll explore how we search and how we iterate on search phrases, how to refine the interaction design with the search bar, how to show autocomplete suggestions and when to hide them, how many to show and the important details to reveal while users are searching.

  28. Lesson number:

    Authentication

    Password recovery is one of the most expensive features as a good number of customers who attempt to recover password never manage to log in. So how can we make authentication and password recovery slightly more obvious and slightly less frustrating?

    In this session, we’ll look into authentication in general, design patterns around login/password, 2-factor-authentication, password phrase, magic sign-in as well as just the right timing to ask for email and password to ensure an accurate input that people can easily remember.

  29. Lesson number:

    Summary

    Giddy up — you made it! Well done! Now, let’s wrap up and recap everything we’ve learned in the course and see how it all fits together, and how you can apply all the insights to your regular design work.

1 | 29

That’s what these wonderful people say about the course!

Smart Interface Design Patterns, curated by yours truly chef in charge, Vitaly Friedman.

Vitaly sitting at a computer desk with a cup of coffee