UI/UX-антипаттерны: ошибки, от которых стоит уйти и не возвращаться

Привет!

Меня зовут Игорь Повшок, я сооснователь и коммерческий директор в SLAM. SLAM — компания с фокусом на разработку и развитие eСommerce-проектов.

Мы разрабатываем, поддерживаем и продвигаем сайты, внедряем CRM Битрикс24, создаем мобильные приложения.

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

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

Почему плохо: пользователь тратит время на угадывание и проверку гипотез «что скрывается под этой иконкой?».

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

Классика: «Посмотреть цену» ведет на форму регистрации. Пользователь хотел просто узнать стоимость, а его просят указать e-mail, имя бабушки и девичью фамилию учительницы.

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

Пользовательский эффект: развернулся и ушёл.

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

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

Почему плохо: внимание пользователя не бесконечно.

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

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

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

Последствия: человек уходит и больше не возвращается.

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

Почему плохо: пользователь не знает, сколько времени займёт ввод.

Решение: показывать всю форму сразу или четко указывать этапы.

На одной странице кнопка «Купить», на другой — «Добавить», на третьей — «В корзину».

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

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

Хороший UX: единообразие действий и терминов по всему сайту/приложению. Меньше разношерстных элементов — лучше, понятнее и «чище».

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

Пример: крестик закрытия размером с пиксель.

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

Решение: адекватные размеры интерактивных элементов (32×32 px и больше).

Заполнил форму «Оставить заявку», нажал «Отправить» — и тишина. Ни индикатора, ни подтверждения, ни всплывашки. Пользователь остается без ответа, успешно ли его действие, будет ли результат.

Проблема: пользователь не понимает, сработала ли кнопка.

Решение: любой фидбек — поп-ап с подтверждением, спасибо-попап, анимация, сообщение, лоадер.

Ты только зашёл на сайт, еще не успел его хоть немного изучить и понять то ли это, что тебе нужно, а тут сразу окно: «Установите наше приложение!» или другим призывом к действию, которое тебе не нужно, а только мешает. Выглядит навязчиво.

Реакция пользователя: закрыть и забыть.

Антипаттерны — это не конец света, но и не безобидная ошибка. Это те моменты, из-за которых пользователь:

Стоит проверить каждый спорный элемент интерфейса вопросом:

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