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

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

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

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

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

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

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

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

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

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

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

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

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

Содержание

— Зачем пользователи заходят на маркетплейсы и в личные кабинеты
— Лучшая практика: не креативить с навигацией
— Лучшая практика: подсветить преимущества авторизации и личного кабинета
— Лучшая практика: демонстрировать статус авторизации пользователя
— Просто хех: почему все могут ошибаться
— Лучшая практика: подсвечивать активное поле
— Лучшая практика: совмещать вход и регистрацию
— Лучшая практика: не совмещать в одном поле разные типы данных
— Плохая практика: оставлять пользователя в неизвестности
— Вопрос для исследования: необходимость не сохранять данные для чужого устройства
— Плохая практика: использовать тёмные паттерны
— Плохая практика: делать неактивные кнопки
— Лучшая практика: писать сообщения об ошибке
— Очень плохая практика: не писать текст ошибки
— Лучшая практика: предлагать несколько способов входа и регистрации
— Лучшая практика: маркировать поля для автозаполнения
— Плохая практика: формировать неверные ожидания
— Плохая практика: использовать непонятные пользователю слова и термины
— Лучшая практика: не использовать сложные элементы интерфейса без необходимости
— Подводим итоги

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

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

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

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

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

Не поддался влиянию конкурентов. В данном случае уточка говорит «зря-зря»
Не поддался влиянию конкурентов. В данном случае уточка говорит «зря-зря»

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

Не подчеркивать, что вход именно в Яндекс ID на этом этапе — верное решение. Это могло бы запутать и оттолкнуть пользователя, который ещё не разбирается в экосистеме Яндекса.
Не подчеркивать, что вход именно в Яндекс ID на этом этапе — верное решение. Это могло бы запутать и оттолкнуть пользователя, который ещё не разбирается в экосистеме Яндекса.

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

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

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

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

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

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

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

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

Кнопка вместо ссылки считывалась бы проще. Использовать иконку короны кажется не совсем уместным. Никаких «королевских» привилегий Клуб не обещает — только снижение цены. 
Кнопка вместо ссылки считывалась бы проще. Использовать иконку короны кажется не совсем уместным. Никаких «королевских» привилегий Клуб не обещает — только снижение цены. 

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

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

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

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

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

OZON подчеркивает статус «богатого падпищека» короной — уже логичнее, потому что он даёт не только снижение цены и это проговаривается
OZON подчеркивает статус «богатого падпищека» короной — уже логичнее, потому что он даёт не только снижение цены и это проговаривается

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

На восточном фронте без перемен
На восточном фронте без перемен

Просто хех

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

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

Угадайте, чей интерфейс
Угадайте, чей интерфейс

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

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

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

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

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

Да, настоящее поле ввода телефона выглядит у AliExpress так, а не как на предыдущем скрине
Да, настоящее поле ввода телефона выглядит у AliExpress так, а не как на предыдущем скрине

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

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

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

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

Wildberries объединил форму входа и регистрации. Хвалим и за заголовок, который не имеет нескольких интерпретаций. Хотя претензий ко всему остальному достаточно — читайте дальше.
Wildberries объединил форму входа и регистрации. Хвалим и за заголовок, который не имеет нескольких интерпретаций. Хотя претензий ко всему остальному достаточно — читайте дальше.
А вот у OZON заголовок «Введите номер телефона» в OZON плохо связывается с кнопкой «Войти или зарегистрироваться». Подразумевается, что человек уже понимает, для чего это нужно.
А вот у OZON заголовок «Введите номер телефона» в OZON плохо связывается с кнопкой «Войти или зарегистрироваться». Подразумевается, что человек уже понимает, для чего это нужно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<p>Например, текст с предсогласием от СберМегамаркета размером всего в 10px. Это важная информация, и для неё не стоит использовать шрифт меньше 13 px. Возможно, это было сделано просто из-за недостатка экспертизы, но вероятность, что его пропустят вырастает</p>

Например, текст с предсогласием от СберМегамаркета размером всего в 10px. Это важная информация, и для неё не стоит использовать шрифт меньше 13 px. Возможно, это было сделано просто из-за недостатка экспертизы, но вероятность, что его пропустят вырастает

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

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

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

