1. Неочевидная навигация
Когда кнопки и ссылки выглядят красиво, но не говорят, какое действие под ними скрывается. Нажимаешь на иконку — и не понимаешь, это корзина, профиль или вызов демона.
Почему плохо: пользователь тратит время на угадывание и проверку гипотез «что скрывается под этой иконкой?».
Пример: меню только из иконок без подписей. Красиво — но непонятно. Не всегда удается подобрать иконку одинаково очевидную для всех типов пользователей.
Неочевидная навигация на сайте
2. Сюрприз после клика
Классика: «Посмотреть цену» ведет на форму регистрации. Пользователь хотел просто узнать стоимость, а его просят указать e-mail, имя бабушки и девичью фамилию учительницы.
Почему плохо: рушится доверие пользователя, обещанное действие не привело к результату, нужно совершать лишние действия.
Пользовательский эффект: развернулся и ушёл.
Регистрация для просмотра цены
3. Перегрузка экрана
Когда интерфейс похож на новогоднюю ёлку: баннеры, всплывашки, иконки, разноцветные кнопки, модалки, чаты...
Кажется, будто ты попал на витрину в Чёрную пятницу или сайт 2000-х годов. Невозможно зацепиться за что-то одно глазу, нет визуального обозначения, что наиболее важно на экране. Прежде, чем пользователь найдет что-то важное, он устанет и уйдет. Невозможно долго концентрироваться на экранах подобного рода.
Перегрузка экрана
Почему плохо: внимание пользователя не бесконечно.
Решение: визуальная иерархия, фокус на одно действие за раз. В удержании пользователей на сайте могут помочь F и Z паттерны движения глаз. Они дают понять, как читатели просматривают информацию и на чем концентрируют внимание.
Визуальная иерархия на странице
4. Манипулятивные «dark patterns»
Кнопка «Закрыть» вызывает попап: «Ты точно хочешь уйти? Ты можешь потерять скидку!». Такие вещи сделаны для того, чтобы вызвать у пользователя тревожность и чувство вины.
Это называется confirm-shaming — вина за свой выбор.
Почему плохо: это не антипаттерн, это уже манипуляция. А манипуляция никогда не влияет положительно на пользователя.
Последствия: человек уходит и больше не возвращается.
Манипулятивные паттерны
5. Бесконечные формы
Вводишь e-mail, и вдруг появляется ещё пять обязательных полей. Кажется, что это не форма, коробка в коробке с сюрпризом. Пока доберешься до финиша и своего целевого действия — устанешь разбирать. Если вы все-же делаете какой-то процесс поэтапным — его следует обозначать какой-то индикацией, понятной пользователю, разбивать на шаги, и хорошо бы, чтобы пользователь видел в моменте, на каком этапе он находится и сколько ему еще осталось.
Почему плохо: пользователь не знает, сколько времени займёт ввод.
Решение: показывать всю форму сразу или четко указывать этапы.
Форма в несколько этапов
6. Непоследовательность в UI
На одной странице кнопка «Купить», на другой — «Добавить», на третьей — «В корзину».
Всё про одно, но написано по-разному. Если кнопка обозначает по сути одно и то же действие, она должна иметь одинаковый вид на всем сайте: подпись, цвет и т.п.
Почему плохо: заставляет думать, и будто знакомиться с сайтом заново в зависимости от страницы.
Хороший UX: единообразие действий и терминов по всему сайту/приложению. Меньше разношерстных элементов — лучше, понятнее и «чище».
7. Маленькие кликабельные зоны
Это особенно раздражает на мобильных версиях. Нажал чуть мимо — попал в рекламу или перешел туда, куда вообще не собирался. При проектировании кликабельных элементов стоит учитывать разные типы пользователей, и привести элементы к виду, который будет удобен для большинства.
Пример: крестик закрытия размером с пиксель.
Почему плохо: ошибки на ровном месте, лишние действия пользователя и, как следствие, раздражение.
Решение: адекватные размеры интерактивных элементов (32×32 px и больше).
Маленькие кликабельные зоны
8. Нет обратной связи
Заполнил форму «Оставить заявку», нажал «Отправить» — и тишина. Ни индикатора, ни подтверждения, ни всплывашки. Пользователь остается без ответа, успешно ли его действие, будет ли результат.
Проблема: пользователь не понимает, сработала ли кнопка.
Решение: любой фидбек — поп-ап с подтверждением, спасибо-попап, анимация, сообщение, лоадер.
Обратная связь после отправки формы
9. Модальные окна на входе
Ты только зашёл на сайт, еще не успел его хоть немного изучить и понять то ли это, что тебе нужно, а тут сразу окно: «Установите наше приложение!» или другим призывом к действию, которое тебе не нужно, а только мешает. Выглядит навязчиво.
Реакция пользователя: закрыть и забыть.
Вывод: делай проще — будет лучше
Антипаттерны — это не конец света, но и не безобидная ошибка. Это те моменты, из-за которых пользователь:
- путается
- раздражается
- теряет доверие
- не возвращается
Стоит проверить каждый спорный элемент интерфейса вопросом:
«Удобно ли это мне, если бы я зашел сюда впервые?», а еще лучше поставить себя на место обычного пользователя и постараться понять, каково будет ему. Не стоит забывать, что сайтами пользуются не только подкованные в этой сфере люди. А так же и те, кто является не самым частым посетителем сети, вроде наших родителей. Поэтому дизайн нужно стараться делать понятным, простым и удобным для всех.
Хотите крутую разработку? Пишите нам.
