5 Действия
5
Действия
ДЛЯ УСТРОЙСТВ С МАЛЕНЬКИМ ДИСПЛЕЕМ, помещающихся на ладони, сенсорный экран — это естественный выбор. В сущности, благодаря ему мобильное устройство (а не только клавиатура или трекбол) превращается в интерактивную поверхность. Именно поэтому телефонов, экран которых реагирует на прикосновение, производят все больше. К примеру, доля смартфонов с тач-скрином в общем объеме продукции компании Nokia постоянно растет (рис 5.1).
И хотя некоторые из этих устройств имеют также и аппаратные средства ввода информации — трекпады, колесики прокрутки и клавиатуру, при взаимодействии с Интернетом их владельцы все чаще используют именно сенсорный, или, точнее, тач-интерфейс, в основе которого лежит управление устройством при помощи пальцев. Но как обеспечить всем посетителям возможность взаимодействовать с сайтом посредством прикосновений? Для этого, прежде чем приступать к проектированию тач-интерфейса, необходимо:
• определить размер и расположение зон тактильного касания (тач-зон);
• изучить наиболее распространенные тач-жесты и понять, с какой целью они используются;
• продумать, чем заменить операции, которые раньше выполнялись наведением курсора;
• не забыть о средствах «непрямой манипуляции[5]».
К малому через большое
При разработке мобильных веб-приложений дизайнеры зачастую идут по пути простого уменьшения всех элементов обычного сайта. Места на экране немного, а значит, чем меньше, тем лучше, не так ли? В этом подходе есть логика, но все же в процессе проектирования следует придерживаться противоположного направления и увеличивать элементы — иногда даже до размеров, превышающих привычные (рис. 5.2).
Человеческие пальцы — не самый точный инструмент.
Им не хватает аккуратности компьютерной мыши. Они разных размеров. Кроме того, они то и дело соскальзывают, не попадая в нужный участок экрана. Поэтому чем важнее выполняемая задача, тем крупнее должна быть зона касания — только тогда людям с «одним глазом и одним пальцем» будет удобно взаимодействовать с вашим сайтом.
Действительно ли это так важно? Результаты исследований показывают, что почти в половине случаев нажатие на рекламные баннеры в мобильном браузере происходит случайно (http://bkaprt.com/mf/41). Продуманные размеры и правильное расположение зон касания позволяют пользователям уверенно и точно нажимать на экран. Но до каких пределов следует увеличивать размеры тач-зоны?
В руководстве iOS Human Interface Guidelines (http://bkaprt.com/ mf/42) Apple рекомендует, чтобы размер зоны для нажатия составлял 44 ? 44 пункта. В качестве единицы измерения Apple использует пункты, а не пикселы, поскольку экраны разных устройств имеют разное разрешение (об этом поговорим ниже). А чтобы правильно учитывать различия в экранном разрешении (или ppi), лучше задавать размеры тач-зон в физических единицах.
Microsoft также применяет этот подход в руководстве для Windows Phone 7. В нем указано, что оптимальный размер тач-зоны составляет 9 мм, минимальный — 7 мм, а минимальное расстояние между различными зонами — 2 мм. Другие руководства для разработчиков (например, от Nokia и даже Ubuntu) рекомендуют примерно такие же размеры, как и у Microsoft; за основу принят средний размер человеческого пальца. Лаборатория Touch Lab Массачусетского технологического института (MIT) определила, что средний размер зоны для касания подушечкой пальца составляет 10–14 мм, кончиком — 8-10 мм (http://bkaprt.com/mf/43).
К подобным рекомендациям следует прислушаться, однако это вовсе не означает, что размеры любой иконки или кнопки на вашей мобильной странице обязаны составлять ровно 9 ? 9 мм. Указанным параметрам должна соответствовать активная тач-зона, в то время как ее визуальное отображение может быть вдвое меньше. Иллюстрация из «Руководства Microsoft» (рис. 5.3) показывает, какие значения атрибутов margin или padding следует задавать, чтобы тач-зоны имели правильный размер, а элементы визуального интерфейса при этом не выглядели бы одинаково.
Помимо этого в «Руководстве Microsoft» подробно описаны случаи, когда размер тач-зоны должен превышать 9 мм: «Если пользователям приходится часто нажимать на элемент интерфейса; если результат ошибочного нажатия необратим или имеет неприятные последствия; если элемент интерфейса расположен слишком близко к краю экрана; если на него трудно нажимать или он является составной частью в цепочке последовательных действий — как в случае набора телефонного номера» (http://bkaprt.com/mf/44).
Другими словами, когда речь идет о прикосновениях к экрану мобильного устройства, следует всегда придерживаться принципа «чем больше, тем лучше». Правильное расположение и надлежащий размер тач-зоны позволяют избежать куда более серьезных проблем, чем простое соскальзывание пальца.
Посмотрите внимательно на стартовую страницу мобильного сайта Quora (рис. 5.4). Заметили, где могут возникнуть проблемы?
Действительно, кнопки Cancel и Login расположены слишком близко друг к другу. Здесь неправильные размеры и расположение тач-зон (помните о правиле двух миллиметров?) могут привести к тому, что пользователь, вместо того чтобы войти в свой аккаунт, покинет сайт.
Еще один пример: окно расширенного поиска на мобильном сайте Flickr, где элементы интерфейса также расположены слишком близко друг к другу (рис. 5.5). В данном случае «больше» однозначно было бы лучше, чем «меньше».
Куда мы нажимаем?
Ранее я уже упоминал, что размещение активных элементов интерфейса в нижней части экрана наиболее соответствует положению мобильного устройства в руке пользователя. Однако все не так просто. Расположение основных тач-зон зачастую зависит от того, каким пальцем (большим или указательным) владелец мобильного устройства нажимает на экран, а также от того, левша он или правша.
Большинство людей в мире — правши (от 70 до 90 %) и взаимодействуют с мобильным устройством посредством большого пальца. Соответственно, чаще всего приложения оптимизируются именно под управление большим пальцем правой руки. Это означает, что элементы интерфейса, соответствующие основным действиям, будут находиться в средней или нижней части экрана и располагаться слева направо (рис. 5.6).
Деструктивные функции, такие как отмена или удаление, выносятся за пределы зоны комфорта пользователя. Если вы держите мобильное устройство в правой руке и управляете им при помощи большого пальца, вам придется приложить некоторое усилие, чтобы дотянуться до левого верхнего угла экрана. Это не очень легко и не слишком удобно. Следовательно, вы лишний раз задумаетесь, действительно ли вам необходимо удалить результаты проделанной работы.
Изучите язык жестов
Тач-зоны позволяют управлять мобильным сайтом, но само взаимодействие происходит при помощи жестов. И хотя в технической документации для различных платформ жесты обозначаются и описываются по-разному, на сегодняшний день существует стандартный набор жестов, применяемый пользователями при работе с мобильными приложениями.
Для того чтобы лучше разобраться в этом вопросе, я вместе с Дэном Уиллисом и Крейгом Вилламором изучил техническую документацию для следующих платформ:
• iOS и OS X компании Apple;
• Android компании Google;
• Windows Phone 7, Windows 7 и Surface компании Microsoft;
• Web OS компании Palm;
• библиотеку поддержки жестов GestureWorks в среде программирования Flash компании Adobe;
• и даже для графического планшета Bamboo компании Wacom, поддерживающего тач-интерфейс.
К счастью, проведенный анализ показал, что у этих систем больше общего, чем различий. Фактически основной набор жестов одинаков для всех платформ: они соответствуют основным действиям, которые выполняют пользователи при работе с сенсорными экранами: нажатие (tap); двойное нажатие (double tap); перемещение (drag); пролистывание (swipe); уменьшение масштаба (pinch); увеличение масштаба (spread); продолжительное нажатие (press and tap); продолжительное нажатие с перемещением (press and drag); а также несколько разновидностей поворотов. Поскольку некоторые мобильные веб-браузеры не поддерживают определенные жесты или резервируют их для системных операций, этот список может быть сокращен всего до трех операций — нажатие, перетаскивание и пролистывание (рис. 5.7).
Несомненно, разработчикам важно знать, какие жесты возможны в принципе, но еще более важно понимать, как пользователи при помощи жестов взаимодействуют с интерфейсом мобильных устройств. Если человек собирается произвести какое-то действие или перейти к другому объекту или странице, какие из этих жестов он выполнит? Созданное по итогам нашего аудита «Справочное руководство по жестам для тач-интерфейсов» отвечает на эти и некоторые другие вопросы (http://bkaprt.com/mf/45) (рис. 5.8).
Руководство начинается с описания основных задач, которые обычно решают пользователи — например, изменить параметры, удалить объект или пролистать список. Рядом с каждым из потенциальных действий приведены применяемые на большинстве платформ (и чаще всего выполняемые пользователями) жесты.
Руководство находится в открытом доступе и содержит файлы шаблонов для каждого жеста в форматах PDF, EPS, OmniGraffle и Visio, которые можно свободно использовать при создании макетов и прототипов.
Устройства с тач-интерфейсом стремительно завоевывают популярность, а значит, будут появляться все новые дизайнерские решения. Например, такое действие, как «потянуть вниз для обновления», которое раньше было доступно лишь для отдельных приложений, сегодня получает широкое распространение, так что нетрудно предположить, что в ближайшее время пользователи попробуют применить их и на вашем сайте. Поэтому смело экспериментируйте с жестами! (рис. 5.9–5.10).
Не стоит бояться NUI[6]
Я всячески приветствую распространение естественного пользовательского интерфейса (NUI). Я верю, что потенциал этого подхода позволит нам войти в новую эру программирования. Такие его принципы, как превращение контента в интерфейс, прямое взаимодействие пользователя с контентом, а также отказ от визуальных элементов, не относящихся к контенту, открывают перед нами новые пути использования цифровой информации и медиа.
Уходят в прошлое те времена, когда для того, чтобы увеличить изображение, приходилось использовать окна, иконки, меню и указатели (WIMP[7]). Теперь для этого достаточно коснуться фотографии и развести пальцы в стороны. Такому «прямому» взаимодействию не только легче научиться (спросите об этом детей и пожилых людей, активно использующих iPad) — оно лучше отражает наше представление о реальном мире.
Сегодня мы находимся на стадии перехода от графического к естественному пользовательскому интерфейсу. Далеко не все пользователи смогут быстро освоить управление жестами, и, судя по всему, выполнять основные операции на мобильных сайтах нам по-прежнему придется при помощи кнопок. Однако это не должно становиться препятствием для экспериментов с жестами в тех случаях, когда это оправданно, например для дополнительных настроек или «горячих» команд.
Старайтесь сделать так, чтобы предусмотренные в интерфейсе жесты были как можно более естественными: пользователям будет легче к ним привыкнуть. Недавнее исследование, проведенное среди пользователей девяти стран, показало, что люди разных культур для выполнения одинаковых действий применяют одни и те же жесты (http://bkaprt.com/mf/46). Так что если говорить об использовании тач-интерфейсов, у всех нас есть много общего.
И наконец, проблемы переходного периода можно частично решить, добавив на страницы вашего сайта подсказки, анимацию и заметные графические элементы. Сначала их нужно размещать более активно, показывая посетителям, где и как они могут использовать жесты, но с течением времени следует постепенно сокращать их количество. И помните о том, что, если подсказок становится слишком много, использование жестов уже не будет таким естественным, как вы того хотели бы.
При работе с тач-интерфейсом ожидания пользователей и замысел разработчиков не всегда совпадают. Например, несмотря на то, что на мобильном сайте ESPN данные о набранных командами очках представлены так, будто их можно просматривать, пролистывая страницы, — чтобы перейти от одного блока к другому, приходится использовать стрелки (рис. 5.11).
Выбор наведением
Раз уж мы заговорили о подсказках, следует отметить, что привычные подсказки, возникающие при наведении курсора (состояние on hover, когда указатель мыши находится над определенным участком страницы), не подходят для приложений с активным экраном. Это и понятно: курсора, который можно было бы наводить, здесь просто нет. И хотя пальцы тоже отбрасывают тень, я не знаю ни одного мобильного устройства, которое воспринимало бы это в качестве функции наведения.
Следовательно, необходимо пересмотреть все действия, которые прежде выполнялись при помощи указателя мыши.
И это прекрасно! На самом деле на обычных сайтах значение наведения часто бывает переоценено. Когда пользователь подводит курсор мыши к объекту, это еще не означает, что он хочет, чтобы на экране появилась подсказка или меню (рис. 5.12). В отличие от нажатия наведение курсора не всегда предполагает действие.
Меню, появляющееся при наведении мыши, обычно представляет собой список дополнительных действий, не настолько важных, чтобы отображать их на экране постоянно. Оно часто содержит опции, которым не хватило места в основном экранном меню. Однако при переходе на мобильные версии сайтов об этих опциях не следует забывать.
При создании мобильных сайтов у вас есть следующие варианты размещения опций выпадающего меню:
• меню располагается непосредственно на экране;
• меню появляется при нажатии на экран, а выбор необходимых функций производится пролистыванием;
• меню выносится на отдельную страницу;
• и мой любимый: вообще отказаться от выпадающего меню.
На экране.
В тех случаях, когда содержание выпадающего меню имеет принципиальное значение, наиболее правильно размещать его непосредственно на экране. Именно такое решение использовал Twitter в первоначальном варианте своего мобильного сайта.
На обычном сайте Twitter при наведении курсора на сообщение появлялось меню со следующими опциями: «В избранное», «Ретвитнуть» и «Ответить» (рис. 5.13). По мнению разработчиков, эти действия достаточно важны, поэтому в мобильной версии сайта они расположили их непосредственно на экране (рис. 5.14).
При нажатии и пролистывании.
При открытии обычных сайтов в некоторых мобильных браузерах стандартное выпадающее меню отображается при нажатии на экран. Это оправдано в тех случаях, когда опции такого меню логически связаны со следующим действием пользователя. Однако если его содержание добавляет к процессу лишние шаги, это может мешать перемещению посетителей по сайту, а значит, вызывать у них раздражение.
Пролистывание — жест куда менее очевидный и понятный пользователю, чем нажатие. И чаще всего при проектировании мобильного интерфейса он требует дополнительных усилий со стороны разработчиков. С другой стороны, этот жест редко бывает случайным, а значит, производимое им действие не будет мешать посетителям в процессе их естественных перемещений по сайту. Если вы намерены использовать пролистывание на своем сайте, то имеет смысл добавить подсказку или небольшую анимацию, объясняющую, как оно работает (рис. 5.15).
Следует также иметь в виду, что для действий, выполняемых при помощи неочевидных жестов (например пролистывание), нужно предусмотреть альтернативы.
Так, на мобильном сайте Yahoo! Mail функции меню, открывающиеся при пролистывании, дублируются также в отдельном окне (рис. 5.16).
На отдельной странице.
Если выпадающее меню включает большой объем информации, то на мобильном сайте имеет смысл размещать его на отдельной странице. Такой подход использовал Barnes & Noble (рис. 5.17). То, что на обычном сайте было большим (и навязчивым) выпадающим меню, в его мобильной версии теперь занимает отдельную страницу.
Полный отказ.
Если изначально в выпадающем меню не было особой необходимости, то в мобильной версии сайта лучше и вовсе от него избавиться. Отказ от лишних действий или информации, не представляющей ценности для пользователя, не только сделает интерфейс проще, но и облегчит разработку и поддержку сайта. Так что смело избавляйтесь от всего лишнего!
Вы можете выбрать любой из описанных выше подходов — главное, убедитесь, что при переходе от обычной версии сайта к мобильной вы не забыли ни об одной из функций выпадающего меню.
Не трогать!
Вы надеялись, что мы уже покончили со всеми проблемами?
А как насчет сайтов для устройств с бесконтактным или гибридным интерфейсом? Мобильные устройства с механизмами непрямого воздействия — такими как трекпады, трекболы, колесики прокрутки или физическая клавиатура (цифровая или QWERTY) — позволяют при взаимодействии с Интернетом не водить пальцами по экрану.
Когда пользователи перемещаются по веб-страницам при помощи описанных выше средств промежуточного контроля, CSS-состояние: hover часто применяется для того, чтобы выделить выбранный элемент интерфейса, не прибегая к Java Script. И хотя правильнее в таких случаях было бы задействовать состояние: focus, таблицы стилей многих сайтов не содержат его явного описания. Поэтому такие мобильные браузеры, как OperaMini, используют: hover, чтобы выделить активный элемент интерфейса, выбранный пользователем в данный момент.
Добавив в таблицу стилей описание состояний: hover и: focus для всех ссылок, кнопок и меню вашего мобильного сайта, вы облегчите его использование на устройствах, оборудованных средствами непрямой манипуляции.
Когда речь идет об устройствах, не имеющих тач-интерфейса, можно вообще не беспокоиться о состоянии: focus. И хотя в настоящее время подавляющее большинство производителей смартфонов отдают предпочтение сенсорным экранам, не все устройства, выпущенные ими ранее (да и те, что продолжают выпускать), имеют тач-интерфейс. Экраны старых моделей обычно меньше, поэтому тач-зоны заняли бы слишком много места и использовать жесты было бы невозможно. А значит, возникает необходимость в некоторой адаптации.
Ниже я еще расскажу о методике прогрессивного улучшения, позволяющей уменьшать размер интерактивных зон так, чтобы это не создавало неудобств для пользователей.
Но поскольку я обещал, что не стану слишком углубляться в технические аспекты и постараюсь сделать эту книгу как можно более краткой, то предоставлю право подробно рассказать о прогрессивном улучшении тем, кто разбирается в этом вопросе лучше меня (http://bkaprt.com/mf/47).
Камера, мотор, начали!
Мобильных устройств с сенсорным экраном и тач-интерфейсом становится все больше, поэтому необходимо постоянно работать над тем, чтобы у пользователей не возникало проблем при взаимодействии с нашими сайтами.
Поэтому:
• при определении размера и расположения тач-зон применяйте принцип «чем больше, тем лучше»;
• постарайтесь как можно лучше изучить «язык жестов», использующихся при работе с активным экраном, и то, как пользователи применяют их для навигации и управления сайтом;
• смело используйте принципы естественного пользовательского интерфейса (NUI), благодаря которым внимание посетителей сайта сосредоточивается на контенте, а не на оболочке;
• выберите наиболее подходящий для мобильного сайта способ внедрения функций, реализованных на обычном сайте в виде выпадающего меню;
• при проектировании мобильного сайта не забывайте об устройствах без сенсорного экрана и с гибридным интерфейсом.
Теперь, после того как мы разобрались с основами, давайте обратим наше внимание на самое важное из действий — ввод.
Данный текст является ознакомительным фрагментом.