Design patterns

Peter Zalman
Nov 25, 2015 · 4 min read

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

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

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.

Image for post
Image for post
Duck test.

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

New and radical

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

Image for post
Image for post
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

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

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.

Enterprise UX

Design stories from designing apps at large enterprise for…

Peter Zalman

Written by

I am crafting great ideas into working products and striving for balance between Design, Product and Engineering #UX. Views are my own.

Enterprise UX

Design stories from designing apps at large enterprise for large enterprises.

Peter Zalman

Written by

I am crafting great ideas into working products and striving for balance between Design, Product and Engineering #UX. Views are my own.

Enterprise UX

Design stories from designing apps at large enterprise for large enterprises.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store