Как сделать вход дружелюбным

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

Какими принципами я руководствуюсь

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

  • Забота о клиенте – лучшая инвестиция;
  • Честность ещё никого не отпугивала;
  • Все ошибаются;
  • Клиенты приходят за продуктом, а не за красными кнопками или особыми заголовками.

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

Дружелюбный вход

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

Что лучше: пароль, телефон или «Войти с помощью…»?

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

Идентифицируйте по номеру телефона

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

Напомните пользователю, с каким номером он входил крайний раз

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

Пример входа по телефону
Пример входа по телефону

Не забудьте про интернационализацию

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

Сервисы авторизации, от которых пользователь помнит пароль

Используйте то, что пользователю удобно:

  • Google, Apple ID – стандарт;
  • Github – Для разработчиков;
  • VK, Facebook и Сбербанк ID и другие используйте тогда, когда услуга напрямую связана с соц.сетью или привязываемым сервисом.

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

Напомните пользователю, как он входил в прошлый раз

У меня 3 аккаунта в Гугле, 6 почт, включая рабочие, есть VK и Сбер. Так что я редко запоминаю, что к чему привязано. Поэтому посетители будут забывать, как они входили раньше. Все ошибаются, это нормально. Помогите пользователю вспомнить последний способ входа с помощью надписи, иконки и изменения порядка кнопок.

Пример входа в личный кабинет
Пример входа в личный кабинет

Про порядок кнопок

Если способов входа много, сортируйте и напоминайте. Ставьте наверх списка Apple ID, если у пользователя iOS/Mac OS, если нет – Google. Порядок остальных способов выберите по популярности самих сервисов.

Пример входа, если способов уже много
Пример входа, если способов уже много

Что делать запрещено

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

Резюме и чек-лист

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

  • ✅ Забота

  • ✅ Честность

  • ✅ Не страшно ошибиться

P.S. Я не дизайнер и эта заметка – мой опыт использования разных сервисов, работы с заказчиками на фрилансе и коллегами-программистами. От части меня вдохновили книги «Пиши, сокращай» Максима Ильяхова и «Дизайн привычных вещей» Дона Нормана. Советую их к прочтению даже если вы делаете бэкэнд.

55
2 комментария

Какой-то цирк получается под кнопкой "Войти". Можно ли изменять цвета или деформировать кнопочки Гугла/епла?
Или они прописаны в каких-то правилах лицензионного соглашения?

Можно, это просто пример