Design-Pattern Guidelines: Study Guide

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

By Alita Joyce on December 5, 2021

Topics: Study GuidesDesign Patterns

This article lists some of our content that provides specific guidelines on designing a variety of interface patterns, from toggle switches to navigations tabs.

If you’re new to designing interfaces, check out the 10 usability heuristics for user-interface design, which are foundational principles for interaction design. From there, use the resources below for guidance on designing specific interface patterns.

A Note on Interface Guidelines

After a couple of years, are these guidelines still valid? These usability guidelines are dependent mostly on human behavior, which changes slowly, and a lot less on the specifics of a given technology, which can change quickly. As you adopt the following guidelines in your own work, consider the core user behaviors and usability principles at play (not just the technology). Don’t throw out old findings because of their age.

Input Controls

This section covers input elements like checkboxes, toggle switches, input steppers, and more.

1Checkboxes vs. Radio ButtonsArticle12 guidelines for when to use a checkboxes and radio button
2Toggle-Switch GuidelinesArticleRelated elements and 4 guidelines for use
3Checkboxes vs. Switches in FormsVideoGuidelines for when to use checkboxes and switches in forms
4Design Guidelines for Input Steppers ArticleBenefits and drawbacks of input steppers along with 8 design guidelines
5Date-Input Form Fields: UX Design Guidelines ArticleDate-input patterns and 7 design guidelines
6Split Buttons: DefinitionArticle7 tips for designing split buttons
7Input Controls for Parameters: Balancing Exploration and Precision with Sliders, Knobs, and MatricesArticleGuidelines for designing specialized, application-specific input controls
8A Checklist for Designing Mobile Input Fields Article14 guidelines for designing mobile input fields
9Easier Input on Mobile DevicesVideoDesign recommendations for input fields on mobile

Forms and Wizards

These resources provide guidelines for designing effective web forms and wizards.

10Website Forms Usability: Top 10 RecommendationsArticleWell-established but frequently ignored UX design guidelines for web forms
11How to Report Errors in Forms: 10 Design Guidelines Article10 guidelines to help users recover from errors in forms
12Wizards: Definition and Design RecommendationsArticleGuidelines for designing usable wizards

Tooltips, Dialogs, Instructional Overlay

In this section, we provide resources on tooltips, modal and nonmodal dialogs, popups, and instructional overlays.

13Tooltip GuidelinesArticleGuidelines and recommendations for using tooltips on desktop sites
14Tooltips in the User InterfaceVideo
15Modal & Nonmodal Dialogs: When (& When Not) to Use ThemArticleDisadvantages and guidelines for using modal dialogs
16UI Modes and Modals VideoModes and modals: definitions and  when they may be appropriate
17Confirmation Dialogs Can Prevent User Errors — If Not Overused Article8 design guidelines for confirmation dialogs
18Popups: 10 Problematic Trends and Alternatives  ArticleFactors to consider when using popus and realistic alternatives
19Popup Problems Video
20Instructional Overlays and Coach Marks for Mobile AppsArticleTips for designing helpful and noticeable instructional overlays
21Mobile-App Onboarding: An Analysis of Components and Techniques ArticleGuidelines for designing and implementing various types of mobile-app onboarding
223 Design Considerations for Effective Mobile-App Permission Requests ArticleConsiderations and recommendations for designing dialogs that request mobile-app permissions
23Error Handling on Mobile Devices: Showing Alerts VideoPitfalls of using alert dialogs to signal errors on mobile devices

Icons and Indicators

This section lists resources relevant to icons and other visual indicators such as progress indicators.

24Icon Classification: Resemblance, Reference, and Arbitrary Icons Article3 categories of icons and considerations for designing them
25Icon UsabilityArticleUX guidelines to ensure that your users recognize your icons and know what they mean 
26Tips for Icon UsabilityVideo
27Accordion Icons: Which Signifiers Work Best? ArticleResearch findings and 3 recommendations for using accordion icons
28Visual Indicators to Differentiate Items in a List ArticleRecommendations for using visual indicators to attract attention to certain list elements
29Progress Indicators Make a Slow System Less Insufferable ArticleRecommendations for communicating system status
30Mask Interaction Delays with Progress Indicators Video

Menu Design

These resources are specific to designing menus like drop downs and mega menus.

31Menu Design: Checklist of 15 UX Guidelines to Help UsersArticleGuidelines for designing effective menus
32Navigation Menus – 5 Tips to Make Them Visible Video5 design guidelines to increase the visibility of navigation menus
33Mega Menus Work Well for Site Navigation ArticleGuidelines for designing large navigation menus
34Dropdowns: Design GuidelinesArticleUse cases and 8 guidelines for dropdowns
35Listboxes vs. Dropdown Lists ArticleAdvantages, disadvantages, and tips for using listboxes and dropdown lists
36Contextual Menus: Delivering Relevant Tools for TasksArticle10 tips for designing effective contextual menus
37Expandable Menus: Pull-Down, Square, or Pie? ArticleDesign considerations for expandable menus

Navigation Elements

This list of resources covers a variety of general navigation controls like breadcrumbs, links, and footers.

38Breadcrumbs: 11 Design Guidelines for Desktop and MobileArticleInsight on presenting breadcrumbs
39Guidelines for Visualizing LinksArticleEstablished guidelines for communicating web links
40Back-to-Top Button Design GuidelinesArticleUX guidelines for back to top links which help users navigate long pages
41Tabs, Used RightArticle12 design guidelines for tab controls
42Footers 101: Design Patterns and When to Use Each ArticleCommon footer components and recommendations on when to use each
43Mobile SubnavigationArticleDesign recommendations for mobile subnavigation elements
44Local Navigation Is a Valuable Orientation and Wayfinding Aid ArticleGuidance for designing effective local navigation


In this list, we provide guidelines for visualizing and communicating search components.

45Search: Visible and SimpleArticleFoundational search design principles
46Site Search SuggestionsArticleTips for designing the search feature on your site
47Designing Search SuggestionsVideo
48 3 Guidelines for Search Engine “No Results” Pages ArticleTips for turning zero search results into an opportunity for content discovery
49The Magnifying-Glass Icon in Search Design: Pros and Cons Article11 recommendations for designing with the magnifying-glass icon


For more on design patterns, check out the following courses:


上一篇 2021年11月29日 下午9:33
下一篇 2021年12月22日 上午11:09