How to recycle design patterns for UX success

Interaction 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.

Conclusion

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.