UX и HTML5: давайте поможем пользователям заполнить вашу мобильную форму (часть 2)

Во второй части я хочу больше сосредоточиться на возможностях мобильных устройств. HTML5, например, принес нам много действительно интересных функций, которые помогают пользователям заполнять мобильные формы и форматировать свои данные. Мы подробно рассмотрим, как атрибуты HTML5 могут вам в этом помочь. Затем мы выйдем за рамки «классических» элементов форм и посмотрим, как использовать мобильные возможности, такие как камера, геолокация и сканеры отпечатков пальцев, чтобы действительно вывести ваши мобильные формы на новый уровень на веб-сайтах и ​​в нативных приложениях.

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

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

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

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

Ввод числовых данных

input type= number

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

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

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

Атрибуты pattern и inputmode

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

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

 <input type="number" name="quantity" pattern="[0-9]*" inputmode="numeric" />

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

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

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

inputmode

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

 <input type="text" name="quantity" inputmode="numeric" />

К сожалению (на момент написания статьи), это поддерживает только мобильная версия Chrome 67, но в настольной версии Chrome 66 она должна появиться без флага.

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

input type=tel

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

Ввод дат

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

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

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

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

Пользователь сказал мне в Твиттере:

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

Так что, возможно, даты рождения — не лучший кандидат для тех, кто выбирает даты.

URL, электронная почта, телефон и поиск

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

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

Поле ввода type=email вызывает оптимизированную для электронной почты клавиатуру, обеспечивающую быстрый доступ к символу @ . Этот ввод требует присутствия @ где-то в поле, чтобы быть действительным. Это единственная проверка, которую он делает.

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

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

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

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

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

Захват медиафайлов в формате HTML: съемка и загрузка изображений и запись звука

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

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

Код выглядит следующим образом:

 <input type="file" accept="image/*">

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

 <input type="file" accept="image/*" capture> // opens the camera>

 <input type="file" accept="video/*" capture> // opens the camera in video mode

 <input type="file" accept="audio/*" capture> // opens the voice recorder 

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

HTML5 Autos: автозамена, автозаполнение, автозаполнение, автозаполнение и автофокус

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

• Отключите автокоррекцию для вещей, для которых словарь слаб : адреса электронной почты, номера, имена, адреса, города, регионы, коды городов, номера кредитных карт.
• Отключите автокапитализацию для полей электронной почты и других полей, где это необходимо (например, URL-адреса веб-сайтов). Обратите внимание, что type=email выполняет эту работу за вас в последних версиях iOS и Android, но все равно отключите его для более старых версий или если type=email не поддерживается.
• Вы можете установить атрибут autocapitalize для words , чтобы первая буква каждого слова, которое вводит пользователь, автоматически регистрировалась в верхнем регистре . Это может быть полезно для имен, мест и т.п., но, опять же, будьте осторожны с этим и проверяйте.

• Для input type=tel установите autocomplete="tel" .
• Вы можете использовать autofocus , чтобы передать фокус элементу управления, когда пользователь загружает страницу. Но то, что пользователь открывает страницу «контакты», не означает, что он готов сразу перейти к первому полю вашей формы. Так что, опять же, используйте его с умом.

Если вам нужны дополнительные параметры автозаполнения, полный список есть на WhatWG Wiki. Просто убедитесь, что вы используете правильные. Внедряйте, тестируйте и еще раз тестируйте.

Проверка формы HTML5

Я не буду вдаваться в технические детали, но вы должны знать, что HTML5 имеет встроенный API проверки формы для многих полей. Хорошо, если вы не хотите использовать библиотеку JavaScript для отображения встроенных сообщений проверки. Вот основные вещи, которые вам как UX-дизайнеру нужно знать о валидации форм HTML5:

• Сообщение проверки является элементом управления браузера. Вы не можете стилизовать его в CSS, и он отличается для каждого браузера.
• Вы можете изменить текст сообщения в JavaScript, используя setCustomValidity .
• CSS3 предоставляет :invalid, :valid и :required и другие псевдоклассы для проверки формы HTML. Они срабатывают при размытии, поэтому на данный момент практически бесполезны.

В «Родной проверке форм, часть 1» Питер-Пол Кох подробно рассказывает о том, почему в настоящее время проверка форм HTML и CSS на самом деле не делает формы лучше.

Автономная поддержка для сохранения пользовательских данных

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

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

Если соединение потеряно, когда пользователь отправляет форму, он также может потерять данные. Чтобы избежать этого, вы можете использовать комбинацию** автономного API HTML5** и API Service Workers, чтобы:

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

Чтобы узнать, как это кодировать, ознакомьтесь со статьей «Формы, удобные для офлайн».

Возможности мобильных устройств могут вывести впечатления на новый уровень

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

Определение местоположения пользователя

В предыдущем разделе я писал о предварительном заполнении информации о местах и ​​адресах. Это хорошее начало. Мы можем сделать еще один шаг вперед. Вместо того, чтобы просить пользователей ввести местоположение, мы можем определить его . Познакомьтесь с API геолокации для Интернета. Существуют также нативные API геолокации для iOS, Android и Windows Phone.

Citymapper — это веб-сайт и приложение, которое помогает пользователям планировать свои путешествия. Когда пользователь заходит в первое поле, он видит опцию «Использовать текущее местоположение». Если они выберут его, им будет предложено разрешить браузеру доступ к данным их геолокации. Это API геолокации. Затем браузер автоматически заполняет найденное местоположение, и пользователь может перейти к полю назначения. Родное приложение работает примерно так же.

