Психология UX

Ваши проекты обретают смысл, когда в основе дизайна лежат психологические правила.

UX-дизайн напрямую связан с законами человеческой психологии. Наука помогает специалистам анализировать поведение пользователей и управлять им. Без понимания социальной, поведенческой и когнитивной психологии невозможно получить положительный пользовательский опыт и добиться вовлеченности пользователя в проект.

Сегодня мы рассмотрим двадцать психологических принципов, которые необходимо учитывать на каждом этапе процесса проектирования.

«Время, необходимое для достижения цели, зависит от размера цели и расстояния до неё.» — Закон Пола Фиттса

О чем закон

Психолог, изучавший моторную систему человека, Пол Фиттс показал, что время, требуемое для попадания в цель зависит от расстояния до цели, а также находится в обратной зависимости от размера цели.

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

Как применить закон в UX

Делайте элементы, которые хотите выделить, большими и располагайте их поближе к пользователям. Это правило особенно актуально для элементов, которые должно быть легко найти и выбрать.

Простые правила

– сократите расстояние от одной важной точки до другой (если они находятся в одном пользовательском сценарии);

– целевой объект сделайте достаточно большим;

– увеличьте область клика для чекбоксов и переключателей;

– стремитесь сделать больше отступ между взаимно нежелательными кнопками, например «Сохранить» и «Удалить»;

– для списка ссылок сделайте кликабельными не только надписи, но и все строки целиком.

Где почитать подробнее:

«Время, требуемое для выполнения выбора, возрастает с количеством и сложностью самих вариантов выбора.» — Закон Уильяма Хика и Рей Хаймана

О чем закон

Психологи Уильям Хик и Рей Хайман вывели формулу, которая описывает логарифмическую зависимость между временем реакции и количеством опций, из которых нужно сделать выбор. Закон говорит о том, что количество информации, поступающее в мозг, определяет время, которое человек тратит на принятие решения. Получается, чем больше вариантов вы предлагаете пользователям, тем дольше они будут принимать решение. И тем выше шанс, что они разочаруются и уйдут.

Как применить закон в UX

Закон Хика широко используется в проектировании интерфейсов, например при создании выпадающих меню, форм регистрации, контактных форм, меню навигации, списках и многого другого.

Упрощайте выбор для пользователя, разбивания сложные задачи на маленькие шаги. Выделяйте рекомендуемые параметры, чтобы не перегружать пользователей.

Простые правила

– не выкладывайте перед пользователем все опции сразу;

– группируйте меню по категориям;

– массивные формы разделите на шаги, и на каждом шаге спрашивайте только то, что требуется;

– разбивайте сложные процессы и задачи на несколько этапов;

– предлагайте меньше вариантов.

Где почитать подробнее:

«Пользователи проводят большую часть времени на других сайтах (а не на вашем). Это означает, что им хотелось бы, чтобы ваш сайт работал так, как и все другие ресурсы, которые им уже знакомы.» — Закон Якоба Нильсена

О чем закон

Закон Якоба придуман Якобом Нильсеном, сооснователем Nielsen Norman Group, который сделал огромный вклад в UX.

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

Простые правила

– используйте привычные паттерны;

– размещайте элементы в тех местах, где пользователь ожидает их увидеть (например: меню навигации сайта или приложения размещайте сверху, реже — слева, информацию об аккаунте или «крестик» в правом верхнем углу, а нажатие на клавишу «ESC» как возможность закрыть модальное окно или схлопнуть выпадающий список);

– черпайте идеи с тех сайтов, на которых ваша ЦА находится.

Где почитать подробнее

«Люди будут воспринимать и интерпретировать двусмысленные или сложные изображения в виде простой формы. Так происходит из-за того, что для интерпретации нужно приложить малое количество когнитивных усилий.» — Закон Прагнанца

О чем закон

Закон Прагнанца отражает одну из основных идей гештальтпсихологии — стремление человеческой психики к стабильности. Когда мы видим образ, то сразу же придаем ему наиболее простую, понятную для нас форму.

