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 |
Design Guidelines for Input Steppers
|
Article |
Benefits and drawbacks of input steppers along with 8 design guidelines |
|
5 |
Date-Input Form Fields: UX Design Guidelines
|
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 |
A Checklist for Designing Mobile Input Fields
|
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 |
How to Report Errors in Forms: 10 Design Guidelines
|
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 |
Confirmation Dialogs Can Prevent User Errors — If Not Overused
|
Article |
8 design guidelines for confirmation dialogs |
|
18 |
Popups: 10 Problematic Trends and Alternatives
|
Article |
Factors to consider when using popus and realistic alternatives |
|
19 |
|
Video |
|
|
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 |
|
23 |
Error Handling on Mobile Devices: Showing Alerts
|
Video |
Pitfalls 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.
|
Number |
Link |
Format |
Description |
|
24 |
Icon Classification: Resemblance, Reference, and Arbitrary Icons
|
Article |
3 categories of icons and considerations for designing them |
|
25 |
Article |
UX guidelines to ensure that your users recognize your icons and know what they mean
|
|
|
26 |
Video |
||
|
27 |
Accordion Icons: Which Signifiers Work Best?
|
Article |
Research findings and 3 recommendations for using accordion icons |
|
28 |
Visual Indicators to Differentiate Items in a List
|
Article |
Recommendations for using visual indicators to attract attention to certain list elements |
|
29 |
Progress Indicators Make a Slow System Less Insufferable
|
Article |
Recommendations for communicating system status |
|
30 |
Mask Interaction Delays with Progress Indicators
|
Video |
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 |
Navigation Menus – 5 Tips to Make Them Visible
|
Video |
5 design guidelines to increase the visibility of navigation menus |
|
33 |
Mega Menus Work Well for Site Navigation
|
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 |
Expandable Menus: Pull-Down, Square, or Pie?
|
Article |
Design considerations for expandable menus |
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 which help users navigate long pages |
|
|
41 |
Article |
12 design guidelines for tab controls |
|
|
42 |
Footers 101: Design Patterns and When to Use Each
|
Article |
Common footer components and recommendations on when to use each |
|
43 |
Article |
Design recommendations for mobile subnavigation elements |
|
|
44 |
Local Navigation Is a Valuable Orientation and Wayfinding Aid
|
Article |
Guidance for designing effective local navigation |
Search
In this list, we provide guidelines for visualizing and communicating search components.
|
Number |
Link |
Format |
Description |
|
45 |
Article |
Foundational search design principles |
|
|
46 |
Article |
Tips for designing the search feature on your site |
|
|
47 |
Video |
||
|
48
|
3 Guidelines for Search Engine “No Results” Pages
|
Article |
Tips for turning zero search results into an opportunity for content discovery |
|
49 |
The Magnifying-Glass Icon in Search Design: Pros and Cons
|
Article |
11 recommendations for designing with the magnifying-glass icon |
Courses
For more on design patterns, check out the following courses:
- Mobile User Experience: Essential UX design principles for small-screen websites and apps
- Web Page UX Design: Designing successful web pages based on content priority, visual design, and the right page components to meet objectives.
- Application Design for Web and Desktop: GUI screen components, workflows, user types, design patterns, and ways of interacting with complex data
- Emerging Patterns in Interface Design: Learn about new design patterns, UI trends, and the impact they have on the total user experience.
Share this article: