• Пт. Дек 2nd, 2022

Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Автор:admin

Ноя 16, 2022

Чтобы клиенты покупали, интерфейс должен помогать этому на всех этапах. Мы в Antro проанализировали авторизацию AliExpress, OZON, Wildberries, СберМегаМаркет и Яндекс.Маркет: выделили лучшие практики и разобрали ошибки.

Зачем пользователи заходят на маркетплейсы и в личные кабинеты

Контринтуитивно, но люди приходят в интернет-магазины не только за покупками. В статье «Что считать счастьем покупателя?» ребята из Яндекс.Маркета делились своим представлением целей:

  • сравнить разные варианты и определить, чего хотят от покупки. Разобраться в предложениях и прицениться;
  • подобрать что-то под бюджет, но без фокуса на конкретном товаре или категории. Пользователь ищет что-то «цепляющее»;
  • найти лучшее предложение, сравнить цены;
  • просто посмотреть, позалипать на товары — своеобразный шопинг без расходов.

Кроме просмотра товаров, пользователь может:

  • проверить статус заказа: узнать новую информацию, вспомнить дату доставки или удостовериться, что всё в порядке;
  • показать заказ другому человеку: порекомендовать товар другу или похвастаться «обновкой».

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

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

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

Дисклеймер: знаем, что больше трафика с мобильных. А ещё знаем, что чаще покупки совершают с десктопа, а ошибки на нём демонстрировать нагляднее.

Чтобы улучшить UX, многие сайты стараются не «выкидывать» пользователя из ЛК вообще — например, OZON и Wildberries. В статье разберём, как привести покупателя ко входу в ЛК в первый раз и не только.

Лучшая практика: не креативить с навигацией

Три из пяти маркетплейсов разместили вход в правой части хэдера, слева от корзины.

Это хорошее решение: люди используют разные интернет-магазины и не хотят искать вход. Это подтверждают эвристический закон Якоба и данные исследования прототипичности от Google. Мы уже писали о нём в статье о том, почему дизайн вообще важен


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Яндекс.Маркет немного отличается, но это оправдано. У Маркета нет отдельного личного кабинета — это Яндекс ID. Дизайнеры отделили вход и формой, и цветом. Однако расположили его примерно там же, где и все остальные, чтобы пользователям было проще его найти. Цвет и форма в этом помогут, подпись кнопки совпадает с остальными интернет-магазинами.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Лучшая практика: подсветить преимущества авторизации и личного кабинета

Нашли только у OZON. К сожалению, реализация хромает.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Классно получилось у Вкусвилла — ребята чётко выбрали самые привлекательные выгоды и вывели их по наведению.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Лучшая практика: демонстрировать статус авторизации пользователя


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Aliexpress не поможет вам понять, авторизованы вы или нет


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Просто хех

Второй по популярности комментарий, когда мы пишем критические статьи об интерфейсах крупных компаний, что-то вроде «моськи лают на слона».

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Тут всё сложилось неудачно:

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

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

Лучшая практика: подсвечивать активное поле

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Остальные справляются


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Лучшая практика: совмещать вход и регистрацию

Так мы снижаем вероятность ввода данных не в ту форму. В B2C чем проще регистрация, тем выше конверсия в неё. В B2B всё менее однозначно: бизнес-клиентов может, например, регистрировать менеджер. Тогда сложность регистрации уже не влияет на покупателей.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Лучшая практика: не совмещать в одном поле разные типы данных

Чтобы «разгрузить» интерфейс, некоторые магазины делают одну форму для телефона, логина и электронной почты. Возникает несколько проблем:

  • невозможно выставить нужный тип данных при разработке. Браузер не подставит информацию автоматически при щелчке на окно заполнения;
  • не получится адаптировать клавиатуру. С телефона придётся вручную переключать раскладку на цифры, чтобы ввести номер. Либо наоборот, включать латиницу, чтобы написать почту;
  • нельзя использовать маски;
  • сложно делать подсказки — потребуется сразу два примера: как заполнять телефон и как заполнять электронную почту.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Лучшая практика: использовать код, а не пароль

