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.

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.

Read Next

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…