Breaking the pattern in web design

Designing for the web is no easy task. We must take a lot into consideration in order to solve both complex and simple usability problems. Many of the problems that we have to solve are very common and often occur on a variety of our projects. To solve these common problems we often refer to design patterns. Design patterns are design solutions that have been used before and proven to work. Patterns can either be complex, such as navigations and checkouts, or simple, such as forms and hero images.

There have been concerns that design patterns are actually starting to hinder our creativity as designers. It is a lot easier to implement an already proven solution than trying to reinvent the wheel. Benjie Moss from WebDesigner Depot compares using design patterns to painting by numbers. When patterns are used blindly, yes, they do become a little cut and dry. Patterns may cause problems sometimes, however, if used correctly, I believe they can be a great asset in the web design process. Patterns are meant to be used as more of a guideline or blueprint, rather than a bullet proof solution for that same problem every time. So when and where is it OK to break the pattern?

We should be using patterns as a strong base on which we can build and improve upon. I have come to think of design patterns as pieces which help us build a fully functioning solution. Even though some design problems, like a login screen, may seem simple enough that you can apply the same pattern every time, it is actually a great opportunity to take those pieces and improve them. A typical login pattern includes a username and password field, a way to retrieve your password, a login button and a way to create a new account for new users. All of these elements are pieces that can be used to solve the login problem, and they don't need to be arranged the same way every time. Breaking patterns down into smaller pieces can allow us to discover new and better ways to solve recurring problems.

We are in a constantly evolving and changing industry, therefore, patterns are bound to become outdated. When a pattern is no longer able to solve a problem due to changing technology, this provides us with another opportunity to break it. When Responsive Web Design became mainstream in order to account for the number of different devices available to users, many navigation patterns were not able to solve this new problem. Therefore, new responsive navigation patterns emerged for adjusting complex navigations for the smaller screens. We use many of these patterns, such as an off-canvas mobile menu, as a base for new and improved responsive navigation solutions.

There are times where you do not want to break patterns. Your audience is a key consideration in your decision on whether to break a pattern or to stick with a common solution. Breaking patterns allows us to be innovative and try new solutions. However, that modern solution may not be the best for all audiences you are trying to reach. Consider a search bar, which can be done many different ways. Recently it has become popular to just use an icon to indicate where the search bar is, which is usually followed by an expanding bar when clicked into. This a great modern approach to this problem, simple and providing the user with just enough information.

This pattern works well for a more modern tech savvy audience, yet an older audience may not understand what they need to do or even find the search bar. In this case you may have to resort to an older pattern for the search bar in order to appeal to a different audience.  

Patterns become patterns for a reason, we find them to work and easily adaptable. Users are very familiar with common patterns and this ensures a shallow learning curve with your site and allows users to navigate the site without frustration.

There is no question, usability patterns are here to stay. It is up to us to choose how to use them. We always strive to be innovative and cutting edge. It is our nature as creatives to push the boundaries of design. Yet, sometimes we find ourselves in the pattern trap and have to be reminded that it is ok to break the patterns. With each slight change in a pattern our understanding of interaction design grows and gives us more opportunities to create new ones. Therefore, giving us a larger pattern library to reference in creating the best web experiences possible