Как сделать удобным ввод цифр при работе на мобильном устройстве использование inputmode


Содержание материала:

Маски ввода для текстовых полей

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

Маски для полей легко сделать с помощью jQuery плагина MASKED INPUT PLUGIN. Скачать его можно с сайта разработчика или архив (1.4.1 Minified).

Подключение:

Номер телефона

Мобильные, Москва, МО и Санкт-Петербург.

Данная маска иногда вызывает потерю клиента, некоторые люди не видят +7 и пишут 8903. в итоге теряется последняя цифра телефона. Лучше использовать другую маску:

$(‘.mask-phone’).mask(‘9 (999) 999-99-99’);

Masked Input – своя маска для полей ввода input/textarea на jQuery

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

Например, e-mail обязательно требует наличия значка собаки @, телефон же, в свою очередь, должен начинаться на +7 и так далее.

Как сделать проверку e-mail на валидность, мы вами уже рассматривали в предыдущих статьях. А вот как сделать свою маску, например, для телефона, я сейчас расскажу.

Для решения таких задач существует плагин под названием «Masked Input». С помощью него мы можем с вами сделать свою маску, то есть задать нужный нам формат для ввода данных.

1. Скачайте архив в конце статьи.

2. Содержимое загрузите на ваш сайт, после чего скрипт подключите перед закрывающим тегом

Работа с input: подборка полезных решений на HTML и CSS

В рамках работы над полями ввода (input) существуют не всегда очевидные и, как правило, редко используемые CSS-приёмы и HTML-атрибуты, позволяющие без использования JavaScript преобразовать внешний вид элементов формы и позаботиться об их юзабилити. Вниманию читателя представляется небольшая подборка таких «фишек» — как уже давно применяемых, так и относительно новых, ещё не поддерживаемых всеми браузерами.

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

Стиль выделения ошибок

Стандартное уведомление об ошибках в словах, введенных в поле ввода, представляет собой волнистое подчеркивание. CSS4 позволит установить иной способ выделения орфографических и грамматических ошибок — посредством новых псевдоэлементов — ::spelling-error и ::grammar-error . На текущий момент изменить оформление ошибок невозможно, так как эти псевдоэлементы не поддерживаются браузерами, однако их появление — лишь вопрос времени.

Указанные селекторы будут ограничены следующим набор свойств: color , background-color , cursor , caret-color , outline , text-decoration , text-shadow и text-emphasis .

Стиль выделения текста

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

Для ::selection есть пара нюансов, относящихся не только к input :

  • Браузеры на движке Webkit добавляют прозрачность к цвету, указанному в свойствах color и background-color, в результате чего фактический цвет выделения не соответствует заданному в CSS, поэтому их значение следует преобразовывать в формат rgba() с альфа-каналом 0.996 (255/256). При этом манипуляции со свойством opacity не приносят никакого эффекта;
  • Firefox не применяет стиль для картинок, поэтому они всегда выделяются стандартной синей заливкой.

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

Пользовательское изменение габаритов поля ввода настраивается благодаря свойству resize , применяемому также ко всем элементам со значением overflow отличным от visible. Вместе с его указанием для элемента рекомендуется также добавлять минимальную и максимальную ширину и высоту, чтобы избежать нежелательных смещений макета сайта:

Добавление эллипсиса

Когда ширина текстового содержимого обычного input type=»text» больше его фактической ширины, текст по умолчанию обрезается по правому краю и появляется возможность горизонтальной прокрутки. Чтобы сделать обрезку текста визуально привлекательнее через многоточие (эллипсис), следует применить text-overflow :

Удаление лишних элементов внутри полей в IE

Начиная с версии 10 в Internet Explorer такие типы полей как text или password по умолчанию содержат внутри себя дополнительные элементы, вставляемые браузером для улучшения юзабилити, — иконку очистки поля (крестик) и отображения пароля (глаз). Они легко удаляются благодаря соответствующим псевдоэлементам:

Удаление желтого фона при автозаполнении полей

В Webkit после автозаполнения (как правило, форм с логином и паролем) поля приобретают желтый фон и черный цвет текста, которые добавляются непосредственно стилями браузера:

Переопределить данные правила невозможно, поэтому в качестве решения по удалению фона и указанию другого цвета текста предлагается сочетание свойств box-shadow и -webkit-text-fill-color :

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

Удаление стрелки в поле с datalist

При использовании атрибута list (подробнее рассмотрен ниже) в браузерах Webkit к input добавляется иконка в виде стрелки, указывающая на возможность выбора значений из выпадающего списка. За отображение иконки отвечает специальный псевдоэлемент, который может быть скрыт:

Увеличение затенённых символов пароля

Как известно, вводимые в input type=»password» данные затеняются другими символами (как правило, маской служит астериск или черный круг). В Webkit размер этих символов значительно меньше, чем в остальных браузерах. Для их увеличения рекомендуется использовать для поля с паролем шрифт более жирного начертания. Из безопасных шрифтов на эту роль хорошо подходит Verdana, а так как изменения необходимы только для Webkit, селектор можно обернуть в специфический @media :

Затенение символов в поле ввода

Если для поля, отличного от типа password, требуется создать маску, т. е. затенить вводимые символы, стоит прибегнуть к свойству text-security . Оно принимает значения circle , disc , none или square , но, к сожалению, на сегодняшний день доступно только для Webkit с соответствующим префиксом:

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

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

Полезные HTML-атрибуты

Среди множества атрибутов input следует подробнее остановиться на autofocus , inputmode , autocapitalize и list , основной целью которых служит улучшение юзабилити форм. Они не так популярны среди прочих, а их функции в отдельных случаях заменяются JS-кодом.

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

Автофокус на элементе формы

Атрибут autofocus позволяет заранее сфокусироваться на элементе формы, что в определенных ситуациях является прекрасной альтернативой методу HTMLElement.focus() в JS:

Предопределение формата вводимых в поле данных

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

«Некоторые устройства, в частности с виртуальными клавиатурами, могут предоставлять пользователю несколько методов ввода. Например, при вводе номера кредитной карты пользователь захочет видеть только клавиши для цифр 0−9, тогда как при вводе имени предпочтительнее работать с полем, которое автоматически начинает каждое слово с заглавной буквы». Спецификация HTML

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

