вебинар: 5 лучших дизайн-концепций Разбор арт-дира

Психология боли: еще 4 элемента дизайна, которые бесят ваших пользователей (часть 2)

Автор статьи:
,

Введение

В ранее опубликованном лонгриде «Психология боли: 4 элементы дизайна, которые бесят ваших пользователей», мы говорили о таймерах, автообновлениях, автозапуске и плавающих баннерах. Но это не все дизайн-решения, которые приводят к недоверию к продукту, отказам и росту негатива.Далее поговорим о еще четырех UX-решениях, которые раздражают людей на уровне интуиции и психологии. И покажем, как сделать взаимодействие честным, предсказуемым и уважительным к пользователю.

1. Форсированная регистрация

Вы ищите в поиске необходимую тему, заходите на сайт, увидев интригующий заголовок статьи. Кликаете. Начинаете читать… и на втором абзаце — бац!
«Чтобы продолжить, войдите или зарегистрируйтесь».

Но вы не готовы. Вы только знакомитесь с продуктом и не уверены, нужна ли вам регистрация. И тогда вместо интереса появляется раздражение.

Почему это UX-проблема

Форсированная регистрация или обязательный вход в аккаунт — это насильственное прерывание пользовательского потока. Вот что в этом не так:

1. Ощущение «вторжения»

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

2. Нарушение мотивации

Барьер мешает пользователям изучать контент или продукт. Это выбивает из состояния интереса и заставляет переключиться.

3. Повышенный порог входа

Заполнить форму, подтвердить email, придумать пароль… Зачем все это пользователю, если еще не ясно, хочет ли он остаться здесь?

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

Это тонкий момент:
  • если дать ему контроль и доступ — он может «привязаться» к продукту,
  • если навязать действия — он может уйти.

Как сделать лучше?

Форсированная регистрация или обязательный вход в аккаунт — это насильственное прерывание пользовательского потока. Вот что в этом не так:

1. Отложенная регистрация

Сначала позвольте изучить продукт, воспользоваться функциями в базовом объеме, прочитать контент. Предложите вход при совершении действий: при сохранении, покупке, при клике на кнопки «поделиться» или «оставить отзыв».

2.Ознакомление без входа

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

3. Мягкое подталкивание

Вместо блокировки контента покажите преимущества регистрации: «Создайте аккаунт, чтобы сохранить прогресс» или «Войдите, чтобы продолжить с того места, где остановились».

4. Прозрачность

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

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

2. Непредсказуемая навигация

Навигация необходима для ориентации пользователей в продукте. Как только она становится непредсказуемой или непонятной, пользователь ощущает дезориентацию:

«Где я?», «Как сюда попал?», «А как вернуться назад?»

Примеры «запутывающей» навигации:
  • Бургер-меню, которое визуально не похоже на меню — либо спрятано, либо стилизовано до неузнаваемости.
  • Элементы, которые появляются и исчезают при скролле — и пользователь не успевает их заметить.
  • Иконки без подписей — смысл некоторых изображений может быть понятен только дизайнерам, но не пользователям (например, молния, абстрактный «домик» или треугольник вместо кнопки «назад»).
  • Непоследовательная навигация — один и тот же элемент на разных страницах ведет по-разному или выглядит по-разному.
  • Отсутствие обратной связи — пользователь кликнул, но ничего не изменилось.

Почему это вызывает тревогу

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

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

Что делать, чтобы навигация работала?

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

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

3. Формы

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

Проблемы с формами, которые могут вывести из себя:

1. Бесконечные поля

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

2. Нестандартная валидация

Когда форма требует ввода данных в очень специфическом формате (например, номера телефона), но не дает подсказки о формате.

3. Отсутствие автосохранения или сохранения черновиков

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

4. Ошибки без объяснений

Ошибки валидации без четких подсказок. Например, «Ошибка!» без объяснения, что именно в поле введено неверно.

Почему это раздражает?

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

1. Перегрузка информации

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

2. Нарушение потока

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

3. Отсутствие прозрачности

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

Как улучшить формы?

Будьте внимательны к пользователям:

1. Используйте inline-валидацию

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

2. Автозаполнение и автосохранение

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

3. Четкие подсказки и примеры

Сопроводите валидацию полей конкретными подсказками. Например, если поле для номера телефона требует определенного формата, укажите пример («например, +7 900 123 45 67»). Это поможет пользователю понять, как именно нужно вводить информацию.

4. Группировка полей

Вместо длинных списков разбейте поля на логичные блоки. Например, сначала личные данные (имя, фамилия, дата рождения), затем контактная информация (email, телефон), а потом безопасность (пароль, подтверждение пароля).

5. Прогресс-бары для длинных форм

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

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

4. «Псевдоскорость» и ложные загрузки

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

Проблемы, которые раздражают:

1. Отсутствие индикатора загрузки

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

2. Непонятный прогресс

Неверное отображение данных о загрузке в индикаторе можно назвать псевдоскоростью. Например, когда на экране появляется надпись «99%» буквально за несколько секунд, а оставшийся 1% грузится намного дольше. Такие ошибки заставляют пользователей сомневаться в точности данных.

3. Мигающие скелетоны

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

Почему это раздражает?

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

1. Неопределенность и тревога

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

2. Отсутствие контроля

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

3. Когнитивная перегрузка

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

Как улучшить опыт пользователя?

Давайте рассмотрим, как показать статус загрузки прозрачно и понятно:

1. Честно отобразите прогресс, показав четкую информацию о статусе загрузки

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

2. Визуализируйте процесс загрузки

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

3. Покажите точную информацию о времени, если это возможно

Например, в случае с видео или большими файлами можно отобразить таймер или «приблизительное время до завершения».

4. Избегайте «быстрых» индикаторов

Не ускоряйте видимый прогресс за счет чрезмерного использования псевдоскорости, показывая 100% загрузки через несколько секунд, если на самом деле процесс еще не завершен.

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

Заключение

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

UX — это не просто набор кнопок и форм, это эмоциональный опыт. Если он вызывает злость или разочарование, доверие к бренду падает. А значит, в следующий раз пользователь выберет кого-то, кто будет обращаться с ним понятнее и честнее. Вывод прост: чем меньше боли, тем больше лояльности.

Бесплатный учебник по UX/UI‑дизайну
Все лонгриды