What is a design pattern?
"User interface (UI) design patterns are reusable/recurring components which designers use to solve common problems in user interface design. For example, the breadcrumbs design pattern lets users retrace their steps. Designers can apply them to a broad range of cases but must adapt each to the specific context of use." ~ User Interface (UI) Design Pattern
Popular UI Design Patterns
Here are a few of the most common design patterns:
- Lazy Registration
Allow users to use your system before registering. For example, Amazon allows users to fill up their shopping cart before having to register for an account.
- Clear Primary Actions
Creating buttons that stand out by using color so users what action to take (e.g., "Submit").
- Forgiving Format
Allow your users to enter data in various formats. For example, search by city / distance or zip code.
Dark Patterns
"Some designers use these to lead or trick users into performing certain actions, typically in e-commerce so they spend more or surrender personal information. Dark patterns range in harmfulness. Some designers leave an unchecked opt-out box as a default to secure customer information. Others slip items into shopping carts. To use dark patterns responsibly, you must be ethical and have empathy with your users. Dark patterns are risky because user mistrust and feedback can destroy a brand’s reputation overnight." ~ User Interface (UI) Design Patterns
Why are design patterns important?
Design patterns provide a consistent, quickly implemented blueprint for building interfaces that solve recurring design problems. They save time and money by allowing designers to choose from a library of existing patterns and adapt them for the current context instead of "reinventing the wheel" each time.
How do you know if a pattern is accessible?
According to Carrie Fisher , Senior Accessibility Consultant and Trainer at Deque Systems, there are 3 fundamental questions you need to ask when building and / or evaluating a pattern for accessibility:
- Is there already an established accessible pattern we can use?
Take a look at these accessible patterns libraries: - What browsers and assistive technology (AT) devices are we supporting?
Now that you have chosen an accessible UI pattern, you need to look at browser and assistive technology (AT) support and compatibility. Carrie Fisher offers two fantastic resources to help you answer those questions: - Are there any framework limitations or other integrations / factors to consider?
Lastly, you are going to want to consider where those accessible patterns will be residing. A CMS? Legacy code? Framework considerations can easily take a nice group of 5 accessible patterns down to just one. Other factors to consider are security, SEO, and third-party integration, just to name a few.
Taking the time to work through these three questions will provide the insight you need to help create the most accessible and inclusive digital creation possible.