Атрибут inputmode применяется на input с типами text , password , email или url и согласно спецификации содержит следующие возможные значения:

  • none — запрет на отображение клавиатуры;
  • text — текст, соответствующий языку пользователя;
  • tel — телефонный формат, содержащий цифры 0−9, знак решётки и астериска, — аналог input type=»tel» ;
  • url — формат URL, где присутствуют слеш, точка и элементы автозаполнения вроде «www.» или «.com», — аналог input type=»url» ;
  • email — формат для электронной почты с наличием символа «собака» и точки — аналог input type=»email» ;
  • numeric — только цифровая клавиатура — аналог input type=»number» ;
  • decimal — цифровая клавиатура, адаптированная для ввода дробных значений с точкой или запятой;
  • search — клавиатура, оптимизированная для поиска и, как правило, содержащая соответствующую иконку ввода.

Кроме вышеперечисленных значений браузеры так же принимают:

  • verbatim — дословный ввод букв и цифр, при котором, как правило, не применяется автокоррекция введённых данных, что полезно для имён пользователей или паролей;
  • latin — латинский алфавит, как правило, с предикативным вводом, служащий для взаимодействия между пользователем и компьютером (например, поиск данных);
  • latin-name — latin, но для ввода имён;
  • latin-prose — latin, предназначенный для взаимодействия пользователя с другими пользователями и поэтому содержащий более широкий набор возможностей ввода (например, встроенные смайлы);
  • full-width-latin — latin-prose с добавлением дополнительных пользовательских языков;
  • kana и katakana — служат для ввода текста на японском языке;

Для большей «пуленепробиваемости» атрибут inputmode рекомендуется применять вместе с соответствующим type , который должен отражать семантически верный тип данных, и, если необходимо, pattern , являющийся дополнительной подсказкой браузеру о том, какие данные следует считать верными:

Перевод вводимых данных в верхний регистр букв

Атрибут autocapitalize позволяет выполнять для виртуальной клавиатуры автоматический перевод данных поля в верхний регистр. Он применяется для textarea , а также для полей с типами text или search и может иметь следующие значения:

  • off или none — перевод в верхний регистр не осуществляется (по умолчанию);
  • characters — для символов (артикулы, различные коды);
  • words — для слов (имена, адреса, названия организаций);
  • sentences — для предложений (полезно для textarea , где контент должен представляться как абзац текста);

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

Стоит отметить, что как и inputmode , этот атрибут не будет оказывать на данные никакого эффекта в desktop-версиях. Информации о поддержке мобильными браузерами autocapitalize крайне мало, однако по публикациям на официальных сайтах следует, что атрибут работает как минимум в Safari и Google Chrome.

Добавление готовых вариантов для ввода

Юзабилити полей можно улучшить, если предложить пользователю выбрать заданное значение из списка готовых через атрибут list и дополняющий его элемент datalist . Отличие от традиционного select заключается в том, что поле доступно для редактирования и ввода любых значений, а предлагаемые варианты — элементы option — показываются либо по желанию пользователя, либо во время ввода при условии частичного совпадения по первым (и далее) символам. Это отличное решение в тех случаях, когда вводимые данные можно предугадать засчёт ограниченного количества вариантов.

Для добавления в поле доступных опций в его атрибуте codelist указывается идентификатор списка, которым, в свою очередь, должен обладать datalist :

Как используются типы ввода данных HTML 5 для мобильных устройств

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

К счастью, дизайнеры пользовательского мобильного интерфейса значительно сократили эту проблему, создав специальные раскладки клавиатуры для конкретных задач. Такие оптимизированные клавиатуры позволяют пользователям выполнять общие задачи: заполнение поля адреса электронной почты или набор URL без переключения клавиатуры для выбора определенного символа (например, косой черты или символа «@»). Такая оптимизированная клавиатура должна активироваться при заполнении определенных форм, а потому разработчик должен выбрать правильный тип ввода данных.

Многие разработчики допускают распространенную ошибку, выбирая input type “text” для большинства полей форм, однако важно помнить, что некоторые поля не предназначены для заполнения простым текстом. Особенно важно иметь это в виду для мобильных устройств пользователей.

Типы ввода данных HTML5

В общей сложности HTML5 имеет 23 типа ввода данных. Ниже приведен список этих типов:

Типы ввода данных HTML

С ними вы, вероятно, уже знакомы:

Новые типы ввода данных HTML5

Это новые типы ввода данных на HTML5:

  • цвет;
  • дата;
  • объект Datetime (преобразование даты и времени);
  • Datetime-local (локальное преобразование даты и времени);
  • электронная почта;
  • месяц;
  • число;
  • диапазон;
  • поиск;
  • телефон;
  • время;
  • URL;
  • неделя.

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

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

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

E-mail

Наиболее часто используемый тип ввода данных HTML5 — e-mail. Этот тип ввода отображает некоторые нужные символы «@» и «.».

Номер

Этот тип ввода не так важен для ноутбуков и ПК, где цифровые клавиши находятся в пределах досягаемости, но крайне необходим для мобильных устройств. При вводе цифр устройство автоматически переключается в режим числового набора и не требует переключения форматов вручную. Эту функцию поддерживают устройства Android и IOS.

Телефон

Тип ввода телефонных номеров предоставляется пользователям в виде стандратной клавиатуры.

В то время, как большая часть пользовательского внимания акцентируется на юзабилити, разрешении экранов и адаптивности дизайнов, стоит отметить, что не все вопросы, касающиеся юзабилити, связаны с пикселями — использование типов ввода данных HTML5 значительно улучшает заполнение разного рода форм. Рекомендация: вместо того, чтобы использовать по умолчанию input type “text”для всех полей, создайте возможность выбора соответствующего типа ввода для каждой формы. Пользователи точно будут вам за это благодарны.


Настраиваем поле формы телефон — jQuery

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

Топ-пост этого месяца:  Facebook добавит новые инструменты управления для групп

Чтобы создать маску для ввода телефонного номера, нам понадобится небольшой jquery скрипт — jquery.maskedinput, вес которого составляет чуть больше 4 кб. Уверен, это приемлемо для любого проекта:) Скачиваем скрипт, подключаем его, предварительно не забываем подключить свежую библиотеку jQuery. Кстати, с помощью этого небольшого скрипта можно создать маску для ввода не только телефона.

Теперь создадим простое поле ввода:

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

Этот небольшой кусочек js-кода говорит о том, что поле с классом phone следует обрабатывать по маске ввода +7 (999) 999-9999, где 9 — любая цифра.

Помимо этого доступны следующие варианты ввода:

  • a — Все алфавитные значения (A-Z,a-z)
  • 9 — Все цифровые значения (0-9)
  • * — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)

Полный код страницы:

Если между вводимыми значениями нужно заменить стандартный символ пробела — _, то нужно использовать следующий код:

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

Также есть возможность выполнить какое-нибудь действие по успешному завершению ввода. Тогда код будет такой:

Довольно удобная штука при правильном применении. Вот и все. Правильных и удобных полей ввода вам!

Маска ввода номера телефона

Добрый день. Сегодня мы еще немного улучшим наши формы обратной связи. Я расскажу вам как сделать маску для наших форм обратной связи. В первую очередь — это может быть полезно с точки зрения безопасности сайта.

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

Для того, чтобы вы понимали о чем речь:

Наверняка вы видели подобные эффекты на других сайтах. Когда можно ввести данные только в определенной последовательности.

Теперь давайте разбираться как сделать такую маску для ввода номера телефона. Первое, что нужно сделать — это подключить библиотеку jQuery:

Теперь необходимо скачать и подключить плагин maskedinput.js. Скачать его можно с официального сайта, а подключаем следующим образом:

Теперь необходимо создать саму маску. Для этого воспользуемся следующим кодом:

Где #phone — идентификатор поля с номером телефона, а .mask(«(999) 999-9999») — маска. Цифра девять означает, что в данном поле можно будет вводить только цифры от 0 до 9.

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

Надеюсь вам стало понятно как создается такой эффект. Существуют и другие значения для масок:

  • a — Все алфавитные значения (A-Z,a-z) или (A-Я,a-я). Если не сработает, попробуйте убрать запятую.
  • 9 — Все цифровые значения (0-9)
  • * — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)

А на сегодня — все. Всем — пока. Эксперементируйте с масками. Вы обязательно найдете им достойное применение.

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

UX и HTML5: Поможем пользователю заполнить вашу мобильную форму. 3/4

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

В этой части я бы хотела уделить внимание особым возможностям мобильных устройств. В HTML5 есть по-настоящему классные штуки, используя которые вы сможете помочь пользователям в заполнении мобильных форм и оформлении данных — здесь мы детально разберём, как извлечь пользу из аттрибутов HTML5.

Помогаем пользователю отформатировать контент с помощью HTML5

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

Плюсы использования HTML5 при оптимизации мобильных устройств

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

Вводим числовые данные

input type=number

Аттрибут HTML5 input type=number ограничивает поле ввода числами. Он имеет встроенную систему валидации, которая не даёт вводить в поле ничего, кроме чисел.

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

Слева клавиатура Android, справа клавиатура iOS с цифрами

Поле ввода должно позволять вводить отрицательные числа и десятичные дроби (хотя мало какие клавиатуры к такому готовы).
В спецификации W3C объясняется: «простой способ определить, нужно ли использовать type=number, это понять ,есть ли смысл добавлять к контролу ввода данных спинбокс (spinbox) — например, стрелочки «вверх» и «вниз». Это означает, что такой input type не предназначен для ввода данных кредитных карт или индексов.

Аттрибуты pattern и inputmode

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

Выглядит это примерно так:

Этот паттерн можно использовать, чтобы вызвать числовую клавиатуру с крупными кнопками на экран iPhone (но не на iPad). На этой клавиатуре нет символа «минус» и запятой, так что пользователь теряет возможность вводить отрицательные числа и десятичные дроби. Кроме того, тип клавиатуры изменить будет нельзя — поэтому принимать решение вызывать числовую клавиатуру нужно с осторожно.

Помните, что эти паттерны могут применяться к любым другим типам ввода (input types).

На большинстве смартфонов на Android один этот паттерн ничего не даст. Чтобы всё заработало, воспользуйтесь комбинацией аттрибута и input type=number.

inputmode

Если вам нужно просто запустить мобильную клавиатуру с цифрами и не хотите связываться с заморочками type=number и pattern , вы можете использовать текстовое поле ввода и обратиться к аттрибуту inputmode=numeric . Это будет выглядеть так:

К сожалению (на момент написания статьи), его поддерживает только Chrome 67 mobile , но и на Chrome desktop 66 поддержка должна появиться довольно-таки скоро. Чтобы узнать больше о том, как вводить числа в форму, почитайте статью « Я хотел ввести число » .

input type=tel

Если вам нужно, чтобы пользователь ввел номер телефона, можно использовать input type=tel. Как показано на скриншоте ниже, он вызывает те же цифры на клавиатуре iOS, как и аттрибут pattern , описанный выше. В этом типе поля ввода нет автоматической валидации из-за отсутствия единого формата для телефонных номеров во всем мире.

input type=tel на Android и iOS

Вводим даты

С технической точки зрения даты — это числовые значения. Тем не менее, они заслуживают свой собственный раздел. В HTML5 существует несколько типов ввода данных для дат. Наиболее часто используемый — input type=date . Он открывает календарь в браузерах, которые его поддерживают. Появление календаря зависит от типа браузера и ОС. Чтобы узнать больше о том, как браузеры обрабатывают input type=»date« , я советую почитать статью « Как усложнить input type=date ».

Календарь на основе input type=date на Android и iOS

Для выбора недели есть type=week , а для выбора времени type=time (вплоть до часа и минуты), а для выбора даты и времени (местного времени пользователя) существует type=datetime-local . Столько вариантов!

Пример календаря с расширенными опциями на Android (неделя, дата и время, и т.д.)

input type=date хорош, к примеру, для интерфейсов бронирования. Конечно, у вас могут быть особенные нужды, из-за которых вам потребуется создать собственный календар ь (об этом мы уже говорили в главе « Задумайтесь о дефолтных значениях »). Но input type=date — всегда отличный вариант, если вам нужен календарь, и вы не хотите подключать целую библиотеку JavaScript ради этого.

Тем не менее, есть случаи, когда лучше не использовать type=date для дат . Возьмем дату рождения. Если я родилась в 1960 году (на самом деле нет, это просто пример), то мне придётся много раз тыкать в экран, чтобы добраться до своего года, начиная с 2020. Я недавно обнаружила, что на Android при нажати и на год в календаре появляется что-то вроде прокручивающегося дропдауна со всеми год ами. Немного лучше, но всё же приходится изрядно поскроллить.

