How to recycle design patterns for UX success

Default avatar.
August 27, 2014
How to recycle design patterns for UX success.

thumbnailInteraction design has been around since we’ve been sophisticated enough to develop even basic tools. It’s the process of inventing, optimizing, and iterating on previous success to make things not only better, but also more familiar to our users.

It’s a skill not limited to any one industry, and yet it has the reputation of primarily being a modern designer’s instrument.

On the Web, we use interaction design principles to make things familiar and to expose our users to new concepts that they already know how to use — before actually using them. Ensuring our users are comfortable and familiar with a product, service, or even UI pattern makes an immense difference in how our work is perceived.

Detailed interaction design and research can lead to a much improved user experience, and a more approachable product. When bringing new (even revolutionary) ideas to market, interaction design is critical to ensure these flashy new things are easy to use and feel familiar to our customers.

Apple’s use of marketing with the launch of the original iPad is an outstanding example of this process. The idea of a tablet had been around and tried, but Apple’s work in making the device seem unpretentious and natural expedited its success as a new platform.

Making our users feel comfortable holding, using, or even thinking about new ideas or products is essential to user experience design.

Asking users to adopt new behaviors or even modify their existing behaviors is very, very hard.” — Khol Vinh of Mixel

Interaction design on the Web

Interaction design on the Web primarily focuses on user interface and layout. As opposed to other mediums, this is unique in that there are millions of examples of nearly every use case out there. So it’s more a problem of finding which foundation to iterate from, rather than trying to find the foundation at all.

Resources like PatternTap or Pttrns are fantastic resources to compare and find inspiration from existing patterns. Things like icons, navigation, and even 404 pages have their own respective categories. Being able to collaborate in this way with the rest of the industry makes the online format so unique. It allows for massive prototyping and large scale research into what works, and what doesn’t.

Use patterns that deliver good UX

If it were as easy as choosing a tried and true pattern that works every time for navigation, icons, lists, or anything else; we would be out of a job. A good user experience is built on a solid foundation of research and trial.

What may work great for someone else in a similar situation, may not work for you. For this reason, it’s always important to do our own analysis, experimentation, and testing.

Starting out, we want to pinpoint what our user expects. For instance, if we’re planning on where to put the navigation for a page, common sense tells us our users expect it to be somewhere near the top, either in a header style element or on a sidebar. We’ll then want to identify which of these use cases would be ideal for our particular situation (sidebar vs header) and hopefully have data to back that assumption up. This is a very minimal, rough example of an interaction design process.

Using emerging user patterns

Common use patterns are more or less considered safe” bets. Most people know what they mean, we know how our users will expect them to function, and their common use tells us it’s something people are comfortable with (or will be quite soon). Emerging patterns on the other hand, are much more dramatic. These patterns are new, flashy, and not yet refined or common enough that our users will immediately understand them. They can lead to confusion, dissatisfaction, or even make an interface look poorly designed.

With all that said, emerging patterns are unique for a reason. While not everyone understands them or is familiar with them yet, they may be soon. They’re worthwhile to pay attention to for the simple fact that nobody wants to be the last person to implement the new functionality. With growing popularity of some interactions, sometimes our users even expect it of us to implement them after a certain point. So while emerging patterns look sketchy, sometimes it’s worth being an early adopter if the risks are low.

The hamburger icon debacle

One example of an emerging (and highly debated) use pattern is the hamburger icon. While certainly debatable in terms of expressing its functionality, nobody can deny it’s an increasingly popular and successful pattern. Even for users who don’t understand its use or meaning, a single tap or click reveals such information. The hamburger icon can easily become a very well understood and popular pattern, simply by including the word menu” next to the icon. Someday, down the line, the hamburger icon may be as boring and commonplace as using an X” for close.

A user interface is like a joke. If you have to explain it, it’s not that good. — Martin LeBlanc

Training our users to grow comfortable

Having to explain the functionality behind our interface usually means it isn’t that good. But without such training for new ideas, we wouldn’t ever make progress. Instead of aiming for no explanation, we should rather aim for very little explanation instead. If we have to give a pamphlet with our UI, it’s safe to say we’re doing it wrong. If only a sentence or brief statement is needed to explain functionality, we could still possibly do better…but this is certainly ok. In short, nothing new will ever become comfortable if we don’t expose users to it properly — which sometimes means explaining our ideas.

Breaking the mold

Unusual patterns become trendy and pop up every now and then. We’ve seen interactions like horizontal-scrolling and parallax pages rise in popularity before despite their negative UX connotations. Sometimes breaking the mold and doing something unique can result in something beautiful that still meets the needs of users. We shouldn’t be afraid to experiment and try new things, especially when it comes to the area of interaction design. Discovering patterns that make our users more comfortable, and designate their function more clearly, is something we can all get behind.


Carefully choosing use patterns when building our UIs can result in users that understand and are comfortable with our work before even using it. When we’re working with products or services that are in a niche market or relatively new, we could all benefit from making them more approachable.

Interaction design is unique in that it’s largely a collaborative science brought on by our desire to get new ideas into the hands of our users.

Featured image/​thumbnail, learned behaviour image via Shutterstock.

Dustin Cartwright

Dustin Cartwright is a UI/​Web Designer & Front-End Developer from Baltimore, Maryland. He spends the majority of his time focusing on user experience research and is passionate about building things for the web.

Read Next

Are Simple Websites Better For Business?

As web design technologies raise the bar on what it is possible to achieve on a realistic budget, there’s a rising deba…

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …