Design patterns

There are various design patterns used in UX Design practice. User Interface Design Patterns are used to choose the right input type, form validation method or navigation component. Persuasive Design Patterns deals with human cognition, perception, and memory.

User Interface Design Patterns

When a new product is designed, everyone wants it to be “Easy to use”. But how this “Easy to use” is achieved?

Repeated experience feels (easy) familiar. Cognitive ease by Daniel Kahneman.

Familiarity and Affordance

The key components of “Easy to use” are familiarity and affordance.

With proper affordances, UI object intuitively implies its functionality and use. This is when button looks like any other button, and a link is blue underlined text similar to any other link you have seen before.

But the key aspect is familiarity. A familiar button just works as any other button you have used before. This repeated experience of using familiar UI patterns reduces cognitive strain.

Duck test.

The clean and simple UI layout is always composed of simplest possible design patterns.

New and radical

Surprisingly what I often see is, that brand new products contain previously unseen new patterns aiming to solve a very common goals — such as tabbed navigation, dropdowns or form input.

I was asked lately, why I believe that certain dropdown expander re-positioning itself on expanded state is just not a good design. This is not the matter opinions or beliefs. They key reasons include:

• Non-standard design pattern increases cognitive strain. People need to explore, learn and practice new abilities. They need to recall these anytime they will use the product again.
• Non-standard design pattern increase learning curve. There is no need to document how a standard button works. But previously unseen pattern needs explanation and documentation.
• Non-standard design pattern increases development costs — implementing non-standard pattern from scratch takes more time than referencing to an existing UI pattern.
• Non-standard design pattern increases product maintenance costs. Fixing defects in non-standard design pattern is more expensive, as there might be no common ground around all possible edge use cases.

Standard vs. Non-standard

There is no formal norm or definition, what is a standard. As everything in design, it depends…on actual users. The good starting point is to understand the platform. Chances are, that majority of Windows users would be somewhat familiar with basic UI atoms and molecules — checkboxes, buttons, radio buttons, tabs, modals.

Detailed guidelines for checkboxes.

When extending horizons to web UI patterns it might get tricky. There is no common ground on what a web standard is. For example, cards are a mobile design paradigm, but they already made it into the web and desktop apps mainstream.

Best practices

Good designers copy, great designers steal.

What I would suggest as the best practice, is to always start with a simplest possible platform UI pattern. When the goal of the interaction could not be achieved with this one, then look for existing patterns outside — in a world of native or mobile apps. Look in existing design systems — Google Material Design, OS X Human Interface Guidelines, Universal Windows Platform Apps.

At the same time, look inside existing frameworks such as Bootstrap. The next resource level is public company design systems such as Salesforce Lighting.

If the new pattern can’t be found in any of these resources, then you have to be prepared to explain and rationalize, why and how benefits of developing this custom pattern outweigh cons.

Innovative

There is nothing innovative or radical on UI component if the component needs an explanation to be used in a right way.

Never leave design patterns at the end, to a “styling” phase. Design is not styling — a good design pattern is something that just works regardless of overall style. It is one of the first design aspects to be defined and iterated around.

Resources

There are tons of resources on design patterns. Lately, I liked this short summary by Morgan Carter.

But to a design pattern newbie, I would recommend starting with platforms guidelines, followed by existing web resources.

Liked it? Please recommend it or continue with Design Process.