Принципы UX/UI-дизайна базируются на теории психологии влияния и восприятия. Каждый экран, кнопка, линия и изображение могут побуждать пользователя к действию, направлять в нужную сторону, завлекать или отталкивать.
В этой статье расскажем о восприятии людьми карточек на экранах, притягательности симметрии и причинах сложности использования некоторых интерфейсов.
Слово «Гештальт» (Die Gestalt) с немецкого переводится как целостность, форма, облик и т. д. Оно обозначает то, как люди воспринимают образы.
Когда мы сталкиваемся с изображением, реальным предметом или человеком, то изучаем его с помощью зрения, слуха и осязания. Совокупная информация от разных органов чувств в сочетании с прошлым опытом и контекстом момента фильтруются через наши эмоции. В результате из различных элементов образуется единое представление об объекте.
Создание целостного образа позволяет человеку взаимодействовать с предметом и решать: стоит ли делать с ним что-то, выбрать или отказаться от вещи, продолжить или прекратить контакт.
Гештальт-принципы — это законы, которые описывают, как люди воспринимают изображения и организовывают их в единую картину. В контексте UX/UI они объясняют механизм считывания и осмысления элементов на цифровом экране.
Человеческая психика саморегулируется и стремится к постоянной стабильности, для достижения которой необходима цельность образов восприятия окружающего мира.
В плане UX, например, если в интерфейсе онлайн-магазина кнопка «Характеристики» находится далеко от изображения товара, то пользователю будет сложно уловить связь между ними. Цельный образ не сложится в его голове, в результате чего человек испытает замешательство и непонимание.
Когда объекты находятся рядом друг с другом, пользователи считают их группой, элементы которой связаны общей функцией или свойством.
Применение в UX/UI. Различное расстояние между элементами помогает пользователям быстро сканировать интерфейс, ориентироваться в тексте и иконках. Например, заголовок и абзац под ним люди воспринимают как общие по смыслу, а кнопки на панели управления — как группу функционально равнозначных элементов.
Нарушение принципа. Если элемент находится слишком далеко от родственных, то человек может его не заметить. Например, когда кнопка «Отказаться» располагается в стороне от пункта «Согласиться», ее будет трудно найти. И наоборот, визуальная близость может нелогично сгруппировать различные по функции или смыслу элементы интерфейса.
Люди воспринимают симметричные объекты как часть одной группы.
Применение в UX/UI. Симметрия вызывает ощущение баланса, порядка и стабильности, что помогает пользователям скорее разобраться в интерфейсе.
Нарушение принципа. Если элементы с общей функцией и смыслом (иконки или карточки) несимметричны, то человек не воспринимает их равнозначными и пытается понять цель этого визуального различия. Интерфейс становится менее предсказуемым для пользователя.
Люди воспринимают подобные по цвету, размеру или форме элементы как части одной группы, при этом неважно, какое между ними расстояние.
Применение в UX/UI. Визуальная схожесть элементов укажет пользователям на то, что эти детали интерфейса будут вести себя одинаково. Также она дает возможность креативно группировать их.
Нарушение принципа. Элементы с одинаковой стилистикой, но различными функциями и смыслом, ломают логику интерфейса, которую пользователь ждет от его структуры.
Люди склонны завершать неполную картину с помощью недостающих деталей и организовывать элементы в единое целое.
Применение в UX/UI. Части изображений на экране указывают пользователям, что контент продолжается за видимой границей. Желание получить цельный образ побуждает людей листать дальше.
Нарушение принципа. Полное изображение ложно сигнализирует о завершенности и замкнутости. Если за ним есть дополнительный контент, то пользователь может его пропустить.
Подпишитесь на нас в Telegram
Получайте свежие статьи об интернет-маркетинге и актуальные новости о наших готовых решениях
Когда элементы располагаются вдоль одной линии любого вида, человек думает, что между ними есть логическая связь.
Применение в UX/UI. Непрерывность выстраивает порядок, который облегчает восприятие контента пользователем и позволяет ему меньше напрягаться. Общая линия направляет взгляд человека по интерфейсу и приводит к точке, где он совершит нужное действие (перейдет по ссылке, кликнет по кнопке, заполнит форму).
Нарушение принципа. Разрыв линии означает конец экрана или финальную точку. Если дальше есть еще контент, то пользователь может его не заметить.
Человек всегда пытается установить пространственные отношения между частями картинки и выделяет на ней фигуру и фон.
Применение в UX/UI. Фигура является для человека точкой фокуса внимания, что помогает дизайнерам выделять в композиции главный элемент.
Нарушение принципа. Если пользователь не в состоянии выявить взаимосвязь между элементами и понять их иерархию, то он испытывает стресс. В результате интерфейс кажется сложным и неприятным.
