Что из этого получилось? Удалось ли мне найти хоть что-то, что можно улучшить в этом процессе у одного из лидеров рынка? Давайте разберёмся.
Структура статьи
Статью я разбил на блоки в соответствии с шагами и экранами, через которые проходит клиент:
- Общий экран аутентификации
- Ввод логина и пароля
- Запрос на восстановление пароля
- Ввод проверочного кода
- Создание нового пароля
Общий экран аутентификации
10 замечаний
1. Highlight ценности
На экране входа поясняют, что я смогу пользоваться «всеми функциями Авито». Но что это за функции и какую ценность я получу, предоставив свои данные, непонятно.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_827FE07D4690-1_1.jpeg)
2. Необходимость наличия кнопки входа
При тапе по кнопке входа появляется карточка, контент которой можно было бы разместить на экране вместо неё, тем самым сделав путь клиента на 1 действие короче.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171346.gif)
3. Вход только через российские сервисы
Войти на Авито можно только через российские сервисы. Вход по Apple ID и Google запрещен. Это новое требование законодательства с 2025г, но удобства оно явно не добавит.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_E642DA4F8D4A-1_1.jpeg)
4. Отображение запрещённых способов входа
Более того, не совсем понятно, зачем в принципе отображать возможность входа с помощью Apple ID и Google, если по факту у меня её нет.
P.S. по этому пункту есть интересная дискуссия в комментах
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_D4B1A09A0F40-1_1.jpeg)
5. Спектр способов быстрого входа
На экране отображаются запрещённые сервисы. При этом возможности войти с помощью отечественных identity провайдеров — Яндекс, Тинькофф, Сбер и других — нет.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_A38B4351DC38-1_1.jpeg)
6. Вход через… Ярмарку мастеров?
При тапе по кнопке входа через Одноклассники мне предлагают открыть приложение маркетплейса «Ярмарка мастеров» (Livemaster). Тут без комментариев.
![](https://awdee.ru/wp-content/uploads/2024/04/t-ezgifcom-resize.gif)
7. Анимация появления и закрытия карточки
Карточка со способами входа появляется с помощью плавной анимации, но пропадает резко и прерывисто. Gif не позволяет передать разницу, но можете попробовать сами.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171346-1.gif)
8. Объединение кнопок входа и регистрации
Кнопки входа и регистрации можно объединить на этапе ввода номера телефона, разбив процесс входа на 2 экрана: ввод логина и пароля/кода.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_C6DD5C108E34-1_1.jpeg)
9. Загрузка условий использования сервиса
Текст документов с условиями использования сервиса загружается не моментально, и клиенту приходится ждать, хотя его можно было бы подгружать в фоновом режиме.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171346-2.gif)
10. Закрытие экранов с документами
Боковой свайп для закрытия экранов с документами не поддерживается. Чтобы их закрыть, приходится тянуться пальцем до кнопки в самой верхней части экрана.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_64B1D66E0D79-1_1.jpeg)
Ввод логина и пароля
21 замечание
11. Скорость активации полей ввода
При переходе к экрану ввода данных поле ввода логина активируется с заметной задержкой. Для чего её добавили? Чтобы пользователь успел потянуться пальцем до поля?
![](https://awdee.ru/wp-content/uploads/2024/04/Untitled-ezgifcom-re-12.gif)
12. Запоминание через Device ID
Даже если я вышел из профиля, удалил апп и затем скачал его заново, меня можно запомнить по ID смартфона и подставить данные для входа. В Ozon эту механику используют, в Авито — пока нет.
![](https://awdee.ru/wp-content/uploads/2024/04/Picture_1_1.png)
13. Вход через Face ID
А еще у Ozon есть возможность подключить вход по Face ID, чтобы для входа нужно было просто посмотреть на экран. Ещё одна точка роста для Авито.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171336.gif)
14. Телефон или почта
При входе нужно ввести в поле телефон или почту. Из-за этого становятся недоступными и автоподстановка данных, и удобная раскладка экранной клавиатуры.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_23E374D37585-1_1.jpeg)
15. Клавиатура по умолчанию
Как минимум, по умолчанию можно было бы отображать клавиатуру в раскладке для ввода email’а. Сейчас же переключать её придётся в любом случае.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_63551CAC5A74-1_1.jpeg)
16. Форматирование ввода номера
Номер телефона при вводе никак не форматируется. Это усложняет его проверку и повышает риск, что пользователь допустит опечатку.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_F518105853F3-1_1.jpeg)
17. Ограничение по числу символов при вводе номера
Учитывая, что принимаются только российские номера, система могла бы распознавать, что вводится именно номер телефона, и ограничивать ввод по числу символов.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_84866658FC71-1_1.jpeg)
18. Ввод недопустимых символов
Учитывая, что в качестве логина ввести можно только номер телефона или email, зачем система в принципе позволяет вводить недопустимые символы, непонятно.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_2CA45020250F-1_1.jpeg)
19. Кнопка return при вводе номера
При вводе номера текст кнопки return — «Готово», хотя по сути целевое действие в данный момент — переход ко вводу пароля, и вариант текста «Далее» был бы уместнее.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_3425FD973D15-1_1.jpeg)
20. Выделение текущего поля
Кроме курсора, активное поле ввода никак не выделяется, хотя его highlight, например, с помощью изменения цвета обводки был бы ожидаем.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_4C523EAEB536-1_1.jpeg)
21. Клавиатура при переключении полей
Переключение между полями происходит моментально. Но клавиатура при этом исчезает и появляется без какой-либо надобности, хотя могла бы продолжать отображаться.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171346-3.gif)
22. Вход по паролю
В то время как большинство сервисов уже используют более удобный код из sms, в Авито все ещё используется менее защищённая и устаревающая механика входа по паролю.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_23E374D37585-1_2.jpeg)
23. Переход к паролю при пустом поле с номером
Если я не ввёл логин и пытаюсь переключиться ко вводу пароля, нажав на return, сервис ничего не имеет против, хотя в этот момент лучше отображать ошибку.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171346-4.gif)
24. Реакция системы на ошибку в логине
Если я допустил ошибку логине и нажал на return, меня просто переводят к следующему полю, хотя должны были бы предложить её исправить.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171395.gif)
25. Скрытие сообщения об ошибке
Если я ввёл некорректные данные, сообщение об ошибке блокирует экран и не пропадает само: закрывать его приходится вручную.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_D4D13F866075-1_2.jpeg)
26. Призыв к действию в сообщении об ошибке
Если был введён неверный пароль, сообщение об ошибке лишь констатирует её наличие, хотя также могло бы призывать исправить её.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_D4D13F866075-1_1.jpeg)
27. Спектр причин ошибки
Если пара логин+пароль некорректна, причина может быть как в пароле, так и в логине. Но текст ошибки указывает лишь на пароль, что в ряде случаев вводит в заблуждение.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_D4D13F866075-1_1-1.jpeg)
28. Активация полей при ошибке
Если известно, в каком поле допущена ошибка, его можно активировать по умолчанию. Сейчас же мне приходится отдельно нажимать на поле, чтобы скорректировать ошибку.
![](https://awdee.ru/wp-content/uploads/2024/04/Untitled-ezgifcom-re-13.gif)
29. Расположение полей ввода
Более того, поля ввода расположены в самой верхней части экрана. Из-за этого ещё и приходится далеко тянуться до них пальцем. А это неудобно.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_0537C950BBDB-1_1.jpeg)
30. Прокрутка экрана ввода данных
Экран ввода данных прокручивается без причины, учитывая, что контент полностью вписывается в него. Или в этом есть какой-то скрытый смысл?
![](https://awdee.ru/wp-content/uploads/2024/04/Untitled-ezgifcom-re-14.gif)
31. Выход из экрана ввода данных
Чтобы выйти из экрана ввода данных, мне нужно тянуться в его верхний левый угол. Выход через левый боковой свайп, который намного удобнее, не предусмотрен.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_DDE92F12BCEE-1_1.jpeg)
Запрос на восстановление пароля
11 замечаний
32. Размещение кнопки восстановления пароля
Если я забыл пароль, приходится тянуться в самую верхнюю область экрана, хотя её можно было бы разместить гораздо ближе — под основной кнопкой действия.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_AAF8C4875BF0-1_1.jpeg)
33. Неправильный номер?
При вводе своего номера телефона и нажатии на «забыли пароль?» я узнаю, что мой номер, оказывается, какой-то неправильный. Спасибо.
![](https://awdee.ru/wp-content/uploads/2024/04/Untitled-ezgifcom-re-15.gif)
34. Название поля ввода логина
Если я уже ввел логин при переходе во flow восстановления пароля, поле заполняется автоматически, и непонятно, точно ли от меня требовался именно номер телефона или именно email. Хотя это можно было бы решить, уменьшая placeholder при вводе и отображая над введёнными данными.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_F90A0D0669CC-1_1.jpeg)
35-40. Всё те же проблемы
Все недочеты, которые я описывал по полю ввода логина на основном экране, перекочевали и сюда, подсвечу лишь буллетами, без длинных описаний:
- форматирование номера
- автоподстановка
- раскладка клавиатуры
- ограничение по числу символов
- ввод недопустимых символов
- расположение поля ввода
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_1FFFE08088E4-1_1.jpeg)
41. Highlight следующих шагов
На этапе ввода логина не говорится о том, что произойдёт, когда я нажму на кнопку «Продолжить». Моими ожиданиями на этом шаге можно управлять лучше.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_F90A0D0669CC-1_2.jpeg)
42. Реакция на ошибочный ввод
В случае ошибочного ввода поле деактивируется, и мне приходится нажимать на него заново.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171396.gif)
Ввод проверочного кода
12 замечаний
43. Размер vs. контент поля ввода кода
Несмотря на то, что код состоит всего из 5 цифр, поле его ввода занимает практически всю ширину экрана, и при вводе в нём образуется много свободного пространства.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_702B5F5C0B92-1_2.jpeg)
44. Текстовое поле vs. слоты
Ввод кода можно реализовать не в виде обычного текстового поля, а в виде слотов. Визуально такой вариант будет привычнее. А число слотов даёт подсказку относительно длины кода.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_702B5F5C0B92-1_3.jpeg)
45. Возможность смены номера
Если я ввёл неверный номер телефона, быстрой ссылки на его исправление на экране ввода проверочного кода нет.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_6B77F7A726C3-1_2.jpeg)
46. Использование иллюстраций
Примечательная практика – иллюстрировать на экране ввода кода SMS, которую я вот-вот получу. SUNLIGHT в этом плане молодцы. Авито тоже может взять идею на вооружение.
![](https://awdee.ru/wp-content/uploads/2024/04/SUNLIGHT-1.png)
47. Получение кода через пуши
Если у меня включены уведомления, код можно присылать в пуше, обрабатывать это событие в приложении и проводить проверку сразу же при получении. В Авито такого пока нет.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_B3035C70CD7D-1_1.jpeg)
48. Ограничение по длине кода
Хотя код и пятизначный, поле не ограничено по длине вводимого текста. А это можно было бы предусмотреть.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_6E52A883E958-1_1.jpeg)
49. Автовалидация vs. кнопка
На экране есть кнопка «Продолжить». Но, учитывая, что валидация кода происходит автоматически при вводе нужного числа символов, зачем она нужна, непонятно.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171389.gif)
50. Прокрутка экрана
Экран ввода кода, как и предыдущие, прокручивается без какой-либо причины.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171389-1.gif)
51. СТА в сообщении об ошибке
Текст сообщения об ошибке ввода проверочного кода лишь констатирует её факт, хотя мог бы призывать её скорректировать.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_9CB60B8E4F96-1_1.jpeg)
52. Конкретизация причин ошибки
Несмотря на то, что ошибка может крыться как в коде, так и в номере телефона, в тексте ошибки говорится, что неверный именно код. А это не всегда может быть так.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_9CB60B8E4F96-1_1-1.jpeg)
53. Подстановка кода
В некоторых случаях автоподстановка кода в поле перестает работать, и приходится вводить код вручную.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_3183_1.png)
54. Связь с поддержкой
Если по каким-то причинам я так и не получил проверочный код, приложение не предлагает мне связаться с поддержкой и решить проблему — я остаюсь с ней один на один.
![](https://awdee.ru/wp-content/uploads/2024/04/image-48.png)
Создание нового пароля
8 замечаний
55. Маркировка поля с паролем
При вводе пароля мне предлагают подставить имя пользователя. Зачем? Не очень понятно.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_437544629BDF-1_1.jpeg)
56. Формат требований к паролю
Требования к паролю можно было бы отображать в качестве пунктов, а не единой строки текста. Так они будут лучше считываться.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_437544629BDF-1_2.jpeg)
57. Тайминг валидации пароля
Пароль валидируется сразу же при вводе первого символа. Зачем отображать, что я ошибся, если я ещё практически ничего не ввёл?
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171389-2.gif)
58. Highlight выполнения требований по паролю
Валидация пароля работает только на негатив. А то, что какое-то из требований было выполнено, никак не подсвечивается.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171389-3.gif)
59. Валидация ввода спецсимволов
Хотя в подписи и указывается, что спецсимволы недопустимы, при их вводе никакого highlight’а ошибки не происходит.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171389-4.gif)
60. Реакция на сохранение пароля с ошибкой
При попытке сохранить пароль с ошибкой поле деактивируется, и на него приходится нажимать повторно.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171389-5.gif)
61. Размещение поля
Поле расположено в верхней части экрана. Поэтому, если пароль введён с ошибкой, при нажатии на кнопку «Сохранить» приходится далеко тянуться пальцем.
![](https://awdee.ru/wp-content/uploads/2024/04/IMG_2655C05D9EC9-1_1.jpeg)
62. Прокрутка экрана создания пароля
Как и все предыдущие, экран ввода пароля прокручивается. Причина скролла непонятна.
![](https://awdee.ru/wp-content/uploads/2024/04/RPReplay_Final171389-6.gif)
To be continued…
Как видим, даже на небольшом отрезке customer journey, приглядевшись, можно заметить детали, которые сделают жизнь клиента удобнее. А внедрить многие из этих доработок не составит труда.
Надеюсь, что было полезно. Как читателям, так и коллегам из Авито. Оценивая других, смотрим на себя. Подмечаем идеи. Прокачиваем свою насмотренность.
Свои новые материалы я анонсирую в Телеграм-канале. Подписывайтесь, если не хотите их пропускать. На связи.
Обсуждение
Похожее
15 интересных решений в дизайне книжных обложек
Как обсуждать UX-дизайн с командой: практические советы легендарного Скотта Дженсона
Саммари интервью с берлинским шрифтовым дизайнером Филиппом Ноймайером