Не прячьте пароли от пользователей

Не прячьте пароли от пользователей

Как и обещал в новогоднем посте, начинаю серию статей о юзабилити. Для начала будет несколько статей с сайта useit.com, а там посмотрим.

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

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

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

Напомню эти десять принципов (Ten Usability Heuristics)
  • Отображение текущего состояния системы;
  • Связь между строением системы и реальным миром (система должна говорить с пользователем на его языке, словами, фразами и идеями, понятными пользователю, а не на на языке роботов);
  • Контроль и свободу — пользователям (люди часто тыкают не то, что им нужно, помните об этом и припасите для них простой и понятный путь отступления вроде кнопок «отменить ввод» и «повторить ввод» в текстовых редакторах);
  • Постоянство и стандартизация (не надо путать людей людей, называя одними и теми же словами разные вещи или реализуя сходные задачи с помощью разных принципов способов взаимодействия);
  • Предотвращение ошибок (например, диалоги подтверждения при удалении данных);
  • Узнавание вместо вспоминания (меньше нагружайте юзеровы мозги, подсказывайте, как работает та или иная функция, делайте интерфейс более визуальным и очевидным, чтобы пользователю не приходилось вспоминать или, того хуже, гадать, что же там делает кнопка «Изменить»);
  • Адаптация под уровень пользователя (продвинутые способы взаимодействия, неактуальные для новичков, могут сильно ускорить и упростить работу опытным пользователям);
  • Эстетичность и лаконичность (не суйте в интерфейс вещи, которые не относятся к делу);
  • Помогайте пользователям при ошибках (сообщения об ошибках вполне могут быть написаны на человеческом языке, вот и пишите их для людей, указывая при этом не только суть ошибки, но и как ее устранить);
  • Хелпы и документация (ясное дело, что лучше сделать систему, которой можно пользоваться, не прибегая к помощи документации, но документация должна быть, и притом должна быть легкодоступной).

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

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

Цена скрывания паролей

Когда мы проводили тестирование юзабилити мобильных телефонов (Mobile Usability), скрывание паролей оказалось настоящей проблемой, так как на мобильниках вводить текст труднее и опечатки там не редкость. Однако, и у пользователей компьютеров оно вызывает затруднения.

При скрывании паролей возникает две проблемы, одна из которых ухудшает защищенность:

  1. Пользователи совершают больше ошибок, когда не могут видеть, что они вводят. Как следствие, они чувствуют себя менее уверенно. Это, можно сказать, двойное ухудшение пользователького опыта может привести к тому, что в какой-то из разов человек сдастся и вообще не захочет больше работать с вашим сайтом. Или к увеличению звонков в саппорт, если говорить об интранетах. В обоих случаях, у вас или вашего клиента есть шанс потерять в деньгах.
  2. Чем менее уверенно пользователи чувствуют себя при вводе паролей, тем больше они склонны а) использовать более простые пароли и/или б) копипастить пароли из файла на компьютере. Оба варианта ведут к снижению защищенности.

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

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

Забейте на традицию

Скрывание паролей стало обычным делом исключительно по двум причинам:

  1. его легко реализовать
  2. и оно было дефолтным в ранние годы интернета.

В этом отношении оно схоже с другой юзабилити-проблемой — кнопкой «Отменить» в вебформах, которой тоже пора бы скончаться (Reset and Cancel Buttons).

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

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

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 33

1111111111111111111111111111111111111111111111111111111111111111
Какое-то антиюзабилити получается. УГ уг уг уг. В терминале иксовом даже не видно что что-то набираешь, когда вводишь пароль. И ниче, все живы.
#
1111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111111111111111111111111111111111111111111
вот я открываю страничку мудака-нильсона, и она прямо мега удобна в использовании. И дизайн просто зашибись. Да и сам нильсон - красавец нечего делать.

фу!
#
1111111111111111111111111111111111111111111111111111111111111111
switch
На мак буке 13 дюймов видна горизонтальная полоса прокуртки.
#
switch
va1n
Как по мне, так статья полный бред. Пароли скрывать нужно. Можно привести не один случай, когда это необходимо, т.е. это не только "подглядывающий сосед".

"когда юзабилити соперничает с защищенностью, защищенности иногда следует побеждать"
Эта фраза вообще убила напрочь. Т.е. ради юзабилити можно забивать на безопасность, пусть будет удобно, и пусть нас ломают, крадут у пользователей аккаунты и т.д. Как было сказано выше мудак, ваш Нильсен.
#
va1n
Gushchin
Нильсона не люблю, но со статьей абсолютно согласен. Va1n, о какой защищенности ты говоришь? *** - это защищенность? Бред. Это не больше чем архаизм, инф. мусор.
CJ Slade
Функции сохранения паролей в браузере отлавливают именно "type=password". Постоянная ручная авторизация может огорчить пользователя.

