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

Чтобы клиенты покупали, интерфейс должен помогать этому на всех этапах. Мы в 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.