Про поля для ввода паролей1 min read
Вольный пересказ статьи на СмешнМегазин о том, как грамотно делать поля для ввода паролей (те самые <input type=password />
О таком уже говорили в Советах (раз и два).
О чём же пишут на Смешн?
Маскировка пароля используется непосредственно с помощью специального типа поля ввода «пароль». Это сделано для того, чтобы всякие нечестные пользователи не завладели вашим аккаунтом, подглядев за вами. А технически — чтобы браузер не запоминал введённые символы в поле ввода, и потом не предлагал их автоподстановку, как делает это с полем логина, например.
Но маскирование мешает и так не особо приятному процессу регистрации на сайте, когда пользователь должен заполнять кучу полей (зачастую ненужных, но речь в статье не об этом).
В статье приводится мнение, что маскировать пароль нужно при авторизации (когда нужно ввести пароль один раз), но не при регистрации аккаунта (обычно там просят дважды).
Вы задумывались, почему делают два поля пароля?
Причин несколько.
Первая — чтобы ограничить пользователя от ввода случайного пароля (выдуманного на один раз, который он не сможет повторить). Но решать за пользователя что ему нужно ввести — терроризм (подсказать — да, но не заставлять).
Вторая — если вы совершите ошибку (случайную) в первом поле ввода, то при вводе второй раз — данные не совпадут и появится уведомление об ошибке. Вроде бы это задумывалось для помощи пользователю: «Смотри-ка, парень, ты где-то ошибся!»
Но сразу возникает проблема: где?
В первом поле или во втором? Или, возможно, в обоих сразу?
К чему такие сложности, если при регистрации будет указан адрес электронной почты и туда можно будет прислать ссылку на восстановление? А так мы вынуждаем человека стирать введённые в обоих полях символы и пытаться внимательно, не допустив опечатки, ввести пароль ещё пару раз.
Люди чаще всего заводят аккаунты в спокойной обстановке, дома, когда их никто не торопит и не отвлекает. А главное — не подглядывает через плечо.
Ну, а что же делать для поля пароля при авторизации?
- Можно скрывать введённые символы всегда.
- Можно скрывать, когда фокус ушёл из поля ввода пароля.
- На айфоне, к примеру, отображается последний вводимый символ, а предыдущие скрыты за завёздочками. Кажется удобным? Ведь вряд ли кто-то сможет незаметно пялиться через ваше плечо и запоминать посимвольно пароль.
Но выходит, что это крайне сомнительное решение. Телефон и компьютер — разные платформы со своими сенариями использования.
В случае, если вы владеет слепым 10-пальцевым методом печати, то просто не успеете видеть последний символ и заметить ошибку. Если же не владаете — вы вовсе не смотрите в экран. - Ещё решение — сделать переключатель режима: вводим со звёздочками, или, наоборот, показываем (такое решение, к примеру, используется в поле ввода ключа вайфай-сети в «Виндуоз 7»).
Для тех, кто хочет попробовать такую практику на своём сайте — есть плагины на JQuery для того, чтобы менять тип поля и открывать звёздочки (точки).
По ссылке реализация с чекбоксом, но некоторые ребята рекомендуют рисовать иконку «глаза».
Часто забота о пароле — излишняя паранойя. Если вы действительно используете в качестве пароля набор символов, то стороннему человеку (не с фотографической памятью, разумеется) сложно запомнить быстро вашу комбинацию вида cxj^D6!f.
Автор статьи на Смешн предлагает использовать стили для полей ввода пароля. Например, можно отображать введённые символы курсивом, да ещё и светло-серым. Это дополнительно усложнит распознавание вашего пароля.
Итог
Думайте о балансе между удобством использования вашего интерфейса живыми людьми и безопасностью их данных.
Часто при восстановлении пароля на почту приходит не ссылка для сброса, а сам пароль!
И ещё мелочь: вместо ссылки «Забыли пароль?» сейчас многие специалисты предлагают просто ставить рядом с полем пароля иконку «?», которая выполняет ту же задачу — знак вопроса ассоциируется с помощью, которая ему нужна, когда он забыл пароль для входа.