«Объекты, расположенные рядом друг с другом, склонны к группированию.» — Закон Близости

О чем закон

Объекты, расположенные рядом, наш мозг стремится объединить в группы. Гештальт-психологи утверждали, что по этому принципу, разум человека обладает врожденной склонностью воспринимать объекты, которые расположены ближе друг к другу как единое целое, нежели объекты, расположенные на удалении.

Поэтому очень важно подходить к группировке с максимальной ответственностью. Связанные элементы располагайте в UX-дизайне в непосредственной близости, а несвязанные – на расстоянии друг от друга. Допустив ошибку пользователям будет сложно изучать механизмы работы продукта и это негативно повлияет на user experience.

Как применить закон в UX

В интерфейсе принцип близости можно применить практически везде: от навигации, карточек, галерей и баннеров до списков, основного текста и нумерации страниц.

Чтобы пользователю было проще изучать информацию на сайте и глубже погружаться в содержимое интерфейса, необходимо группировать и упорядочивать взаимосвязанную информацию. Несвязанную располагать на расстоянии, стараясь усиливать визуальную иерархию.

Где почитать подробнее:

«Человеческий глаз склонен воспринимать похожие элементы в дизайне как целостную картину, форму или группу, даже если эти элементы разделены.» — Закон Сходства

О чем закон

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

Как применить закон в UX

При использовании сходства в вашем дизайне имейте в виду, что цвет является самым эффективным способом группировки, в то время как форма и размер самыми слабыми.

В UX-дизайне это может быть применено к ссылкам, призывам к действию, кнопкам, заголовкам и навигационным элементам, которые визуально будут отличаться от обычных текстовых элементов.

С помощью этого принципа можно выделить какой-то один объект и сделать его непохожим на остальные. Это называется «Аномалией» — и эту фишку можно использовать, чтобы создать контраст или увеличить визуальный вес, тем самым привлечь внимание пользователя.

«Элементы, которые визуально связаны, воспринимаются как более связанные, чем элементы без соединения.» — Закон Единообразной связи

О чем закон

Это Закон напоминает Закон Близости: элементы, расположенные в пределах одной области, воспринимаются как группа.

Как применить закон в UX

Он помогает сгруппировать информацию и организовать контент, но также позволяет отделить одну контентную группу от другой или создать точку фокусировки. Общая область усиливает иерархию, повышает «сканируемость» контента и помогает выделить нужную информацию.

Для группировки можно использовать линии, цвета, формы и тени.

«Человеческий мозг интерпретирует получаемую информацию и, если в ней не хватает каких-то частей, он дополняет ее, исходя из своего предыдущего опыта.» — Закон Замкнутости

О чем закон

Людям свойственно мысленно дорисовывать изображение, если оно им кажется незавершенным. Естественно, мы объединяем элементы только в те формы, которые нам уже знакомы. Этим приемом зритель вовлекается в творческий процесс, самостоятельно достраивая недостающие части, визуально стремясь завершить форму.

Как применить закон в UX

Благодаря этой особенности нашего сознания, можно использовать эти приемы в логотипах, иконках, инфографике и других элементах.

Меньшее количество элементов позволит создать интерфейс менее сложным и более увлекательным. Замкнутость позволяет снизить визуальный шум.

«Элементы воспринимаются либо как фигура (элемент фокуса), либо как основание (фон, на котором находится фигура).» — Закон Фигура-Фон

О чем закон

Особенность человеческой психики — видеть один аспект гештальта как фигуру (замкнутое целое), а другой как фон. Поэтому принцип перекрытия заключается в том, что мы склонны заполнять промежутки между элементами, чтобы представить незавершенные объекты как единое целое.

Также принцип позволяет нам понять, на чем мы должны сосредоточиться и что мы можем безопасно игнорировать в композиции.

Важным элементом управления отношениями фигуры и фона является цвет.

Как применить закон в UX

