Лучшие практики: Авторизация в мобильных приложениях

Директор студии Surf Владимир Макеев написал для AD обзор форм авторизации, которые используются в мобильных приложениях — как её показывать, как сократить для пользователя время заполнения, что нельзя забыть при входе через соцсети и как сделать авторизацию через смартфон проще.

Как в сексе: чем позже — тем лучше

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

Основные способы входа в приложение, которые сегодня широко используются, — это логин и пароль, соцсети, телефон и код из SMS. Разберем подробнее первый из названных способов.

Логин и пароль

Если пользователю приходится вводить личные данные, наша задача — упростить для него этот процесс.

Подсказки к полям ввода

Немного терминологии

В простых формах, например, если мы используем привычный ввод логина и пароля, мы можем расположить названия полей в placeholders — это достаточно очевидно для пользователя. В более сложной форме, где есть ограничения на ввод данных, мы должны использовать labels и placeholder — например, пояснение к длине пароля. Labels и placeholders лучше размещать над полем ввода, так для пользователя в любой момент очевидно, что он заполняет, и как это следует делать.

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

Две качественные статьи на тему:
Placeholders in Form Fields Are Harmful, Mobile Form Usability: Never Use Inline Labels.

Автодополнения

Автодополнение популярных доменов. iOS-библиотека от HotelTonight ускоряет ввод e-mail на основе базы популярных почтовых доменов. В Android можно сделать то же самое вручную. Все это приятно ускоряет ввод email.

Автодополнение популярных почтовых доменов
Автодополнение email по аккаунтам Google. Android-приложение может получить список Google-аккаунтов устройства и предлагать пользователю автодополнение. Так делают, к примеру, Evernote и Instagram. Можно действовать по-другому: автоматически заполнять поле ввода одним из электронных адресов. Так как у большинства пользователей один аккаунт Google, велика вероятность, что мы угадаем. Так поступают Facebook и Twitter. iOS не даёт доступа к email пользователя, поэтому сделать такой автокомплит нельзя.
<br>
Автоподолнение почты по аккаунтам Google в Evernote
Автодополнение имени. На стороне сервера или в приложении можно сохранить базу популярных имён и предлагать пользователю автодополнение. В Android, опять же, может помочь Google+. Но это все же неоднозначный способ — ведь ввод имени занимает пару секунд, а любой автокомплит в какой-то степени отвлекает пользователя.
Автодополенение ранее использованного логина при авторизации. Если в приложении нет переключения между аккаунтами, как в официальном Twitter или Gmail, полезно при входе автодополнять ранее использованные email и логины. Например, Instagram показывает последний использованный логин. Правда, такой способ не подходит для финансовых приложений, так как в них важна безопасность. Если пользователь вышел из приложения, то никто не должен знать, какой логин он использовал.
Автоопределение пола. Приложения могут определять пол по введённому имени. Сервис genderize.io содержит базу из 200 тысяч имён, 79 стран и 89 языков. 100 тысяч запросов в месяц стоят $9. Есть SDK для обеих платформ. В Android можно попробовать получить пол из аккаунта Google+. К сожалению, он не всегда проставлен пользователем, а в России Google+ вообще мало используют.
Автодополнение адреса ускоряет ввод в формах оформления заказа, иногда такое поле присутствует в форме регистрации. Есть хороший обзор сервисов, решающих задачу.

Пароли

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

Пароль при вводе принято скрывать точками. Полезна кнопка «показать пароль» — она особенно важна на экране регистрации, если мы не просим пользователя ввести пароль дважды. Это интересно реализовано в спортивных трекерах Runtastic: пароль отображается, кнопка «глаз» зажата.

Восстановление пароля — задача не первостепенная. В большинстве топовых приложений пользователя для этого отправляют на веб-страницу. Восстановление не должно быть отдельным экраном, открывающимся в браузере, его можно реализовать на экране авторизации с помощью простых анимаций. Отличные примеры:
Airbnb, Tumblr, Runtastic.

<br>

Проверка полей, клавиатуры и оферта

Правильность заполнения полей важно проверять в самом приложении. Валидация на стороне сервера занимает время пользователя, и это его раздражает. Это правило относится и к проверке доступных логинов и email, которая должна работать «на лету». Хорошие примеры — «
Яндекс.Музыка», Twitter.

Для всех разных типов полей важно использовать соответствующие типы клавиатуры:
iOS, Android. Если пользователь вводит почту, на клавиатуре должен быть знак @, цифры для ввода номера и прочее. Вы знаете, что никто не читает оферту. Думаю, что чекбокс соглашения с ней избыточен — он отвлекает пользователя от контента. Достаточно разместить текст «Зарегистрировавшись, вы соглашаетесь с политикой конфиденциальности и условиями предоставления услуг», нужное выделив ссылками.

Соцсети

Это простейший для пользователя способ входа: ему не нужно заполнять логин и пароль вручную. Кнопки соцсетей резонно сортировать по частоте использования в зависимости от платформы и страны. Google+ удобнее для Android, «ВКонтакте» есть у большинства пользователей в России. Так поступает сервис Foursquare в Android.

Когда пользователь входит через соцсеть, он ожидает, что сразу попадёт в приложение. Многие приложения просят ввести дополнительную информацию, что раздражает.

Со стороны технологий для реализации входа можно использовать универсальные OAuth-библиотеки, либо официальные SDK соцсетей. У официальных SDK есть важное преимущество: они производят авторизацию через установленные приложения либо через аккаунты пользователя в системных настройках. Если пользователь авторизуется через соцсеть, с большой вероятностью у него установлено соответствующее приложение.

Номер телефона и код подтверждения

Валидация ввода номера — задача непростая из-за проверки страны и маски ввода. Здесь отчасти может помочь
библиотека от Google.

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

После ввода и отправки номера пользователю нужно ввести код из SMS. Android-приложение может делать это автоматически. Этот прием используют Viber, Telegram, Rocketbank. Важно лишь объяснить пользователю, что скоро придёт SMS, нужно только немного подождать.

Fabric Digits. У Twitter есть бесплатное готовое решение для авторизации через телефонный номер. Это SMS-шлюз, мобильные и веб-SDK. Внешний вид интерфейса в определённых рамках можно настраивать. Это наиболее простое решение задачи из коробки.