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

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

Огласите весь список, пожалуйста!

Элементы 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). Для того чтобы ваше устройство начало взаимодействовать с объектом, транслирующим в эфир свою метку («цифровой штрихкод»), достаточно просто оказаться с ним рядом. Хотите больше узнать о продукте? Достаточно подойти к нему на расстояние, позволяющее уловить сигнал, и вся необходимая информация появится на экране вашего мобильного устройства. О каких полях и формах тут может идти речь?

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

Ввод до упаду

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

• Активно поощряйте пользователей создавать и редактировать информацию при помощи мобильных устройств.

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

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

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

• Правильно применяйте сценарии последовательного, нелинейного и контекстного ввода информации.

• Используйте все имеющиеся возможности для расширения способов ввода информации через мобильное устройство.

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

7

Верстка

ПРИНЦИПЫ ОРГАНИЗАЦИИ КОНТЕНТА и элементов интерфейса, применяемые при разработке дизайна обычных сайтов, несомненно, могут быть полезны и при проектировании мобильных веб-приложений. Но как быть уверенными в том, что эти принципы будут актуальны для любых мобильных устройств — как существующих сегодня, так и тех, что появятся в ближайшее время?

Для этого необходимо:

• принять тот факт, что в обозримом будущем мобильная индустрия будет развиваться столь же стремительными темпами;

• «сообщать» мобильным браузерам, что созданный вами сайт оптимизирован для просмотра;

• создавать «гибкие» (flexible), «резиновые» (fluid) и «отзывчивые» (responsive) макеты веб-страниц;

• хорошо представлять, в чем состоят технические различия между устройствами;

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

Лишь изменения постоянны

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