Энциклопедия маркетинга, https://www.marketing.spb.ru

Адрес документа: https://www.marketing.spb.ru/lib-comm/internet/mobile_first.htm
Обновлено: 20.11.2017

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

Люк Вроблевски Глава из книги «Сначала мобильные!»
Издательство «Манн, Иванов и Фербер»

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

Если вам не известны последние статистические данные, кратко введу вас в курс дела: рынок мобильных устройств растет сумасшедшими темпами. (Да, я знаю, что это не научный термин.) Аналитики давно предсказывали, что мобильные устройства станут «новой великой идеей», и эти прогнозы начинают сбываться. Чтобы понять всю масштабность изменений, давайте все-таки обратимся к статистике.

  • Предполагалось, что по объемам рынка смартфоны превзойдут ноутбуки и стационарные ПК в 2012 году.
  • На самом деле это случилось уже в последнем квартале 2010 года (рис. 1.1) — на два года раньше!
  • Это означает, что все больше людей будут выходить в Сеть с мобильных устройств, а не со стационарных ПК и ноутбуков. Признаки таких изменений уже заметны. В 2010 году в США количество домашних пользователей персональных компьютеров снизилось на 20% по сравнению с 2008 годом. Почему? Мы проводим все больше времени в Сети, применяя для этого смартфоны и планшеты.
  • Вот еще одно доказательство: в ноябре 2010 года общее число посетителей, проверяющих свою почту на почтовых серверах, сократилось на 6%, при этом тех, кто получал доступ к электронной почте через мобильные устройства, стало на 36% больше.
  • Трафик на мобильных сайтах в 2010 году вырос на 600% по сравнению с уровнем предыдущего года.
  • И все это лишь начало. Если в 2009 году доступом к мобильному Интернету пользовались полмиллиарда человек, то к 2013 году эта цифра вырастет до миллиарда.
  • Рисунок 1. По общемировым продажам смартфоны обогнали компьютеры на два года раньше, чем предполагалось

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

    На мобильных технологиях уже можно зарабатывать деньги!

    • Через систему PayPal ежедневно проходят мобильные платежи на сумму до 10 миллионов долларов.
    • Общемировой объем продаж eBay через мобильные устройства составил в 2010 году около 2 миллиардов долларов.
    • В третьем квартале 2010 года мобильный поисковый трафик Google вырос на 130%.
    • Не менее 50% общего числа пользователей Pandora подписываются на услуги через мобильные устройства.

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

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

    Так что же изменилось?

    Чтобы происходящее стало понятнее, расскажу вам историю, которая началась в 2006 году. Если вы уже забыли, какой была жизнь в те далекие дни, позвольте заново представить вам Motorola Z3 — модель телефона, заменившую чрезвычайно успешный Motorola RAZR (рис. 2).

    Рисунок 2. В 2006 году Motorola Z3 считалась настоящим шедевром технической мысли

    В 2006 году модель Z3 считалась в США самой продвинутой. Этот телефон давал возможность отправлять SMS и сообщения электронной почты. Он имел двухмегапиксельную камеру, музыкальный плеер, цветной экран, а также веб-браузер с поддержкой WAP 2.0/XHTML. Телефон работал с высокоскоростным протоколом EDGE. Увы, ощущения от использования веба на Z3 были, мягко говоря, отвратительными.

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

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

    Всего лишь год спустя произошло событие, полностью изменившее мир. 29 июня 2007 года Стив Джобс поднялся на сцену и представил аудитории первый iPhone. Даже не самые большие поклонники Apple признают, что это устройство имело невероятное влияние на развитие мобильного Интернета. iPhone оказался первым мобильным телефоном, на котором просмотр веб-страниц был не мучением, а, напротив, приятным занятием. Анализ данных мобильного трафика через каналы AT&T с 2006 по 2009 год (то есть за период, когда компания была эксклюзивным оператором iPhone в США) позволяет четко увидеть картину происходившего (рис. 3).

    Рисунок 3. Все необходимые детали, связанные с невероятным ростом мобильного трафика AT&T

    За это время мобильный трафик AT&T вырос на 4932% (//bkaprt.com/mf/9; PDF) — неудивительно, что у ее клиентов постоянно возникали проблемы с доступом! Различие между устройством, не предназначенным для быстрого передвижения по Сети, и устройством, отлично выполняющим эту функцию, играет очень важную роль. В сущности, в 2009 году каждый iPhone создавал столько же мобильного трафика, сколько 30 обычных телефонов (//bkaprt.com/mf/17). Разумеется, немалое значение имело и то, что плата за пользование услугами iPhone не зависела от объема трафика.

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

    Плюс к этому расширяются зоны покрытия, и неуклонно увеличивается скорость работы мобильных сетей. Только за 2010 год скорость передачи данных возросла в два раза. В результате вдвое увеличился и объем проходящей через смартфоны информации. В ближайшее время эта тенденция вряд ли изменится: по прогнозам, глобальный объем мобильных данных за период с 2010 по 2015 год вырастет еще в 26 раз (//bkaprt.com/mf/17)!

    Новые возможности открываются все быстрее.

    Не все устройства созданы равными

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

    О каких именно различиях между устройствами идет речь?

    • Если говорить о владельцах смартфонов, то 35% из них ежедневно пользуются мобильным Интернетом. Среди пользователей фичафонов этот показатель составляет всего 4%.
    • Не менее 31% владельцев смартфонов заходят в социальные сети через браузер мобильного устройства. Для владельцев фичафонов этот показатель составляет всего 7%.
    • Не менее 70% владельцев смартфонов проверяют электронную почту на своих мобильных устройствах. Для владельцев фичафонов этот показатель составляет всего 12%.

    Так обстояли дела в 2009 году. Кроме того, эти данные включают в себя «псевдосмартфоны» с неудобными веб-браузерами. Так что есть все основания полагать, что на данный момент разрыв стал еще заметнее.

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

    • Смартфоны отвечают за непропорционально высокий объем трафика как при работе в Сети, так и при передаче данных. По данным компании Cisco, смартфоны составляют лишь 13% используемых в мире мобильных устройств, однако на их долю приходится 78% общего трафика (//bkaprt.com/mf/19; PDF).
    • Число владельцев смартфонов увеличивается все более быстрыми темпами. В третьем квартале 2010 года их продажи выросли на 96% по сравнению с аналогичным показателем предыдущего года. Доля владельцев смартфонов в общем числе пользователей день ото дня увеличивается.
    • Смартфоны становятся все более доступными. Устройство, прежде стоившее несколько сотен долларов, сегодня можно купить менее чем за сотню. Рынок подобных устройств поистине огромен.
    • Так что есть все основания полагать, что современные смартфоны завтра будут восприниматься как вполне заурядные мобильные телефоны — других просто не останется.

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

    Однако перспективы мобильной отрасли все-таки связаны со смартфонами, поэтому мы будем говорить в основном о них.

    Стоит отметить, что не все устройства, именующиеся «смартфонами», предоставляют равные возможности и одинаково удобны в использовании. В начале 2010 года трафик данных через iPhone более чем в четыре раза превышал объем трафика с телефонов на других платформах. Однако ближе к концу года для iPhone этот показатель был всего в 1,75 раза больше, чем для устройств на базе Google Android.

    Показатели использования сетевых ресурсов могут значительно меняться даже в рамках одной платформы. После того как компания Research in Motion (RIM) представила более удобный веб-браузер, интегрированный в смартфон Storm, мобильный трафик RIM в сети Verizon увеличился на 16%. У смартфонов Blackberry, выпускаемых RIM сегодня, браузер еще лучше, поэтому можно ждать дальнейшего роста этих показателей.

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

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

    Достаточно посмотреть на сайт для поиска услуг на местном рынке Yelp. Мобильными версиями этого сервиса пользуются лишь 7% общей аудитории, но это 35% всех поисковых запросов. Каждые две секунды обладатели мобильных устройств запрашивают через Yelp информацию, касающуюся деятельности местных компаний, или узнают, как проехать к нужной цели. Пока клиенты не начали использовать мобильные устройства, сервис Yelp вообще не предоставлял информацию такого рода.

    Другой пример — онлайн-каталог недвижимости Zillow. Его клиенты обращаются к базе сервиса с мобильных устройств на 45% чаще, чем с обычных компьютеров. Большинство из них — активные покупатели, которые изучают предложения, существующие в непосредственной близости от их текущего местоположения; это совершенно новая аудитория, с которой компания смогла взаимодействовать только с появлением мобильного Интернета.

    А как насчет нативных приложений?

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

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

    Нативные мобильные приложения позволяют использовать оборудование мобильных устройств так, как не может сделать ни один из мобильных браузеров. В частности, речь идет о доступе к адресной книге, работе с SMS, встроенными сенсорами, камерой и записи аудио. Веб-приложения нельзя запускать в фоновом режиме, а их создатели не могут зарабатывать на продаже своих разработок через апп-сторы2 или реализуя товары и услуги через сами приложения. Ненативные приложения не могут попасть в апп-сторы, поэтому им гораздо сложнее оказаться на домашнем экране устройства, их становится труднее найти и использовать.

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

    Как отмечает эксперт по мобильному бизнесу Джейсон Григсби, «веб-ссылки не открывают приложения, они направляют вас на веб-страницы» (//bkaprt.com/mf/24). Если у вас есть контент в Сети, то пользователи найдут его и расскажут о нем другим через системы поиска, по электронной почте, через социальные сети или на своих веб-страницах. Отсутствие мобильного вебрешения означает, что пользователь, который пойдет по ссылкам на ваш ресурс с мобильного устройства, не увидит ничего хорошего (а то и вообще не сможет получить доступ к контенту). И наличие нативного приложения ситуации не изменит (рис. 4).

    Рисунок 4. Несмотря на наличие нативных приложений для iOS, Android, Blackberry и Palm, геолокационный сервис Gowalla имеет также и мобильное вебприложение, на которое пользователи попадают по ссылкам на других сайтах

    Для пользователя главное преимущество мобильных устройств — их доступность. Даже если вы решили создать нативное приложение для одной или нескольких платформ, велика вероятность, что все существующие платформы вам охватить не удастся. Для Apple iOS требуется Objective C, а для Google Android — Java; программы для Microsoft Windows Phone 7 пишутся на Silverlight, для Samsung Bada — на C++, а для Blackberry от RIM — на базе Java, WebWorks и Adobe Air. Мало кто способен одновременно вести разработку с использованием всех перечисленных технологий. И даже если у вас получится создать нативные приложения для каждой платформы, расходы на их поддержку могут оказаться непомерными.

    Кроме того, не исключено, что именно Сеть обеспечит вам максимум посетителей. Например, 14% пользователей Twitter заходят в сеть через браузер, 8% — при помощи нативного приложения для iPhone, и 7% — нативного приложения для Blackberry. На долю остальных платформ приходится менее 4% (//bkaprt.com/mf/25).

    То же самое можно сказать и о Facebook. Около 19% постов в Facebook отправляются с мобильного сайта, в то время как с использованием нативных приложений для iPhone, Android и Blackberry публикуются лишь по 4% сообщений (//bkaprt.com/mf/26). Причина все та же — доступность мобильного сайта на любых платформах.

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

    Веб-приложения не требуют от пользователя загрузки обновлений (сайт обновляется непосредственно на сервере, на котором располагается). С их помощью можно постоянно исследовать предпочтения пользователей, сравнивая, как они реагируют на различные варианты интерфейса (A/B-тестирование). Если какие-то из перечисленных факторов для вас важны, имеет смысл отдать предпочтение мобильному вебу.

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

    Время пришло

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

    Теперь вы сможете не только создавать мобильные версии веб-продуктов. У вас появляется возможность более полно соответствовать потребностям аудитории.

    Давайте посмотрим на социальную сеть Facebook. Более 250 миллионов ее пользователей получают доступ при помощи мобильных устройств. Они в два раза активнее тех, кто заходит на сайт со стационарного компьютера или ноутбука.

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

    Джо Хьюитт, в прошлом ведущий разработчик приложения Facebook для iPhone, говорит:
    Изначально мы рассматривали мобильное веб-приложение только в качестве вспомогательного сервиса, но я быстро понял, что могу создать версию, которая будет гораздо лучше, чем основной сайт.

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

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

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

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

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

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

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

    Поведение пользователей

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

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

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

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

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

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

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

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

    Недавно я познакомился с отличным примером подобного подхода. Один из авторов блога Mobile in Higher Ed Дейв Олсен дал следующий комментарий к картинке с сайта xkcd.com, приведенной на рис. 6: ...разглядывая правую часть диаграммы Венна, я вдруг подумал: "А ведь это очень похоже на нынешний и будущий контент нашего мобильного сайта". [...] Отказ от всего лишнего, максимальный учет размера экрана устройства и сетевых ограничений делает сайт гораздо более полезным.

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

    Контент важнее навигации

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

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

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

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

    Использование и взаимодействие

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

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

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

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

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

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

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

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

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

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

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

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

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

    Каждая страница Bagcheck имеет уникальное навигационное меню, позволяющее более детально изучать контент сайта (рис. 14). Перейти в другие разделы посетители могут, также воспользовавшись и главным меню. Возможности контекстной навигации крайне полезны.

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

    Рисунок 14. Контекстное навигационное меню на странице мобильного сайта Bagcheck перемещает пользователя к другим материалам по теме

    Рисунок 15. Контекстное меню мобильного сайта Gmail позволяет пользователям проводить различные операции с электронным письмом

    Возвращаясь назад

    Всегда интересно наблюдать за тем, как мигрируют решения в области дизайна. Например, в шапке многих нативных приложений для iPhone есть кнопка возврата к предыдущей странице (рис. 16). У мобильных устройств компании Apple нет физической кнопки для возврата к предыдущему окну, iOS также не предлагает пользователю каких-либо системных инструментов для этой операции.

    C iPhone кнопка «Назад» перекочевала в шапку многих сайтов, хотя зачастую она совершенно не нужна. Многие устройства (Android, Blackberry, Windows Phone 7 и т. д.) имеют физические кнопки «Назад» (рис. 17). Такая кнопка есть даже на панели управления мобильного браузера Apple (рис. 18). И появление еще одной в шапке мобильного сайта способно лишь запутать пользователя. У него может возникнуть вполне обоснованный вопрос: «А она предназначена выполнять то же действие?»

    Рисунок 16. Кнопка «Назад» есть в большинстве нативных приложений для iPhone

    Рисунок 17. У устройств на базе Android обычно есть физическая кнопка «Назад»

    Рисунок 18. В нижней панели инструментов мобильного веб-браузера Apple предусмотрена постоянная кнопка «Назад»

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

    Привязка к низу страницы

    У многих нативных приложений для iPhone навигационные панели зафиксированы в нижней части экрана, что позволяет управлять приложением при помощи большого пальца. И в отличие от мобильного браузера в нативных приложениях отсутствует нижняя панель инструментов, пожирающая драгоценное экранное место. На примере сайта Yahoo! Mail можно увидеть, как инструменты управления браузером влияют на отображение мобильной веб-страницы. Две панели браузера и два фиксированных меню сайта Yahoo! Mail оставляют крайне мало места для просмотра содержимого почтового ящика (рис. 19).

    Рисунок 19. Навигационное меню мобильного сайта Yahoo! Mail постоянно находится в нижней части окна браузера

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

    Рисунок 20. В нижней части панели многих мобильных устройств присутствуют физические кнопки управления

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

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

    Рисунок 21. Новый дизайн мобильного сайта Twitter имеет верхнее навигационное меню, позволяющее управлять сайтом независимо от типа мобильного устройства

    Ясность и отсутствие лишних деталей

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

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

    На экране присутствует всего одна навигационная кнопка — «Отменить» (рис. 22). Остальной интерфейс нацелен на выполнение текущей задачи.

    Рисунок 22. Различие в количестве навигационных кнопок на страницах мобильных сайтов Yahoo! Mail (слева) и ESPN (справа)

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

    Структура мобильного сайта

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

    • Анализ основных способов взаимодействия (поиск, изучение/развлечение, проверка / статус и редактирование / создание) позволит понять, как владельцы мобильных устройств будут использовать ваш сайт, а значит, разработать структуру, соответствующую их потребностям.
    • Уделив внимание в первую очередь контенту и лишь потом навигации, вы предоставите посетителям возможность максимально быстро получить доступ к нужной информации или произвести необходимые действия.
    • Продуманное и правильно расположенное навигационное меню помогает пользователям более детально изучить содержание страницы и облегчает переход к другим разделам сайта.
    • Уменьшение числа навигационных опций и акцент на выполнение основных задач позволяют пользователям быстрее достигать поставленных целей. Это особенно важно, когда у них мало времени или они находятся не в самых удобных условиях.
    • Но даже если владелец мобильного устройства заходит на ваш сайт в свободное время, находясь у себя дома и удобно расположившись в кресле, будьте уверены: он по достоинству оценит простоту и функциональность вашего дизайна!

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


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

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


© 1998-2023 Дмитрий Рябых