Всё просто, люди не запоминают пароли: 78% пользователей запрашивают восстановление доступа в течение 90 дней.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Плохая практика: оставлять пользователя в неизвестности

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

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

Вопрос для исследования: необходимость не сохранять данные для чужого устройства

Как часто люди заходят в маркетплейсы с чужого устройства — вопрос неисследованный. Основной кейс по нашему мнению — скрытный шопинг на работе с устройств компании😅 Механику «Чужой компьютер» использует только Wildberries.

Делитесь своими причинами использовать механику «Чужой компьютер» в интернет-магазинах в комментариях.

Плохая практика: использовать тёмные паттерны

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Проставленные заранее галочки — один из самых банальных примеров тёмных паттернов. Юридические документы читает небольшая часть аудитории, большинство соглашается, не глядя. С чем это связано:

  • они часто написаны нечеловеческим языком;
  • выбора всё равно нет — ты не можешь оспорить их, только согласиться.

Если морализировать, то согласие должно быть активным. Кстати, не только в интерфейсах. Чекбокс должен быть пустым, если согласие происходит именно здесь.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Согласие с рассылкой по умолчанию — настоящий обман пользователя. Это простой способ хитростью получить контакты в список рассылки:

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Другой, даже более неприятный способ обмануть пользователя использует при регистрации Яндекс.Маркет. Серьезно, нужно подтвердить, что ты НЕ хочешь получать рекламу? Мммм…


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Плохая практика: делать неактивные кнопки

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

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Лучшая практика: писать сообщения об ошибке

Несмотря на то, что сообщение об ошибке есть, взаимодействие у Wildberries расстраивает. Разбираемся, что именно не так, и как исправить ситуацию.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Расположение сообщения об ошибке

Всегда под полем, а не где-то ещё. Эльдорадо почти молодцы: ошибка рядом с полем, поле подсвечено, ошибка пустого поля обработана отдельно. Забыли о людях с проблемами восприятия цвета — стоит добавить в поле иконку ошибки.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

У Яндекса есть иконка, но ошибка пустого поля отдельно не обрабатывается.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Сообщения об ошибке лучше ставить рядом с полем и подсвечивать само окно заполнения. Так вы обратите внимание пользователя на проблемный участок.

Нейтральная тональность

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Связной при ошибке использует нейтральную тональность, хотя и не объясняет пользователю, что происходит — просто требует заполнить поле в ультимативной и несколько роботизированной форме


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Цветовая индикация

Текст ошибки у Wildberries набран активным цветом. Он используется в сервисе для ссылок.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

OZON не использует активный цвет, а пользуется привычной для пользователя цветовой индикацией — красный для ошибок.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Подробный и понятный текст ошибки

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

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

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

Как бы мог выглядеть экран ошибки

Что мы исправили

  1. Подсветили активное состояние выпадающего списка с кодами стран. Ещё лучше — давать пользователю ввести код с клавиатуры. Так быстрее, а деталей на экране меньше: его станет проще воспринимать.
  2. Подсветили поле, в котором возникла ошибка. Да, поле всего одно, но мы упростим жизнь пользователю, обратив на него внимание.
  3. Дополнили цвет символом, чтобы помочь людям с проблемами в распознавании цвета.
  4. Сделали маску симпатичнее. Главное, чтобы она не мешала пользователю вводить данные.
  5. Переписали текст ошибки. Теперь он вежливый и нейтральный, а ещё даёт понятные инструкции и мотивацию для действия.
  6. Всё же убрали «Чужой компьютер», хотя это неоднозначное решение. Однако, не стоит перегружать интерфейс лишними элементами, если этого не требуют сценарии использования и аналитика.
  7. У всех элементов ошибки привычный красный цвет — как в большинстве интерфейсов.
  8. Избавились от неактивной кнопки. Теперь точно понятно, куда нажимать.
  9. Избавились от дарк паттернов


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Допиливать экран можно ещё и ещё. Это только несколько моментов из тех, что мы не стали трогать:

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

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

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

Очень плохая практика: не писать текст ошибки

Но и такое встречается. СберМегаМаркет, можно мы просто не будем это комментировать?


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Лучшая практика: предлагать несколько способов входа и регистрации

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

