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

Не будь этого небольшого изменения в дизайне, приведение мобильного устройства в горизонтальное положение значительно осложнило бы процесс создания сообщения. Текстовое поле стало бы меньше, а поля — шире. Однако Google нашел решение, при котором поле не уменьшается, а увеличивается — иными словами, он превратил потенциальное ограничение в преимущество.

Акселерометры могут также определять, с какой скоростью перемещается устройство в руке пользователя. Это простое свойство можно использовать в Сети и сделать массу процессов более простыми и приятными. Представьте себе, как выглядит чтение статьи в онлайне: каждый день миллионы людей читают первый абзац текста, а затем двигаются вниз, крутя колесо мыши или пользуясь линейкой прокрутки браузера. Не слишком много вариантов для инноваций, не так ли?

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

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

В первом примере воссоздана привычная с детства игрушка — стеклянный шар со снегом внутри. Потрясешь телефон, и в окне браузера начинает идти снег (рис. 3.10).

Второй пример немного сложнее — здесь используется гироскоп iPhone 4, способный реагировать на движения с радиусом в 360 градусов. Можно делать панорамные кадры, просто поворачивая телефон в руке (рис. 3.11).

Прикосновение.

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

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

Иногда сенсорный экран становится главным фактором, определяющим принципы работы всего приложения в целом. Достаточно посмотреть на нативное приложение Sketch a Search от Yahoo! чтобы найти ближайший к вам ресторан или кафе, достаточно нарисовать пальцем круг или линию на карте (рис. 3.12). Результаты поиска появляются внутри нарисованной фигуры или около нее.

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

Начав применять принцип «сначала мобильные!», вы сможете сразу оценить широкие перспективы такого подхода и использовать его, чтобы лучше удовлетворять потребности своих клиентов. Такие технические новшества, как определение местонахождения, ориентация устройства в пространстве и сенсорный экран, уже реализованы во многих мобильных браузерах. Вскоре появятся и новые функции, например:

• определение направления с помощью цифрового компаса;

• гироскоп: поворот устройства на 360 градусов;

• аудио: прием входящего сигнала с микрофона и вывод на динамик;

• видео и изображения: захват и ввод с камеры;

• двойные камеры на передней и задней панелях устройства;

• связь между устройствами при помощи Bluetooth;

• определение расстояния от устройства до различных объектов;

• контроль освещенности: автоматическое определение интенсивности внешнего освещения;

• NFC: «коммуникация ближнего поля» с помощью устройств считывания RFID-меток.

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

Подведем итог и перечислим причины, почему при создании веб-приложений стоит использовать принцип «сначала мобильные!».

Такой подход:

• готовит вас к новым возможностям, возникающим по мере развития мобильного рынка;

• помогает определиться с приоритетами в разработке продуктов — этому способствуют ограничения, накладываемые мобильным дизайном;

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

Надеюсь, я смог убедить вас в том, что мобильный Интернет не только предоставляет широкие возможности для роста, но и предлагает новые варианты удовлетворения потребностей клиентов. И теперь вы наверняка спросите меня: «Отлично, но с чего начать?» Что ж, спасибо за вопрос.

Итак, мы установили, что мобильные технологии открывают множество новых перспектив. Но если ваш прежний опыт связан с дизайном обычных сайтов, то как перейти к проектированию мобильных веб-приложений? Конечно, вам пригодится уже наработанный инструментарий, знания и навыки, однако могу предположить, что вам все-таки придется пересмотреть свои взгляды на организацию процесса разработки, способы взаимодействия с пользователями и дизайн приложений.

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

ГОВОРИМ МЫ О МОБИЛЬНОМ ВЕБЕ или об обычном, базовые принципы информационной архитектуры — правильная разметка кода, баланс ширины и глубины, основы поведения пользователя — остаются неизменными. Но для правильной организации взаимодействия с мобильным вебом также необходимо:

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

• отдавать приоритет контенту перед навигацией;

• предоставлять пользователям возможность взаимодействовать с составными элементами сайта;

• обеспечивать ясность и лаконичность контента.

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

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

В книге Tapworthy («Куда следует нажимать») Джош Кларк уделил особое внимание трем основным поведенческим моделям владельцев мобильных устройств: «Микрозадачи», «Ориентирование на местности» и «Мне скучно». Эти модели практически совпадают с поведенческой классификацией, принятой в компании Google: «Мне это нужно срочно», «Я повторяю то, что часто делаю» и «Я делаю это, потому что мне больше нечем заняться». Как эти типы поведения ни назови, использование мобильных устройств обычно предполагает один из следующих видов взаимодействия:

• поиск (срочная информация, местный масштаб): мне нужен ответ прямо сейчас (часто связанный с моим местоположением);