С мобильниками тоже не всё так плохо. В тач-смартфонах при клике на поле открывается виртуальная клавиатура со строкой ввода.

Скрытие пароля - это уже почти стандарт. С этим смирился весь мир, кроме Якоба Нильсена.
#
CJ Slade
Sun
Мир со многим смирился, это не доказывает необходимости таких вещей. Всегда раздражало, что при смене пароля нужно заполнять 3 поля, а не 2. По поводу запоминания пароля браузером, это да — проблема.
#
Sun
vlad
в некоторых новых мобильных броузерах при вводе пароля в течение наскольких секунд показывается последний введенный символ... вот это, imho, правильное юзабилити
#
vlad
iscatel
Идея очень хороша. Не помню где, но я уже видел ее реализацию, только там был чекбоксик "показать пароль".
#
iscatel
Anna
Не знаю, я чувствую себя неуютно, если пароль не скрывается.
pomidorchi
Нильсен всё чаще кажется впадающим в маразм, но, тем не менее, определённый смысл в его словах есть.

Естественно, такие штуки для доступа к банковским аккам лучше не делать, но у меня есть довольно много знакомых, которые на «вы» с клавиатурой и именно из-за того, что им не видны символы пароля они используют либо один и тот же простой пароль для всего, либо юзают лежащий прямо на рабочем столе (редкий случай — google notebook) файлик, откуда всё копипастят —> снижение защищённости.

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

Ну, и естественно, оставил бы за юзером право выбора, должен отображаться пароль или нет. Так что идея с дефолтной галочкой мне тоже нравится.
Siva
прячте пароль от пользователей - они вам скажут "спасибо"
парочка клёвых штучек для юзабилити ввода пассвордов: http://css-tricks.com/better-password-inputs-iphone-style/
Junior
Из недовольных комментаторов видимо все c первого раза вводят свои пароли.
Они у вас "123" что ли?

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

Для себя проблему решил greasemonkey скриптом Password Viewer. По наведению мыши на поле ввода пароля меняет его тип на 'text'.
#
Junior
Siva
ввожу почти всегда с первого раза свой пароль - русское 6и символьное слово в английской раскладке + 4 цифры означающие еще одно слово на языке l33t
Алехандро
Про ресет и отмену еще можно согласиться, но пароль показывать не стоит :)
Murz
А можно как-то в input type=password сделать чтобы он не прятался за звёздочками? Получилсся бы оптимальный вариант. И чекбокс с записью в куки - прятать-непрятать пароль за звёздочки
#
Murz
саша кириллов
Ну думаю совершенно не проблема делать сначала type=text, а при потере фокуса менять его на type=password.

Тогда при вводе пользователь все будет видеть, а когда пароль будет введет и пользователь пойдет дальше, уже не так важно, кружочки там будут или буквы. Если он захочет еще раз посмотреть на пароль — кликнет в поле, оно поменяется опять на type=text, он увидит буквы.
Булат
Сайт с реализацией этой идеи:
http://www.zarifman.ru
Стаф работает при регистрации. Кнопка "показать пароль" появляется ПОСЛЕ начала печати пароля.

Правда там нужно еще доработать автоматическую смену на type=password, если перед отправкой формы стоит выбран type=text
- иначе браузер не запоминает.

#
Булат
anadikt
может оно и так, но скрывать полюбому надо от посторонних глаз, на то он и пароль!!! а вот чтоб ошибок при вводе не делать, надо быть внимательней... ну эт моя точка зрения, сильно не судите
Toshi
Вообще мне кажется ровняться на Нильсена глупо, почитав его книги и мысли у меня сложилось впечатление, что о застрял в 80-х.
#
Toshi
Stunpix
Почему-то все забыли добавить про набирание пароля не в той раскладке - это жутко достает. На маке очень граммотно сама система при наборе пароля переключается в английскую раскладку. :) вот где народ о юзабилити подумал! ;)
Toshi
Не зря, Маки стоят в 2-3 раза дороже))
#
Toshi
Xdezzz
Скачайте программу авто-смены раскладки Punto на Яндексе ))) Пользуюсь и никогда не ошибаюсь. А на счет скрытия, да нужно ли оно вообще, действительно, я бы не скрывал.
#
Xdezzz
Файна
+1 за Пунто Свичер. Юзаю давно, и очень привык к нему.
А пароли, все же, лучше скрывать, имхо. Ситуации всякие бывают. К тому все привыкли видеть эти черные кружочки ;)
SeoMaster
Помоему тема слишком раздута. По-моему, очень сложно ощибсться при вводе пароля, даже ели ты его не видищь (тем более 2-3 раа!), а вот насчёт людей за спиной - это да, такое бывает редко, но всё же бывает!
Денисов Вячеслав
Мне вот идея пришла после прочтения статьи. делать поле вода пароля не зашифрованным точками, а обычным текстом. НО если рядом есть «подглядывающий», то нужно чтобы был подобный пунктик : «закодировать пароль».

