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

Checkboxes vs. Radio Buttons

Article

12 guidelines for when to use a checkboxes and radio button

2

Toggle-Switch Guidelines

Article

Related elements and 4 guidelines for use

3

Checkboxes vs. Switches in Forms

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

Split Buttons: Definition

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

Easier Input on Mobile Devices

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

Website Forms Usability: Top 10 Recommendations

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

Wizards: Definition and Design Recommendations

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

Tooltip Guidelines

Article

Guidelines and recommendations for using tooltips on desktop sites

14

Tooltips in the User Interface

Video

15

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

Article

Disadvantages and guidelines for using modal dialogs

16

UI Modes and Modals

 

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

Popup Problems

 

Video

20

Instructional Overlays and Coach Marks for Mobile Apps

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

Icon Usability

Article

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

 

26

Tips for Icon Usability

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

Menu Design: Checklist of 15 UX Guidelines to Help Users

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

Dropdowns: Design Guidelines

Article

Use cases and 8 guidelines for dropdowns

35

Listboxes vs. Dropdown Lists

 

Article

Advantages, disadvantages, and tips for using listboxes and dropdown lists

36

Contextual Menus: Delivering Relevant Tools for Tasks

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

Breadcrumbs: 11 Design Guidelines for Desktop and Mobile

Article

Insight on presenting breadcrumbs

39

Guidelines for Visualizing Links

Article

Established guidelines for communicating web links

40

Back-to-Top Button Design Guidelines

Article

UX guidelines for back to top links which help users navigate long pages

41

Tabs, Used Right

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

Mobile Subnavigation

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

Search: Visible and Simple

Article

Foundational search design principles

46

Site Search Suggestions

Article

Tips for designing the search feature on your site

47

Designing Search Suggestions

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: