Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>13 мар 2024</li>

3 <li>0</li>

4 </ul>Рассказываем, по каким законам психологии проектируют дизайн сайтов и приложений.

5 Изображение: Erik Musin / Timofei Popandopulo / Aleksey Zadorozhny / Famiiily Studio / Behance

6 UX/UI-дизайн тесно связан с психологией восприятия и влияния. Экраны, кнопки, линии, элементы и даже части картинок могут мотивировать людей к действию или подсказывать шаги, увлекать или отталкивать.

7 В этой статье разбираемся, как люди воспринимают карточки на экранах, почему любят симметрию и что заставляет их путаться в фильтрах на маркетплейсе.

8 Die Gestalt с немецкого - конструкция, конфигурация, структура, телосложение, фигура, вид, роль, оформление, габитус,целостность, форма, образ, облик.

9 Когда человек сталкивается с каким-либо образом - картинкой, объектом реального мира, другим человеком, - он его познаёт. Зрением, слухом, прикосновениями "собирает" информацию, соединяет её с предыдущим опытом и контекстом конкретного момента, пропускает через свои эмоции - и так получает единую сложную форму из множества элементов.

10 Если у человека складывается целостный образ, он способен с ним взаимодействовать и принимать решение: делать что-то или нет, выбирать предмет или отказываться от него, продолжать контакт или уходить.

11 Чистые картофелины, чёткие тени, плоский фон нетипичного для овощей цвета, асимметрично расположенная половинка клубня и нарушенный порядок - все эти элементы наш "процессор" организовывает в форму, гештальтИзображение: Erik Musin / Timofei Popandopulo / Aleksey Zadorozhny / Famiiily Studio /<a>Behance</a>Принципы гештальта - это набор законов, описывающих, как люди считывают образы и упорядочивают их в целостную картину.

12 В UX/UI эти принципы описывают то, как люди воспринимают и понимают элементы на цифровых экранах.

13 Изображения предметов и тексты расположены на отдельных белых квадратах: мы понимаем, что слова относятся именно к этой фотографии, кнопка "Добавить в корзину" отправит в чекаут именно такой товар, а не все продукты на странице. Всё это - исполнение принципов гештальтаСкриншот: сайт<a>Pantheone Audio</a>/ Skillbox MediaПсихика человека саморегулируется, стремится к стабильности в каждый момент времени, здесь и сейчас. Одна из основ для этой стабильности - цельность воспринимаемых нами образов.

14 А если на экране в онлайн-магазине кнопка со словом "Характеристики" находится слишком далеко от фото товара, мы не можем быстро понять, связаны они или нет, и испытываем неожиданную когнитивную нагрузку и даже фрустрацию. Цельный образ не складывается.

15 В квадратах изображения разных объектов - белая женщина, стул и чёрный мужчина. И даже не понимая языка, мы уловим: у картинок одна форма, значит, они связаныСкриншот: сайт<a>EX EX EX</a>/ Skillbox MediaUX/UI-дизайнерам и CX-исследователям важно ориентироваться в базовой психологии восприятия. Чтобы цифровой продукт был успешен и люди пользовались им с удовольствием, он должен резонировать с базовыми человеческими механизмами познания и реакции.

16 Если проектировать дизайн с учётом принципов гештальта, это поможет:

17 <ul><li>Управлять вниманием пользователей на экранах и манипулировать их поведением.Например, подталкивать их к просмотру большего количества товаров или предложений.</li>

18 </ul><ul><li>Вызывать у пользователей доверие к продукту.Если контент на экранах даёт цельную картину происходящего, люди воспринимают цифровой продукт как знакомый и безопасный.</li>

19 </ul><ul><li>Снизить когнитивную нагрузку на пользователей - им будет легче ориентироваться на экранах.Неожиданно сложные процессы в приложениях отталкивают и даже вызывают негативные эмоции.</li>

20 </ul>Для иллюстрации посмотрим на экран с фильтрами поиска на Ozon.

21 В каждом из трёх серых прямоугольников есть тексты, и мы буквально бессознательно воспринимаем их как связанные общим смыслом. Например, ожидаем, что один серый прямоугольник объединяет параметры размеров, другой - цены, третий - физические характеристики.

22 Однако когда мы вчитываемся в слова, обнаруживаем, что серые прямоугольники не поддерживают эту логику. Нам становится сложнее ориентироваться в интерфейсе, резко возрастает когнитивная нагрузка там, где мы этого не ожидали, - ведь мы всего лишь ищем кружку, табуретку или чехол для пальто. Может даже появиться чувство тревоги: цифровой продукт оказался непредсказуемым, и есть вероятность, что мы не достигнем своей цели - что-то пропустим, не найдём нужное.

23 Скриншот: сайт Ozon / Skillbox MediaЕсли объекты расположены близко друг к другу, пользователи воспринимают их как группу - считают связанными по функции или другим качествам.

24 Как работает в UX/UI: малое или большое расстояние между элементами - то, что позволяет людям быстро сканировать интерфейс, ориентироваться в текстах и иконках.

25 <ul><li>Заголовок и абзац текста под ним образуют группу - люди воспринимают их как связанные по смыслу.</li>

26 <li>Кнопки в панели управления образуют группу - пользователи считают их функционально равнозначными.</li>

27 </ul>Сближенные строки и большое расстояние между блоками подсказывают, что разные слова и цифры описывают один объект. Близко расположенные предметы в коллаже-иллюстрации дают понять, что все они означают что-то одноСкриншоты: "Золотое яблоко" / Lamoda / Skillbox MediaЧто будет, если нарушить принцип близости:

28 <ul><li>Когда элемент в интерфейсе отделён от родственных заметно большим расстоянием, пользователь может его не увидеть.</li>

29 </ul>Например, если кнопку "Отказаться" расположить как можно дальше от кнопки "Согласиться", пользователю будет сложно её обнаружить.

30 <ul><li>Из-за визуальной близости в одну группу могут попасть неравнозначные по смыслу или функции элементы.</li>

31 </ul>Элемент "Вакансии" находится в одной группе с кнопками, которые отправляют в разделы с клиентскими сервисами. Пользователю непросто понять, какой признак объединяет поиск работы на почте и отправку телеграммыСкриншот: приложение "Почта России" / Skillbox MediaПользователи воспринимают симметричные объекты как принадлежащие к одной группе.

32 Как работает в UX/UI: симметрия создаёт ощущение порядка, предсказуемости, баланса. Это позволяет людям быстрее понимать интерфейсы.

33 Сетка - это способ создать симметрию. В строгой сетке пользователь воспринимает элементы как подобные, даже если картинки совсем разныеСкриншот: сайт<a>Typefaces of The Temporary State</a>/ Skillbox MediaСимметричные карточки образуют группуСкриншот: сайт<a>365 - A year of Cartier</a>/ Skillbox MediaЧто будет, если нарушить принцип симметрии:

34 <ul><li>Когда у подобных по функции или смыслу элементов - например, карточек или иконок - несимметричная форма, пользователь не воспринимает их как равнозначные. Он концентрируется на визуальной разнице и пытается понять, что означает это различие. Интерфейс для него становится менее предсказуемым.</li>

35 </ul>Карточки-превью различаются размером и расположены несимметрично. Это добавляет интерфейсу динамики, но увеличивает когнитивную нагрузкуСкриншот: сайт<a>Angus Emmerson</a>/ Skillbox MediaВизуально подобные по цвету, форме или размеру элементы люди считают принадлежащими к одной группе - независимо от того, насколько близко или далеко они расположены друг от друга.

36 Как работает в UX/UI: визуальное подобие элементов подсказывает пользователям, что они будут вести себя одинаково. Кроме того, этот гештальт-принцип позволяет "нескучно" группировать элементы на экране.

37 Круги с разными числами на карте hh.ru нам кажутся равнозначными, а прямоугольные голубые плашки мы воспримем как что-то отдельное по смыслуСкриншот: приложение Headhunter / Skillbox MediaЧто будет, если нарушить принцип подобия:

38 <ul><li>Одинаковые эстетически, но неродственные функционально и по смыслу элементы нарушают логику, которую пользователь ожидает от интерфейса.</li>

39 </ul>У кружочков наверху экрана та же форма, что у кружочков по правой стороне, поэтому мы считаем их связанными, аналогичными по функции. Однако сверху это некликабельные иллюстрации, а справа - кнопкиСкриншот: сайт<a>Uplab</a>/ Skillbox MediaЛюди стремятся добавить недостающие детали в картинку и организовать элементы так, чтобы получить цельный образ.

40 Как работает в UX/UI: части изображений на экране могут подсказывать пользователям, что у контента есть продолжение. Стремление получить полный образ заставляет пользователей листать экраны.

41 Части картинок работают как подсказки листать карусель или скроллить экран вниз. Такими же подсказками работают границы и фоны неподгруженных карточекСкриншоты: Sela / Pinterest / "СберМаркет" / Skillbox MediaЧто будет, если в дизайне принцип нарушен:

42 <ul><li>Полное изображение даёт иллюзию замкнутости, завершённости. Если за ним есть какой-либо ещё контент, пользователь, скорее всего, его не увидит и даже не станет искать.</li>

43 </ul>О том, что это конец страницы, пользователь поймёт по отсутствию намёка на следующую карточку. А самый внимательный - по стрелочке вверх в правом нижнем углуСкриншот: сайт<a>Faculty</a>/ Skillbox MediaЕсли элементы расположены на одной линии, люди их воспринимают как связанные. Линия может быть нарисованная или воображаемая, прямая или кривая.

44 Как работает в UX/UI: непрерывность создаёт порядок, который позволяет пользователю меньше напрягаться. Ему проще воспринимать контент, а общая линия "ведёт" его по экрану и направляет к необходимым действиям.

45 Скриншот: сайт<a>Jeff Koons Moon Phases</a>/ Skillbox MediaЧто будет, если нарушить принцип непрерывности:

46 <ul><li>Обрыв линии говорит о конце экрана или конечной точке. Если за ним на самом деле ещё есть контент, пользователь его может не найти.</li>

47 </ul>Человеческий мозг не любит неожиданное прерывание: нам хочется продолжать красные линии вправо за пределы экранаСкриншот: сайт "<a>МАРШ</a>" / Skillbox MediaЛюди стремятся выстраивать в изображении пространственные отношения между элементами и в составной композиции всегда выделяют фигуру и фон.

48 Как работает в UX/UI: фигура - это точка фокуса для человека, и этот принцип гештальта позволяет дизайнерам организовать контент так, чтобы выделить главное.

49 В карточке товара пользователь всегда стремится определить фокальную точку и фон. Таким же образом он считывает более важный и менее важный текст, главное изображение и сопутствующую информацию в интерфейсеСкриншот: "Авито" / "Мегамаркет" / Skillbox MediaЧто будет, если нарушить принцип фигуры и фона:

50 <ul><li>Когда пользователь не может определить систему взаимосвязей между элементами и все они кажутся одинаково важными, он испытывает когнитивную перегрузку. Работать с интерфейсом становится неожиданно сложно и неприятно.</li>

51 </ul><a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>