UX Design Patterns and Where to Find Them
Sure your code is great and your application is powerful, but how will people use it? It's the UX stupid !
Join the DZone community and get the full member experience.Join For Free
It was likely that Christopher Alexander was the annoyance of many an architect during the 1970s. An architect himself, Alexander is noted for his theories on design – in particular his insistence that users know far more about the buildings they need than any architect could. So, he created and validated a “pattern language” to empower anyone to design and build on a large or small scale. It didn’t take too long until this universal template made its way to the web, and web design patterns were born.
In this post, we’ll explore what exactly is meant by user experience (UX) design patterns, and some of the best sources for tracking them down on the Internet.
What is a Design Pattern?
As well as being intuitive, design patterns are convenient, too. Developers are not known for having much time on their hands, so using a design pattern instead of creating something from scratch is a great time-saver.
The Proof is on the Page
Design pattern or not, there are certain elements that are used frequently in web design due to their appeal and practicality. You’ll be able to find examples of the following on almost any web page:
A series of principles describing how people tend to organize visual elements into groups or unified wholes. These include similarity, continuation, closure and more. In web design, all of these principles should be considered to provide the fullest experience for the user.
As a general rule, people will associate elements that are placed closely together as being related to one another. The same can be said for separated objects depicting dissimilarity. Proximity entails using negative space to either push elements apart or bring them closer together, to create the appearance of grouped items without the need for lines or other indicators.
There are few elements that draw user attention as much as color. This may be due to the fact that it can evoke very different reactions depending on the color and the reader themselves. Finding colors that complement each other can further accent content; colors that are next to each other in the color spectrum is a prime example of this.
These elements will be factored into any good web design, so your next question is probably: “Well where can I get them?”. Below are some of the best sites for design patterns – whether you’re simply looking for some inspiration or want to embed straight into your own site.
1. UI Patterns
Patterns are split up into a number of useful sections regarding different areas of a web page and their corresponding user action/reaction. Each pattern contains advice on when it could be used, example screenshots, how the user is likely to engage with the page and how it will provide a positive UX. Additionally, UI Patterns offer persuasive design patterns, such as loss aversion, cognitive biases and more.
For example, Continuous Scrolling presents users with a seemingly endless set of content, omitting the usual ‘next page’ button to aid with the content consumption. This is effective for large sets of data that may otherwise be too big for the page, or if navigating to a second page takes away too much attention from the content.
A Progress Bar or Progress Indicator is used to show the application is undertaking a task and shows the progress of said task. This is a good way of keeping the user informed if the action takes more than a few seconds to complete, making the interface feel more responsive. Patternry provides HTML code for quick and easy embedding.
With a huge resource library taken from designers around the world, Zurb holds a multitude of assets to inspire and enable avid developers. Containing over 5000 interface patterns as well as numerous behavioral triggers and code snippets, the range of available content is unmatched. Zurb does lack the informative side of their patterns, however, and so is perhaps suited to more experienced developers looking for inspiration.
UXPin is perfect for mobile design patterns, with E-commerce, Music & Video, Social Media and Taxi App template categories. Each category contains a comprehensive selection of what a user is likely to experience on each site. Social Media, for example, includes account creation, profile, navigation drawer, search suggestions, login, feed and more. UXPin is a paid service, but users can sign up for a free trial to see if it’s right for them.
Still not satisfied?
We’re always happy to see examples of great UX design, especially when they come from our own products. If you want to see more examples of apps, web pages or dashboards you can view them on our samples page. With samples for iOS, HTML5, Windows Forms and Indigo Studio, there’s something for everyone!
Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.