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

Люк Вроблевски, директор по продукту в Google и сооснователь сервиса опросов Polar, в своем блоге
написал о проблемах, с которыми постоянно сталкиваются пользователи при вводе паролей к сервисам, и способах их решения.

#самизнаетекакиекнопки

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

Около
82% пользователей забывают свои пароли, поэтому запрос на восстановление доступа — самый распространенный в службах поддержки. В сфере электронной коммерции 75% пользователей не завершают свои покупки из-за того, что они забывают пароль.

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

Если есть подозрения, что кто-то следит за экраном, лучше убрать телефон из поля зрения «подозреваемого» — это поможет больше, чем маскировка пароля.

Отображение или скрытие пароля

В приложении Polar Вроблевски добавил возможность скрывать пароль при нажатии на кнопку «Hide», которая находится в области ввода.

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

Решение Polar поддержали другие сервисы. Дизайнер мобильных интерфейсов Стивен Хубер добавил возможность скрывать пароль в приложение американского оператора связи Sprint.

First time I removed masking/dupes was Sprint All 20mm customers needed new pswd (CPNI). Success, NO issues. Tested, well-measured.
@lukew

— Steven Hoober (@shoobe01)
November 7, 2012

Did this years ago for /desktop/ web with no security issues and /huge/ proven usability success. Required for mobile!!!
@tkadlec @lukew

— Steven Hoober (@shoobe01)
November 7, 2012

I forgot to link to my pattern on signon for mobile. Large portion is/assumes not masking, explains issues
http://t.co/ok2QjFOc @lukew

— Steven Hoober (@shoobe01)
November 7, 2012

Майк Ли, бывший директор по продукту Yahoo, рассказал, что благодаря отображению пароля и другим изменениям в форме авторизации компания зафиксировала двойной рост конверсии.

@lukew when I was at Y! We eliminated the second input field and displayed the full password prior to form submission. Eavesdropping unlikly

— Mike Lee (@MikeLee)
November 7, 2012

@lukew the rationale was that the user should have more control to physically protect view of the PW. Make the overall form shorter / easier

— Mike Lee (@MikeLee)
November 7, 2012

@lukew We saw double digit improvements in the overall flow, but that was also influenced by other changes to the form. No security issues.

— Mike Lee (@MikeLee)
November 7, 2012

Примеры реализации

Возможность скрывать пароль добавили в свои приложения многие популярные сервисы. Например, PayPal и Foursquare реализовали схожую с Polar форму авторизации:

LinkedIn, Adobe и Twitter заменили фразу «Hide password» на иконку глаза. Такая реализация, по мнению автора, удобна при адаптации приложения на другие языки — локализация фразы «Скрыть пароль» может отобрать слишком много места в небольшом поле ввода.

Команда Microsoft, по мнению Люка Вроблевски, придумала самое странное решение. Чтобы показать пароль в Windows 8, надо нажать и удерживать курсор на иконке «глаза». Как только пользователь отводит мышь от значка — «маска» возвращается, и текст снова невидим.

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

Дизайн в деталях

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

Вроблевски ссылается на исспедование аналитика Джека Холмса. Он провел опрос посетителей интернет-магазина, при авторизации в котором пароль по умолчанию не скрывался. 60% респондентов отнеслись к ресурсу подозрительно, в то время как 45% посчитало это удобным. При этом к возможности отобразить пароль самостоятельно с помощью флажка в чекбоксе 100% опрошенных отнеслись положительно.

Мобильные интерфейсы против веб-сайтов

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

Почему в приложениях вход должен быть более удобным, чем в веб-браузере?

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

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

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

Лучше, чем пароль

В iOS 8 разработчики Amazon вообще убрали необходимость вводить пароль. Для авторизации сервис использует Touch ID.

Uber также в своем приложении перешел на авторизацию при помощи отпечатка пальцев.

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