Design Patterns Articles & Videos

  • 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 increase usability when applied correctly.

  • Executing UX Animations: Duration and Motion Characteristics

    Define a trigger, transformations, duration, and easing of the animation, and be mindful of accessibility issues and annoying the user.

  • The Risks of Imitating Designs (Even from Successful Companies)

    Even great companies make mistakes. Don’t risk your UX by assuming it’s safe to follow a design pattern just because it’s used by a successful company.

  • The Role of Animation and Motion in UX

    Animation in UX must be unobtrusive, brief, and subtle. Use it for feedback, state-change and navigation metaphors, and to enhance signifiers.

  • Cancel vs Close: Design to Distinguish the Difference

    Distinguishing between these two actions is critical to avoiding losing users’ work. Save changes before closing a view, use text labels rather than an X icon, and provide a confirmation dialog before destructive actions.

  • "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?

  • Popups: 10 Problematic Trends and Alternatives

    Whether modal or not, most overlays appear at the wrong time, interrupt users during critical tasks, use poor language, and contribute to user disorientation.

  • 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).

  • 10 Design Guidelines for Reporting Errors in Forms

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