По мне так намного удобней.
John
Ну я вот все время ошибаюсь. - это не изличимо!

Че забред?
Если юзер не может ввести пароль не видя букв, то юзер ДЕБИЛ. И таких пускать на сайт СТРОГО запрещено! Если совсем туго, пиши в блокноте, копируй, вставляй в поле для пароля.
ппц! Ну ошибся при вводе пароля - перенабери. Открывать пароли полный бред. Давайте еще не будем шифровать пароли и записывать в БД, а в текстовый файл, чтобы нуб-юзер мог легко сменить забытый пароль от своего сайта :)
#
John
sleepwalker
Для регистрации считаю маст хэв. Поле подтверждение пароля жутко бесит. Все равно на мыло пароль придет.
#
sleepwalker
m.kobernyk
Зря так жестко ругаете. Автор прав, как по мне, а еще лучше - приделать рядом стабильную или появляющуюся при вводе кнопочку "Скрывать пароль". Много раз авторизовался в общественных местах, но сама функция гораздо больше мешает, нежели защищает
#
m.kobernyk  
Доброжелатель
Заметка говно, писатель мудак.
Да будет вам известно, по умолчанию все введённые данные в поля, отличные от type=password, сохраняются в бравзере. Следует так же учесть, что в большинстве случаев на любое поле пароля ставится вполне ожидаемое name=password.
Очень забавно наблюдать, как при двойном нажатии на такое "открытое" поле выкатываются все когда-либо введённые в такие же поля пароли.
#
Доброжелатель
newboon
"Большинство сайтов и приложений скрывают вводимые пароли буллитами. Теоретически, это защищает от подглядывания из-за спины. К сожалению, ловкий человек, глядя на клавиатуру, сможет определить, какие клавиши вы нажимаете, а значит, и какие символы вводите. Так что скрывание паролей не гарантирует вам защиту даже от любопытных Варвaр, не говоря уж о более подготовленных злоумышленниках."

Простой пример, сейчас очень распространены стримы, вот один "стример" перепутал окно ввода логина и пороля в Диабло 3. Ввел в "очень юзабильное и удобное" поле логина свой пороль и все, через 5 минут на персонаже не осталось ни одной шмотки. Так что теперь придется не только клавиатуру прикрывать от "соседа" но и рукой монитор зарывать =)) как варинат добавить возле поля пороля переключатель, который могбы переключать вид "***" на "123" мне кажется это оптимальный вариант
Михаил
---Совместное участие нескольких специалистов
-----хотят предложить свои услуги
-------на восстановление пароля от забытых страниц,почт
---------на взлом партнера по бизнесу
-----------на взлом второй половинки
-------------или для иных условий
---------------на следующие вид услуг :
Вконтакте
Mamba
Одноклассники
Facebook
love
яндекс
Маил
Рамблер
gmail
Yahoo
Hotmail
ukr . net
----------На счет остального в личке
связь с нами через почту vzlomshick.mihail@yandex.ru
=
=
=
=
=
---Совместное участие нескольких специалистов
-----хотят предложить свои услуги
-------на восстановление пароля от забытых страниц,почт
---------на взлом партнера по бизнесу
-----------на взлом второй половинки
-------------или для иных условий
---------------на следующие вид услуг :
Вконтакте
Mamba
Одноклассники
Facebook
love
яндекс
Маил
Рамблер
gmail
Yahoo
Hotmail
ukr . net
----------На счет остального в личке
связь с нами через почту vzlomshick.mihail@yandex.ru
=
=
=
=
=
---Совместное участие нескольких специалистов
-----хотят предложить свои услуги
-------на восстановление пароля от забытых страниц,почт
---------на взлом партнера по бизнесу
-----------на взлом второй половинки
-------------или для иных условий
---------------на следующие вид услуг :
Вконтакте
Mamba
Одноклассники
Facebook
love
яндекс
Маил
Рамблер
gmail
Yahoo
Hotmail
ukr . net
----------На счет остального в личке
#
Михаил

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler