Строим интерфейсы на основе принципов зрительного восприятия
Гештальт-теория в UX
О том, что такое гештальт-теория в психологии, не слышал, наверное, только ленивый. Но так как UX — это, по сути, тоже психология (только пользовательского поведения), то здесь также применимы принципы гештальта. В статье рассмотрим, как использовать гештальт-теорию в дизайне интерфейсов, чтобы оказывать влияние на пользователей на психологическом уровне.
Гештальт-теория уходит корнями к исследованиям визуального восприятия. В результате этих исследований выяснилось, что мозг стремится объединить разрозненные визуальные части в одно, доступное пониманию, целое. При этом свойства целого не являются суммой свойств его частей — они относятся только к целому образу. Гештальт-теория имеет несколько постоянных понятий и принципов — они используются в нескольких областях, где определяющим является визуальное восприятие.
Какие идеи лежат в основе гештальтизма
Гештальт-теория описывает то, как люди воспринимают визуальные объекты, и это восприятие сводится к 3 основным идеям:
- Мозг распознает целое быстрее, чем его составляющие. То есть, увидев сложную форму, состоящую из многочисленных частей, первоначально мы воспринимаем только эту форму — и только потом начинаем рассматривать составляющие. При этом, если эта форма не закончена, мозг сам «дорисовывает» недостающие части.
Панда в логотипе Всемирного фонда дикой природы полностью узнаваема, хотя с художественной точки зрения в ее изображении не хватает нескольких частей
- Если объект изображен неоднозначно, и визуально воспринять его можно несколькими способами, то мозг будет переключаться между этими восприятиями, пока не выберет одну доминирующую интерпретацию. Этот принцип использовался при создании знаменитых «обратимых фигур», которые массово публиковались в юмористических журналах XVIII—XIX вв.ека.
«Моя жена и теща» — в зависимости от восприятия, мы видим здесь то отвернувшуюся молодую женщину, то старуху, уткнувшуюся подбородком в воротник.
- Простые объекты воспринимаются безошибочно, вне зависимости от того, в каком положении и масштабе изображены. То есть, простую форму мы всегда узнаем, вне зависимости от искажения.
Несмотря на искажения, изменение масштаба составляющих и изображение с разных сторон, мы узнаем знакомую нам форму.
Эти идеи лежат в основе принципов гештальтизма, и далее мы подробно рассмотрим каждый принцип.
Визуальные психологические приемы при создании UX
Перед тем, как мы приступим к освещению гештальт-теории в UX, быстро пробежимся по основным психологическим приемам, которые можно использовать при создании интерфейсов.
- Закон Хика. Он говорит о том, что чем больше вариантов вы даете пользователю, тем дольше он будет совершать выбор. Это можно проверить и на бытовом уровне — покупая фрукты, психологически гораздо проще выбрать из 3−4 сортов апельсинов, чем из 10. Так же и с интерфейсами — выбор должен быть, но не очень обширный.
- Концепция избирательного игнорирования. Она связана с тем, что пользователи воспринимают информацию на сайте очень быстро, и они склонны игнорировать те данные, которые считают несущественными. Поэтому важная информация на онлайн-ресурсе должны быть грамотно структурирована, а в идеале — быть минималистичной и не иметь вокруг себя отвлекающих декоративных элементов.
- Закон Миллера. Он гласит, что среднестатистический человек не способен запомнить более 7 ± 2 элементов за один раз. Учитывая ускоренное восприятие информации с экрана монитора, эту цифру можно сократить до 3−4, что, во временном эквиваленте, составляет 10−15 секунд. Другими словами, не стоит строить интерфейс так, чтобы пользователю приходилось запоминать какую-либо информацию дольше 10−15 секунд. А чтобы сохранять внимание пользователя, необходимо поработать над подсказками, всплывающими уведомлениями и удобно расположенной кнопкой поиска или формой обратной связи.
- Ментальные модели. Этот принцип связан с тем, что у каждого человека есть свое представление о любом объекте взаимодействия, исходя из предыдущего опыта. Так, если пользователь заходит на сайт, он ожидает, что корзина будет нарисована в виде реальной корзины, а поле для регистрации/авторизации будет в верхнем правом углу экрана.
Все эти принципы визуального восприятия дополняют гештальт-теорию в UX, законы которой мы рассмотрим ниже.
Принципы гештальтизма в проектировании интерфейсов
Простота
Наш мозг автоматически воспринимает простую общую форму, даже если она состоит из нескольких сложных — этот принцип восходит к первой идее гештальт теории. Мы сначала замечаем общую картину, а затем начинаем рассматривать детали.
В паззлах Davici каждая частичка головоломки — отдельная узнаваемая фигурка. Но собрав их вместе, мы видим только общую картину — в данном случае, котов.
В UX-дизайне это может использоваться так — если вы хотите отрисовать уникальные элементы интерфейса, придайте им знакомую для пользователей форму, а «внутри» этой формы используйте креатив на максимум (только не слишком увлекайтесь). Например, вы можете составить ее из отдельных элементов, линий и даже других форм. Этот прием позволит пользователям быстро распознавать знакомые элементы, при этом у них появится интерес рассмотреть их поближе — а значит, больше времени провести на вашем сайте.
Близость
Объекты, расположенные близко, мозг воспринимает как одну группу — даже если эти объекты отличаются формой, цветом, размеров. Например, когда мы читаем текст, то воспринимаем группу букв, расположенных близко друг к другу, как слово. В UX этот принцип может использоваться везде, где нужно подчеркнуть связанность элементов, например:
- текст + кнопки призыва к действию;
- текст + иллюстрация;
- несколько элементов меню, относящихся к одному подразделу;
- заголовок + подзаголовок;
- группа изображений, относящихся к одному пункту.
Принцип близости можно использовать и для облегчения восприятия при большом количестве информации. Например, если в форме для заполнения слишком много полей, пользователю сложно охватить их взглядом целиком (помним про правило 7 ± 2). Но если объединить поля для ввода в группы по 4−5 штук, то они будут восприниматься проще.
Этот же принцип можно использовать с рубрикой «Вопрос-ответ» или большими текстовыми объемами.
При этом нужно избегать и нежелательной группировки. Например, если расположить в одном углу интерфейса блога кнопки «Назад», «Вперед», «Добавить», «Сохранить» и «Удалить», то пользователь может запутаться. В этом случае лучше выделить в одну группу кнопки навигации, а во вторую — кнопки редактирования.
При этом нужно избегать и нежелательной группировки. Например, если расположить в одном углу интерфейса блога кнопки «Назад», «Вперед», «Добавить», «Сохранить» и «Удалить», то пользователь может запутаться. В этом случае лучше выделить в одну группу кнопки навигации, а во вторую — кнопки редактирования.
Общие области
Этот принцип вытекает из предыдущего. Мы уже выяснили, что близко расположенные элементы наш мозг воспринимает как группу. Но иногда в этой группе необходимо выделить что-то важное или дополнительную подгруппу. На помощь приходит принцип общих областей, который гласит: элементы, объединенные визуально, воспринимаются как отдельная группа. Объединение может происходить с помощью рамки, цветной подложки, выделения элементов и т. д.
Тарифы на сайте «Мегафона» уже воспринимаются как группа, потому что элементы расположены близко друг к другу. Но каждый тариф выделен в дополнительную область, которая показывает, какая именно информация относится к конкретному тарифу.
Выделение цветом показывает самое выгодное предложение среди схожих групп.
Сходство
Мы воспринимаем схожие по цвету, форме, размеру и другим признакам объекты как принадлежащие к одной группе — даже если они находятся не рядом друг с другом. Пример из жизни — одежда в шкафу. Когда мы подбираем себе образ, то автоматически «считываем» из шкафа сначала имеющиеся в наличии рубашки, затем — брюки, затем — пиджаки.
Хотя синие и черные круги здесь перемешаны, мы легко визуально отделяем одни от других.
Используйте этот принцип в интерфейсах, если вам необходимо показать схожесть нескольких элементов, расположенных на удалении друг от друга — если нет возможности расположить их вместе. Например, в дизайне блога вы можете использовать цветную обводку для выделения статей, относящихся к одной теме. Если статьи располагаются в хронологическом порядке, то невозможно сгруппировать их по тематике, но обводка определенного цвета покажет, к какому разделу относится та или иная статья.
Этот принцип может служить и противоположной цели — чтобы выделить какой-либо элемент из группы похожих. Такой прием хорошо работает на больших массивах текста — когда наиболее важные моменты выделяются другим цветом.
Этот принцип может служить и противоположной цели — чтобы выделить какой-либо элемент из группы похожих. Такой прием хорошо работает на больших массивах текста — когда наиболее важные моменты выделяются другим цветом.
Общее направление
Элементы, которые движутся (визуально или буквально) в одном направлении, воспринимаются как более связанные, чем те, которые не движутся. При этом они могут быть удалены друг от друга или различны по форме, цветам и т. д. Если движение синхронизировано по скорости и направлению, то этот эффект усиливается.
Принцип общего направления можно использовать при создании функциональной анимации — например, с помощью движения при скроллинге можно выделить отдельные части большого меню. Также анимация, возникающая среди статично расположенных элементов, может использоваться для привлечения внимания к определенной области экрана.
Принцип общего направления можно использовать при создании функциональной анимации — например, с помощью движения при скроллинге можно выделить отдельные части большого меню. Также анимация, возникающая среди статично расположенных элементов, может использоваться для привлечения внимания к определенной области экрана.
Стрелки, обозначающие этапы регистрации или другого комплексного действия, направлены в одну сторону — это показывает связанность нескольких этапов.
Завершение
Если объект является неполным или незаконченным, но в нем можно узнать знакомую фигуру, мозг самостоятельно «дорисовывает» недостающие детали.
Мы легко узнаем в этих фигурах круг, квадрат и треугольник, хотя фактически они не прорисованы.
Этот эффект работает, потому что наш мозг, в принципе, стремится к тому, чтобы все было просто и понятно. Увидев знакомые очертания, он автоматически распознает фигуру и определяет ее как нечто уже известное.
Такой принцип можно использовать, чтобы снизить когнитивную нагрузку на пользователя, если ваш сайт насыщен информацией. Также эффект полезен для интерфейсов мобильных устройств, где важен каждый миллиметр пространства. Грамотное использование негативного пространства в дизайне делает сайт более легким для восприятия.
Такой принцип можно использовать, чтобы снизить когнитивную нагрузку на пользователя, если ваш сайт насыщен информацией. Также эффект полезен для интерфейсов мобильных устройств, где важен каждый миллиметр пространства. Грамотное использование негативного пространства в дизайне делает сайт более легким для восприятия.
Один из сегодняшних трендов веб-дизайна связан с принципом непрерывности — особенно часто он используется в мобильных интерфейсах. Мы не видим изображение справа полностью, но догадываемся, что оно такое же, как и картинка слева. Это побуждает нас пролистывать карточки и читать новые статьи.
Также эффект используется в иконках загрузки — чем больше информации загружено, тем более замкнутым становится контур.
Симметрия
Симметричные объекты воспринимаются единым целым, даже если расположены на расстоянии друг от друга. Этот принцип легко проследить в оформлении хэдера сайта, пунктов меню, страниц с текстовой информацией.
В хэдере лендинга iPhone 13 название продукта и пункты меню располагаются на удалении друг от друга, но так как они размещены симметрично, мы понимаем, что эти пункты относятся к одному определенному продукту.
Текстовый контент и изображение, иллюстрирующее его, тоже расположены симметрично — такая группа тоже воспринимается как одно целое.
Но, как мы уже говорили, гештальт-принципы используются не только по прямому назначению. Например, асимметрия тоже оказывает мощное визуальное влияние, привлекая внимание пользователей к определенным деталям. Симметричные объекты зачастую смотрятся скучно и рассеивают внимание пользователя. Небольшая доля асимметрии пробуждает внимание и усиливает заинтересованность пользователей.
Пример использования асимметрии с того же сайта iPhone 13 — асимметрично расположенная более крупная надпись привлекает внимание к самому главному. Симметричные текстовые блоки ниже поясняют главную надпись.
Фигура + фон
Наш мозг способен отделять фигуру от основного фона, даже если они находятся в 2D-пространстве. Это, опять же, восходит к свойству нашего восприятия безошибочно определять знакомые простые формы. Мы понимаем, какой план находится к нам ближе, а какой дальше — то есть, какой является более важным.
Это свойство используется в различных всплывающих подсказках и баннерах. Чтобы отделить фигуру от фона, можно использовать тени, подложки, затемнение или размытие фона.
Это свойство используется в различных всплывающих подсказках и баннерах. Чтобы отделить фигуру от фона, можно использовать тени, подложки, затемнение или размытие фона.
Здесь мы в первую очередь обращаем внимание на всплывающее уведомление — задний фон при этом затемнен.
Меню на этом вайрфрейме считывается в первую очередь, т.к. оно отделено за счет тени и затемнения фона. Даже при отсутствии другой дополнительной информации, мы понимаем, что меню находится «ближе» к нам, чем основной сайт.
Непрерывность
Мы воспринимаем объекты, расположенные на одной прямой или плавной кривой, как относящиеся к одной группе. Этот принцип можно использовать при создании сложного меню или навигации. Чтобы не перегружать пользователя дополнительными разделителями, мы можем просто расположить разные группы схожих объектов на разных линиях.
Верхнее меню в Ozon показывает опции для работы с самой платформой, а нижнее — ведет в каталог. Оба меню расположены на разных линиях, что показывает их различие.
На сайте Samsung два разных верхних меню не только расположены на разных линиях, но еще и окрашены в разные цвета, что усиливает разделение.
Заключение
Как мы видим, гештальт-теория играет большую роль в проектировании интерфейсов, ведь она отлично описывает то, как строится зрительное восприятие. Зная основные гештальт-принципы, можно легко создавать интуитивно понятные интерфейсы и решать задачи по оптимальному расположению элементов. А высший пилотаж — использовать принципы, обратные теории визуального восприятия (например, асимметрию) для привлечения внимания к особо важным деталям.