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. Переход к покупке
Расположение кнопки
Кнопка не является кульминацией экрана: клиент может начать прокручивать его дальше, знакомиться с информацией – и отвлечься от целевого действия.
Активность кнопки
Если чекбокс согласия с политиками не отмечен, кнопка неактивна, а система на ее нажатие никак не реагирует и не дает никаких подсказок.
Размер кнопки vs. размер текста
Размер текста достаточно мелкий относительно размера кнопки, из-за чего сама кнопка выглядит не гармонично.
Реакция на нажатие
Кнопка реагирует на нажатие. Само по себе это плюс. Но визуально состояние при нажатии неотличимо от неактивного.
9. Оплата картой
Появление экрана оплаты
При нажатии на кнопку оплаты часть появившегося экрана на какое-то время пропадает перед тем как интерфейс оплаты становится доступен.
Авто-активация поля
Поле для ввода номера карты автоматически не активируется, хотя это по сути основное действие. Активировать его приходится вручную.
Быстрая оплата
Возможность быстрой оплаты без необходимости заполнения всех полей (например, через Тинькофф или Сбер) не предусмотрена.
Формат placeholder'ов
Жирный текст большого размера в placeholder'ах сильно контрастирует и идет вразрез с мелким текстом, к которому клиент «привык» на предыдущем шаге.
Реакция на активацию
При активации полей они резко и прерывисто выделяются: не свойственная для приложений реакция.
Курсор при скролле
Если при активированном поле клиент прокрутил экран, курсор на некоторое время уезжает за рамки поля.
Ограничения срока действия
Несмотря на снятие ограничений по сроку действия карт в связи с текущими событиями, система воспринимает срок действия до 2023г, как некорректный.
Срок действия vs. пароль
При вводе срока действия карты в клавиатуре появляется кнопка выбора сохраненных паролей – совершенно нерелевантная в данном контексте.
Стирание маски форматирования
Форматирование через / в сроке действия добавляется автоматически, но если клиенту нужно скорректировать данные, стирать символ приходится вручную.
Пояснения к коду
Каких-либо пояснений о том, что такое CVC/CVV-код и где он расположен, не дается, хотя их можно было бы добавить в виде ненавязчивого tooltip'а.
Активность кнопки оплаты
Кнопка оплаты по умолчанию неактивна. При этом на нажатие она никак не реагирует, и подсказок о том, что именно требуется сделать, не приводится.
Проблемы с оплатой
Если у клиента возникли проблемы с оплатой, ему предлагают попробовать снова. Но зачем нужно вести его на отдельный экран, чтобы это сказать?
Все заполнять заново?
Более того, если оплата не прошла и клиент нажал на кнопку «попробовать снова», ему приходится заполнять все поля по сертификату повторно.
Связь с поддержкой
Возможность связаться с поддержкой по какому-либо каналу в рамках экрана об ошибке не реализована. Клиент остается с проблемой 1-на-1.
Качество иллюстраций
На экране с ошибкой качество иллюстраций еще хуже, чем на главном экране подарочного сертификата: изображения пикселят еще сильнее.
10. Подтверждение покупки
Посыл заголовка
В заголовке страницы подтверждения заказа клиента никак не благодарят за покупку в Lamoda, хотя такой посыл был бы ожидаемым.
Качество фона
Как и в предыдущих экранах, качество фона оставляет желать лучшего: изображения заметно пикселят.
Выравнивание значений
Значения полей не выровнены относительно друг друга, из-за чего может возникнуть впечатление о некорректной верстке.
Верстка в 2 колонки
И названия, и значения полей могут быть длинными. Из-за этого блок может хуже восприниматься по сравнению с версткой в 1 колонку.
Пунктуация
Половина названий полей идет с двоеточием, половина – без. Мелочь, но все же вносит свой отпечаток в качество проработки интерфейса.
Размер кнопок vs. текст
Кнопки целевых действий спроектированы так, что текст вплотную упирается в их края. Разумеется, смотрится все это не идеально.
Видимость кнопки закрытия
Кнопка закрытия экрана с подтверждением заказа частично размещена поверх изображения и относительно слабо заметна.
Закрытие через смахивание
Лишь верхняя область карточки реагирует на смахивание вниз при закрытии. До нее приходится достаточно далеко тянуться пальцем.
Возможность корректировок
Если клиент допустил ошибку в email получателя или хочет скорректировать текст поздравления, в рамках экрана сделать это не получится.
Дополнительная ценность
Помимо функции подтверждения и перехода к покупкам, экран больше не несет никакой добавленной ценности – ни клиенту, ни компании.
Транслитерация в SMS
Также клиент получает SMS-подтверждение. Его текст транслитерирован и воспринимается относительно хуже, чем кириллический.
Символ валюты
В тексте SMS номинал сертификата не сопровождается символом валюты. Это относительно ухудшает восприятие информации.
Формат кода
Код содержит различные символы: при активации сертификата со смартфона клиенту несколько раз придется переключать раскладку клавиатуры.
Длина кода
Сам код достаточно длинный. А чем больше длина, тем выше вероятность, что клиент ошибется при вводе.
Формулировки номера и пина
Формулировки номера сертификата и пин-кода в SMS и интерфейсе активации отличаются. Это может вызвать затруднения у части клиентов.
Ссылка на активацию
Быстрой ссылки для активации сертификата в SMS не содержится: получатель должен сам искать, где активировать сертификат.
Количество email-сообщений
Решив самостоятельно подарить сертификат, клиент получает сразу 3 email'а, заголовки двух из них визуально дублируются, т.к. обрезаются на смартфоне.
Логотип бренда в email
В отличие от других отправителей, логотип бренда в сообщениях от Lamoda не отображается.
Пустое сообщение
Один из полученных email'ов по факту оказывается пустым: содержит лишь шапку и футер. «Ваш сертификат внутри» – а может и не внутри.
Распечатка сертификата
Дарителю, помимо прочего, предлагается выслать сертификат себе, чтобы распечатать. Однако верстка email при печати, мягко скажем, не идеальна.
Deep linking
Переходя по быстрым ссылкам из email, клиент, переходит в приложение, если оно установлено. Но при переходе возникает ошибка.
Кликабельность номера
В номер сертификата можно было бы добавить deep link с переходом в приложение и авто-заполнением полей. Но эта возможность не используется.
Дефис в номере
Из-за наличия дефиса при выделении номера сертификата он не распознается в iOS, как единое целое: клиенту нужно отдельно выделять вторую его часть.
11. Активация сертификата
Авто-активация сертификата
Если получатели уже являются клиентами Lamoda, не понятно, почему активацию сертификата нельзя сделать автоматической, избавив их от ручного труда.
Необходимость авторизации
Чтобы использовать сертификат, требуется обязательно пройти авторизацию. Как и в случае с избранным, это может быть воспринято, как принуждение.
Ценность пояснения
Текст пояснения фактически не несет никакой добавленной ценности. Смысл его размещения именно с таким контентом не совсем понятен.
Авто-активация ввода
На экране добавления первое из полей не активируется по умолчанию, хотя это по сути единственное целевое действие.
Раскладка при вводе кода
При вводе пин-кода раскладка клавиатуры не соответствует типу вводимых данных (числа) и требует дополнительных действий со стороны клиента.
Ограничения по числу символов
В то время как длина номера подарочного сертификата и пин-кода фиксирована, ограничений по длине в полях нет. Это повышает риск ошибок.
Необходимость ввода телефона
В FAQ говорится о необходимости ввода лишь номера сертификата и пин-кода. По факту требуется ввести еще и номер телефона.
Авто-подстановка номера
Поле с номером телефона не промаркировано, как Phone Number на уровне среды разработки, поэтому авто-подстановки нет, и номер нужно вводить вручную.
Номер, если клиент авторизован
Если у клиента в профиле заполнен номер телефона, при активации по умолчанию он не подтягивается.
Быстрая очистка
В случае, если клиенту потребовалось ввести в поле новое значение (например, нужно ввести другой номер телефона), возможности быстрой очистки нет.
Стирание маски
Если клиент решил скорректировать номер телефона, символы форматирования при нажатии backspace автоматически не удаляются – нужно делать это вручную.
Переключение между полями
Для переключения между полями нужно каждый раз тянуться пальцем к следующему полю, в то время как при нажатии на return происходит лишь деактивация поля.
Видимость кнопки активации
В форме ввода кнопка активации не видна по умолчанию. Это может быть воспринято, как барьер, и вызвать ненужные вопросы.
Расположение кнопки
Кнопка размещена на экране так, что при заполнении полей перекрывается клавиатурой, и при вводе в последнее поле клиент может впасть в ступор.
Реакция на ошибки
При проблемах с валидацией клиента просто ставят перед этим фактом. Контакты поддержки или другие методы помощи клиенту на этом шаге не реализованы.
Закрытие сообщения об ошибке
Сообщение об ошибке не исчезает само: чтобы скорректировать введенные данные, клиенту требуется отдельно его закрывать.
Проверочный код
Когда клиент авторизован и уже ввел пин-код для сертификата, необходимость ввода еще и проверочного номера может быть чрезмерной.
Ввод символов кода
При вводе проверочного кода экран кратковременно прокручивается – реакция интерфейса, которая, вероятно, не была запланирована авторами.
Ограничение срока действия кода
Если клиент отвлекся в процессе активации сертификата и ввел код спустя какое-то время, его ждет сюрприз: код становится неактивным.
Текст ошибки о сроке действия
Если код просрочен, сам текст ошибки выполнен очень нестандартно и может смутить часть клиентов.
Повторная отправка кода
При повторной отправке кода поле ввода не активируется по умолчанию: это приходится делать клиенту – еще одно ненужное действие.
Очистка поля при ошибке
В случае ошибочного ввода поле деактивируется и не стирается. В итоге клиенту приходится делать это вручную.
Исчезновение текста об ошибке
Текст ошибки не исчезает даже когда клиент полностью очистил поле ввода, хотя такая реакция интерфейса была бы ожидаемой.
Кнопка в подтверждении
Кнопка действия на экране подтверждения лишь закрывает его, хотя могла бы приглашать клиента к покупкам и вести в каталог или на главную.
Обновление экрана сертификатов
После добавления экран со списком сертификатов автоматически не обновляется, и в него необходимо перезаходить, чтобы увидеть новый сертификат.
12. Использование сертификата
Инструкция по использованию
В экран с сертификатами никак не интегрирована инструкция, с помощью которой в любой момент можно было бы узнать, как их использовать.
Активация при оформлении
При оформлении заказа и выборе способа оплаты активировать сертификат не получится: приходится прерывать процесс и переходить в профиль.
Момент применения сертификата
Сертификат можно применить только на этапе корзины. В процессе оформления заказа такой возможности уже нет.
Выбор, если сертификат один
Если у клиента есть лишь 1 сертификат, отдельно предлагается добавить из списка, хотя добавление могло бы происходить не в 2, а в 1 касание.
13. Прочее
Возможность передарить
Если клиент активировал сертификат, но не использовал, возможности передарить его нет (как минимум, в интерфейсе).
Срок действия сертификата
Активировав сертификат, получатель узнает, что у сертификата есть срок действия, по истечение которого номинал сгорает, причем срок действия – всего год.
Начало отсчета срока
Срок действия отсчитывается с момента покупки, а не активации. Это может привести к казусам, если клиент решил передарить залежавшийся сертификат.
Оповещение об истечении срока
Это в моменте проверить не удалось, но интересно узнать: когда срок сертификата близок к истечению, Lamoda как-то оповещает клиента об этом?
To be continued...
Подведем итоги: сейчас путь клиента сквозит недочетами. Да, мы можем купить сертификат в приложении – задача выполнима. Но неудобства практически на каждом из шагов в сумме оставляют не лучшее послевкусие.
Благо, что большую часть этих недостатков можно поправить за несколько дней. И здесь вопрос в том, готова ли компания меняться и делать путь своих клиентов более удобным – время покажет. Будем верить в лучшее.
Если вы прошли этот путь вместе со мной и попробовали купить сертификат, буду рад услышать ваши впечатления и мысли в комментариях.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.
Благо, что большую часть этих недостатков можно поправить за несколько дней. И здесь вопрос в том, готова ли компания меняться и делать путь своих клиентов более удобным – время покажет. Будем верить в лучшее.
Если вы прошли этот путь вместе со мной и попробовали купить сертификат, буду рад услышать ваши впечатления и мысли в комментариях.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce