Хабр, привет!

За май я подобрал 6 советов. Мы поговорим о том, нравится ли вам переключать клавиатуру при вводе email, как использовать Esc, нужно ли устанавливать фокус на кнопке закрыть, нужно ли заставлять пользователя заново вводить пароль и email, зачем оставлять только цифры при вводе кода авторизации.

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

Поехали!

Вы действительно хотите переключать заглавные буквы на строчные при вводе email?

Ребят, раньше я использовал iHerb для заказа витаминов. И каждый раз при входе на сайт мы должны были переключить клавиатуру с заглавными буквами на строчные, чтобы ввести email. Как вы относитесь к этому?

Лично меня это бесит! Ладно мои личные предпочтения. Но я пошел смотреть все доступные email, а это несколько тысяч, и вот, что я понял. Подавляющее большинство email начинается со строчной буквы!

Поэтому я предлагаю сразу показывать клавиатуру со строчными буквами. Тем более это просто сделать. Надо добавить autocapitalize="off" к полю ввода и все готово!

Клавиша Esc должна закрывать модальные окна!

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

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

Но как можно сделать по другому? Зайдите на Booking и откройте модальное окно с выбором языка. Далее нажмите клавишу Esc, и окно закроется! Просто одно нажатие, и не надо наводить мышку на кнопку и кликать по ней.

Всегда ли установка фокуса на кнопке закрыть это удобно?

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

Стоп! Ребят, почему мы нажимаем клавишу ↓ два раза? Почему нельзя сразу начать выбор языка? Да, круто, что фокус переносится на кнопку, и поэтому мы можем сразу закрыть модальное окно, нажав клавишу Enter. Но! Этот сценарий не основной при выборе языка. Мы просто хотели, как можно скорее, выбрать нужный нам язык.

Поэтому я предлагаю перенести фокус на первый язык, чтобы сразу начать выбор при помощи клавиш ↓ и ↑ ☝️ Что скажите? Это правильно или фигня? Пожалуйста, оставьте комментарий ????

Дайте шанс исправить неправильный пароль

Ребят, как часто вы совершаете ошибки при вводе пароля? Лично я, постоянно. У меня множество паролей, и поэтому частенько ввожу не тот. В общем, я постоянно использую функцию сброса пароль.

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

Я сделал ошибку в пароле, и после валидации приложение стерло его. И теперь я снова должен вводить его еще раз....

Здорово, что есть другие реализации. Спасибо Booking! После валидации сайт сохраняет введенный пароль, и я могу посмотреть его и исправить!

Заставлять пользователя заново вводить email это плохой UX

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

Ох... И тут я довольно частенько обламываюсь. Все из-за того, что введенный ранее email сбрасывается, и мне приходится заново вводить его! Например, так сделано на сайте Preply.

Чтобы продемонстрировать, что я имею ввиду, попытаемся авторизоваться, введя email и неправильный пароль. После того, как мы не пройдем валидацию нажмем на ссылку "Forgot password" и перейдем на страницу, где введенный ранее email уже сброшен! И нам придется заново вводить его...

У меня 0 идей, почему нельзя сделать так, чтобы email добавлялся автоматически. Например, так реализовано на Booking.

Если мы попытаемся авторизоваться с неправильным паролем, а после ошибочной валидации нажмем на ссылку "Forgot your password?", то приложение перейдет на новую страницу, где ранее введенный email автоматически добавлен. Бинго!

Пожалуйста, оставьте только цифры

Долгое время мы были вынуждены использовать `type="tel"` везде, где пользователям нужно было ввести числа. Например, на сайте Телеграмм при вводе кода авторизации вы увидите именно такую клавиатуру.

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

Я предлагаю использовать `inputmode=numeric`. Значение `numeric` позволяет показать клавиатуру только с числами. Поэтому пользователи гарантированно не ошибутся и будут быстрее вводить данные, делая это машинально и не концентрируясь на символах.