Сначала мобильные!

Руководство находится в открытом доступе и содержит файлы шаблонов для каждого жеста в форматах PDF, EPS, OmniGraffle и Visio, которые можно свободно использовать при создании макетов и прототипов.

Устройства с тач-интерфейсом стремительно завоевывают популярность, а значит, будут появляться все новые дизайнерские решения. Например, такое действие, как «потянуть вниз для обновления», которое раньше было доступно лишь для отдельных приложений, сегодня получает широкое распространение, так что нетрудно предположить, что в ближайшее время пользователи попробуют применить их и на вашем сайте. Поэтому смело экспериментируйте с жестами! (рис. 5.9–5.10).

Не стоит бояться NUI[6]

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

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

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

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

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

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

Выбор наведением

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

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

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

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

При создании мобильных сайтов у вас есть следующие варианты размещения опций выпадающего меню:

• меню располагается непосредственно на экране;

• меню появляется при нажатии на экран, а выбор необходимых функций производится пролистыванием;

• меню выносится на отдельную страницу;

• и мой любимый: вообще отказаться от выпадающего меню.

На экране.

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