Design

6 Psychological Tricks to Help Create a Balanced Website Design

6 Psychological Tricks to Help Create a Balanced Website Design

Practical course: "The profession of UX/UI designer"

Learn more

In the first part, we analyzed real-world examples from the digital world, exploring the relationship between psychology and screen design. We examined the principles of proximity, symmetry, figure-ground, similarity, closure, and continuity. These principles play a key role in creating effective visual content that can attract user attention and improve interaction with the interface. Understanding these psychological aspects allows designers to develop more intuitive and attractive solutions for digital products.

Now, we'll look at several key laws of perception that facilitate the recognition and structure of visual information on websites and apps. These laws help users better navigate content and increase the effectiveness of interaction with the interface. Understanding these principles allows designers to create more intuitive and user-friendly solutions, which, in turn, contributes to an improved user experience and increases the time spent on the site. Proper organization of visual information not only facilitates perception but also promotes deeper user engagement with the content.

The Principle of Simplicity

People tend to perceive complex forms as combinations of simple elements. Our brain actively works to "break down" complex and ambiguous images into components that are more understandable and familiar. This desire for simplification helps us better understand the world around us and interpret visual information.

The human brain has the ability to quickly recognize the familiar. Familiar objects and situations are perceived as predictable and safe. This property plays an important role in our perception of the world, allowing us to effectively navigate our environment and respond to potential threats. Understanding how we recognize familiarity can be useful in a variety of fields, including psychology, marketing, and education.

In this complex composition, our brain first recognizes a triangle, a square, and a circle without a segment. Image: Ildar Garifullin / Behance

