How Do UX Design Patterns Work And How To Use Them?

ux design patterns

The web has been in use for about more than 20 years now, which has given us sufficient time to find out all the flaws and problems we might suffer and are suffering. which led to constant betterment of user experience.

Some user interfaces were so great that every designer had to use them for the websites, which made it kind of obvious for the users. This began the web designing patterns, which got familiar to both users and designers.  

Research stated that people look for links between patterns and values which support these links and relationships. Like numbers of lottery, stellar constellations, shapes in clouds, and faces on the toast. 

The designers of the web can look for this opportunity and take advantage of Graphic Design Courses in Rajkot to learn people’s pattern-seeking tendencies. How do you navigate people, how will you make them understand that just clicking the picture will open? 

Patterns are a time saver, when the designer knows nothing to do, they’ll use patterns to make the user clear about something. In this article, we will talk about the techniques and psychology of UI patterns. 

How users interact with design patterns 

The user decides within 10-20 seconds of visiting your website if they’ll stay or leave your website. Patterns on the website communicate with the user about the intent and the function of the website. 

Let’s say the user wants to book a hotel,

  1. The site will present the user with a list of options where they possibly could stay.
  2. The user might tap on the picture of a beautiful place, but by clicking on it nothing opens, so it shows pictures that don’t lead to information. 
  3. The user will find the “more info link”, or some other way and move back to clicking on the picture in hope of finding something 
  4. Later they will tap the hotel’s anime which they might find on the more detailed page. The user might not find the rate or the complimentary things and might keep on exploring things. 

Now as the user knows the picture doesn’t work but the text does, they’ll use the same pattern for the rest of their exploration journey. 


There are many factors that teach people, and influence them, but a little experience of something stays with them forever. This learning helps them to know what they did in the past and they can alter their future accordingly. 

Users always remember the patterns of behavior, the user doesn’t mind the color of the pattern or how the pattern looks. All that matters to them is how the pattern works for them. 


If we talk about our previous example and say why did the user click the images for the hotel? Because it is commonly used on other sites that when clicked on images, it opens more information about it. 

Sites that show news, blogs, or even amazon make these images’ results tappable. This is a constant pattern, which is understood by the users without explaining it to them. If we keep on talking about the hotel example, the user got a bit irritated when he clicked the image and couldn’t find anything but that didn’t drive him away, he kept on tapping everywhere in hope of finding something. 

1. Gestalt 

You’ll find people finding connections between different shapes. In 1910, a psychologist saw flickering light on a railroad, the flickering had such good timing it was an illusion like it was moving in a circle. Later the psychologist along with his few friends developed theories on sight which are now the foundation of web designing. 

The principles of gestalt talk about more than a handful of similar concepts. 

2. Proximity 

Whenever some elements are closely placed they make an illusion of belonging to each other, mostly when they are placed a bit further from other elements with space in between them. 

The proximity principle uses negative spaces in which different elements are apart from each other and even closer together. This way the groups or lines do not need lines or other elements to say this is a group. 

3. Color 

Bright colors always subside the cool hues. To add depth to the designs, there are a few techniques that help in creating more effective patterns without darkening or using bold features in the background.  The color theory is divided into three parts 

  • Contrast: every color has a set opposite it. They have an “Arch-nemesis” which makes them greater than other colors.
  • Complementation: not all colors are arch nemesis, there are many colors that complement each other very well. And even bring out the best in each other. 
  • Vibrancy: the bright and warm colors energize the users whereas bright cool colors keep them relaxed. 

4. Applying empathy to UI design patterns 

We can use many familiar patterns to our advantage. But to use them in such a way that they don’t become obvious it is important to add a little empathy and lots of planning into it. 

To begin with, these things we should find out the exact problems, the questions which might be included are 

  • Which elements are more important than others? 
  • What is clickable and what isn’t?
  • How do users know they can scroll for more information?
  • Which icon should I use for a given task?
  • What tells users that a function is disabled? How do you let users know when one action ends and another begins? 
  • How do we tell “users to be patient, this is still loading”?

We have to make sure we see things from users’ point of view, by asking these questions 

  • Where am I on the site?
  • What should I look at first?
  • How do I make this modal window go away?
  • Should I tap this, should I tap that?
  • For that matter, what can I tap?
  • Does this page contain the information I want?
  • What can I ignore on this page?

The more designers use patterns the easier it gets for users to understand things, making it more important for the designers.