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

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

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

Image for post
Image for post
Duck test.

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.

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

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.

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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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