UX design patterns and where to find them

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?

We, as humans, have an innate desire and ability to search for patterns in visual design. This visual perception can be applied to the analysis of information, and is why big data and data visualizations have become so prominent in today’s business landscape. Even without realizing it, we are naturally drawn to patterns, and design patterns are a common visual language that both designers and end users can understand. In terms of user experience, this translates to designers recognizing the habits users take on when interacting with a product, such as how they navigate through pages.

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:

• The Gestalt principles

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.

• Proximity

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.

• Color

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.

Libraries

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.

2.     Patternry

With a refined library, Patternry offers detailed information on a selection of different design patterns. Tags allow users to search through categories such as forms, content and navigation, all of which again contain details on the problem the pattern solves and when, how and why to use it. An HTML category provides code in HTML, CSS and JavaScript formats for quick encoding to your site.

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.

3.     Zurb

With a huge resource library taken from designers around the world, Zurb hold 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.

4.     UXPin

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!

 

Want to experience how your app will look and work before writing a single code of line? Try Indigo Studio Prototyping tool today or and see what it can do for you.