Будьте умны, запрашивая разрешение пользователя

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

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

Вот несколько общих советов по запросу разрешений в Интернете:

• Не будьте жутким преследователем геолокации или уведомлений: не спрашивайте разрешения, как только пользователь заходит на ваш сайт . Они могут еще не знать о вас или ваших услугах.
• Позвольте пользователю открыть для себя ваш сайт и сервис. Затем запросите разрешение в контексте . Если вы хотите получить доступ к их местоположению, спрашивайте их только тогда, когда вам это нужно (хорошим примером является Citymapper).
• Объясните , зачем вам нужно разрешение и что вы будете с ним делать .

Если вы хотите пойти дальше, Люк Вроблевски (да, снова он) создал хорошее видео, которое поможет вам в процессе запроса разрешения.

Лучший опыт оформления заказа

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

Сканер кредитных карт iOS

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

Apple подняла это на новый уровень со своим сканером кредитных карт . Начиная с iOS 8 в Safari пользователи могут использовать свою камеру для сканирования и автозаполнения информации о своей кредитной карте. Чтобы выполнить это волшебство, вам нужно будет добавить атрибут автозаполнения cc-number и какое-то имя, чтобы идентифицировать это как поле кредитной карты. У Apple не так много официальной информации об этом, но некоторые люди провели некоторое тестирование и разместили результаты на StackOverflow.

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

Сделайте Checkout еще на один шаг вперед с Google Pay API

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

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

Стандартизированная версия API запросов платежей в настоящее время является кандидатом в рекомендации W3C. Если это будет реализовано в браузерах, это позволит пользователям расплачиваться одной кнопкой, которая будет запрашивать API. После этого каждый шаг будет обрабатываться родными диалогами браузера.

Упрощение аутентификации

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

Волшебная ссылка

Я использую менеджер паролей. Я не знаю 99% своих паролей. Все они генерируются случайным образом. Чтобы войти в новую рабочую область Slack, я должен:

1. открыть мой менеджер паролей,
2. введите мой мастер-пароль,
3. поиск рабочего места,
4. скопируйте и вставьте пароль в приложение Slack.

Это утомительный процесс, но Slack был достаточно умен, чтобы предложить лучший вариант.

Многие пользователи синхронизируют почту на своем телефоне. Слэк это понимал. Когда вы добавляете новое рабочее пространство Slack в приложение, вы можете либо войти в систему, используя пароль, либо запросить опцию «магическая ссылка». Если вы выберете последнее, Slack отправит волшебную ссылку на ваш почтовый ящик . Откройте почту, нажмите на большую зеленую кнопку и — та-да! — вы вошли в систему.

За кулисами эта волшебная ссылка содержит токен аутентификации. Приложение Slack улавливает это и аутентифицирует вас, не требуя пароля.

Отпечаток пальца для смарт-идентификации

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

В Societe Generale у меня есть строка для входа и кодовая фраза. Я могу попросить приложение запомнить строку входа в систему, состоящую из 10 случайных цифр. Я не могу вспомнить это; Я использую для этого менеджер паролей. Я все еще должен помнить и вводить шестизначную фразу-пароль на специальной клавиатуре. Конечно, расположение чисел меняется каждый раз, когда я захожу в систему. Безопасность — да, я знаю. Кроме того, я должен менять эту парольную фразу каждые три месяца. В прошлый раз, когда мне пришлось сменить кодовую фразу, я сделал то, что делает большинство людей: выбрал почти ту же кодовую фразу, потому что не хочу запоминать еще одно шестизначное число. И, конечно же, я был чертовски уверен, что запомню его, поэтому не стал вводить его в свой менеджер паролей. Ошибка новичка. Две недели спустя я попытался войти в систему. Конечно, я забыл. Я сделал три неудачных попытки, после чего мой аккаунт был заблокирован. К счастью, я использую этот счет только для сбережений. В приложении вы можете запросить новый пароль. Банку потребовалась почти неделя, чтобы отправить мне новую шестизначную кодовую фразу бумажным письмом на мой домашний адрес в Люксембурге. Да.

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

Одно и то же устройство, два приложения, два совершенно разных опыта.

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

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

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

Распознавание лиц и идентификатор лица

В 2018 году Apple выпустила iPhone X с совершенно новым идентификатором лица. Пользователи могут разблокировать свой iPhone X, используя свое лицо . Конечно, некоторые другие телефоны Android, планшеты и компьютеры Windows предлагали эту функцию ранее. Но когда Apple что-то запускает, это становится «вещью». На данный момент эта технология в основном используется в качестве аутентификации для разблокировки телефонов и компьютеров.

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

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

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

Google: регистрация в одно касание

Если у пользователя есть учетная запись Google, он может воспользоваться преимуществами регистрации Google в одно касание. При посещении веб-сайта и появлении запроса на создание учетной записи во встроенном диалоговом окне пользователю не нужно вводить пароль. Google предоставляет безопасную учетную запись без пароля на основе токенов, связанную с учетной записью Google пользователя. Когда пользователь возвращается, он автоматически входит в систему. Если он сохраняет свои пароли в Smart Lock, он также автоматически входит в систему на других устройствах.

Примечание . Это интересное решение без пароля. Конечно, с его помощью пользователи привязываются к Google, что не всем будет удобно .

Заключение

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

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

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

Итак, вкратце: протестируйте. Протестируйте его на реальных устройствах. Протестируйте его с реальными пользователями.