Design patterns are a critical part of web design, but they are easy to forget. Especially when you are creating something new. And with all the new features of HTML5 it’s easy to get caught up with all the crazy features and forget that your customers need to be able to understand how your web page works in order to use it.
In my Inspiration Gallery, I showcase sites that use unusual navigation or funny ways of viewing the site content. I showcase these because they are fun and interesting, but sometimes they can just be frustrating. After I posted a site that used the scroll bar in a new and very different way I got some feedback from one reader saying:
”I know you like these fancy designs, but I couldn’t figure out how to move beyond the first page. I use a modern browser, and yet I got so frustrated trying to see something other than the road that I finally clicked away in disgust.”
This is a serious problem, and it’s caused because the site didn’t use a standard design pattern—scrollbars scrolling down the page document. You could scroll down, but the scroll bars were hidden, and in order to move down the page you had to find the movement buttons (that didn’t look like buttons either). It was a very innovative site, but if some customers can’t get past the first screen, innovation fails.
Use Design Patterns for Commonly Used Elements
You may feel that the common elements on a page are exactly what you don’t need to worry about the patterns for. But these are the elements where it is critical to be consistent and clear. In my scrolling example above, nearly every website uses the scroll bars in the same way and for the same purpose. By changing that purpose to something else, you immediately affect your customers’ ability to use the page.
Some commonly used elements I would recommend becoming familiar with their design patterns include:
- layout grids
- input forms
- call to action buttons
- breadcrumb trails
- tags and tag clouds
- comment forms
- share buttons
Once you know what the standard design elements are for these features of a website, you can check your pages to make sure that you aren’t leaving something critical out and confusing customers.