Design Patterns Articles & Videos

  • Design-Pattern Guidelines: Study Guide

    Unsure how to design and implement user-interface patterns? Use this collection of links to our content about specific patterns.

  • Designing Empty States in Complex Applications: 3 Guidelines

    Empty states provide opportunities for designers to communicate system status, increase learnability of the system, and deliver direct pathways for key tasks. This article provides guidance for designing empty-state dialogues for content-less containers.

  • Designing for Long Waits and Interruptions: Mitigating Breaks in Workflow in Complex Application Design

    5 guidelines help users tolerate the long waits and frequent interruptions that are typical of complex workflows.

  • 10 Usability Heuristics Applied to Complex Applications

    Nielsen’s 10 usability heuristics can be used to analyze the UX of applications that support domain-specific, complex workflows.

  • Breaking out of the Content Silo

    Coming from a traditional content/writing background, Michelle Blake presents her case study of broadening her remit to a fuller range of user-experience issues and improved the design of her organization's website.

  • The Role of Design Ethics in UX

    The push for less-ethical or even deceptive user interfaces is often caused by short-term thinking and immediate UX metrics. The long-term impact of harming users can backfire and lead to reduced brand loyalty.

  • Modify Your Design for Global Audiences: Crosscultural UX Design

    Crosscultural design adaptations range from translation to localization. Researching general and contextual cultural differences helps you decide what type of design changes you should make.

  • When is It OK to Be Inconsistent in User Interface Design?

    Consistent design enhances learnability and is usually best for usability. But if the problem you're solving is sufficiently different, then inconsistency may be better.

  • Livestream Ecommerce: What We Can Learn from China

    Livestreams allow users to see products in detail and get their questions answered in real time. They can be integrated in ecommerce websites and on social-networking apps.

  • Visual Hierarchy in UX: Definition

    A clear visual hierarchy guides the eye to the most important elements on the page. It can be created through variations in color and contrast, scale, and grouping.

  • Onboarding: Skip it When Possible

    Onboarding instructions that users must digest before they start using an app or other product require attention and effort, and thus reduce usability. They should be avoided as much as possible.

  • Popup Problems

    Popups and many kinds of modal dialogs are often intrusive user interface elements that get in the way of users' goals and cause annoyance. Here are some of the worst popup UX sins.

  • Data Visualizations for Dashboards

    To enable fast and reliable understanding of data shown on dashboard overviews, use visualization styles that work with human preattentive visual processing.

  • 8 Design Guidelines for Complex Applications

    Despite great diversity in the workflows and end users supported by complex applications, these 8 design guidelines are generally applicable.

  • Compensatory vs Noncompensatory: 2 Decision-Making Strategies

    Ease users’ purchase decisions by designing interfaces that support both compensatory and noncompensatory decision-making strategies.

  • State-Switch Controls: The Infamous Case of the "Mute" Button

    On–off controls that switch between two different system states need to clearly communicate to users both the current state and the state the system will move to, should the user press that control.

  • Mobile-App Onboarding: An Analysis of Components and Techniques

    Onboarding is the process of getting users familiar with a new interface. It can involve one or more of the following components: feature promotion, customization, and instructions.

  • Making Cutting-Edge Technology Approachable: A Case Study of Facial-Recognition Payment in China

    First-time users were concerned after using facial-recognition payment. Better onboarding experiences can relieve concerns and form factual mental models.

  • Mobile Tutorials: Wasted Effort or Efficiency Boost?

    Our research shows that tutorials don’t make users faster or more successful at completing tasks; on the contrary, they make them perceive the tasks as more difficult.

  • 5 Principles of Visual Design in UX

    The principles of scale, visual hierarchy, balance, contrast, and Gestalt not only create beautiful designs, but also increase usability when applied correctly.

  • Breaking out of the Content Silo

    Coming from a traditional content/writing background, Michelle Blake presents her case study of broadening her remit to a fuller range of user-experience issues and improved the design of her organization's website.

  • The Role of Design Ethics in UX

    The push for less-ethical or even deceptive user interfaces is often caused by short-term thinking and immediate UX metrics. The long-term impact of harming users can backfire and lead to reduced brand loyalty.

  • When is It OK to Be Inconsistent in User Interface Design?

    Consistent design enhances learnability and is usually best for usability. But if the problem you're solving is sufficiently different, then inconsistency may be better.

  • Onboarding: Skip it When Possible

    Onboarding instructions that users must digest before they start using an app or other product require attention and effort, and thus reduce usability. They should be avoided as much as possible.

  • Popup Problems

    Popups and many kinds of modal dialogs are often intrusive user interface elements that get in the way of users' goals and cause annoyance. Here are some of the worst popup UX sins.

  • Data Visualizations for Dashboards

    To enable fast and reliable understanding of data shown on dashboard overviews, use visualization styles that work with human preattentive visual processing.

  • "It Depends": Why UX Is Dependent on Context

    When we’re asked questions, UX professionals will often respond with, “it depends.” Why do we rely so much on this phrase?

  • The Immutable Rules of UX (Jakob Nielsen Keynote)

    Jakob Nielsen's keynote at the Las Vegas UX Conference discussed the foundational principles of user experience that are stable decade after decade.

  • Design Patterns For Complex Apps and Workflows

    Two design principles for supporting complex and repetitive workflows.

  • The 3 B's Test For When to Follow Design Trends

    Know when to follow or banish a design trend. The 3 B's: Budget, Brand, and Behavior will help you make the right decisions.

  • Making Flat Design Usable

    The hazards of flat design and 5 key UX guidelines for making flat design usable.

  • Is UX Getting Better or Worse? (Jakob Nielsen Keynote)

    Each UI generation often takes two steps forward, then one step back. Even as new technologies emerge (e.g., Artificial Intelligence (AI) and speech recognition), knowing established UX guidelines will help you avoid missteps. This was Jakob Nielsen's keynote at the UX Conference in Copenhagen.

  • Tips for Icon Usability

    6 UX guidelines to ensure that your users recognize your icons and know what they mean.

  • Jakob's Law of Internet User Experience

    Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed.

  • Footers 101: Design Patterns and When to Use Each

    Footers can be found at the bottom of almost every web page, and often take many forms, depending on the type of content on a website. Regardless of the form they take, their presence is critical (and highly underrated).

  • How to Report Errors in Forms: 10 Design Guidelines

    Help users recover from errors by clearly identifying the problems and allowing users to access and correct erroneous fields easily.

  • Variable Fonts and Wide-Screen Layouts: Adopting Data-Driven Progressive Enhancements

    The NN/g website homepage now incorporates variable fonts and a wide-screen layout — 2 technical adjustments which improve the user experience for a subset of users on supported devices.

  • UX Guidelines for Recommended Content

    Encourage engagement with recommendations by presenting them prominently, segmenting suggestions into clear categories, and providing methods for users to give feedback.

  • Exhaustive Review or “I Can’t Believe It’s Not There” Phenomenon: Evidence from Eyetracking

    Repeatedly scanning the same content can indicate confusion or engagement. Often, it happens because users’ expectations are not met.

  • Small Pictures on Big Screens: Scaling Up from Mobile to Desktop

    To transition images from mobile to desktop, consider relative screen space and information density. Pay attention to cropping, scaling, and proportions.

  • Five User Requirements for Online Ads

    Adhering to user expectations and usability heuristics will ensure advertising content is delivered seamlessly and that brand image holds integrity.

  • Wizards: Definition and Design Recommendations

    A common application-design pattern for inputting information, wizards work well for processes that are performed only occasionally.

  • The Most Hated Online Advertising Techniques

    Modal ads, ads that reorganize content, and autoplaying video ads were among the most disliked. Ads that are annoying on desktop become intolerable on mobile.

  • Modal & Nonmodal Dialogs: When (& When Not) to Use Them

    Modal dialogs interrupt users and demand an action. They are appropriate when user’s attention needs to be directed toward important information.

  • Date-Input Form Fields: UX Design Guidelines

    Date-entry fields must be unambiguous and support task completion by using the right design pattern. Small design changes can prevent big user errors.

  • Why Zen Mode Isn’t the Answer to Everything

    Interfaces that temporarily hide the UI elements to emphasize content often increase the interaction cost, cognitive load, and the number of attention switches.

  • The Top Enduring Intranet-Design Mistakes: 7 Deadly Sins

    Intranet tools and programs come and go, but bad UIs linger for years, impact employee productivity and morale, and ultimately increase organizational costs.

  • Cards: UI-Component Definition

    A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.

  • Tabs, Used Right

    12 design guidelines for tab controls to distinguish tabs from site navigation and address click uncertainty.

  • Hamburger Menus and Hidden Navigation Hurt UX Metrics

    Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.

  • Needy Design Patterns: Please-Don’t-Go Popups & Get-Back-to-Me Tabs

    These two overly demanding website design patterns aimed at driving engagement are in conflict with how people utilize browser tabs.

  • Basic Patterns for Mobile Navigation: A Primer

    Mobile navigation must be discoverable, accessible, and take little screen space. Exposing the navigation and hiding it in a hamburger both have pros and cons.

  • Which UX Deliverables Are Most Commonly Created and Shared?

    Static wireframes are the most popular UX deliverable, but 11 different deliverable formats were used by at least half the professionals we surveyed.

  • Slider Design: Rules of Thumb

    Selecting a precise value using a slider is a difficult task requiring good motor skills, even if the slider is well designed. If picking an exact value is important to the goal of the interface, choose an alternate UI element.