How to Design for the Web Using Design Patterns
Along with high-quality WordPress hosting, design patterns are the foundation of good website usability, and they’re the pieces websites are built upon. They’re a strategic design decision a web designer makes to ensure a good user experience. A designer’s job is to solve common usability issues and to create the most user-intuitive solution, and patterns create a predictable, intuitive, and optimized user experience. Whether you’re new to design or a seasoned pro, you must remain aware of common UI design patterns and keep up as patterns evolve.
Examples of Design Patterns
You’ve probably heard of components; things like buttons, form fields, search bars, etc. are all examples of them. To use them, you can put them to good use by creating patterns in your design.
One thing to be aware of: sometimes the terms “components” and “design patterns” are used interchangeably. For the purposes of this article, components are the building blocks of a website, and patterns are established ways that users are used to performing tasks.
As you’ll see, a pattern is “bigger” than a just a single component. Patterns are how you optimize what’s done with individual components. There are many traditional design patterns, such as:
- A logo that links to homepage in a website header
- Hamburger navigation on mobile websites
- Login forms with a “Reset password” link
- Breadcrumbs that allow users to keep track of their location on a site
- Carts with item counters on them
Why Should Designers Focus on Design Patterns?
There are many advantages to using design patterns. Not only do they make your work more efficient as a designer, but more importantly, patterns make the experience easier for your users.
Design Patterns Establish Trust
Users make quick assumptions the moment they arrive on your site. In a split second, they determine if it’s worth interacting with the content or if they should find another option.
Is your site easy to navigate? Is it easy to find the information your users are looking for? They won’t have the patience to click around and troubleshoot. It’s absolutely critical to make a good first impression and establish trust with your users.
In what’s become the history of the web, certain patterns have become commonplace. Designers have relied on these established user interface elements to design websites, and users have become used to seeing these design patterns. They recognize commonalities between sites and trust what’s familiar.
Let’s take an example of an established design pattern on an eCommerce site. Users are used to seeing small product previews in a grid and then clicking to learn more about the individual item. By using established patterns in your design and creating an easy to use experience, you’re building trust with your users, plus it’s more likely they’ll be a return visitor.
Design Patterns are Intuitive
As users interact with your site, the predictability factor becomes very important. Predictable patterns allow for the most intuitive experience. Having familiar patterns is key, but making sure those patterns are used consistently is also important.
One common, predictable pattern example is found on forms. Specifically that all forms provide validation and error messages. Do all forms on your site do this consistently? Are all the messages in the same place? How about the submit button? Is there a message indicating the form has been sent?
From a design perspective, users have encountered these patterns many times before. Providing form validation with helpful messaging indicates to the user where problems are, and having a message indicating the form has been sent is a helpful indicator that an action has taken place.
It may seem like common sense when you hear that patterns and predictability are necessary for a good user experience. However, it isn’t too hard to come across sites that break common patterns, which can cause frustration or confusion. With that in mind, keep designing with helpful UI patterns. The more users are familiar with them, the more they know what behavior to expect. Patterns and conventions keep users from getting confused, and sticking to patterns creates a predictable experience.
Design Patterns Provide a Common Language Between Designers
Great experiences start with effective design.
In many cases, designers are working on a team. It helps the team work more efficiently when there are established design patterns. There’s no need to reinvent the wheel if the problem has already been solved.
Keeping all patterns in one central front-end style guide is a great place to keep inventory. As a global resource, it’s a quick guide for all team members to understand the use case for each pattern. Even if you’re working solo, keeping track of the design patterns you’re using will allow you to work more efficiently and look back at them in the future.
The Planning Phase
It’s pretty clear why design patterns should be utilized, but how do web designers actually put these into place when designing for the web? Here are a few tips that help make the design process easier.
Use What you Already Know to Get Started
If you’re designing a complete redesign or a site “expansion,” it’s helpful to take inventory and look at what you know already. Getting a good starting point is key. If it’s an entirely new project, it’s important to think about these things and expect that some questions will be unknown at first. For this situation, using past design experience to get started is a good first step. This informs the initial decisions because they’ve worked on other projects.
Beginning Research
Research is key to a strong project foundation. As you’re well aware of, users will always look for the easiest way to accomplish a certain action on a website. Understanding the problems and tasks at hand will ensure you’re designing the right thing. To start, think about these items:
- Who are the current users? (Their goals, demographic, etc.)
- What else do you want to learn about these users?
- What patterns do they interact with the most?
- Are there any patterns these users have issues with?
- What improvements can be made?
- What new features are being designed?
- Can any currently-established patterns work?
The research phase is the time to identify what your users need to accomplish when interacting with your website. Examples would be things like searching for content, signing up for a newsletter, making a purchase, etc. Faced with familiar elements, users will need less time to think and have more reason to convert. Keep design focused on creating patterns in a way that feels familiar to your users based on their existing knowledge from what they experience on the web.
When solving design problems, time and budget are always a factor but do as much research as you can. It’s your time to uncover the main pain points of your users and to study existing design patterns. What’s common on the web? What patterns have you utilized successfully in the past? Once you define the problems you need to solve, explore sites with patterns that target the same user goals. That will serve as good inspiration for the project. It’s not necessary to “copy” them, but it’s helpful to take note of what’s out there.
Up to this point, I’ve recommended you stay consistent and predictable. It’s worth mentioning that existing patterns can be modified and there may be cases for doing something new. Just make sure that if you’re introducing a new pattern, it’s justified by user data and is well tested.
Designing for the Web with Design Patterns
Prototype and Testing
After the research phase, it’s time to start putting what you’ve learned to good use. This is where the design comes to life with prototyping. Depending on your process, prototypes can be simple low-fidelity wireframes or more complex high-fidelity designs.
Start with existing patterns from your research as a baseline. As you go through the process, make sure the prototype covers all the features you need and that it accounts for all user goals. It can take a bit of revision and fine-tuning to get to a good starting point.
Once you’re confident that all requirements are included in the prototype, it’s time to do some testing to gain insight into the usability of the design. This is where you’ll validate the effectiveness of the design patterns along with the overall functionality.
The reason that testing is so important in the prototype phase is that in some cases, clients can’t articulate or fully predict their thoughts and needs. User testing allows them to show instead of tell. Participants demonstrate how they’d actually use the site, while you observe and learn from their actions. This is both useful for participants and you as the designer.
It’s important to keep notes on the core user goals when you go into testing, to stay focused. After you’ve invited the test participants, put the design in front of as many users as you can. If time constraints are tight, make sure that you test with at least five users.
The subject of user testing is a whole topic in itself. Choose whatever method makes the most sense based on your time and budget. It would be great to always have adequate time, but this may not always be possible. In a pinch, “hallway” or “cafeteria-style” usability tests can be useful (a usability test set up in a high foot-traffic area, utilizing people that walk by to test your product). Even involving a couple of coworkers is always better than no testing.
Chances are, your design patterns won’t be perfect out of the gate. Changes will need to be made and more testing will be needed to validate the updated design. You’ll gain more insight from each testing phase, however, and be able to incorporate what you’ve learned to continue iterating and testing until the design is optimized.
Web design patterns ensure a consistent user experience. Below are helpful links that provide more information to get started:
