Tag Archives: UX strategy

psychology of design article tubik blog

Psychology in Design. Principles Helping to Understand Users.

Some people are used to thinking of design as a purely artistic job but there is much more standing behind it. The sense of beauty and inspiration are not enough to create the proficient design. That’s why designers should possess certain knowledge and skills of distinct sciences to do their job right. And it’s not only the art of design, it’s also about various fields of knowledge and practice which help them work efficiently and productively. One of the basic studies helping designers to understand users is psychology. Today, we will figure out what a big part psychology plays in design and what psychological principles are essential to remember during the design process.

 

tubikstudio ted-talks collection

 

The role of psychology in design

 

Today the tendency of user-centered design makes designers reconsider approach to their work and go deeper into the understanding of the target audience. Donald A. Norman in his book “The Design of Everyday Things” defines design as an act of communication, which means having the deep understanding of the person with whom the designer is communicating. In order to get better insight into people’s needs, designers are recommended to bear in mind the psychological principles of human behavior, aspirations and motivations.

 

The outcome of the work can be even more positive if a designer applies psychology in the creative process since the science gives the close understanding of the target audience. Psychology knowledge helps to create the design which will make users perform the actions they are expected to such as making a purchase or contacting the team.

 

Designers may see psychology as a complicated approach to improving the design and for that reason neglect this part of research and analysis. However, you don’t need to be a Ph.D. in psychology to use it at your work effectively. All you need to consider are the basic principles constantly presented in design. Based on our experience and the conducted research, we’ve defined six effective psychological principles often applied in the design process.

 

tubik studio quote collection

 

Gestalt Principles

 

This psychological theory is almost 100-year-old but it hasn’t lost its actuality. The word “gestalt” means «unified whole» so the theory explores users’ visual perception of elements in relation to each other. In other words, it shows how people tend to unify the visual elements into groups. The principles, on which users form the groups, include:

 

Similarity. If a user sees objects that look somehow similar, they may automatically perceive them as the individual elements of one group. The similarity between elements is usually defined with shape, color, size, texture or value. The similarity gives users the sense of coherence between the design elements.

 

Continuation. It is the principle according to which the human eye moves naturally from one object to the other. This often happens through the creation of curved lines allowing the eye to flow with the line.

 

Closure. It is a technique based on the human eye’s tendency to see closed shapes. Closure works where an object is incomplete but the user perceives it as a full shape by filling in the missing parts.

 

Proximity. When objects are placed in close proximity, the eye perceives them as a group rather than seen individually even if they aren’t similar.

 

Figure/Ground. This principle demonstrates the eye’s tendency to separate objects from their background. There are lots of examples of pictures that shows two faces depending on where your eye is focused the object or background.

 

website design for photographers

Photography Workshops  website

 

The Gestalt principles confirm in practice that our brain tends to make tricks with us, so designers should consider that fact during the creation process to exclude the possibility of misunderstandings.

 

Visceral Reactions

 

Have you ever had that feeling when you fall in love with the website after the first second when you’ve opened it? Or maybe an application has made you sick only with the quick glance at it? If yes, then you’ve already known what’s a visceral reaction. This kind of reactions comes from the part of our head called “old brain” responsible for the instincts and it reacts much faster than our consciousness does. Visceral reactions are rooted in our DNA, so they can be easily predicted.

 

How do designers use this knowledge? They aim at creating a positive aesthetic impression with the design. It’s not that difficult to guess what looks nice to people and what doesn’t if you know your target audience and their needs. So, the tendency of using the high-resolution beautiful photos or the colorful pictures at landing pages, websites or any other web and mobile products is not accidental.

 

jewellery_e-commerce_app_concept_by_tubik

Jewelry E-commerce Application

 

Psychology of Colors

 

A science studying the influence of colors on the human’s mind, behavior, and reactions is called the psychology of colors. Today we won’t go deep into the aspects of this study since it is complex so deserves to have a specialized post devoted to it (on which, besides, we’re already working). In a few words, the main idea of the study is that the colors have a great impact on the users’ perception. That’s why designers should choose the colors knowingly to make sure their work presents the right message and tune.

 

Here is the list of the basic colors and the meanings which they are typically associated with:

Red. The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad feelings including love, confidence, passion and anger.

Orange. An energetic and warm color bringing the feelings of excitement.

Yellow. This is the color of happiness. It symbolizes the sunlight, joy and warmth.

Green. The color of nature. It brings calming and renewing feelings. Also, may signify inexperience.

Blue. It often represents some corporate images. It usually shows calm feelings but as a cool color it also associates with distance and sadness.

Purple. Long associated with royalty and wealth since many kings wore purple clothes. It’s also a color of a mystery and magic.

Black. The color has a great number of the meanings. It associates with a tragedy and death. It signifies a mystery. It can be traditional and modern. Everything depends on how you employ it and which colors go with it.

White. The color means purity and innocence, as well as wholeness and clarity.

 

tubik studio web UI design

Slopes Website

 

Recognition Patterns

 

You may have noticed that website or applications united with one theme usually have common patterns in their design. The reason is the users’ psychology. The thing is that people visiting a website or using an application are expecting to see certain things associated with the definite kind of product.

 

For example, visiting a website of a barbershop, the users are not expecting to see bright colors or pictures with cats or anything like this because if they do see it, this will definitely make them think of a website as an untrustworthy resource.

 

However, not only the colors and pictures matter. Some obvious and common things such as a list of blog posts on the front page of a blog or the filters in the e-commerce website are also important for successful navigation. Users become accustomed to things quickly and their absence makes them feel uncomfortable.

 

todo list UI app tubik studio

To-do list concept

 

Scanning Patterns

 