«Я родился в 1977 году и могу подтвердить, как это неудобно. Чем больше приходится листать, тем более старым ты себя ощущаешь :-(».

Поэтому, всё-таки, поля для даты рождения — не лучшее место для использования календаря.

В календаре на Android вы можете нажать и удерживать год, чтобы появился список с годами, но всё равно выбор даты рождения остается довольно утомительным процессом

URL, email, телефон и поиск

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

Использование поля input type=url откроет оптимизированную клавиатуру на мобильнике с прямым доступом к / (клавиша слэш). В зависимости от ОС, вы можете предоставить быстрый доступ к обозначениям наиболее популярных доменов, как например .fr на скриншоте ниже. При длительном нажатии на эту клавишу появятся кнопки для быстрого ввода других популярных доменов. Ещё в нем есть автоматическая валидация браузера, которая проверяет корректность формата URL.

Клавиатура input type=url на Android и iOS

Поле input type=email вызывает клавиатуру, оптимизированную под email, и предоставляет быстрый доступ к значку @ . Это поле ввода требует присутствие символа @ для прохождения валидации — и это единственная верификация, которая здесь выполняется.

Клавиатура input type=email на Android и iOS

Поле input type=search открывает клавиатуру, оптимизированную под поиск. У пользователя появляется прямой доступ к поиску с кнопки на клавиатуре. И тут есть маленький крестик, очищающий поле, чтобы можно было напечатать новый запрос.

Клавиатура input type=search на Android и iOS

Диапазон и цвет

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

input type=range предоставляет визуальный UI-ползунок для ввода количества. UI этого элемента управления зависит от браузера.

input type=color предоставляет пользователю простой способ задать значение цвета. Во многих браузерах он выглядит как палитра.

input type=range и input type=color на Android и iOS

HTML Media Capture: снимаем и загружаем фотографии, записываем аудио

Я вспоминаю времена iPhone 3, когда Apple по причинам безопасности не позволял использовать на вебсайте даже простой input type=file . Те времена давно прошли. Теперь с HTML media capture API стало возможным получать доступ к различным сенсорам устройства. Мы можем снимать фото и видео, и даже записывать голос прямо в браузере.

Аттрибут accept позволяет вам определить, медиа какого типа разрешить в поле ввода: аудио, изображения, видео. Пользователь может разрешить браузеру прямой доступ, например, к камере.

Код выглядит так:

Аттрибут accept настроен на изображение. Браузер запрашивает разрешение на прямой доступ к камере или к изображениям на устройстве

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

// открывает камеру в режиме видео

// открывает запись голоса

Мобильный браузер напрямую открывает механизм записи: слева — камеру, справа — запись видео

Чтобы узнать больше о том, как напрямую использовать медиа в браузере, прочитайте главу «Работа с изображениями, видео и аудио непосредственно в браузере» ( Accessing And Handling Images, V >) в моей статье о секретных возможностях мобильных браузеров.

В четвёртой и последней части этой серии статей мы выберемся за пределы «классических» элементов форм и поговорим об автоматизации, сохранении данных пользователя, и использовании возможностей современных устройств на благо UX.

Как сделать удобным ввод цифр при работе на мобильном устройстве: использование inputmode

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


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

Я исхожу из предположения, что у каждого человека есть сенсорный смартфон. [1] На форумах для разработчиков некоторые их них пишут, что «никогда не имели ничего, кроме сенсорного телефона» — и, разумеется, сенсорные смартфоны есть у всех их друзей. Но анекдоты, фанатизм и теории заговора относительно того, какая платформа лучше, в реальности ни к чему не приводят. [2]

То, что мобильные устройства сильно отличаются от настольных систем — это важнейшее правило, которое следует намотать на ус каждому дизайнеру, что берётся за мобильные интерфейсы. Уяснить это сразу практически никому не удаётся, но опыт делает своё дело. Эта статья может быть еще одним отрезвляющим шлепком по щекам, напоминающим об этом.

Плохой дизайн

Почти все мобильные приложения, которые я использовал, страдали от одних и тех же недостатков (в меньшей степени это относится к веб-сервисам). Многие из них не крутятся, работают лишь в одной ориентации экрана, как минимум для ряда устройств. Например, чтобы посмотреть список фильмов на своём DVR, сначала я должен ввести запрос в строку поиска. Приложение требует просматривать результаты в виде вертикального списка. Учитывая, что для ввода я буду использовать горизонтальную выдвижную клавиатуру, решение не кажется логичным. Стоит отметить, что половина устройств на платформе Android оснащены физической клавиатурой, например, Samsung Galaxy S (Рисунке 1).

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

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

Многообразие клавиатур

Дизайнеры-фанаты iOS должны помнить о том, что не у всех их клиентов есть iPhone, и уважать их выбор. На многих мобильных устройствах для ввода данных используются клавиатуры, отличные от сенсорной. [3] Хотя статистика по мобильным устройствам закрыта, известно, что около половины Android-устройств, представленных на рынке во множестве форм-факторов, оснащены физической клавиатурой того или иного рода. [4,5] Исследования показывают, что пользователи явно предпочитают физические клавиатуры. Более половины из них заявляют о приверженности этому способа ввода. [6]

Что бы вы ни думали о трендах ближайшего будущего, срок жизни устройств составляет несколько лет. Сайт надо обновлять раз в три месяца, приложение — не реже двух раз в год. (Иначе большая часть клиентов может уйти к конкурентам).

Однако существует много способов расположения клавиатуры — даже если предположить, что все ценные покупатели используют несуществующие высококлассные устройства. По моему опыту, некоторые способы ввода с помощью виртуальной клавиатуры учитываются далеко не всегда. Кроме того, постоянно появляются новые виды интерфейсов, и каждый из них требует решения определённых проблем. [7] Итак, для начала рассмотрим доступные нам способы ввода.

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

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

И явная тенденция может сменить своё направление только после появления первых «респонсив»-поверхностей.

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

Топ-пост этого месяца:  Закон 152-ФЗ о персональных данных — как их правильно собирать и хранить, чтобы не быть

Вам поможет рейтинг разработчиков мобильных приложений. Он представляет собой общий топ-100, а также 3 подрейтинга, составленных конкретно с учетом 3 платформ: iOS, Android, Windows Phone.

Сенсорные экраны и виртуальный ввод данных

В iPhone для ввода информации по умолчанию используется сенсорная виртуальная панель. Этот вид очень интересен благодаря своей гибкости. Параметры ввода для конкретных полей могут влиять на раскладку клавиатуры в целом и функции отдельных кнопок в частности. В экранных клавиатурах могут применяться интересные способы взаимодействия с пользователем, начиная от ввода текста непрерывным движением пальцев и заканчивая виртуальным колесом прокрутки (thumbwheel), позволяющим выбирать значение, например, дату и время, из ограниченного набора элементов.

С эстетической точки зрения к iOS есть много претензий, но UI все-таки близок к гениальному: взять хотя бы то же колесо прокрутки, вместо которого в Android используются невообразимые клавиши «плюс» и «минус».

Чтобы не оскорблять чувств верующих и не быть заподозренным в субъективности признаю, что эстетика свежих версий Android выше уровнем, чем у iOS, а ввод текста непрерывным движением, опять же доступный только пользователям Android, действительно очень эффективен.

Виртуальный ввод: клавиатуры и цифровые панели

Клавиатуры (keyboards) используются для ввода слов, а панели (keypads) — для ввода цифр и символов. Хотя границы между различными функциями виртуальных клавиатур могут быть размыты, определить разницу между ними — довольно важная задача.

Интересный момент — смена режима ввода. При переходе в новый режим могут меняться как названия и функции клавиш (keycaps), так и расположение и размеры кнопок. Это значит, что, фактически, число режимов ввода бесконечно. Например, при вводе электронного адреса может отображаться клавиатура, включающая символ «@» и отдельную клавишу «.com», при этом могут отсутствовать недопустимые в адресе знаки, например, запятая, в остальном же раскладка останется прежней.

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

Ввод жестами с виртуальной клавиатуры позволяет ускорить набор текста (Рисунок 4 — приложение Swype студии Nuance). Пользователь вводит слово одним движением пальца, который может остановиться или изменить направление на любом знаке. Дополнительный режим используется наряду со стандартным: пользователь всегда может вернуться к набору текста поочерёдным нажатием клавиш — внешний вид клавиатуры при этом не изменится.

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

Виртуальный ввод: выбор пункта из списка

Мои любимые виртуальные клавиатуры, в сущности, даже нельзя назвать клавиатурами. Инструменты выбора даты и времени (date and time pickers) и другие механизмы ввода конкретного значения позволяют пользователю произвольно выбирать способ взаимодействия, каждый из которых обладает своими особенностями.

Обратите внимание на дизайн инструментов выбора в iOS. Они имеют такую же рамку, как клавиатура или цифровая панель, оснащены кнопками «Вперёд», «Назад» и «Готово». При этом каждый из них представляет собой отдельную вариацию основного способа ввода.

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

Что касается выбора опций колесом прокрутки, дальше всех, кстати, ушел Windows Phone с оптимальным решением, совмещающим удобство с адекватным размером.

Виртуальный ввод: перо

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

А я считаю, что стилусами неудобно пользоваться и они отстойно выглядят, поэтому они медленно, но верно уходят в небытие.

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

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

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

Виртуальный ввод: голос

В этом пункте речь пойдёт не о программах-помощниках, как Siri компании Apple, а о голосовых способах ввода как таковых. [8] В Android преобразование речи в текст осуществляется уже около двух лет, в iOS — чуть меньше. Подобно перьевому вводу, здесь сильно колеблется точность попадания, и используются похожие способы представления результатов, автоматически принимаемых системой. Пользователь может выбрать любой вариант преобразования, редактировать данные вручную или осуществить ввод заново.

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

На сегодня голосовой набор лучше всего подходит для генерации порно-кличек. Мне, например, Siri горячо рекомендовала «Mark December». Я с ней согласился.

Физический ввод данных

Около 140 лет стук по физическим клавишам был единственным способом создания текста наряду с письмом. Даже в среде мобильных устройств ввод с физической клавиатуры по-прежнему правит бал. Полвина всех мобильных устройств в США оснащены клавиатурой и используются в первую очередь для отправки SMS, электронной почты и других действий в интернете (Рисунок 6).

Физическая клавиатура с раскладкой QWERTY

Кажется, раскладка QWERTY стала стандартом для физических клавиатур на мобильных устройствах. Да, виртуальные панели для английского и многих других языков имеют ту же раскладку. И всё же, термин QWERTY используется в первую очередь для обозначения определённого типа физической клавиатуры.

Мобильные клавиатуры могут быть как фиксированными, например, на стандартном телефоне BlackBerry, так и выдвижными. Другие типы встречаются сегодня крайне редко. Как бы то ни было, процент мобильных устройств с физическими клавиатурами в раскладке QWERTY очень велик. Надёжный источник, хоть и не указывая точных цифр, сообщает о том, что половина устройств на Android имеет физическую клавиатуру, и многочисленные исследования пользовательских предпочтений подтверждают эти данные. [9]

Пользователь вводит информацию, нажимая на кнопки, за которыми закреплены знаки, как при использовании стандартной компьютерной клавиатуры. Она поддерживает shift и shift-lock-режимы (иногда для блокировки режима требуется дважды нажать на кнопку), другие функции и клавиши с цифрами или специальными символами — в зависимости от раскладки клавиатуры.

Названия клавиш (keycaps), как правило, содержат альтернативные символы или функции. Например, на клавише с буквой «Е» может располагаться жёлтая цифра «4» и маленький знак «$» синего цвета. Разумеется, цвета подписей на разных устройствах могут не совпадать.

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

Физическая панель

Иногда такой манипулятор называют «цифровой» или панелью». Фактически, она вмещает двенадцать кнопок, но я предпочитаю использовать устоявшееся определение: панель».

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

Обратите внимание: расположение букв согласно Североамериканскому плану нумерации может сильно отличаться от телефонных раскладок в других регионах мира. [10]

Для заполнения отдельных полей может потребоваться какой-либо текстовый режим ввода, и пользователь может выбирать и переключаться между ними. В текстовом режиме каждая кнопка отвечает за набор последовательности букв, цифр и символов, как правило, не указанных на клавише. Например, на кнопке стоят знаки «A», «B», «C» и «2». Таким образом, после одного нажатия в поле появится буква «А», после двух быстрых нажатий —»B«, после трёх — «C». Это называется тройным нажатием, так как максимальное число алфавитных знаков на кнопке равно трём. Нажав на кнопку четвёртый раз, вы получите цифру «2». Таким образом, последовательное нажатие на клавишу даёт знаки «A», «B», «C», «2», «@» и «?», затем они повторяются.

Почти все панели и виртуальные системы ввода на пультах дистанционного управления и сенсорных смартфонах поддерживают систему ввода, не требующую нескольких нажатий на одну кнопку. Эта система была придумана в компании Tegic и сейчас поставляется как Nuance T9, установленная в продуктах партнёров. [11] Здесь для вода каждого знака пользователь нажимает на кнопку только один раз, а алгоритм подставляет наиболее вероятные символы с учётом других нажатых клавиш. Например, пользователь нажимает кнопки «2», «2» и «8», и по мере его движений в поле для ввода отображаются буквы «A», затем «Ba», и, наконец, нужное слово — «Cat». [12]

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

Ввод данных путём выбора из массива элементов

Чаше всего понятие «прокрутка и выбор» (scroll-and-select) используют для обозначения способа ввода, при котором элемент выбирают на устройстве без сенсорного экрана. Я же обозначаю им контрол из пяти кнопок: «Вверх», «Вниз», «Влево», «Вправо» и «Выбрать» — позволяющий вводить данные, двигаясь по сетке знаков. Этот способ широко применяется на таких устройствах, как принтеры, GPS-навигаторы, фотоаппараты и на многих других бытовых электроприборах.

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

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

Дистанционный ввод данных

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

прокрутка и выбор (scroll-and-select) — как правило, принимает форму виртуальной клавиатуры;

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

смешанные способы ввода — виртуальные клавиатуры с меньшим числом кнопок и системы, исключающие многократное нажатие клавиш;

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

Nintendo Wii — устройство, где постоянно используются экранные клавиатуры и цифровые панели. Пользователи управляют им, направляя контроллер на экран. На Рисунке 7 ввод данных с помощью манипулятора осуществляется в режиме одного нажатия на кнопку с несколькими знаками.

Некоторые дистанционные устройства используют сравнительно редкие способы выбора, например, Nintendo Wii сочетает виртуальную клавиатуру с языком жестов. Не забывайте, что многие устройства оснащены браузерами, и рынок приложений для них постоянно растёт, а с ними и популярность браузеров. Возможно, вам придётся проектировать интерфейс для экрана в десять футов (3 метра) — воспринимаемый с расстояния трёх метров — скорее, чем вы думаете. [13]

Проектируя для пользователей и их устройств

С некоторых пор среди UX-дизайнеров для мобильных устройств бытует мнение, что мобильная среда — единственное, о чём думают и к чему стремятся пользователи смартфонов. Однако это не так: технические характеристики устройств и то, как люди с ними взаимодействуют, так же важны. Поэтому, помня об интересах пользователей, их потребностях и окружении, при проектировании сайтов и приложений мы должны учитывать разные характеристиках устройств. Как я писал выше, некоторые отличительные черты оказываются важнее операционной системы или размера экрана. Мы должны учитывать способы ввода, поддерживаемые устройством, и связанные с этим ожидания пользователей.

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

Учитываем устройство, под которое проектируем интерфейс. Смотрим по сторонам и видим, что никто не пользуется ничем, кроме сенсорных клавиатур. Говорим «Спасибо, Стивен.»

Ссылки

[1] Некоторые разработчики называют все мобильные устройства сенсорными смартфонами. Привожу слова одного из них: «Хочу добавить, что у меня никогда не было телефона с физической клавиатурой». Однако в результате спора он изменил свою точку зрения. На форуме Game Maker Community другой разработчик спросил: «Поклонники Android — нужна ли вам поддержка физической клавиатуры?» («Adroid—Do you want hardware keyboard support?») Сохранённая копия от 9 октября 2012.

[2] Моё замечание о «теориях заговора» вызвано беседами со знакомыми дизайнерами и разработчиками. Они настаивали на том, что каждый, кто покупает телефон на платформе Android, на самом деле хотел бы купить iPhone, и либо не разбирается в телефонах, либо стал жертвой продавца, получающего с продаж Android-устройств больший процент. «По слухам, AT&T дают продавцам инструкции сбывать всё, но только не iPhone» («AT&T Allegedly Instructs Retail Staff To Sell Anything But the iPhone»), статья на сайтеiPhone Hacks, 1 августа 2012. Сохранённая копия от 9 октября 2012.

[3] Согласно отчёту MobilityNigeria за 2010 год, 22,4% мобильных устройств составляют телефоны с QWERTY-клавиатурой и только 16,8% — с сенсорной. Разумеется, данные по другим регионам отличаются, но в Африке по-прежнему в ходу устройства. Источник: «Отчёт о состоянии мобильного интернета в Нигерии на октябрь 2010 года» («MobilityNigeria State of the Mobile Web Report — October 2010») на сайте Mobility, октябрь 2010. Сохранённая копия от 9 октября 2012 года.

[4] Исследование компании Nokia середины 2012 года показало, что больше половины пользователей хотели бы иметь телефон с физической клавиатурой. Многие ставят под сомнение результаты исследования, финансируемого корпораций, так как Nokia традиционно производит много смартфонов с физической клавиатурой. Как бы то ни было, сегодня они выпускают и сенсорные телефоны. Источник: статья Люциана Армасу (Lucian Armasu) «Результаты голосования на сайте Nokia говорят о популярности QWERTY-клавиатур» («Nokia Poll Says QWERTY Keyboards Still Rule») на Android Authority, 11 августа 2012 года. Сохранённая копия от 9 октября 2012 года.

[5] На мой запрос в компании Google ответили, что они не предоставляют свои данные в виде отчёта. Однако Admob время от времени публикует ценные выдержки, и несколько лет там пишут, что около половины хитов с Android-устройств сеть получает благодаря смартфонам с виртуальной клавиатурой. Источник: статья «Motorola Droid по-прежнему лидирует в Android Pack» («Motorola Droid Still Leading the Android Pack») на сайте DMSS.com, 20 апреля 2012 года. Сохранённая копия от 9 октября 2012 года.

[6] 15 августа 2012 года на сайте Sprint появился пресс-релиз под названием «Kyocera Rise сделали устройства на Android 4.0 Ice Cream Sandwich с QWERTY-клавиатурой доступными для продажи в Sprint и Virgin Mobile USA» («Kyocera Rise Brings Affordable QWERTY with Android 4.0, Ice Cream Sandwich, to Sprint and Virgin Mobile USA»). Согласно пресс-релизу, «исследование аналитического агентства Yankee Group в начале года показало, что 69% потребителей считают наличие QWERTY-клавиатуры желательной или даже обязательной характеристикой мобильного телефона». Сохранённая копия от 9 октября 2012 года.

[7] «О способах ввода на пальцах» («Nothing New Under the Thumb») — внушительная статья, в которой описаны некоторые необычные методы ввода, не воспринятые производителями, либо не получившие широкого распространения. Только представьте, насколько более разнообразным мог быть мир устройств! Источник: Designer Software, Inc., июнь 2008. Сохранённая копия от 9 октября 2012 года.

Топ-пост этого месяца:  Как сделать кнопку со ссылкой на сайт в товарах ВКонтакте

[8] Большая часть публикаций по теме распознавания голоса очень сжатые и сухие. В отличие от них, в блоге «Визуальный интерфейс пользователя, приложения для распознавания голоса и прочее» (VUI Design, Speech Recognition Apps & All That) информация излагается живым языком с привлечение образов из поп-культуры. Мария Аретулаки (Maria Aretoulaki) опубликовала там статью «Лифт, приводимый в действие голосом, не понимает шотландский акцент» («The Voice-Activated Lift Won’t Do Scottish!»). 29 июля 2012. Сохранённая копия от 9 октября 2012 года.

[9] В статье Томи Ахонена «Несколько мыслей о QWERTY- и сенсорных клавиатурах, Т9 и голосовом вводе» («Some Thoughts on QWERTY vs Touch, T9 and Voice Inputs») на сайте Communities Dominate Brands приведён подробный анализ и обсуждение предпочтений относительно разных способов ввода. Поводом для написания материала послужило исследование Nokia. 14 августа 2012. Сохранённая копия от 9 октября 2012 года.

[10] Кратное описание региональной раскладки на Википедии:»North American Numbering Plan«. Сохранённая копия от 9 октября 2012 года.

[11] Увлекательная подробная статья о развитии и истории технологии Т9: «Т9: текст на 9 кнопках» («T9: Text on Nine Keys») на сайте Valid Concept, 26 февраля 2009. Сохранённая копия от 9 октября 2012 года.

[12] Шумин Жай (Shumin Zhai) и Пер Ола Кристенссон (Per Ola Kristensson) недавно опубликовали научный обзор технологий, благодаря которым осуществляется ввод без повторных нажатий на клавишу, например, Т9: «Ввод слова движением пальца: взаимодействие с клавиатурой» («The Word-Gesture Keyboard: Reimagining Keyboard Interaction»). Communications of the ACM, том 55, номер 9. Сохранённая копия от 9 октября 2012 года.

[13] Как я уже писал в этой колонке, можно считать, что мы на пороге эры умного телевидения, но фактически она уже наступила. Компания Samsung продала миллионы копий приложений для Smart TV через свои магазины. Источник: IT Pro Portal, «Samsung реализует 5 миллионов приложений для интернет-телевидения». («Samsung Serves Five Million Internet TV Apps»). 23 мая 2011. Сохранённая копия от 9 октября 2012 года.

Статья Стивена Хубера по-живому резанула и напомнила о больном. Эту рецензию я пишу на клавиатуре компьютера, у которой не работает клавиша Ctrl. Вы когда-нибудь пробовали работать на PC, у которого не работает переключение языков — и для переключения между раскладками нужно тянуться к мышке? А если при этом и мышка не работает? Вот так иногда и происходит процедура ввода с мобильных устройств. Многообразие клавиатур и устройств ввода иногда играет злую шутку: в новых и модных устройствах оказывается, что элементы ввода спрятаны «за экраном» приолжения; я как пользователь промахиваюсь мимо маленьких символов на экране супербыстрого Samsung Galaxy S3 и мечтаю в этот момент о bluetooth-клавиатуре, мыши и прочих полноразмерных устройствах — под большие суровые мужские пальцы. Про мужественный голос, я, затаив дыхание, вообще молчу: ну как можно путать Дмитровку и Дмитровское шоссе при вводе информации? Сплошное мучение, как говорил Ослик ИА. Дизайнеру UX нужно выдержать строгий курс между массовыми устройствами с их ужасными способами ввода — и стремлением улучшить этот мир, предоставим все самое передовое и нестандартное десяти процентам техно-гиков, которые носятся с ультрановыми устройствами.

Как быть? «Ловить окно»: опрашивать пользователей, отсматривать массовые устройства и правила работы с ними — и терпеливо ждать, когда новый стандарт станет абсолютным победителем. Читайте «Shaping Things» Брюса Стерлинга: в этой книге автор показал цикл инноваций, который должен знать каждый дизайнер.

Леонид Бугаев, автор бестселлера «Мобильный маркетинг: как зарядить свой бизнес в мобильном мире» (книге, которая наполовину написана на экранах различных мобильных устройств).

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


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

Конечно, количество пользователей системы Android в России постоянно увеличивается (согласно отчету МТС, доля мобильных устройств на базе Android выросла с 49% во II квартале этого года до 62,6% в III квартале). Тем не менее, не стоит забывать, что в Москве и Санкт-Петербурге самое большое средоточие устройств компании Apple. Доля iOS составляет 54,58%, а Android занимает всего лишь 32,99% (процент указан от общего числа пользователей конкретной платформы; данные на основе статистики liveinternet.ru). Это притом, что по России, iOS занимает только 6,9% рынка смартфонов.

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

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

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

p0vidl0.info

Кодинг, админинг и прочие развлечения

12 трюков html5 для мобильных устройств

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

1. HTML5 на полный экран

В браузерах android — встроенном до версии 4.3 и других, например Chrome, существует только одно решение данной проблемы. Ширина и высота документа должна соответствовать экрану устройства, тогда нужного эффекта мы можем добиться следующим js кодом:

Google maps использует этот способ для полноэкранного отображения своего контента. Так же, можно легко избежать появления адресной строки при скроле пальцами:

[js]document.addEventListener(«touchmove», function(e) < e.preventDefault() >);[/js]

В браузерах Google Chrome, Firefox OS, Firefox для android, BlackBerry OS 10 и Amazon Silk (браузер, разработанный для Kindle Fire) мы можем использовать W3C Fullscreen API.

Браузеры iPhone iOS, Android, Chrome под Android имеют разные реализации полноэкранного отображения содержимого. IE11 на Windows Mobile еще и требует разрешения на переход в полноэкранных режим.

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

[js]var body = document.documentElement;
if (body.requestFullscreen) <
body.requestFullscreen();
> else if (body.webkitrequestFullscreen) <
body.webkitrequestFullscreen();
> else if (body.mozrequestFullscreen) <
body.mozrequestFullscreen();
> else if (body.msrequestFullscreen) <
body.msrequestFullscreen();
>[/js]

Главное, что нужно запомнить: активацию полного экрана можно производить только после действия пользователя, например касания пальцем.

На iPhone, начиная с iOS 7.1, Apple использует атрибут minimal-ui мета-тега viewport, который позволяет отобразить минимальные элементы пользовательского элемента при портретной ориентации и скрыть все элементы пользовательского интерфейса при альбомной ориентации. Функция недоступна на iPad.
Пример использования:

При использовании данной возможности, нужно уделить особое внимание области вдоль краев.

Как определить активацию minimal-ui:

[css]@media (device-height: 568px) and (height: 529px),
(device-height: 480px) and (height: 441px) <
/* minimal-ui is active */
>[/css]

2. Полноэкранный ярлык на домашнем экране

В iOS, на iPhone и iPad, и Chrome на Android, мы можем установить полноэкранный ярлык на домашнем экране. Web-приложение может быть запущено вне браузера. Для использования данной возможности нужно добавить несколько мета-тегов:

В случае с Firefox OS и Firefox на Android, мы можем создать полноэкранное приложение на домашнем столе, создав JSON манифест и используя JavaScript API. В официальной документации очень толковые примеры.

3. Canvas высокого разрешения

Canvas APIbitmap-ориентированный интерфейс, позволяющий работать с изображениями, загруженными из файла. Например, если создать canvas с шириной 200, мы получим изображение шириной 200 точек и в документе оно будет отображено с шириной 200 css-точек, независимо от разрешения.

Это означает, что на iPhone 5S изображение будет отображено шириной 400 реальных точек экрана, а на Nexus 5600 точек.

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

Обратите внимание, что увеличение размера canvas, так же, увеличивает использование памяти и процессора при работе с ними.

4. Цифровая клавиатура для цифровых полей

Как многие уже знают, новые типы элементов HTML, такие как type=email, могут способствовать адаптации виртуальной клавиатуры мобильного устройства к активному полю ввода.

Для элемента type=number, Android и Windows Phone отображают полную цифровую клавиатуру, а iOS только цифры.

Если добавить атрибут pattern=»[0-9]*», в iOS мы получим полную цифровую клавиатуру, как на остальных платформах:

Этот же трюк можно использовать и для type=password, для определенных полей:

5. Отзывчивый веб и Windows 8

Если вы сталкиваетесь с адаптивным веб-дизайном, вы используете мета-тег viewport и набор css правил для разных размеров экрана. Однако, для windows 8.x с Internet Explorer, запущенным в полноэкранном (metro) режиме, нужно еще немного волшебства.

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

Для избежания такого поведения, мы можем использовать css viewport:

[css]@media only screen and (max-width: 400px) <
@-ms-viewport < width: 320px; >
>[/css]

6. Выбор даты и времени

Используя поле , мы на большинстве современных браузеров получим диалог выбора даты и времени. Так было и на мобильных устройствах до появления iOS 7 и Chrome 26 на Android. Начиная с этих версий, браузеры обрабатывают его как простое текстовое поле.

Разработчики этих браузеров не потрудились нормально документировать свойство type=datetime-local, которое заставляет выводить диалог выбора даты и времени:

7. Расширенное редактирование

Стандарт html5 включает новый атрибут элементов: ContentEditable. Он может применяться к любому html элементу, включая

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

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

[html]

  • static item in the hTML

[/html]

8. Все оттенки Safari

Начиная с iOS 7, Safari для iPhone и iPod touch поддерживает возможность смены раскраски фона за полу-прозрачным интерфейсом самого Safari в цвет фона вашего сайта.

Есть простой способ обойти эту особенность и заменить цвет фона на любой другой:

[css]body <
/* for safari’s tint */
background-color: blue;
/* for the document’s body background color */
background-image: linear-gradient(to bottom, red 0%, red 100%);
>[/css]

9. Название ярлыка на домашнем экране

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

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

Недокументированный тег Safari на iOS:

Для Windows Phone и планшетов на Windows 8.x можно указать название ярлыка используя специальный тег application-name:

К сожалению, мне пока не известен способ указания названия ярлыка для Chrome на Android.

10. Живые заголовки на Windows Phone

Пользователь может закрепить сайт из IE на стартовый экран Windows 8.x или Windows Phone (последние версии). Вы можете создать живой заголовок, обновлять информацию и анимировать значок даже когда сайт не открыт.

Для этого необходимо несколько мета-тегов. Для начала рассмотрим добавление значка:

Для «оживления», мы можем использовать Badge Polling URI (начиная с IE10) или Notification Polling URI (начиная IE11).

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

В обоих случаях, мы можем указать частоту обновления информации:

Для упрощения работы с живыми плитками, вы можете использовать Live Tile creator от Microsoft или специальный плагин для WordPress.

11. Вкладки без присмотра

Мобильные браузеры выглядят как их старшие собратья, но ведут себя, зачастую, совсем не так. Пример: iOS Safari и его вкладки. Если открыть три вкладки: хабр, gmail и вконтакте, динамическое содержимое будет обновляться только на одной, активной в данный момент вкладке. Никакие js скрипты не будут выполняться на фоновых вкладках, в отличие от десктопных браузеров.

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

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

Применять этот метод нужно только в тех случаях, когда он действительно нужен.

12. После прочтения сжечь

В этой заметке вы узнали о некоторых трюках и недокументированных возможностях мобильных браузеров.

Помните, что все эти возможности могут перестать работать или начать работать совсем не так в любой момент.

Мобильный ввод строки цифр + пробелов (номер кредитной карты)

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

Я хочу намекнуть, что клавиатура должна появиться на мобильном телефоне и разрешить (необязательные) пробелы, поэтому необходимо принять «4111 1234 1234 1234» или «4111123412341234».

Из того, что я нашел, варианты:

a) — это похоже на то, что я хочу (с текущими мобильными браузерами, по крайней мере), но это семантически неправильно.

b) или аналогичный — iPhone распознает некоторые шаблоны ( [0-9]* , \d* ) как работающие с клавиатурой, но это не работать на Android. Кроме того, я не уверен, что есть какие-то шаблоны, которые iPhone предоставит numpad для того, чтобы разрешить пробелы, хотя у меня нет iPhone под рукой, чтобы проверить прямо сейчас.

c) Попытка обнаружения браузера с помощью Javascript и использование (a) для мобильных устройств и (b) для немобильных. Cludgy, и никакой реальной выгоды от (a).

кажется не стартером, так как Chrome, по крайней мере, будет принудительно вводить такой номер в число, поэтому прерывая ввод с пробелами.

Есть ли лучший способ намекнуть на мобильные браузеры, что они должны предлагать numpad, чем использовать type=»tel» ?

Изменить:

Может быть, свойство -webkit-* , которое может быть применено к нормальному текстовому полю ввода, чтобы намекнуть, что нужно отобразить numpad?

Семантически правильная разметка для текстового поля, которое все еще может содержать пробелы и другие специальные символы, , насколько мне известно, а inputmode рекомендуется WhatWG он пока не поддерживается ни одним браузером. Его цель — представить пользователю цифровую клавиатуру на устройстве, которое имеет его, но все же ведет себя как текстовый ввод.

Мое предложение состояло бы в polyfill inputmode с JS и изменилось бы на type=»tel» на сенсорных устройствах (что является лучшим решением в настоящее время). Помните, что по-разному устройства имеют очень разные клавиатуры «tel» и «number», iOS «tel» не допускает пробелов, в то время как Chrome mobile позволяет использовать всевозможные специальные символы. Кто знает, какие пользовательские клавиатуры Android делают?

Если вы не хотите создавать свой собственный polyfill, вы можете реализовать Webshim, который теперь полиполняет inputmode как из версия 1.14.0. Это также имеет приятную функцию для сохранения клавиатуры iOS ‘number’, вызванной установкой pattern=»[0-9]*» , если вы этого хотите (обратите внимание: это не та же клавиатура, которую вы получаете при настройке type=»number» !)

Вот анализ, который я сделал на поведение типа ввода в браузерах и обсуждение с @aFarkas (автор Webshim) на полифонии входного режима.

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

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

Добавить комментарий