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 Guides, Design 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.
| 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:
- 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.
主题测试文章，只做测试使用。发布者：jovi，转转请注明出处：https://goodux.cn/archives/850