In UX/UI design, simple shapes play a key role in creating a clear and intuitive interface. Using minimalist graphic elements allows users to easily perceive information and quickly navigate an app or website. Simplicity of forms improves the user experience by reducing cognitive load and increasing the effectiveness of interactions. It's important to remember that well-designed forms not only simplify the process but also increase the likelihood of conversion, as users feel comfortable and confident interacting with the interface. Optimizing graphic elements and simplifying them are essential aspects of successful UX/UI design. The principle of simplicity is important in interfaces that people need to perceive and understand quickly, such as banking applications or traffic accident report forms. Complex, indivisible forms in graphics are more appropriate in posters and art that can be looked at for a long time.

  • If a complex element is needed in the design, it can be placed on a base of a simple shape - this will make it easier for the brain to process such graphics.
  • Complex motion graphics placed in a simple square shape. Screenshot: website Theo.be / Skillbox Media

    Violating the principle of simplicity in design can lead to negative consequences. Excessive graphics complicate information perception, as the human brain has difficulty interpreting complex visual elements. This increases cognitive load and reduces the user's attention span. As a result, the interface may appear confusing and problematic, which repels visitors and reduces their desire to interact with the resource. To improve the user experience, it is important to adhere to the principles of simplicity and clarity to ensure ease of perception and navigation.

    Avoiding complex forms in design entirely is impractical. A small number of complex elements can stimulate our brains, giving a visual product an interesting appearance and increasing its appeal. Minimalism is important, but in moderation, a variety of shapes can make content more engaging and memorable.

    A variety of geometric shapes on one screen. The rectangles of the covers intersect with slanted numbers. Screenshot: Wink / Skillbox Media.

    The Focal Point Principle

    The eye is always drawn to an element that stands out from other, similar objects. Contrast and uniqueness are key factors in attracting attention. Elements with bright colors, unusual shapes, or interesting textures can interest the viewer and hold their attention. Visual perception plays a crucial role, which is why highlighting certain elements in a group can significantly increase their visibility and appeal.

    Bright and expressive objects attract our attention because the brain perceives them as cues that arouse interest or alertness. As a result, he devotes resources to analyzing and studying them.

    A photo of feet in socks acts as a focal point. It's surrounded by brighter, yet similar, elements, so even in such pastel shades, the image attracts attention. Image: W A N T / Behance

    In UX/UI design, focal points play a key role in creating visual hierarchy. They direct the user's gaze to important elements, such as messages and buttons, ensuring emphasis on critical aspects of the interface. Furthermore, focal points can draw attention away from less significant areas, allowing marketers to effectively manage content perception. Proper use of focal points contributes to improved user experience and increased conversions, making them an indispensable tool in interface design.

    To effectively promote your content in search engines, it is important to consider several key factors. First, create unique and informative texts that answer user queries. Second, use relevant keywords to improve the visibility of your site. Pay attention to the structure of the text: subheadings, lists, and paragraphs help organize information and make it more accessible. Don't forget about meta tags and descriptions, which also play an important role in SEO. It's important to update your content regularly to keep it fresh. By following these guidelines, you can significantly improve your website's search engine rankings and attract more visitors.

    Dark Patterns in Interfaces: Cancellation, Editing, Deletion

    Dark patterns in interfaces are hidden design elements that manipulate users into taking unwanted actions. One common example is the difficulty in canceling, changing, or deleting subscriptions and services. These patterns can significantly impact the user experience and lead to negative brand perceptions.

    Canceling a subscription is often difficult due to confusing menus or the need to go through numerous steps. Changing settings may not be obvious, leading to errors and user dissatisfaction. Deleting an account often requires users to go through complex procedures, which is also a form of manipulation.

    Avoiding dark patterns is important for creating honest and transparent interfaces. Companies should strive to simplify the cancellation, edit, and deletion processes to ensure a positive user experience and build customer trust. Using ethical design not only helps improve your reputation, but also increases user loyalty.

    The screen is designed minimalistically and generally "standard". But the oval with photos of a sunny day in the city attracts attention. Screenshot: Miso Tone / Skillbox Media website.

    Violating the focal point principle leads to difficulties in user interaction with the interface. When a page has too many bright and prominent elements, it becomes difficult for users to focus on key tasks. This can lead to confusion and reduce the overall effectiveness of using the site. To create a user-friendly and intuitive interface, it is important to adhere to design principles that help highlight important elements and simplify navigation.

    • Our brain cannot quickly recognize visual hierarchy on a screen with many focal points. This means that it will receive information in an unstructured flow and quickly become tired.
    • However, a loud, "noisy" design can be a good solution for a specific task. For example, an ironic reference to early Internet sites would be appropriate in the portfolio of an artsy web designer.
    Match factory website, 2024 Screenshot: FESCO website / Skillbox Media

    Principle Parallelism

    We perceive parallel elements as interconnected.

    Parallel movement is perceived as synchronous, occurring in one direction, which implies coordination.

    The cards are offset relative to each other, but are on parallel lines. Screenshot: Konture Studio / Skillbox Media website

    Parallel layout in UX/UI design effectively structures information and visually groups elements. This simplifies user perception of content, allowing them to quickly understand both text and images. Proper placement of elements improves the user experience, making the interface more intuitive and accessible. This approach helps create a harmonious design that not only attracts attention but also facilitates navigation around the site or application.

    In the drop-down, lists and photos are located in parallel. Our brain quickly realizes that photographs also represent product categories. Screenshot: All We Need / Skillbox Media website.

    Reading useful information and current news is an important aspect of knowledge development. We recommend that you read a number of articles that will help you stay up to date with the latest events and trends. These materials contain valuable data and recommendations that can be useful in various areas of life. Don't miss the opportunity to expand your horizons and learn something new.

    Web Designer's Dictionary, Part 2: Favicon, Burger, Header

    Web designers use a lot of terms that may not always be understood by the general audience. In this part of the dictionary, we'll look at such important elements as the favicon, burger, and header, their meaning, and role in web design.

    A favicon is a small icon that appears in a browser tab and in bookmarks. It helps users quickly identify a website among many open tabs and makes it more memorable. Choosing the right favicon can improve brand perception and increase user engagement.

    A burger is a popular navigation element consisting of three horizontal lines. It is used to hide menus on mobile devices and helps save screen space. The "burger" has become a standard in mobile web design, providing easy access to navigation without cluttering the interface.

    The header is the top section of a web page where the logo, navigation menu, and contact information are located. The header plays a key role in the user experience, as it provides the main navigation elements and establishes the visual style of the site. An effective header design helps users easily navigate the site and find the information they need.

    Understanding these terms and their meaning will help you better navigate the world of web design and create more user-friendly and attractive interfaces.

    Violating the principle of parallelism will negatively impact the perception of the interface. This will lead to confusion and reduce usability, since users will not be able to quickly and intuitively navigate the navigation. Adherence to this principle is important for creating a clear and logical interface that promotes better interaction and increases user satisfaction.

    Not all graphic elements and illustrations should be structured in parallel. Sometimes a chaotic arrangement can become a focal point, especially when accompanied by simple, clear groupings on parallel lines. This contrast between chaos and organization draws attention and improves information comprehension. Effective use of graphics requires an understanding of these principles to achieve optimal visual impact.

    There are no parallel lines in the arrangement of the pictures, but there are in the header texts. Screenshot: Michael Brewer / Skillbox Media website

    The principle of common area

    When elements are located in the same area, they are perceived by people as a single group. Elements located outside this area are perceived as separate and independent objects. This phenomenon is important to consider when designing interfaces and organizing space, as the correct placement of elements can significantly impact information perception and user interaction.

    The area may be delimited by a clear frame, but without one, the brain automatically forms the boundaries of the intended zone. This phenomenon demonstrates the ability of human perception to complement and interpret visual information, which allows us to perceive integrity even in uncertain contexts.

    The gray background rectangle is the common area. Each white rectangle is formally a separate area, but thanks to the thin gray line that flows from one white shape to another, we perceive them as united, and therefore similar in meaning. Screenshot: Bang Bang Education / Skillbox Media website

    In UX/UI design, visually grouping objects communicates to the user that they share common qualities or functions. This avoids the need to analyze each element in detail, as recognizing a few key objects is sufficient. This approach reduces cognitive load and makes interaction with the interface more intuitive and effective. Proper use of grouping elements improves the user experience, as users can more quickly perceive information and navigate the interface.

    Elements placed in a single container are a prime example of the Gestalt principle of common area. This principle emphasizes that objects located in the same space are perceived as a single whole. Applying this principle to design and layout helps create a harmonious and easy-to-read composition. Proper use of containers improves user experience and promotes more effective communication of visual content.

    All elements within the thin gray border share a common function - search. Screenshot: Google / Skillbox Media

    Violating the principle of common scope can lead to the fact that separated objects will be perceived by the brain as unrelated. This can make it difficult for the user to identify common meanings or similar functions between these objects. Consequently, the user may not find the desired interface element or understand its purpose, which will negatively impact the usability and effectiveness of interaction with the product. Ensuring visual coherence of interface elements helps improve the user experience and make information more intuitive.

    The common area on the right of the screen contains information about delivery times and directions, prices with and without duties (we have highlighted this area in red). It also contains buttons and other non-critical information. It's difficult for the user to immediately understand how much the product costs and when it's promised to be delivered. Screenshot: Amazon / Skillbox Media

    The Principle of Common Destiny

    Elements that are on the same line are perceived as interconnected. This phenomenon is explained by the fact that the human brain tends to combine objects located close to each other in space. Thus, horizontal alignment of elements helps create a visual connection between them, which can significantly improve the perception of information. Using this technique in design allows you to create more harmonious and structured pages.

    A single line symbolizes the direction of our movement. Elements located on this line may not move, but they are united by a common task or goal. This understanding of the importance of teamwork and determination allows us to achieve results and move forward.

    The pictures are located on the same line, so our brain perceives them as related: all the images are different, but most likely they mean something similar. Indeed, these are all portfolio project covers. Screenshot: Peden+Munk / Skillbox Media website.

    In UX/UI design, the principle of visual "common fate" plays an important role in interface organization. It allows objects to be grouped together, creating a sense of coherence and simplifying user perception. Grouping elements using this principle promotes more intuitive interaction and improves the user experience. Using visual cues such as color, shape, and motion helps users navigate the interface more easily and quickly find the features they need. This makes the interface more understandable and effective, which, in turn, has a positive effect on user satisfaction.

    On the photographer's website, the section titles are not located in the classic top header, but in a line along the perimeter of the screen. This "common fate" connects them: they don't seem like random words in the design. Screenshot: Amy Currell / Skillbox Media website.

    Violating the principle of common fate means that elements that don't move in sync or are not aligned are perceived by our brain as unrelated. This creates a sense of disunity, which negatively impacts information comprehension and processing. When elements are not coordinated in movement or do not have a single direction, their semantic connection is disrupted, making it difficult to perceive and understand. It is important to consider this principle in design and communication to create a harmonious perception and effectively convey information.

    Separating related objects, such as items in a drop-down list, can negatively impact the usability of the interface. The user risks missing important information and faces increased cognitive load, which will degrade their experience of interacting with the system. Maintaining connections between interface elements promotes better information comprehension and minimizes the risk of misunderstandings. Effective design should take these aspects into account to ensure a comfortable user experience with an application or website.

    Breaks and divisions in the overall line of movement can serve as an effective, entertaining accent. These elements can attract attention and add dynamism to the composition, creating interesting visual contrasts. Using such techniques in design can enrich perception and make content more memorable.

    When designing an interface, it is important to keep in mind that convenience and speed of perception play a key role for the user. However, one should not forget about the visual component, which can evoke an emotional reaction, including negative ones. It is important to find a balance between functionality and aesthetics to create an interface that is not only easy to use but also memorable. An effective combination of these elements will help improve the user experience and increase satisfaction from interacting with the product.

    An example of a minimal change in the general destiny. Our brain expects that in the side menu all the elements will "move" in the same direction, so four lines, torn off from the rest, attract attention. This decision forces us to take a closer look at what they mean and why they have a different “fate”Screenshot: Yves Saint Laurent / Skillbox Media website

    The Principle of Past Experience

    User experience significantly influences the perception of interface elements. Effective design and easy navigation can improve interaction and make it more intuitive. Understanding user needs and expectations plays a key role in creating interfaces that not only attract attention but also provide a positive experience. Improving user experience contributes to increased user satisfaction and loyalty, which, in turn, can lead to increased conversions and product success.

    The concept of “past experience” has several levels. Each of them plays an important role in the formation of a person’s knowledge and skills. The first level is personal experience, which includes individual experiences and situations that a person has encountered. The second level encompasses social experience, which includes interactions with others and environmental influences. The third level represents professional experience, related to a career and work in a specific field. Each of these levels interacts with one another, creating a unique picture of experience that influences decision-making and behavior. Understanding these levels allows for a deeper understanding of how past experiences shape our present and future.

    • General cultural. For example, if an app has a slider, most people will know how to use it, even if they are seeing it for the first time. This is because they have experience interacting with physical albums.
    • Digital. This is developed by users of digital products: for example, if we use several banking apps, we expect the "pay by QR" icon to be on the home screen in all of them. Or, in a product card on a marketplace, the brightest button will mean "buy."
    • Instantaneous. This experience is recently acquired, but it determines the optics of perceiving subsequent units of information. Marketing techniques are often used at this level: for example, they show an expensive product card first, so that subsequent prices seem reasonable. Or they present a "simple" task first, so that the user's brain decides that the rest will be just as easy.
    Even without knowing the language, most people will understand that the five-three-one colored icons on the cards represent some kind of rating. This understanding is informed by past experience. Screenshot: Try Bored Cow / Skillbox Media website.

    The principle of leveraging past experience in UX/UI design helps create predictable and user-friendly interfaces. This explains why the design of most popular digital services shares similar elements. Users are accustomed to certain patterns and interactions, making their experience more intuitive. Effective UX/UI design builds on these habits, allowing users to easily navigate and interact with products.

    "Digital" past experience suggests that the login button will be more prominent than the registration button, and the password box will be below the login box. Screenshot: Figma / Skillbox Media

    Violating the principle of past experience will cause users to spend significantly more time searching for familiar buttons, functions, and sections. This can lead to a poor user experience and decreased satisfaction with the interface. Users expect controls to be located in familiar locations, and any changes can cause confusion, negatively impacting their experience. It is important to consider that adhering to the principles of usability and familiarity in interface design contributes to more effective product use and increased user loyalty.

    The primary goal of design is to keep the user's attention on visual elements, allowing them to spend more time on a website or app. In such cases, it is possible to disregard the principle of past experience. However, such experiments are inappropriate in the design of everyday and functional applications, such as navigation apps, email clients, or weather forecast apps. In these cases, it's important to create an intuitive interface so users can complete their tasks quickly and efficiently.

    The "About Us" section can be accessed by clicking on a paragraph of text. This isn't obvious: "past experience" tells the brain that such long passages of text can't be navigation buttons. But this website is a studio portfolio, and such unpredictable decisions are appropriate. Screenshot: Kandalaft Studio / Skillbox Media website.

    Learn more about design by subscribing to our Telegram channel. We regularly publish relevant materials, tips, and ideas to help you improve your design skills. Don't miss the opportunity to stay up-to-date with the latest trends and inspiration in this field.

    Reading is an important part of our lives, as it develops thinking and enriches our inner world. Books help us understand the world around us, expand our horizons, and deepen our knowledge in various fields. It is important to choose high-quality literature that will be useful and interesting. Read works of different genres to find what truly resonates with you. Don't forget about contemporary authors who offer a fresh perspective on familiar topics. Reading not only develops skills but also contributes to personal growth by developing critical thinking. Don't miss the opportunity to immerse yourself in the world of books, which can change your perception of life and improve the quality of your time.

    • Design in detail: gradient
    • Emotions in illustrations: scientists have studied which graphics help us recognize them
    • Scientists have invented a font that makes us remember information. Is it true?
    • "On the language of composition": a grid that connects all spheres of our lives

    UX/UI designer profession

    You will learn how to develop user-friendly websites and applications and adapt them to different devices. You will understand how to create strong products. Master a sought-after specialty and increase your income.

    Find out more