The UI Pattern Selection Process

Content Source:@awwwards.com

The effectiveness of a pattern depends on the site – the perfect pattern for one might do more harm than good on another.

preferred method of pattern selection involves four distinct steps to help you identify which patterns will work best, and how to implement them:

1. Isolate the problem.

2. Examine which patterns other sites used to solve the problem.

3. Analyze how these sites used the patterns.

4. Customize the pattern in the way it’s right for you.

Let’s explain how this process works with an example: site testing has revealed that users find your interface too cluttered.

1. Isolate the problem.

You take a critical look at your interface and realize that, yes, it is too cluttered. After analyzing the qualitative and quantitative user feedback, you realize the controls are the issue. There’s too many options available, but at the same time, users value these options and use each at different times (so none are expandable). Your problem is clear: how do you save screen space without sacrificing user options?

2. Examine how other sites solve the problem.

You visit sites similar to your own, and see how they solved the problem. You go to sites like Pinterest and Quora.

Pinterest, you notice they use the pattern of Discoverable Controls. By hovering the mouse over the relevant card, the controls appear, but when you don’t interact with the card, the controls disappear. This allows the user to focus mostly on content, and only see controls when they’re needed.

Quora takes a similar approach, but with notable exceptions. Instead of hovering over the relevant car, the user must click the icon to open the collapsible menu. These present their interaction options, with word links instead of Pinterest’s icons

3. Analyze how these sites used the patterns.

After taking good looks at each, you realize the major differences. First, Pinterest has the controls appear by hovering, while Quora involves a click. Second, the Pinterest controls are icons, while the Quora controls are words.

4. Customize the pattern for your site.

You decide to mix-and-match the elements to get the best of both worlds. Because their are only a few relevant cards per screen, you decide on the clickable icon to reveal more options, as opposed to the hover controls. However, your options are simple and fun, so you decide to represent them with icons, rather than labels.

This process gives you a familiar and recognizable pattern that requires no explanation when your user sees it, but is still personalized enough that it feels unique to you.

Check uipattern Designs:

Source:awwwards.com