Interaction Design: Design Patterns as Building Blocks
1h 10mIntermediate2019-11-01
Authors

Diane Cronenwett
Specializing in solving complex design problems
Course details
Design patterns offer solutions for common design problems. UX designers rely on design patterns and best practices to design usable and consistent interfaces more quickly. This course introduces new patterns, approaches, and contexts to designing common interface elements such as navigation, buttons, forms, links, progress indicators, and search boxes. Rather than having you copy common patterns, instructor Diane Cronenwett helps you understand the “why” behind them, giving you the ability to evaluate each pattern’s suitability for your projects. Plus, see examples of how different companies apply UX patterns, so you can see how the patterns take shape in real-world designs.
Learning objectives
What is a design pattern?
UX patterns for navigation and page structure
UX patterns for text inputs and buttons
Best practices for links and breadcrumbs
Indicating progress and feedback
UX patterns for search input and results
Filtering and search
Learning objectives
What is a design pattern?
UX patterns for navigation and page structure
UX patterns for text inputs and buttons
Best practices for links and breadcrumbs
Indicating progress and feedback
UX patterns for search input and results
Filtering and search
Skills covered
Software Design PatternsProjectSoftware Development
Concepts
0. Introduction
- 01 - Using design patterns
1. Patterns Overview
- 02 - What is a design pattern
- 03 - Why are design patterns useful
- 04 - Design pattern library vs. style guides
- 05 - When to break a pattern
- 06 - Anti patterns or dark patterns
2. Page Structure and Organization
- 07 - Global navigation
- 08 - Cards
- 09 - Tabs
- 10 - Side navigation
- 11 - Accordions
3. Form and Data Controls
- 12 - Fitts's law, grouping, and cognitive load
- 13 - Text input
- 14 - Checkboxes, radio buttons, and dropdowns
- 15 - Tooltips and popovers
- 16 - Buttons
- 17 - Links and breadcrumbs
- 18 - Toggle switches
- 19 - Modals
4. Indicating Progress and Feedback
- 20 - Feedback in UX
- 21 - System messaging
- 22 - Progress indicators
- 23 - Progress meters
- 24 - Progress indicators - Spinners
5. Search and Filtering
- 25 - Search input
- 26 - Autocomplete
- 27 - Search results
- 28 - Filtering
Conclusion
- 29 - Next Steps