Mobile UX Form. Inputmode для вашего front-end разработчика

В этой статье, хотелось бы затронуть достаточно неоднозначную тему, которую 90% разработчиков не используют. Скорее, имею ввиду верстальщиков - тех кто собирает ваш дизайн в веб-страницу. Чтобы вы могли «потыкать» ее в браузере.

Основа разработки дизайна. UI/UX в дизайне.

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

У дизайнеров интерфейса (читать как сайтов, приложений), есть такие понятия как UI/UX. Которыми они безусловно обязаны пользоваться при разработки своего детища-дизайна.

User Interface (UI) - не буду углубляться в размышления и подробности, но по сути, это то, что мы и называем дизайном

User EXperience (UX) - пользовательский опыт (рус.). - тут намного сложнее, кто-то даже сравнивает это понятие с наукой. Но я думаю это далеко от науки, те кто владеет подобными знаниями, прям будет крутым.

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

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

Что если дизайнер поменяет это все местами?

Отсюда и название User Experience - то есть, опыт пользователя.

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

UX фронтендера

Наконец, мы добрались до сути этой статьи. С дизайном надеюсь понятно, но что же не так у верстальщиков (front-end разработчиков).

При формировании форм для пользователей, фронты не знают или не хотят использовать одно замечательное свойство для полей: [inputmode]. Которым разработчик говорит браузеру, какую клавиатуру нужно использовать для конкретного поля.

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

[Inputmode] для полей формы: 

None - не показывать клавиатуру, когда мы реализуем свою собственную. 

Text - клавиатура по-умолчанию (на скриншоте выше), когда не указан тип клавиатуры.

Decimal - Цифровая клавиатура, с вводом дробных чисел. Показывает цифры и «,» или «.» в зависимости от локали пользователя. В зависимости от устройства еще знак «-».

Numeric - Цифровая клавиатура (0–9).

Tel - включает цифровую клавиатуру (0–9) и символы «+», «*» и «#»

Search - по сути, клавиатура по-умолчанию, только вместо «go» будет «Search».

Email - расширенная клавиатура по-умолчанию + символ «@».

Url - расширенная клавиатура с символом «/» и ввода доменной зоны адреса сайта, например «.com».

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

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

п. с. Похоже большинство верстальщиков, редко получают обновления и следят только за технологиями типа React’a - зачастую используемых не по назначению. А просто потому - я могу. Но эту тему еще обсудим...

Конец. 👍👏