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.
|
Number |
Link |
Format |
Description |
|
1 |
Article |
12 guidelines for when to use a checkboxes and radio button |
|
|
2 |
Article |
Related elements and 4 guidelines for use |
|
|
3 |
Video |
Guidelines for when to use checkboxes and switches in forms |
|
|
4 |
Article |
Benefits and drawbacks of input steppers along with 8 design guidelines |
|
|
5 |
Article |
Date-input patterns and 7 design guidelines |
|
|
6 |
Article |
7 tips for designing split buttons |
|
|
7 |
Input Controls for Parameters: Balancing Exploration and Precision with Sliders, Knobs, and Matrices |
Article |
Guidelines for designing specialized, application-specific input controls |
|
8 |
Article |
14 guidelines for designing mobile input fields |
|
|
9 |
Video |
Design recommendations for input fields on mobile |
Forms and Wizards
These resources provide guidelines for designing effective web forms and wizards.
|
Number |
Link |
Format |
Description |
|
10 |
Article |
Well-established but frequently ignored UX design guidelines for web forms |
|
|
11 |
Article |
10 guidelines to help users recover from errors in forms |
|
|
12 |
Article |
Guidelines for designing usable wizards |
Tooltips, Dialogs, Instructional Overlay
In this section, we provide resources on tooltips, modal and nonmodal dialogs, popups, and instructional overlays.
|
Number |
Link |
Format |
Description |
|
13 |
Article |
Guidelines and recommendations for using tooltips on desktop sites |
|
|
14 |
Video |
||
|
15 |
Article |
Disadvantages and guidelines for using modal dialogs |
|
|
16 |
Video |
Modes and modals: definitions and when they may be appropriate |
|
|
17 |
Article |
Factors to consider when using popups and realistic alternatives |
|
|
18 |
Video |
||
|
19 |
Article |
Guidelines for designing bottom sheet overlays that offer contextual details or controls |
|
|
20 |
Article |
Tips for designing helpful and noticeable instructional overlays |
|
|
21 |
Mobile-App Onboarding: An Analysis of Components and Techniques |
Article |
Guidelines for designing and implementing various types of mobile-app onboarding |
|
22 |
3 Design Considerations for Effective Mobile-App Permission Requests |
Article |
Considerations and recommendations for designing dialogs that request mobile-app permissions |
Icons and Indicators
This section lists resources relevant to icons and other visual indicators such as progress indicators.
|
Number |
Link |
Format |
Description |
|
23 |
Icon Classification: Resemblance, Reference, and Arbitrary Icons |
Article |
3 categories of icons and considerations for designing them |
|
24 |
Article |
UX guidelines to ensure that your users recognize your icons and know what they mean
|
|
|
25 |
Video |
||
|
26 |
Article |
Research findings and 3 recommendations for using accordion icons |
|
|
27 |
Article |
Recommendations for using visual indicators to attract attention to certain list elements |
|
|
28 |
Article |
Recommendations for communicating system status |
|
|
29 |
Video |
||
|
30 |
Article |
Skeleton screens: definition and benefits of using one |
Menu Design
These resources are specific to designing menus like drop downs and mega menus.
|
Number |
Link |
Format |
Description |
|
31 |
Article |
Guidelines for designing effective menus |
|
|
32 |
Video |
5 design guidelines to increase the visibility of navigation menus |
|
|
33 |
Article |
Guidelines for designing large navigation menus |
|
|
34 |
Article |
Use cases and 8 guidelines for dropdowns |
|
|
35 |
Article |
Advantages, disadvantages, and tips for using listboxes and dropdown lists |
|
|
36 |
Article |
10 tips for designing effective contextual menus |
|
|
37 |
Article |
Design considerations for expandable menus |
Site Navigation Elements
This list of resources covers a variety of general navigation controls like breadcrumbs, links, and footers.
|
Number |
Link |
Format |
Description |
|
38 |
Article |
Insight on presenting breadcrumbs |
|
|
39 |
Article |
Established guidelines for communicating web links |
|
|
40 |
Article |
UX guidelines for back-to-top links that help users navigate long pages |
|
|
41 |
Article |
Guidelines on in-page links vs. accordions and tabs during content navigation |
|
|
42 |
Article |
Definition of accordions and when to use them on desktop |
|
|
43 |
Video |
||
|
44 |
Article |
Definition of accordions and when to use them on mobile |
|
|
45 |
Video |
||
|
46 |
Article |
12 design guidelines for tab controls |
|
|
47 |
Article |
Common footer components and recommendations on when to use each |
|
|
48 |
Article |
Design recommendations for mobile subnavigation elements |
|
|
48 |
Local Navigation Is a Valuable Orientation and Wayfinding Aid |
Article |
Guidance for designing effective local navigation |
|
49 |
Article |
When to use infinite scrolling vs. pagination vs. a Load more button |
|
|
50 |
Video |
||
|
51 |
Video |
Insights on showing navigation menu options in a vertical-list format |
In-Page Navigation
This list of resources covers in-page navigation controls like scrolljacking and table of contents.
|
Number |
Link |
Format |
Description |
|
52 |
Article |
Scrolljacking: definition and best practices |
|
|
53 |
Article |
Scroll fading: definition and best practices |
|
|
54 |
Article |
Table of contents: placement and styling guidelines |
|
|
55 |
Video |
Guidelines on designing table of contents on mobile |
Search
In this list, we provide guidelines for visualizing and communicating search components.
|
Number |
Link |
Format |
Description |
|
56 |
Article |
Foundational search design principles |
|
|
57 |
Article |
Tips for designing the search feature on your site |
|
|
58 |
Video |
||
|
59
|
Article |
Tips for turning zero search results into an opportunity for content discovery |
|
|
60 |
Article |
11 recommendations for designing with the magnifying-glass icon |
|
|
61 |
Article |
11 design practices on intranet-search and how to assess its success |
|
|
62 |
Article |
Common implementation issues with enriched search suggestions |
Errors
This list of resources covers a variety of guidelines around error messaging and how to design interfaces to prevent users from making errors.
|
Number |
Link |
Format |
Description |
|
63 |
Article |
Guidelines for designing error messages that are visible, respect users and provide constructive communication |
|
|
64 |
Article |
||
|
65
|
Article |
Guidelines to avoid overly aggressive error prevention and recovery |
|
|
66 |
Video |
Pitfalls of using alert dialogs to signal errors on mobile devices |
|
|
67 |
Confirmation Dialogs Can Prevent User Errors - If Note Overused |
Article |
8 recommendations for using confirmation dialogs to prevent user errors |
Privacy and Ethics
This list of resources covers a variety of guidelines around design interfaces that follow ethical practices and respect user privacy.
|
Number |
Link |
Format |
Description |
|
68 |
Article |
Guidelines for designing cookie permission overlays that respect user privacy and are user friendly |
|
|
69 |
Passwordless Accounts: One-Time Passwords (OTPs) and Passkeys |
Article |
Password developments making login and registration easier and quicker |
|
70 |
Video |
||
|
71 |
Article |
Deceptive patterns: definition and how to avoid them |
|
|
72 |
Video |
