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?
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.
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.
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.
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.
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.
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.
But to a design pattern newbie, I would recommend starting with platforms guidelines, followed by existing web resources.