Люк Вроблевски - Сначала мобильные!

Однако не всегда маски позволяют получить ожидаемые результаты: некоторые из них могут настолько непредсказуемо меняться, что способны сбить вас с толку. Пример одной из таких масок показан на рис. 6.13: увидев маску ввода номера телефона, пользователь предполагает, что номер будет иметь следующий формат: «XXX–XX–XXXX» (лично я в таком случае предложил бы маску «_-_»). Но стоит ввести в поле первую цифру, как формат номера исчезает, а вокруг набранных символов появляются скобки — весьма неожиданно, не так ли? Процесс автоматического форматирования данных будет продолжаться до тех пор, пока пользователь не введет последнюю цифру.

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

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

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

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

Сравните первоначальный вид формы Get Online на мобильном сайте Boingo (рис. 6.14) и ее вид после проведенного мной редизайна (рис. 6.15): этот пример позволяет понять, от скольких элементов можно смело отказаться, чтобы сделать ваш сайт более лаконичным. Когда речь заходит о мобильных формах, следует действовать радикально — сокращать, сокращать и еще раз сокращать.

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

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

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

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

И последний (но от этого не менее важный) сценарий, позволяющий легко и быстро создавать и редактировать контент, — это контекстный ввод. В этом случае в тексте обозначается область, которую пользователь может редактировать. Форма контекстного ввода обычно состоит из одного поля. Взгляните на мобильный сайт Quora, где можно комментировать ответ, не покидая текущей страницы (рис. 6.17). Такая схема позволяет оперативно реагировать на сообщения других пользователей и вполне соответствует привычным способам взаимодействия с мобильными устройствами.

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

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

В обоих случаях пользователи избавлены от необходимости вводить текст.

Есть и другие интересные примеры. Задействуя видеокамеру мобильного устройства, приложение Google Goggles способно идентифицировать книги, вина, картины и ориентиры на местности. С его помощью можно сканировать визитные карточки или переводить иностранные тексты (рис. 6.19). Только представьте, какой объем текста понадобилось бы ввести, чтобы добиться аналогичного результата.

Технология коммуникации ближнего поля (NFC) предоставляет нам дополнительные возможности. Мобильные устройства считывают передающиеся на радиочастотах метки (RFID). Для того чтобы ваше устройство начало взаимодействовать с объектом, транслирующим в эфир свою метку («цифровой штрихкод»), достаточно просто оказаться с ним рядом. Хотите больше узнать о продукте? Достаточно подойти к нему на расстояние, позволяющее уловить сигнал, и вся необходимая информация появится на экране вашего мобильного устройства. О каких полях и формах тут может идти речь?