I am ready for a long road flight for work with a week- or months-long projects.
Lamoda в подарок
130 точек роста в UX покупки и использования подарочных сертификатов
Рейтинг в App Store 4.9 из 5 при более 1 млн оценок. Наверное, приложение Lamoda близко к идеалу и все в нем выверено до мелочей?
Сегодня мы это проверим и пройдемся по процессам покупки, активации и использования подарочных сертификатов.
Как и в кейсе со ВкусВилл, я ограничил список «находок» 130 пунктами, «упустив из виду» часть инсайтов. Возникнут идеи о том, что я пропустил – жду вас в комментариях.
Сегодня мы это проверим и пройдемся по процессам покупки, активации и использования подарочных сертификатов.
Как и в кейсе со ВкусВилл, я ограничил список «находок» 130 пунктами, «упустив из виду» часть инсайтов. Возникнут идеи о том, что я пропустил – жду вас в комментариях.
Структура статьи
Статью я разбил по хронологии: сначала мы пройдемся по шагам процесса покупки дарителем, затем перейдем к активации и применению сертификата получателем.
Для тех, кто решит оценить процесс самостоятельно: к покупке сертификата можно перейти напрямую с главной страницы, немного прокрутив ее вниз:
1. Знакомство с предложением
Текст заголовка
Первое, с чем сталкивается клиент – это заголовок экрана, текст которого обрезается. Что хотел донести автор, для нас загадка.
Читаемость кнопки «Купить»
Кнопка перехода к покупке сертификата теряется на ярком фоне. Из-за этого пропустить ее становится гораздо легче.
Качество изображений
Макет сертификата и фоновое изображение на первом экране загружены не в лучшем качестве и заметно размываются.
Заголовок особенностей
Заголовок блока с особенностями мог бы доносить идею и передавать эмоции, связанные с покупкой сертификата. Но эта возможность не используется.
Размер текста
Текст особенностей выполнен шрифтом мелкого размера. Это может затруднить восприятие для части клиентов с неидеальным зрением.
Ширина текстовых блоков
Тексты особенностей значительно различаются по ширине, из-за чего весь блок визуально смотрится менее стройно.
Условия доставки
Текст условий доставки может быть не очевиден и вызвать вопросы у части клиентов: «так можно купить сертификат или нет?»
2. Выбор дизайна сертификата
Текстовые placeholder'ы
Placeholder'ы в макете никак не реагируют на касание, хотя возможность редактирования ожидаема. Возникает ощущение, что что-то не работает.
Качество изображения
Как и в случае с первым экраном, изображение сертификата загружено не в лучшем качестве и заметно размывается.
Читаемость призыва к действию
Размер шрифта в тексте призыва к выбору оформления мельче даже названий полей. Из-за этого его относительно трудно прочитать.
Варианты дизайна
Вариантов фона всего 10. Это ограничивает возможности персонализации и повышает шансы на то, что ни один вариант не понравится.
3. Ввод данных
Группировка полей
В форме нужно заполнить достаточно много полей, идущих одно за другим. Возможность разбить поля по этапам или по группам не используется.
Размер vs. значения
В большинстве полей размер не соответствует значениям, которые вводит клиент. Из-за этого в них остается большое пустое пространство.
Реакция полей на активацию
Кроме появления курсора, поля никак не реагируют на активацию, хотя могли бы подсвечиваться, улучшая фокус внимания клиента.
Активация поля с поздравлением
В отличие от всех остальных, поле ввода текста с поздравлением выделяется чрезмерно сильно.
Placeholder'ы vs. заголовки
В части полей placeholder'ы не несут никакой добавленной ценности для клиента, а где-то и вовсе дублируют заголовки.
Формат placeholder'ов
Placeholder'ы в полях не консистентны между собой: в то время как в одних полях это глаголы в повелительном наклонении, в других это инфинитивы.
Форматирование номинала
В placeholder'е номинала значения отображаются с отступами и символом рубля. Однако при вводе никакое форматирование не применяется.
Клавиатура при вводе суммы
При вводе суммы клавиатура не фиксирована на числовом вводе: такая раскладка менее удобна, а остальные символы – излишни.
Код из SMS
Если клиент недавно авторизовывался, в части полей вместо корректных авто-подстановок предлагается вставить проверочный код из SMS.
Сертификат на сумму !@^R рублей
Хотя ввод в поле суммы можно было бы ограничить программно, в него можно вводить все что угодно.
Предрекаю комментарии a-la «ну валидация же происходит, нам говорят о том, что ввод ошибочный». Но если есть возможность в принципе пресечь некорректные действия, ограничив ввод, почему бы ей не воспользоваться? На уровне разработки это займет ровно 1 строку кода.
Авто-подстановка имени
Поле «Ваше имя» не промаркировано на уровне среды разработки: авто-подстановка не работает, и вводить свое имя клиенту приходится вручную.
Подстановка почты получателя
Поле с почтой получателя, наоборот, промаркировано, как email. Но если получатель – другой человек, такая авто-подстановка бесполезна.
Валидация email
При вводе или корректировке email сообщение об ошибке появляется преждевременно – еще до того, как клиент закончил ввод.
Очистка полей
Нажатие на кнопку очистки поля ≈ намерение его скорректировать. Но чтобы это сделать, клиенту нужно снова нажимать на поле, т.к. оно деактивируется.
Реакция на return
Нажатие на кнопку return никак не обрабатывается, хотя система могла бы переводить клиента к следующему полю или деактивировать текущее поле.
Стирание маски номера телефона
Если клиенту нужно скорректировать номер телефона, маска автоматически не стирается: приходится стирать символы форматирования вручную.
Авто-заполнение номера телефона
При активации курсор устанавливается не на первую позицию в тексте. Из-за этого авто-подсказка по умолчанию не срабатывает – вводим вручную.
4. Обработка ошибок
Еще не заполнил – уже ошибся
Сообщение об ошибке в номере телефона отображается по умолчанию – еще до того, как клиент начал вводить данные.
Выделение полей с ошибкой
Если клиент допустил ошибку, поля в рамках одной формы реагируют по-разному: где-то выделяются рамкой, где-то – нет.
Пожалуйста – не пожалуйста
В части текстов об ошибке слово «пожалуйста» используется, в части – нет. Зачем такая неконсистентность, не понятно.
Нестандартные формулировки
В русском языке с датами используются термины «не раньше» и «не позднее», однако в тексте ошибки компания решила идти своим путем.
Закрывающая пунктуация
Закрывающая пунктуация в текстах ошибок также неконсистентна: где-то тексты заканчиваются точкой, где-то – нет.
5. Выбор времени отправки
Появление календаря
Если экран прокручен недостаточно глубоко, календарь обрезается, и клиенту приходится прокручивать экран вручную – приложение в этом ему не помогает.
Видимость календаря при скролле
При этом календарь пропадает, когда клиент начинает прокручивать экран. Открыть его заново – еще одно действие, которого можно было бы избежать.
Даты в прошлом
Календарь позволяет выбрать даты в прошлом, хотя по-хорошему такой возможности вообще быть не должно.
Форматирование месяцев
Из-за формата представления и верстки названия месяцев начинают выглядеть не совсем консистентно: часть месяцев видна полностью, часть обрезается.
Дата vs. время
Переход к выбору времени реализован в виде небольшой, слабо выделяющейся иконки серого цвета и может быть неочевиден для части клиентов.
Выбор времени
Вместо стандартного для iOS барабана, позволяющего быстро прокручивать до нужного значения, часы и минуты приходится выбирать кнопками +/– 1.
Быстрый выбор часа
Часы в вариантах быстрого выбора не помещаются в контейнер календаря, и чтобы выбрать значение более 18, его приходится прокручивать.
Часовые пояса
Хоть Lamoda и работает в нескольких часовых поясах, о том, в каком часовом поясе указывается время отправки, не говорится ни слова.
Выбор vs. отмена
Кнопки отмены и выбора расположены слишком близко друг к другу. Из-за этого риск промазать и по ошибке нажать не ту кнопку повышается.
6. Согласие с условиями
Формат согласия
Согласие реализовано в формате чекбокса, который нужно отдельно нажимать, чтобы перейти к покупке – еще 1 действие на стороне клиента.
Активный чекбокс
При активации чекбокса, хоть галочка и появляется, сам он становится серым. Этот цвет может ввести клиента в заблуждение о том, что чекбокс стал неактивен.
Highlight ссылки на условия
Ссылка на условия в тексте хоть и есть, но никак не подсвечивается. Такая иллюзия отсутствия ссылки может вызвать вопросы: «а с чем я вообще соглашаюсь?»
Гендерные особенности
Текст согласия с условиями выполнен в мужском роде, хотя купить сертификат может и женщина (мог бы звучать: «Нажимая на кнопку..., я соглашаюсь...»).
Название документа с условиями
Переходя по ссылке, клиент ожидает увидеть условия, но сталкивается с названием, которое может вызвать вопросы: «соглашение о предоставлении опциона на...»
7. Ознакомление с FAQ
Наличие блока на странице
Наличие массивного блока FAQ сразу же после кнопки покупки может повлиять на конверсию: дочитав блок, клиент с кнопкой покупки повторно не сталкивается.
Видимость ответов
Ответы на вопросы видны сразу. Некоторые ответы достаточно массивные, поэтому клиенту приходится много скроллить, чтобы ознакомиться со всеми темами.
Ошибки в тексте
В текстах ответов на вопросы присутствуют ошибки. С одной стороны, мелочь. С другой – гигиенический, базовый момент, который лучше не нарушать.
Активация сертификата
Несмотря на то, что в приложении есть экран активации сертификата, в блоке FAQ про активацию прямой ссылки на него не дается.
Покупка сертификата
Для покупки клиенту предлагают перейти на сайт – в то время, как он и так находится на экране покупки в приложении. Ответ не соответствует контексту.
Ограничения на использование
В FAQ клиент сталкивается фактически с 15 пунктами различных ограничений, занимающих полтора экрана мелким текстом. Оказывается, не все так просто.
Ограничения vs. реальность
В одном из ограничений говорится о том, что сертификат не распространяется на некоторые бренды. В реальности это ограничение работает не всегда.
Не нашли ответ?
Если клиент не нашел ответ на свой вопрос, вместо поддержки его переводят на более краткую статью, ответы в которой дублируют контент блока FAQ.
8. Переход к покупке
Расположение кнопки
Кнопка не является кульминацией экрана: клиент может начать прокручивать его дальше, знакомиться с информацией – и отвлечься от целевого действия.
Активность кнопки
Если чекбокс согласия с политиками не отмечен, кнопка неактивна, а система на ее нажатие никак не реагирует и не дает никаких подсказок.