4 принципа гештальтпсихологии в веб-дизайне
Автор материала, перевод которого приведен в статье ниже, Мариэль Москериола, она всегда верила в то, что «пользовательский опыт» складывается из психологии и дизайна. Работа дизайнера, когда он имеет дело с нуждами людей, включает необходимость почувствовать себя на месте пользователя. Вот почему речь пойдёт о применении принципов гештальтпсихологии в дизайне.
Гештальтпсихология (от нем. Gestalt — личность, образ, форма) — это школа мысли, которая рассматривает разум и поведение человека как единое целое. Человек в попытке понять окружающий мир не просто фокусируется на его отдельных небольших составных частях. Вместо того чтобы концентрироваться на каждой мелкой детали, наш мозг имеет тенденцию воспринимать отдельные объекты как часть чего-то большего, некоего единого целого, как элементы более сложных систем. Эта школа играет важнейшую роль в исследованиях восприятия мира человеком.
1. Принцип близости
Этот принцип заключается в том, что когда объекты располагаются близко друг к другу, их воспринимают как группу, а не как отдельные объекты.
Пример того, как мы можем использовать этот принцип в дизайне: рассмотрим проблему, которую мы хотим решить.
Как видно, здесь заголовки разделов (Online Booking и Cruises) выровнены по левому краю, а ссылки для перехода в разделы (Learn more) — по правому. Изображения выровнены по центру. Они находятся слишком далеко друг от друга, что заставляет воспринимать их как свободно расположенные элементы, не связанные друг с другом. Если мы создадим упрощённый макет на основе этого примера, то у нас получится следующее.
Отдельные компоненты, имеющие отношение к одному разделу (изображение, заголовок, ссылка), визуально не связаны. В решении этой проблемы может помочь применение принципа близости. Нам надо перейти от трёх элементов в каждой группе, которые существуют на странице независимо друг от друга, к такому их расположению, которое позволит им выглядеть как единое целое.
В ходе решения проблемы с использованием принципа близости, я сократила расстояние между заголовком и ссылкой, выровняв их по центру. В результате мы можем связать все три элемента вместе (изображение, заголовок и ссылку), что помогает решить проблему потери контекста.
2. Принцип сходства
Сходство — это когда объекты похожи друг на друга. Люди часто воспринимают такие объекты в виде группы или связанной последовательности элементов.
Ниже мы рассмотрим две проблемы. В первой из них, представленной на следующем рисунке (Design Problem A), обратите внимание на синий цвет текста ссылки. Пользователь, при взаимодействии с сайтом, может воспринять её как ссылку, ведущую на внешний ресурс, а не как ссылку, открывающую вкладку того же сайта. Причина этого — несхожесть элементов «Heavy Data User» и «Flexible Maximizer», хотя они, на самом деле связаны и представляют вкладки пользовательского интерфейса.
Что же даёт ощущение того, что эти элементы не связаны друг с другом? На самом деле — многое. Но, если выразиться предельно просто, дело тут в том, что ничто визуально их не связывает, в результате они выглядят как два различных элемента. Основной цвет интерфейса, как легко заметить, зелёный, но проблемная ссылка окрашена в неизвестно откуда взявшийся синий цвет. В решении этой проблемы нам поможет принцип сходства.
Как видите, здесь цвет ссылки изменён на зелёный, кроме того, к активному элементу добавлены левое и правое поля. Всё это усиливает схожесть элементов и улучшает дизайн.
Вот ещё одна проблема (Design Problem B), в решении которой пригодится рассматриваемый сейчас принцип.
Эта проблема, как видите, заключается в шрифтах. А именно, сейчас здесь используются следующие параметры шрифтов:
- Заголовок (Title): 40px Regular
- Основной текст (Body text): 20px Regular
- Текст ссылки (Text link): 20px Regular
На первый взгляд может показаться, что перед нами — совершенно обыкновенная система шрифтов, на особенности которой можно не обращать внимания. Однако, если присмотреться, то окажется, что наша проблема заключается в одинаковых характеристиках шрифтов, используемых для основного текста страницы и текста ссылок. Это может сбить с толку пользователя, ухудшит его впечатления от работы с сайтом, когда он будет пытаться что-то сделать, принимая обычный текст за ссылку и наоборот.
Снова воспользуемся принципом сходства, только на этот раз он пригодится нам для того, чтобы визуально разделить разные элементы:
Здесь мы привели характеристики набора шрифтов, используемого на странице, к следующему виду:
- Заголовок (Title): 40px Regular
- Основной текст (Body text): 20px Regular
- Текст ссылки (Text link): 20px Bold
Мы сделали текст ссылок контрастнее, выведя их полужирным шрифтом, а также добавили к ним специальные значки, придав им визуального веса. Теперь пользователь сможет быстро отличать ссылки от обычного текста.
Разрабатывая систему шрифтов для страницы, используйте для выделения различных элементов шрифты разной насыщенности (thin, light, regular, bold, и так далее). Наша цель заключается в том, чтобы для лучшего разделения текстов различного назначения использовать не множество разных шрифтов, а несколько размеров шрифтов с множеством вариантов насыщенности.
3. Принцип точки фокусировки
Точки фокусировки — это области, представляющие интерес, выделяющиеся из общей композиции или отличающиеся от неё, которые захватывают и удерживают внимание зрителя.
Рассматривая этот принцип, мы также разберём две проблемы. Вот первая.
В этом примере можно заметить, что кнопки для выполнения основного и второстепенного действия очень похожи. Расположены они приемлемо, но глядя на них, нельзя с первого взгляда построить их иерархию, так как они используют одинаковые стили.
Ясно, что цель рассматриваемой здесь страницы — побудить пользователя к загрузке приложения, и что кнопка для просмотра FAQ играет вспомогательную роль, давая пользователю доступ к материалам, позволяющим узнать подробности о приложении. Вряд ли владельцы ресурса больше хотят того, чтобы пользователи читали FAQ, а не загружали их приложение.
Решим эту проблему, используя принцип точки фокусировки
Используя принцип точки фокусировки, меняем стиль кнопки «View FAQs». Теперь, за счёт использования белого фона и тонкой границы вместо сплошной заливки, становится понятно, что она играет второстепенную роль. Кроме того, мы поменяли кнопки местами, переместив кнопку для основного действия вправо, а кнопку для второстепенного действия — влево. Причина такого изменения — применение правила Гутенберга, основанного на одноимённой диаграмме. Это правило в применении к нашему случаю, если выразить его очень упрощённо, заключается в том, что пользователь считает более важными элементы, расположенные в правой части страницы.
Если продолжить тему одинаковых кнопок, то единообразие играет огромную роль в UX-дизайне, но! Здесь речь идёт о единообразии в плане функционала. Если мы будем создавать одинаковые кнопки, предназначенные для обслуживания различного функционала, это может запутать пользователя.
В том, что касается кнопок, важно помнить, что в основе их общего дизайна должно лежать их функциональное сходство.
Теперь рассмотрим вторую проблему, которую можно решить с помощью того же принципа:
Тут мы видим ту же недоработку. Кнопки «OK» и «Cancel» оформлены одинаково. Для того чтобы принять решение о том, какую из них нажать, какая из них позволяет отправить данные, а какая — отменить операцию, пользователю нужно внимательно читать надписи на них.
Принцип точки фокусировки позволяет прийти к решению, которое ускорит работу пользователя с сайтом и поможет разобраться в назначении кнопок:
Здесь мы сначала поменяли кнопки местами, затем изменили надпись на кнопке подтверждения операции с OK на Submit для того, чтобы пользователю было понятнее, какое именно действие выполнит эта кнопка в контексте других элементов. Так же, как и в предыдущем примере, мы изменили стиль второстепенной кнопки.
4. Принцип общей области
Принцип общей области сильно связан с принципом близости. В соответствии с этим принципом, если объекты расположены в замкнутой области, мы воспринимаем их как часть группы. Вот проблема, которую мы собираемся решить, применив это правило:
Здесь можно видеть, что элементы (Spotify, Disney, Netflix), представляющие дополнительные возможности, касающиеся каждой категории, не смотрятся как единая группа, привязанная к определённой категории. Они выглядят как свободно расположенные элементы, непонятно к чему относящиеся. Прежде чем найти решение, упростим задачу, представив страницу в виде макета:
Изучение этого макета делает очевидным, что содержимое страницы выглядит скорее как набор множества отдельных элементов, чем четыре больших компонента. Решением проблемы станет применение принципа общей области. Сначала выразим это решение в виде макета:
Самое главное, что мы здесь сделали — окружили все элементы, относящиеся к одной категории, общей границей. Теперь они воспринимаются как части чего-то большего, а не как отдельные объекты. Ниже показана готовая страница, изменённая в соответствии с озвученной выше идеей:
Здесь помимо границы, окружающей элементы и соединяющей их с основным изображением категории, длинная надпись «*Free Netflix for six (6) months for Plans 999 and up» заменена на жёлтый информационный значок в правом верхнем углу элемента, к которому она относится. При щелчке по этому значку появляется всплывающая подсказка с дополнительной информацией. Это, кроме прочего, освобождает место для других элементов.
Итоги
Здесь мы рассмотрели четыре принципа гештальтпсихологии, которые могут помочь значительно улучшить дизайн за счёт подобных нюансов. На самом деле, существует гораздо больше принципов и правил, но если вы раньше с ними не сталкивались, надеемся, что даже эти четыре позволят ощутить дух гештальтпсихологии и пригодятся на практике.
Подпишись, чтобы не пропустить следующую статью! ↓
— — — — — — — — — > FAQ Marketing ВКонтакте