Оглавление
Одной из наиболее влиятельных психологических теорий в области UX и дизайна взаимодействия является гештальт-теория. Теория была основана немецкими психологами, а слово "гештальт" означает форма или форма Как следует из названия, идея принципов гештальта заключается в том, что люди воспринимают группы объектов как паттерны, а не отдельные объекты.
Существует множество статей о принципах гештальта, но не так много из них помогают понять, как применять их в своей работе в качестве UX/UI дизайнера. Эта статья даст вам несколько идей о том, как использовать принципы гештальта для создания лучших UX и UI дизайнов, которые помогут людям достичь своих целей с меньшими усилиями.
Закон сходства
Принцип сходства гласит, что когда объекты физически похожи, мы склонны группировать их вместе и предполагают, что у них есть одинаковая функциональность Например, на изображении ниже довольно легко отличить линию, содержащую бордово-красные круги, от остальной части изображения благодаря другому цвету.
Пример принципа подобия. Фото автора.
Использование сходства в дизайне UX и UI
Представим, что ваша компания разработала приложение под названием "Il Mio Chef", которым пользуются поклонники итальянской кухни по всей территории США и Канады (мы будем использовать его в этой статье). В недавнем отчете, который передал вам UX-исследователь, говорится, что когда дело доходит до заказа итальянской еды, пользователей в основном интересует, какие рестораны находятся ближе всего к ним. В конце концов, мы все хотели бы иметь нашилазанью или пиццу, доставленную, пока она еще свежая и теплая, не так ли?
Для того чтобы облегчить пользователям нашего приложения понимание того, какие рестораны находятся ближе всего к ним, мы можем использовать принцип подобия, выделив эти рестораны в пользовательском интерфейсе. На изображении ниже вы можете видеть, как выделение этих опций желтым цветом (справа) делает большую разницу, визуально подчеркивая разницу между ближайшими ресторанами и теми, которые находятся дальше. Вот как выможно использовать принцип сходства, чтобы помочь вашим пользователям быстро найти то, что они ищут.
Использование гештальт-принципа сходства. Изображение автора.
Закон близости
Принцип близости гласит, что объекты, расположенные близко друг к другу как представляется, более связаны Например, на первом и втором изображениях одинаковое количество кругов. Однако на втором изображении некоторые столбцы расположены ближе друг к другу и создают впечатление, что вместо одной большой группы есть три отдельные группы.
Близость - пример 1 - большая группа. Изображение автора.
Близость - пример 2 - три отдельные группы. Изображение автора.
Использование близости в UX и UI дизайне
Возьмем пример из области визуализации информации.
Смотрите также: Как превратить цифровую иллюстрацию в настенную росписьНа этот раз представим, что вы - руководитель, желающий посмотреть, как работает ваше приложение "Il Mio Chef". Вы хотите взглянуть на KPI, измеряющие финансовые показатели, вовлеченность пользователей и удовлетворенность. Сначала ваш специалист по визуализации информации создает приведенную ниже панель, которая заставляет вас и всех других руководителей потеряться в цифрах и задать еще больше вопросов. Через месяц многие из васпросто перестать пользоваться этой панелью.
Приборная панель KPI - Il Mio Chef. Изображение автора.
В этот момент вы возвращаетесь к своему специалисту по визуализации информации и просите ее облегчить людям понимание общей картины, изменив дизайн приборной панели. Принцип близости пригодится в этом случае, и вы можете увидеть новый дизайн ниже. Он содержит три группы, разделенные по типу KPI, и помогает всем понять, как приложение работает с точки зрения финансов.Группировка объектов вместе и использование большего белого пространства между группами может помочь вашим пользователям быстрее усваивать информацию.
Смотрите также: Что такое векторное искусство?
Использование гештальт-принципа близости в дизайне приборной панели. Изображение автора.
Закон непрерывности
Принцип непрерывности гласит, что как только глаз начинает следовать за объектом, он будет продолжать "движение" в этом направлении, пока не встретит другой объект. Это движение помогает нам воспринимать объект как часть того же пути, который мы должны пройти, чтобы найти информацию. На изображении ниже показано, как мы можем использовать принцип непрерывности для создания таких визуальных паттернов, которые направляютглаз в определенном направлении.
Пример принципа непрерывности. Изображение автора.
Использование непрерывности в дизайне UX и UI
Ваш UX-исследователь представил новый отчет, который показывает, что основной мотивацией для пользователей использовать приложение "Il Mio Chef" является поиск еды, так как оно позволяет им получать доступ к новым ресторанам итальянской кухни каждую неделю. Вы смотрите на метрику, которая показывает, сколько раз люди пролистывают варианты с текущим дизайном пользовательского интерфейса на изображении ниже (левая сторона) и видите, что они никогда не пролистывают более двух раз нав среднем, чтобы узнать, какие варианты им доступны.
Используя принцип непрерывности (правая сторона на изображении ниже), ваш UX-дизайнер помог увеличить это число до 10 пролистываний в среднем. Как это произошло? Скрыв часть изображения и подчеркнув тот факт, что вам нужно пролистать влево или вправо, чтобы увидеть, что там находится, глаза пользователей были направлены на то, чтобы буквально создать движение "пролистывания", и были более мотивированы исследовать больше ресторанов.Это то, что предыдущий дизайн не мотивировал вас делать вообще, даже если вы уже изначально мотивированы на это.
Использование гештальт-принципа непрерывности в дизайне UX/UI. Изображение автора.
Подводя итог Использование принципов гештальта, представленных в этой статье, в дизайне UX и UI может помочь вашим пользователям быстрее находить информацию и лучше ее усваивать. Кроме того, это может повысить их удовлетворенность вашим продуктом, мотивируя их совершать действия, которые они любят больше всего.
На обложке - иллюстрация Миклоша Филипса, отредактированная в Vectornator.
