UI Design - Patterns

Solving common user problems

This was originally published at One Small Step on January 7, 2016.

Visual consistency is one of the principles to take into account while building a web application, because it gives the user the sense of confidence needed to create value. By introducing the familiarity as a starting point, we increase user perceived usability and reduce the interface’s cognitive load.

When we talk about visual consistency it is almost impossible not to mention the influence that Patterns have on their development.

UI Patterns or interface patterns, in a general way, are optimized and reusable solutions used to solve commonly occurring usability problems. When correctly applied, they establish meanings and send signals to users about a particular functionality.

What are Affordances, Perceived Affordances and Signifiers?

Affordances is what the object/product/website can do. Perceived Affordances is what users think that can do and Signifiers are the visual clues used to suggest meaning, small hits that signify what the product might be used for.
All patterns are made by Signifiers (visual indicators) which help users to understand how they should interact with the elements of the interface, making the website feels more familiar and intuitive. The effectiveness of Perceived Affordances depends on the applied Signifiers.

There are different types of Signifiers, with distinct purposes organized into 5 categories:

  • Explicit - as the name implies, are the obvious signifiers such as words or appearances showing explicit purpose like some calls to action (e.g.: “send your comment” or “click here”);
  • Pattern - indicators that have been used so many times that their meaning is already common knowledge (e.g.: “playable media: triangle icon”, “search/zoom: magnifying glass icon”, “multi-step tasks: dots/small circles” or “return to homepage: logo”);
  • Hidden - signifiers which will only be revealed when certain conditions are met, hidding information that only appear under certain conditions (e.g.: something revealed only with mouseover);
  • Metaphorical - indicators that use metaphors to communicate their meaning (e.g.: “email: envelope icon”, “homepage: house icon”, “print: printer icon”, “enter/edit text: pen icon”);
  • Negative - shows that some features or actions are unavailable or inactive (e.g.: a particular element has faded/ light grey colors).

Interface patterns are reference points, they are common language models. They represent the best design practices and work as creative basis, allowing to be innovative but without alienating the users.

Patterns help to maintain visual consistency and act as guides in navigation, inducing users to interact with the product and share their experience.

UI Patterns are the “safe zone” of visual consistency, and consequently a powerful tool for optimizing interfaces and visually prioritize information.

How to apply the appropriate Patterns in your site?

There are thousands of different ways to use patterns and the best method of implementation is not always linear. However there are a few steps that can help to simplify the process:

  • Determine which problems need to be solved, either because the users do not register or because they navigate the website but in the end of the day they do not request any budget, etc …;
  • Search how other businesses solve similar problems. An investigation of other web applications should not be seen as negative because we are talking about interface patterns and not the identity of a brand. For example, in the case of problems with user registration some websites allow you to login through Facebook or other social networks, providing a more immediate access to the registration area;
  • Detail and adapt the patterns to your business. There are several websites that solve the same problem in different ways, each case should be customized. Allowing login through a social network may be a good strategy but for its users it is more effective to write “Register via Facebook” instead of putting a button with the Facebook icon under a title that says “Register Here.”

UI Patterns are the “safe zone” of visual consistency, and consequently a powerful tool for optimizing interfaces and visually prioritize information.

I leave here some links where some features are compiled: UI Patterns; PatternTap; Six UX; Web UI Kit.