Хабрахабр

Не Делисамокатом единым: как мелкие юзабилити-ошибки создают большие проблемы на реальном примере

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

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

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

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

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

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

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

Прошло 2 года

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

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

Из этических соображений я затер все упоминания компании из юзабилити-аудита.

Юзабилити-аудит мобильного приложения для программы лояльности

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

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

Кейс №1: первый запуск приложения

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

Проблема

Такая презентация есть в описании приложения в App Store – краткое описание ценностей приложения и скриншоты помогают пользователям принять решение о загрузке. Отсутствует презентация типовых сценариев использования приложения. Первый контакт с приложением после установки должен делать тоже самое.

Баннер «Все преимущества программы лояльности в твоем смартфоне» понятен только существующим участникам программы.

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

Рекомендация

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

Пример, как это может выглядеть:

Для примера были взяты самые очевидные ценности.
При первом запуске приложения пользователь видит слайд-шоу с презентацией основных возможностей приложения. Что именно отображать в рабочем варианте поможет определить юзабилити-исследование.

Проблема

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

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

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

Рекомендация

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

Пример, как это может выглядеть показан ниже:

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

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

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

Кейс №2: сценарий «У меня нет карты»

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

Кнопки окрашены в серый цвет, что создает ощущение неактивности, а нажатие на них ни к чему не приводит, тем самым создавая ощущение «что-то не работает».

Они оба активны, но ввод каких-либо данных в поле «Пароль из sms» не приводит к какому-либо действию. На экране размещены два текстовых поля: для ввода номера телефона и для ввода пароля из sms.

При этом нажатие на вторую кнопку закономерно вызывает ошибку «Код неверный». Если ввести номер телефона, то сразу две кнопки «Отправить бесплатное SMS» и «Подтвердить номер телефона» окрашиваются в зеленый цвет.

Текст на кнопке «Отправить бесплатное SMS» (сейчас уже изменено на «Отправить SMS») формирует ожидание, что SMS зачем-то будет отправлено с моего номера, а не мне.

Что-то снова не работает? После получения SMS и ввода кода подтверждения появляется всплывающее окно «Спасибо», а кнопки в интерфейсе снова окрашиваются в серый цвет.

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

Если пользователь окажется менее 18 лет, ему можно будет об этом сообщить. Пункт «Мне уже исполнилось 18» избыточен, так как на следующем экране приложение спрашивает дату рождения.

Лучшим вариантом реализации будет подпись под кнопкой: «Нажимая кнопку регистрации и я принимаю Пользовательское соглашение». Пункт «Я принимаю условия пользовательского соглашения» избыточен и в неправильном месте (регистрация еще не завершена). (Возможно, с началом действия GDPR решение с пользовательским соглашением нужно пересмотреть.)

(Спустя 2 года чекбокс «Я соглашаюсь получать информацию …» пропал с этого экрана.) Пункт «Я соглашаюсь получать информацию… » размещен не в то время и не в том месте, что потенциально может повлиять на количество подписок.

Появление желтой кнопки запускает автоматическую реакцию «Все ли хорошо? До текущего времени все кнопки были зеленого цвета. Может я где-то ошибся?».

Рекомендация

Такой подход позволит ускорить и упростить регистрацию, несмотря на увеличение количества экранов. Следует перепроектировать интерфейс, следуя принципу один экран – одна задача.

Пример, как это может выглядеть показан ниже:

Я сознательно исключаю из этого сценария действия с флажками и раскладываю остальные задачи на два экрана.
Изначальный экран включал решение трех задач: ввести номер телефона, ввести код из SMS, установить флажки и только после этого перейти к следующему экрану.

Кнопка «Далее» всегда активна и ее можно нажать. На первом экране у пользователя не остается выбора: можно только ввести номер телефона. Если ее нажать без ввода номера телефона, появится сообщение об ошибке с предложением сначала ввести номер телефона.

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

Проблема

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

Рекомендация

Изменить представление на более ассоциативный переключатель.

Проблема

Требование ввести e-mail обосновано лишь желанием заполучить электронную почту клиента.

Обоснование «e-mail нужен для подтверждения» работает при взаимодействии на компьютере, но на телефоне – это плохая идея.

Я же уже подтвердил свой номер телефона», во-вторых у пользователя элементарно может не быть почты или доступа к почте с телефона. Во-первых, мотивация «e-mail нужен для подтверждения» вызывает логичный вопрос «Зачем? Учитывая контекст использования приложения (на заправке, в дороге и т.д.), велика вероятность прерывания регистрации именно на этом шаге.

Зачем вводить пароль? Предложение ввести пароль не понятно. Когда он понадобится в дальнейшем? Для какой цели его нужно использовать?

К тому же абсолютно непонятно, что вообще означает «Тип карты» и зачем нужна «Дополнительная». Некорректное применение чекбокса в роли переключателя создает ощущение, что можно выбрать оба пункта сразу.

Рекомендация

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

Кейс №3: сценарий «У меня есть карта»

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

Рекомендация

Реализовать альтернативную возможность авторизации существующего клиента программы лояльности с помощью номера мобильного телефона.

Пример, как это может выглядеть показан ниже:

Таким образом, клиенты, у которых на руках есть карта лояльности, смогут выбрать удобный для них вариант: либо ввести номер карты, либо ввести номер телефона.

Проблема

К тому же при регистрации часто вводятся пароли наобум. Необходимость ввода пароля или кодового слова вводит в ступор – непонятно, что именно надо ввести: код из SMS или то, что пользователь вводил на предыдущем шаге. Скорее всего она пользуется популярностью. В связи с этим, очень интересно посмотреть статистику использования кнопки «Забыли пароль?».

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

Рекомендация

выше) полностью решает проблему с необходимостью придумывания и запоминания избыточных паролей. Решение с применением авторизации через SMS (см.

Проблема

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

Такое решение недружелюбно по отношению к пользователю и создает ощущение тревоги.

Рекомендация

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

Пример, как это может выглядеть показан ниже:

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

Стоят ли все эти мелочи внимания?

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

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

Можно продолжать выезжать на силе бренда, если она есть – многие клиенты какое-то время будут мириться «со своей глупостью» и даже убеждать себя в том, что приложение является удобным: ведь работает как-то, а раньше и такого не было. Можно считать все описанное выше мелким, незначительным и вообще очевидным. Но мир меняется, и более прогрессивные конкуренты скоро сделают то, что казалось удобным вчера, неуклюжим и раздражающим завтра.

Удобных всем интерфейсов!

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть