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

Помимо этого в «Руководстве 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). Я верю, что потенциал этого подхода позволит нам войти в новую эру программирования. Такие его принципы, как превращение контента в интерфейс, прямое взаимодействие пользователя с контентом, а также отказ от визуальных элементов, не относящихся к контенту, открывают перед нами новые пути использования цифровой информации и медиа.

Уходят в прошлое те времена, когда для того, чтобы увеличить изображение, приходилось использовать окна, иконки, меню и указатели (WIMP[7]). Теперь для этого достаточно коснуться фотографии и развести пальцы в стороны. Такому «прямому» взаимодействию не только легче научиться (спросите об этом детей и пожилых людей, активно использующих iPad) — оно лучше отражает наше представление о реальном мире.

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

Старайтесь сделать так, чтобы предусмотренные в интерфейсе жесты были как можно более естественными: пользователям будет легче к ним привыкнуть. Недавнее исследование, проведенное среди пользователей девяти стран, показало, что люди разных культур для выполнения одинаковых действий применяют одни и те же жесты (http://bkaprt.com/mf/46). Так что если говорить об использовании тач-интерфейсов, у всех нас есть много общего.

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

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

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