OZON предоставляет несколько способов входа и регистрации: телефон, Apple ID и Госуслуги. А как же почта? Здесь не всё так просто. У OZON это только способ входа, но не регистрации. Об этом мы поговорим позже


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Единственный способ войти в ЛК Wildberries — по номеру телефона. Вход по телефону — наиболее предпочтительный в повседневности. Но не забывайте о других кейсах, вот парочка распространённых:

  • телефон может разрядиться. Без альтернативных способов входа люди не смогут получить доступ к вашему личному кабинету;
  • может потребоваться поставить другую сим-карту. Например, когда хочешь заказать товар в отпуске, чтобы он приехал к возвращению из поездки.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Лучшая практика: маркировать поля для автозаполнения

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Ещё важные моменты заполнения номера

Следите за корректностью автозаполнения: форматируйте номер и предзаполняйте код страны. Не забывайте, что пользователи могут быть из стран с другим кодом.

С этим справились все, но есть ещё небольшие детали:

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


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Со вторым не справился ни один из маркетплейсов, поэтому пример показывает ВкусВилл


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Плохая практика: формировать неверные ожидания

Тут у OZON немного «сломалась» логика. Все способы, кроме почты, позволяют и войти, и зарегистрироваться.


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

Скорее всего, OZON хочет, чтобы вы отказались от входа таким способом. Только к этому моменту ключевые точки маршрута скорее всего выглядят так:

  1. Наводим на «Войти». Кстати, не все пользователи поймут, что там же можно и зарегистрироваться. Допустим, что это уже общепринято.
  2. Нажимаем на «Войти или зарегистрироваться».
  3. Среди всех вариантов пользователя привлекает именно «Войти по почте». Из-за коллизии значений «Войти» и «Зарегистрироваться» эти слова воспринимаются идентично. И предыдущий опыт уже показал, что регистрация также скрывается за этим словом.
  4. Выясняется, что зарегистрироваться нам нельзя, только войти.
  5. У пользователя в голове звучит «грустный тромбон».

Как исправить

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

В этом случае достаточно объяснить правила игры. Обозначить, что вход по почте доступен только для зарегистрированных пользователей. Сэкономим пользователю время и не расстроим его, если сильно хотелось зарегистрироваться по почте. Да, такие люди ещё существуют.

Ну или хотя бы снизим уровень расстройства


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

  1. Человечно и с уважением объясняем, что происходит. Просим использовать другой способ регистрации, если человек невнимательно прочитал ссылку «Войти по почте» или ожидал, что это идентичные действия.
  2. Описываем, что произойдёт при нажатии на ссылку «Вернуться к выбору способа входа или регистрации».
  3. Ну и немного уменьшили отступ между заголовком и подзаголовком, чтобы не нарушать правило внешнего и внутреннего.

Можно было бы пойти ещё дальше. Например, сделать ссылкой сам текст с призывом воспользоваться другим способом регистрации — нет предела совершенству.

Плохая практика: использовать непонятные пользователю слова и термины

Здесь речь вовсе не о жаргонизмах и каких-то профессиональных обозначениях. Внимательные читатели уже заметили странную текстовую кнопку «Вернуться на главный экран» и задались вопросом: «А что такое главный экран? Главная страница?»


                    Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах

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

Как исправить

Сделать текст подробным и понятным. Может быть такая формулировка: «Вернуться к выбору способа входа или зарегистрироваться». Она с меньшей вероятностью запутает пользователя.

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

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

Снова вспоминаем «критерий бабушки». Можно ли было сделать этот элемент интерфейса проще и понятнее? Однозначно.

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

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

Итог

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

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

Мы собрали то, что нам кажется самым важным и получился уже огромный гайд, который не прочитаешь за 3 минуты. Таких элементов пазла, из которых складывается хороший пользовательский опыт, ещё больше.

Зачем этот гайд

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

Пишите в комментариях, на какие недочёты обращаете внимание, и плюсуйте статье, если она вам понравилась. Чтобы не пропустить новые материалы, подписывайтесь на наш блог на vc и в Telegram.

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

Источник: vc.ru

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

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