Фигура-фон — это полезный инструмент, когда нужно быстро и эффективно передать информацию. Благодаря этому принципу при проектировании интерфейса можно создать ощущение комфорта и сосредоточить внимание пользователя на том, что действительно важно.

Фигуру-фон хорошо использовать при оформлении лендингов, галереи, каталога, навигации, баннеров.

«Симметричные элементы (даже если они находятся на расстоянии) обычно воспринимаются как взаимосвязанные и создают ощущение целостности и порядка.» — Закон Симметрии

О чем закон

Симметрия подразумевает точное, зеркальное отражение двух противоположных плоскостей. Ее можно рассматривать как баланс, разделяющий объект на две равные половины. В жизни примерами симметрии выступают геометрические изображения, такие как равносторонние треугольники, круги и квадраты и так далее.

Человеческий разум желает найти симметрию в композиции, чтобы чувствовать себя комфортно при просмотре изображения.

Как применить закон в UX

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

«Элементы, выстроенные по прямой или плавно изогнутой линии, кажутся нам более взаимосвязанными, чем те, что расположены случайно или по ломаной линии.» — Закон Непрерывности

О чем закон

Непрерывность заставляет наши глаза следовать последовательным путем, вычерчивая линейный рисунок от объекта к объекту. Чем плавнее линия, тем проще элементы складываются в единую фигуру: наш мозг любит идти по пути наименьшего сопротивления.

Как применить закон в UX

Инстинкт следования ярко выражен в дизайне сайтов и интерфейсов. Он помогает нам направить взгляд пользователя по странице и обратить внимание на нужные разделы. Когда принцип следования прерывается – это позволяет пользователю понять, что один логический блок закончился и можно обратить внимание на следующий. Чаще всего принцип применяется в меню и подменю, списках, каталогах товаров и услуг, карусели, таймлайнах, этапах, диаграммах.

Простые правила

– уберите лишние детали, а разум закроет пробелы;

– объединяйте визуально непохожие элементы с помощью принципа сходства и близости;

– цвет является самым эффективным способом группировки, в то время как форма и размер самыми слабыми;

– повторяя в UX-дизайне такие графические свойства как размер, шрифт и цвет, можно достичь ощущения единства;

– где необходимо создать четкий призыв к действию, который выделяется на фоне, используйте принцип фигура-фон.

Где почитать подробнее про законы 6-11:

«Среднестатистический человек может хранить 7 элементов (плюс-минус 2) в своей рабочей памяти.» — Закон Миллера

О чем закон

В 1956 году американский психолог Джордж Миллер опубликовал статью под названием «Магическое число семь плюс-минус два: некоторые ограничения в нашей возможности обработки информации».

Согласно закону, наша кратковременная память ограничена в среднем цифрой 7, где 7 называется «магическим числом». При этом, это не строгая цифра для деления, так как диапазон варьируется от 5 до 9. Семь (плюс или минус 2) — это способ группировки контента, чтобы лучше организовать его для человеческого понимания.

Как применить закон в UX

Закон можно использовать для улучшения сайта. Например, для лучшего запоминания номера телефона стоит использовать формат – 8 (800) 123-4567. Также для ввода данных своей карты, при совершении онлайн покупки, стоит разделить поля ввода на группы. Длинные списки и категории стоит тоже разделить на группы, чтобы пользователю облегчить выбор.

Где почитать подробнее:

«Любая задача будет расширяться до тех пор, пока не будет потрачено всё доступное (свободное) время.» — Закон Паркинсона

О чем закон

Первый закон Паркинсона звучит так: объем работы всегда будет расти для того, чтобы заполнить время, отведенное на ее выполнение. Если сказать кратко – вы выполните задачу в точно определенный для этого срок.

Этот закон действует во всех сферах, так как люди часто откладывают дела в «долгий ящик», начиная выполнение в последнюю минуту.

Как применить закон в UX

Помните, вы можете на много больше, чем вам кажется! Не откладывайте порученные вам дела на самый последний момент, это лишь уменьшит продуктивность и займет намного больше времени для решения задачи.

