Меняем «бесит» на «нравится»: как исправить UX

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

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

Регистрация на сайте или в мобильном приложении

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

Что бесит пользователей в регистрации:

• Необходимость ввода электронной почты с последующим вводом автоматически сгенерированного кода.

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

• Сама необходимость проходить регистрацию.

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

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

Что можно сделать:

• Заменить электронную почту номером телефона: его не придется мучительно долго вспоминать, и он всегда под рукой.

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

• Предоставить доступ к базовому контенту без обязательной регистрации: ускорит принятие решения и снизит процент отказов.

Онбординг или введение в функционал сайта/приложения

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

Что бесит пользователя в таком решении:

• Бесполезная информация — мнимые фичи и преимущества вместо руководства по совершению целевого действия.

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

• Пустая трата времени без возможности пропустить ненужное «обучение».

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

источник изображения vc.ru

Чем заменить:

• Обучением от потребности: показывайте, как выполнить определенное действие, в соответствующем разделе (всплывающие окна, стрелочки и подсказки).

• Возможностью отказаться от просмотра или обучения как для повторных сеансов, так и для тех, кто знакомится с продуктом впервые.

Оформление интерактивных элементов

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

Что бесит пользователя в этой категории:

• Стандартизированный подход к оформлению интерактивных элементов.

• Скучные и безжизненные кнопки, одинаковые формы.

• Отсутствие персонализации.

Что можно сделать:

• Заменить стандартную форму с несколькими полями интерактивным квизом с пошаговым заполнением.

• Добавить в каждый шаг возможность взаимодействия с формой.

• Дать возможность персонализировать результат.

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

источник изображения vc.ru

Оплата товара или услуги

Казалось бы: здесь все просто. Нужно дать возможность оплатить покупку. На самом деле часто встречаются серьезные сложности.

Что бесит пользователей при оплате:

• Необходимость вручную вводить номер карты.

• Слишком много вопросов по личным данным.

• Слишком много полей для заполнения, часть из которых стирается, если вернуться на шаг назад: приходится вводить все заново.

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

Пример удачного оформления оплаты:

источник изображения vc.ru

Что делать:

• Максимально упростить систему оплаты: лучше всего это видно на примере маркетплейсов, где купить товар можно буквально в два клика.

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

• «Запомнить» карту пользователя для последующих оплат.

• Отказаться от постоянного ввода сложных данных.