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

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

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

Как исправить UX: регистрация на сайте или в мобильном приложении

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как исправить UX: оформление интерактивных элементов

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

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

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

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

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

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

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

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

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

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

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

Как исправить UX: оплата товара или услуги

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

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

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

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

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

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

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

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

Что делать:

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

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

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

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

Как исправить UX: анимации

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

Что бесит пользователей в анимациях:

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

• Несоответствие анимации тематике сайта, неочевидность ее применения.

• Слишком долгая приветственная анимация, которую нельзя пропустить.

Удачный пример на сайте https://lempens-design.com/: анимированы небольшие элементы, которые добавляют сайту интерактивности и динамики, но при этом сопровождают пользователя на пути к цели, не отвлекая от нее.

Что можно сделать, чтобы исправить ситуацию:

• Отказаться от резких переходов и контрастных цветов.

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

• Дать возможность пропустить или закрыть анимацию при входе в приложение или первом посещении сайта.

• Проработать портрет ЦА, чтобы выбрать подходящее оформление.

Как исправить UX: использование жестов в мобильных версиях и приложениях

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

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

• Несоответствие результата ожиданиям (например, свайп не возвращает на экран назад, а перебрасывает в начало страницы или в другое неожиданное место).

• Отсутствие управления жестами как такового (вместо этого предлагается ухитриться попасть пальцем в кнопку «назад»).

• Приходится скроллить, чтобы добраться до верхней части страницы, где есть стрелка, возвращающая назад.

Как это исправить:

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

• Ввести бесшовное закрытие окна и возвращение на предыдущий этап по свайпу без дополнительных действий.

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

Как исправить UX: эмпатия к пользователю

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

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

Хотите улучшить UX, но не знаете, с чего начать? Специалисты DarvinDigital помогут разобраться. Просто позвоните нам или заполните форму на сайте. На бесплатной консультации мы ничего не продаем: только подробно отвечаем на ваши вопросы.