Найдите свои показатели между «не хватает времени» и «необходимый минимум». Помните, что ваша цель — хорошо сделать работу за минимальное время, а не сделать её кое-как, но максимально быстро.

Где написано подробнее:

«Эффектом порядкового номера называется склонность пользователя лучше всего запоминать первый и последний элементы в серии.» — Эффект порядкового номера

О чем закон

Эффект края — это особенность восприятия, при которой человек лучше запоминает начальные и конечные элементы группы, и хуже — промежуточные. Термин был введен немецким психологом Германом Эббингаузом при изучении памяти.

Как применить закон в UX

При проектировании пользовательских интерфейсов необходимо придерживаться данного эффекта. Зная, что расположение элементов может повлиять на пользовательский опыт, вы можете уменьшить нагрузку на память вашего пользователя с помощью размещения важных элементов по краям. Благодаря этому, вы сделаете свой продукт более интуитивным, а своих пользователей – более продвинутыми.

Например, если в слайдере будет 4-5 слайдов, пользователи запомнят те, с которыми они взаимодействуют дольше. Это первый слайд, который показывается до переключения элементов и последний, отпечатывающийся в памяти, так как на нём юзер обычно заканчивает просмотр контента.

Также эффект края можно применять при проектировании навигации, хедера, в отзывах, фильтрах, корзине и оформлении заказа. Важно подчеркнуть ключевую информацию в начале и конце, а менее важную разместить в середине.

Где почитать подробнее:

«Закон сохранения сложности, также известный как закон Теслера, гласит, что для любой системы существует определенный порог сложности, который нельзя снизить.» — Закон Теслера

О чем закон

Лари Теслер утверждал, что для любой системы существует определенное количество сложности, которое нельзя сократить. Он говорит, что во многих случаях инженер (в нашем случае проектировщик интерфейсов) должен потратить лишнюю неделю на упрощение продукта, а не заставлять миллионы пользователей тратить лишнюю минуту на использование сложной программы.

Как применить закон в UX

Основное правило при создании интерфейсов: Делайте дизайн именно для пользователя!

В UX-дизайне это может быть применено к формам, выпадающим спискам, чекбоксам, подсказкам.

Где почитать подробнее:

«Эффект изоляции, также известный как эффект Ресторффа, говорит о том, что среди ряда похожих элементов будет проще запомнить тот, который выделяется больше всего (например, круг среди n-угольных фигур).» — Закон Ресторффа

О чем закон

Закон Ресторффа описывает свойство человеческой памяти запоминать объекты, которые выделяются из общей массы.

Человеку свойственно выделять необычные объекты. Он мысленно изолирует одинаковые элементы и выделяет тот, который отличается от других. Этот принцип работает везде: от выбора товаров на полке до элементов управления в интерфейсе.

Как применить закон в UX

В дизайне интерфейсов эффект изоляции обычно его используют, чтобы выделить call to action. Если разместить в несколько колонок 3-4 одинаковых кнопки или элемента, пользователи не поймут, какая из них в приоритете.

Мы должны делать важные элементы и значимую информацию визуально выделенными размером, цветом, расположением или формой.

Где почитать подробнее:

«Во многих случаях примерно 80% последствий происходит от 20% причин.» — Принцип Парето

О чем закон

Этот принцип был предложен консультантом по управлению Джозефом Джураном в 1951 году, который сослался на частную закономерность, выявленную итальянским экономистом и социологом Вильфредо Парето в 1897 году.

Закон Парето полезен, потому что он позволяет нам сосредоточить наши усилия на областях, которые приносят наибольшую пользу. Он используется практически в каждой бизнес-дисциплине.

Как применить закон в UX

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

Поэтому при аналитике и проектировании интерфейса, UX-дизайнеру необходимо проанализировать какие самые ценные функции используются целевой аудиторией и уделить им большее внимание. Данный способ позволит понять недочеты в работе сайта и исправить их.