У Aliexpress просто проблемы с вёрсткой. Футер перекрывает ссылку на Политику конфиденциальности
У Aliexpress просто проблемы с вёрсткой. Футер перекрывает ссылку на Политику конфиденциальности

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

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

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

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

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

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

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

Wildberries. Радует, что хотя бы по нажатию на неактивную кнопку выводится ошибка. У СберМегамаркета по нажатию поле просто подсвечивается красным
Wildberries. Радует, что хотя бы по нажатию на неактивную кнопку выводится ошибка. У СберМегамаркета по нажатию поле просто подсвечивается красным
AliExpress вообще блокирует нажатие — это самый худший вариант
AliExpress вообще блокирует нажатие — это самый худший вариант
Яндекс и OZON не используют неактивные кнопки — молодцы. Правда, OZON «переобуется» уже на следующем экране. Проектировали разные дизайнеры, видимо
Яндекс и OZON не используют неактивные кнопки — молодцы. Правда, OZON «переобуется» уже на следующем экране. Проектировали разные дизайнеры, видимо

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

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

Если пользователь введёт данные неправильно, маркетплейс не поможет ему решить проблему
Если пользователь введёт данные неправильно, маркетплейс не поможет ему решить проблему

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если что-то выглядит как ссылка, то должно работать как ссылка
Если что-то выглядит как ссылка, то должно работать как ссылка

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

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

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

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

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

Пример украден из статьи Иры Моториной, Head of UX Writing at Plus. В варианте по центру мы фиксируем, в чем ошибка — пароль неверный. После этого объясняем, что с этим можно сделать
Пример украден из статьи Иры Моториной, Head of UX Writing at Plus. В варианте по центру мы фиксируем, в чем ошибка — пароль неверный. После этого объясняем, что с этим можно сделать

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

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

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

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

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

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

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

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

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

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

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

Так не делайте, хорошее делайте. До свидания
Так не делайте, хорошее делайте. До свидания

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

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

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

Интересно, часто ли люди пользуются у озона входом через Госуслуги? Пишите свои варианты в комментах
Интересно, часто ли люди пользуются у озона входом через Госуслуги? Пишите свои варианты в комментах

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

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

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

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

СберМегамаркет не знает таких лайфхаков
СберМегамаркет не знает таких лайфхаков
Wildberries обрезал такую возможность, разделив поле ввода номера
Wildberries обрезал такую возможность, разделив поле ввода номера
Яндекс неверно маркировал поле ввода телефона, из-за чего браузер предлагает нам неправильные варианты
Яндекс неверно маркировал поле ввода телефона, из-за чего браузер предлагает нам неправильные варианты
Aliexpress ошибся в обратную сторону, и в поле электронной почты браузер предлагает вводить номер телефона
Aliexpress ошибся в обратную сторону, и в поле электронной почты браузер предлагает вводить номер телефона
Ну хоть OZON справился
Ну хоть OZON справился

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Главная страница — действительно самая близкая ассоциация. Зачем нас на неё возвращать, если мы хотели войти?
Главная страница — действительно самая близкая ассоциация. Зачем нас на неё возвращать, если мы хотели войти?

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

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

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

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

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

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

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

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

Итог

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

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

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

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

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

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

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

123123
76 комментариев

для нетерпеливых: время прочтения - полтора часа )

16
Ответить

надо на х2 читать)))

12
Ответить
Автор

Мы сократили, кстати! Изначальная версия была в два раза длиннее, с мобилкой там, ну понимаете...

9
Ответить

Это вы ещё время написания не оценили :)

5
Ответить

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

6
Ответить

Плюсую. За<цензура/>. А потом будут долбить во все доступные каналы с этим телефоном, при этом не спрашивая согласия на это. (из особо эпичного - какая-то доставка, которой был дан телефон, и которая пошла писать в мессенджеры привязанные к телефону, вместо смс-ки).

Ещё больше ненавижу форму с подставленной цифрой телефона, которая там уже есть (блин, я его туда копипастить буду, угадайте - как он вставится?)

3
Ответить

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

1
Ответить