У нас есть множество веских причин, чтобы освободить пользователя, оперирующего «одним глазом и одним пальцем», от необходимости вводить информацию, но найдется и немало поводов, чтобы позволить им более активно взаимодействовать с мобильными устройствами. В конце концов, в 2010 году только в США в день отправлялось свыше четырех миллиардов текстовых сообщений, причем большинство из них создавалось при помощи не самой удобной цифровой клавиатуры обычных телефонов. Очевидно, что потребители хотят переписываться через мобильные устройства и ради этого готовы даже терпеть некоторые неудобства.
Но некоторых трудностей вполне можно избежать. Современные мобильные устройства упрощают ввод информации — этой цели служат увеличенные сенсорные экраны, микрофоны, видеокамеры и многое другое. Дизайнерам мобильных сайтов пора перестать бояться ввода данных и начать воспринимать мобильные устройства как наиболее удобное средство для получения разнообразного контента от всех категорий пользователей.
Мобильные устройства всегда при нас. Поэтому всякий раз, когда нас посещает вдохновение, мы можем поделиться своими мыслями с друзьями или принять участие в создании онлайн-контента. Возможность определить местоположение пользователя и ориентация устройства, запись аудио, видеокамера и многое другое предоставляют нам массу новых возможностей для ввода информации, при этом нет необходимости прибегать к помощи такого неточного инструмента, как палец.
Самое важное — перестать бояться того, что пользователи не станут выполнять то или иное действие лишь потому, что в данный момент они вышли в Сеть с мобильного устройства. Ведь приобрел же какой-то человек самолет стоимостью 265 тысяч долларов через приложение eBay для iPhone (http://bkaprt.com/mf/48, http://bkaprt.com/mf/49). Осознав, что ввод данных следует поощрять и всячески ему содействовать, можно перейти к дизайну.
То, каким образом мы просим пользователей вводить данные, во многом предопределяет их ответы. В Интернете большинство вопросов задаются через формы, а для того, чтобы правильно сформулировать вопрос, формы содержат подсказки — теги label. В мобильных интерфейсах эти теги имеют ряд ограничений и предоставляют определенные возможности, что и определяет то, как они должны быть спроектированы.
Экран мобильного устройства невелик — следовательно, необходимо адаптировать веб-формы под его размер. В большинстве случаев разместить элементы label справа или слева от поля ввода не удается — просто нет места для двух колонок. Поэтому их лучше всего выравнивать по верхнему краю: это позволяет не только оптимизировать пространство экрана (даже когда они достаточно длинные), но и сохранить их видимыми при открытии виртуальной клавиатуры, занимающей половину имеющегося пространства.
В регистрационной форме мобильного сайта Twitter (рис. 6.1) элементы label находятся над полями ввода, а под ними располагается пояснительный текст. Эти элементы остаются видимыми даже при открытии виртуальной клавиатуры. И раз уж мы заговорили о Twitter, известно ли вам, что за первые пять месяцев 2010 года 16 % его новых пользователей зарегистрировались при помощи мобильных приложений (http://bkaprt.com/mf/25)?
А что 40 % всех твитов поступают именно с мобильных устройств (http://bkaprt.com/mf/50)? Или даже эти цифры не смогут убедить вас в том, что проблема ввода данных через мобильный интерфейс имеет первостепенное значение?
Элементы label, располагающиеся над полем ввода, — хорошее решение. Но если они находятся внутри поля формы — еще лучше. И вот доказательство: практически все мобильные платформы в своих приложениях поддерживают элементы label, находящиеся внутри полей ввода. Однако в мобильном веб-дизайне внедрение такого решения может потребовать от разработчика дополнительных усилий.
На первый взгляд элемент label внутри поля ввода кажется отличным решением, однако для его реализации придется преодолеть ряд препятствий.
Итак, элемент label внутри поля ввода формы:
• Никогда не должен становиться частью ответа. Это правило выглядит простым, но на практике подобное происходит достаточно часто (например, при ошибке в коде или неполной загрузке страницы). Вы никогда не обнаруживали, что слово «найти» неожиданно становилось частью вашего поискового запроса?
• Не должен быть похожим на текст, который вводится в поле. В противном случае пользователь (и вполне обоснованно) может предположить, что программа уже ввела ответ за него. При тестировании веб-интерфейсов я сталкиваюсь с такими ситуациями постоянно.
• Как только пользователь начинает вводить текст в поле, label обычно исчезает и больше не появляется. Таким образом, заполнив форму, он не может проверить, на какой именно вопрос отвечал.
