Актуальные книги для тех, кто создает сайты - Сначала мобильные!

^{Рис. 3.9. Наклон устройства при работе приложения Instapaper позволяет пользователю читать статьи в привычном для него темпе, лишний раз не прикасаясь к экрану}

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

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

^{Рис. 3.10. Просто встряхните iPhone, и на робота в стеклянном шаре посыплется снег}

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

^{Рис. 3.11. Для съемки панорамных кадров достаточно просто перемещать мобильное устройство в любом направлении}

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

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

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

^{Рис. 3.12. Приложение Sketch a Search от Yahoo! позволяет искать объекты на карте, рисуя на ней линии и кружки}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Часть 2

Как стать мобильным

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

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

4. Организация

Говорим мы о мобильном вебе или об обычном, базовые принципы информационной архитектуры – правильная разметка кода, баланс ширины и глубины, основы поведения пользователя – остаются неизменными. Но для правильной организации взаимодействия с мобильным вебом также необходимо:

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

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

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

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

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

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

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

• изучение/развлечение (скука, местный масштаб): у меня есть немного свободного времени, я хочу отвлечься;

• проверка/статус (повторяющееся занятие / микрозадачи): то, что для меня важно, постоянно изменяется или обновляется, и я хочу быть в курсе;

• редактирование/создание (срочные изменения / микрозадачи): мне необходимо безотлагательно что-то сделать.

Поскольку люди чаще всего задействуют мобильные устройства именно в подобных целях, знание специфики их поведения в той или иной ситуации поможет вам определить, как проектировать мобильные приложения, чтобы их структура и организация соответствовали потребностям пользователей. К примеру, на мобильном сайте Flickr обычно выполняются четыре основные операции. «Последние действия» и «Новые фото ваших контактов» позволяют пользователю понять, что происходит с фотографиями на его странице и на страницах друзей, а «Интересные снимки» и «Фотографии, сделанные рядом с вами» дают возможность заполнить свободное время (рис. 4.1).

^{Рис. 4.1. Разработчики приложений Flickr и Basecamp четко представляют себе потребности пользователей мобильных устройств}

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

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

^{Рис. 4.2. Картинка с сайта xkcd.com: вот зачем пользователи приходят на университетский сайт и что они на нем находят}

Недавно я познакомился с отличным примером подобного подхода. Один из авторов блога Mobile in Higher Ed (http://bkaprt.com/mf/39) Дейв Олсен дал следующий комментарий к картинке с сайта xkcd.com, приведенной на рис. 4.2:

…разглядывая правую часть диаграммы Венна, я вдруг подумал: “А ведь это очень похоже на нынешний и будущий контент нашего мобильного сайта”. […] Отказ от всего лишнего, максимальный учет размера экрана устройства и сетевых ограничений делает сайт гораздо более полезным.

Точнее и не скажешь.

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

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

Именно так работают мобильные версии сайтов YouTube и ESPN: на экране появляется простой заголовок, сообщающий, на чей сайт вы зашли, а вся навигация сведена к одному действию. Остальную часть страницы занимает либо актуальный контент (ESPN), либо список популярных видеороликов (YouTube) (рис. 4.3).

^{Рис. 4.3. Мобильные сайты ESPN и YouTube ставят во главу угла контент, а не навигацию}

Минуточку! Если контент всегда важнее навигации, то как найти на мобильном сайте необходимую информацию? Разве без навигации это возможно? Разумеется, она необходима, но для того, чтобы использовать сайт и взаимодействовать с ним, вовсе не требуется создавать громоздкую систему навигации, способную похоронить под собой сам контент.

Например, мне нравится, что на мобильном сайте Facebook актуальный контент занимает основную часть страницы. Но при этом в верхней ее части разработчики разместили сразу три навигационные панели, из-за чего на экране умещается всего одна новость. Мобильный сайт Google Finance содержит актуальные данные, но этот контент спрятан под пятью навигационными панелями. Иными словами, драгоценное экранное пространство заполнено навигационными опциями, которые могут и не потребоваться пользователям, в то время как на их месте могла бы находиться полезная информация (рис. 4.4).

^{Рис. 4.4. Мобильные сайты Facebook и Google Finance заполняют драгоценное пространство экрана многочисленными навигационными элементами}

^{Рис. 4.5. Недавние изменения в дизайне мобильного сайта Facebook позволили сократить число навигационных элементов}

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

Примеры сайтов YouTube и ESPN (рис. 4.3) показывают, что контент важнее навигации, однако они по-разному решают задачи доступа к основному содержанию и навигации. Чтобы перемещаться по сайту YouTube, необходимо использовать иконку, открывающую отдельную страницу с элементами меню (рис. 4.6). То есть для того, чтобы перейти к навигации, пользователю необходимо совершить действие, которое выводит его из общего контекста сайта (на отдельную страницу). Кроме того, он должен заранее знать, что иконка с решеткой в шапке сайта – это вход в навигационное меню.

^{Рис. 4.6. На мобильном сайте YouTube для навигации используется отдельная страница, загружаемая при помощи специальной иконки в шапке сайта}

В шапке мобильного сайта ESPN есть хорошо заметная кнопка «Меню», при нажатии на которую открывается обширный (и многоуровневый) перечень пунктов навигации (рис. 4.7). Это позволяет посетителю выбирать направление движения по сайту, не покидая текущей страницы. Кроме того, навигационное меню дублируется в подвале большей части разделов веб-ресурса, что соответствует логике их просмотра: дойдя до конца страницы, пользователь решает, что делать дальше – и облегчает взаимодействие с сайтом при управлении одной рукой. Дизайнеры мобильного сайта YouTube не предусмотрели такой возможности, поэтому их пользователи просто доходят до конца страницы, так как дальше им двигаться некуда (рис. 4.8).

^{Рис. 4.7. На мобильном сайте ESPN навигационное меню располагается в шапке и подвале каждой страницы}

^{Рис. 4.8. В сущности, варианты действий, предлагаемых в конце страницы мобильного сайта YouTube, – это тупик. Что делать дальше? Выйти из системы? Отправить комментарий?}

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

^{Рис. 4.9. Ссылка-якорь в шапке мобильного сайта Bagcheck позволяет пользователю переместиться в навигационное меню, находящееся в нижней части страницы}

Такой дизайн предполагает минимум навигационных элементов (в сущности, единственную ссылку в начале страницы). Он позволяет пользователям продолжить взаимодействие с сайтом после того, как они достигли конца страницы. Содержание меню не дублируется, а главное, для его работы требуется всего лишь ссылка-якорь, отсылающая посетителя в нижнюю часть страницы. Никаких скриптов JavaScript, оверлеев, отдельных навигационных страниц… Это своего рода HTML0 (который, как я слышал, поддерживается большинством браузеров, за исключением Internet Explorer).

Примечания

1

http://digit.ru/telecom/20111128/386853468.html

2

Термином «фичафон» (feature phones) обычно обозначают устройства низшего в сравнении со смартфонами ценового диапазона и с меньшим набором функций. Первоначально фичафонами называли телефоны, которые имели больший набор функций, нежели традиционные мобильные телефоны. Современные модели могут иметь тачскрин, использоваться для GPS-навигации, подключения к Wi-Fi и мобильному Интернету. Здесь и далее прим. ред.

3

Апп-сторы – онлайн-магазины, торгующие приложениями для мобильных устройств.

4

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

Конец бесплатного ознакомительного фрагмента.