Где почитать подробнее:

«Люди судят об опыте, в значительной степени основываясь на том, что они чувствовали на пике и в конце, а не на общей сумме или среднем за каждый момент опыта.» — Пиковое правило

О чем закон

Правило «пика и завершения» – это психологическая эвристика, при которой люди судят о переживании в основном на основании того, как они себя чувствовали на его пике и в конце, а не на основе общей суммы или среднего значения каждого момента. Эффект возникает независимо от того, приятно это переживание или неприятно.

Как применить закон в UX

Понимание когнитивных правил, которые наш ум использует для хранения информации, позволяет нам создавать более запоминающиеся продукты и улучшать субъективные мнения клиентов о пользовательском интерфейсе.

При проектировании интерфейсов необходимо обратить внимание на наиболее интенсивные точки типичного поведения пользователя на сайте («пики») и конечные моменты («завершение»).

Данное правило чаще всего применяется в интерактивных элементах, иконках, живых иллюстрациях, простой навигации, в деталях к ключевым моментам.

Где почитать подробнее:

«Люди запоминают незавершенные или прерванные задачи лучше, чем выполненные.» — Эффект Зейгарник

О чем закон

Эффект Зейгарник — один из известных психологических эффектов, ныне описанный почти во всех книгах и учебниках по психологии. Коротко его можно сформулировать как «незавершенные действия запоминаются лучше, чем завершенные».

Иными словами, люди устроены так, что испытывают тягу к завершению действия.

Как применить закон в UX

Именно на этом эффекте психологии и основан так называемый эффект неопределенности. Эффект постепенного вовлечения можно применить в:

— статьях (публикуя сначала анонс статьи со ссылкой на детальную страницу),

— видеороликах (например, при наведении на видео показывать быстрый предпросмотр, давая понять пользователю его краткое содержание),

— длинных формах регистрации и прочих формах (предлагать заполнять её поэтапно, визуально упростив форму. Это также позволит клиенту примерно оценить время заполнения, так как пользователь будет подозревать, что на каждый новый шаг может быть потрачено столько же времени, как и на первый),

— первом экране сайта (визуально делая его незавершенным).

Где написано подробнее:

«Производительность возрастает, когда компьютер и его пользователи взаимодействуют с темпом (<400 мс), который гарантирует, что ни один из них не должен ждать другого.» — Порог Доэрти

О чем закон

Основная задача закона – обеспечить отклик системы в течение 400 мс, чтобы удержать внимание пользователей и повысить производительность.

В 1982 году Уолтер Дж. Доэрти и Арвинд Дж. Тадани опубликовали в IBM Systems Journal исследовательскую работу, которая устанавливала новые требования к оптимальной скорости ответа компьютера — 400 миллисекунд, а не 2 000 (2 секунды), как было принято раньше. Когда компьютер исполнял команду пользователя и давал обратную связь быстрее, чем за 400 миллисекунд, считалось, что он превышает порог Доэрти, и такое взаимодействие является «завлекающим» пользователя.

Как применить закон в UX

Пользователи хотят получить информацию как можно быстрее.

Лучший способ добиться этого – сократить время загрузки сайта и скорость страницы. Это уменьшит количество отказов, и повысит удовлетворенность клиентов.

UX-дизайн может существенно повлиять на скорость загрузки, благодаря:

— оптимизации изображений большого размера,

— размещению менее важного контента внизу страницы,

— регулярному тестированию эффективности вашего сайта.

Где написано подробнее:

Представленные выше законы влияют все аспекты взаимодействия пользователи с вашим продуктом: от знакомства до принятия решений.

Понимание того, как пользователи воспринимают и интерпретируют визуальные элементы, даст вам больший контроль над их действиями, а также поможет выстроить прозрачную коммуникацию посредством интерфейса.

Профессионалы, которые используют данные принципы, не только улучшают пользовательский опыт, но и делают его выразительным и ясным.

В статье используются материалы с сайта lawsofux.com