In our article Tips on Applying Copy Content in User Interfaces, we’ve already mentioned that before reading a web page, people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group, UXPin team and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

 

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with the big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads along the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the initial sentences of the paragraphs. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials etc.

 

Z-pattern is applied to pages which are not so heavily concentrated on the copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area.

 

Knowing these patterns, designers can place the elements in an effective way for users’ perception and help them perform expected actions.

 

Hick’s Law

 

The law states that the more options users are exposed to, the longer it takes them to make a decision. This means that the more options you give to users, be it products to choose or pictures to look at, the more time and energy it takes to make a decision about the next step of interaction. The possible result here is that the users make the choices but get unpleasant feelings after using the product, or in the worst case, they may not want to take such a significant effort and just leave.

 

That’s why designers are recommended to keep any options including buttons, pictures, pages to a minimum. Removing unnecessary choices, you make the usability of the product more effective.

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Psychology is an effective tool in design which makes the creative process more productive while the result is going to be more user-centered. We’ve told you about six useful principles but they are only the tip of the iceberg because there is much more to learn on the topic. Don’t miss our next blog posts continuing this useful theme!

 

Recommended reading:

 

Here are some more articles we could recommend for those who would like to get deeper into the topic:

 

Gestalt principles

 

The role of psychology as a design tool

 

5 psychology rules every UX designer must know

 

Emotional Design: Why We Love (or Hate) Everyday Things by Don Norman

 

The 5 pillars of visual hierarchy in Web design

 

6 principles of visual hierarchy for designers

 

On Visual Hierarchy

 

F-Shaped Pattern For Reading Web Content


Welcome to see the designs by Tubik Studio on Dribbble and Behance

tubik studio reading list design

Tubik Weekly Reading List on Design. UI/UX Tips

Taking the time for self-improvement, self-education and inspiration on a regular basis is a sort of thing important for professional growth as well as keeping aware about the latest trends in your trade. However, very often we find ourselves to busy with current problems and tend to miss some news and interesting publications. In this case, recommendations on the most useful things that don’t have to be missed in the constant and fast-pace flow of news can become a helpful way to get updated.

 

Meeting requests from Tubik Blog readers, we are starting Tubik Reading List for designers as well as all the other people who are involved or interested in design process, techniques and secrets. Every week we will share our recommendations on articles and books which we find useful for our readers.

 

This time our set of recommended articles and the book of the week are concentrated on the issues of user experience design.

 

Tubik Studio designer reading

 

Recommended articles

 

Classic Landing Page Mistakes You’re Probably Still Making — the article analyzing the stuff that typically needs improvement to make a landing page bring higher conversions.

 

Key thought: In general, your landing page should absolutely be as minimal as you can make it because distractions (ie. anything that takes users and leads away from your page goal) will cost your site money.

 

Can you Code this UI Concept? Vol. 3 — a fresh set of challenging UI design concepts in there CodePen implementation. We are happy to mention that one of the designs featured in the set belongs to Tubik Studio designers.

 

Key thought: UI concepts do get your inspiration running, are great practice and are not always impossible to code! Kudos to the talented designers and developers behind them!

 

Understanding UX Strategy — a thoughtful article by professional product designer and UX strategist providing basics of strategical thinking applied in user experience design.

 

Key thought: The best-looking design in the world is worthless if you haven’t made an effort to figure out who your users are and what they need.

 

Microinteractions in Mobile Banking — practical tips dealing with importance of correct design of microinteractions in terms of interfaces for e-commerce.

 

Key thought: Easy is good. This can make an annoying and clumsy app, a great app. And this goes from the functionality to the IA.

 

How To Become a Great UX Designer Without a Degree — the flow of stepping into UX career on the basis of practical tips rather than theoretical education.

 

Key thought: Unfortunately, UX design isn’t something you can learn without some work experience. Fortunately, it is something that you can learn without a degree.

 

Microcopy: Tiny Words With A Huge UX Impact — the informative article considering the essence of microcopy and its role in designing positive user experience.

 

Key thought: At a glance, these tiny clusters of words seem insignificant when compared to the overall app design. But surprisingly, those tiny words have a huge impact on conversions.

 

7 UX Tips for Effective Conversion Rate Optimization — the post analyzing good ways of improving conversions via solutions improving usability.

 

Key thought: Drop the assumption that there are any best practices or that they are applicable to everyone. Take every bit of advice given here […] with a grain of salt. Learn, implement, test, and debunk them.

 

Experts Weigh In: What Are Your Non-Negotiables When It Comes to Designing Great User Experiences? — a great bulk of advice from well-known design experts revealing their secrets of creating positive user experience.

 

Key thought: There is something really powerful and often underestimated about beautiful, polished design in the UX world.

 

Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce — the article considering various design solutions and their efficiency for positive user experience in e-commerce based on actual usability studies.

 

Key thought: We’ll see how search results need to be implemented differently from category navigation, along with several pitfalls with implementation and examples from leading e-commerce websites.

 

5 ways to get the most out of mobile UX — the post discussing some points essential in the process of creating effective design for user-centered mobile applications.

 

Key thought: Today, designers boast about the “ease of use,” “intuitiveness” and “addictiveness” of their apps, as if these traits were worthy goals in themselves. I’d like to propose a more empathetic goal for mobile UX: earn the user’s respect.

 

 

Design must-read book of the week:

 

UX Strategy: How to Devise Innovative Digital Products that People Want by Jaime Levy

 

UX strategy book

 

The informative book providing comprehensive vision on UX strategy that implies thought-out application of business strategy techniques in the process of user experience design. Contains both theoretic basis and practical examples. Highly recommended for all the representatives of UX design process (UI/UX designers, product designers information architects, user researchers, managers, marketing specialists, strategists) as well as everyone who is interested in UX design theme.

 

Enjoy your reading and get inspired!