Все просто: проектирование для мобильных устройств не только готовит веб-дизайнеров к лавинообразному росту мобильного Интернета и связанных с ним новых возможностей, но и вынуждает сконцентрироваться на инновациях. Разумеется, подобное заявление нуждается в конкретизации. Об этом и пойдет речь в этой части книги.
Рост
ПОЕЗДИВ В МЕТРО, побродив по торговому центру, понаблюдав за старшеклассниками, вы наверняка заметите новую эволюционную тенденцию в облике и поведении человеческой расы. Практически повсюду встречаются люди с маленькими светящимися экранами, буквально приросшими к ладоням! Слава богу, это не какая-то генетическая мутация — просто все они держат в руках мобильные устройства.
Если вам не известны последние статистические данные, кратко введу вас в курс дела: рынок мобильных устройств растет сумасшедшими темпами. (Да, я знаю, что это не научный термин.) Аналитики давно предсказывали, что мобильные устройства станут «новой великой идеей», и эти прогнозы начинают сбываться. Чтобы понять всю масштабность изменений, давайте все-таки обратимся к статистике.
• Предполагалось, что по объемам рынка смартфоны превзойдут ноутбуки и стационарные ПК в 2012 году.
На самом деле это случилось уже в последнем квартале 2010 года (рис. 1.1) — на два года раньше!
• Это означает, что все больше людей будут выходить в Сеть с мобильных устройств, а не со стационарных ПК и ноутбуков. Признаки таких изменений уже заметны.
В 2010 году в США количество домашних пользователей персональных компьютеров снизилось на 20 % по сравнению с 2008 годом. Почему? Мы проводим все больше времени в Сети, применяя для этого смартфоны и планшеты ().
• Вот еще одно доказательство: в ноябре 2010 года общее число посетителей, проверяющих свою почту на почтовых серверах, сократилось на 6 %, при этом тех, кто получал доступ к электронной почте через мобильные устройства, стало на 36 % больше ().
• Трафик на мобильных сайтах в 2010 году вырос на 600 % по сравнению с уровнем предыдущего года (. com/mf/7).
• И все это лишь начало. Если в 2009 году доступом к мобильному Интернету пользовались полмиллиарда человек, то к 2013 году эта цифра вырастет до миллиарда (; , PDF).
Дело не только в том, что с каждым днем через мобильные сети прокачиваются все большие объемы информации. Использование мобильных технологий для электронной торговли, поиска информации, общения через социальные сети и многих других целей ведет к развитию связанного с ними бизнеса.
На мобильных технологиях уже можно зарабатывать деньги!
• Через систему PayPal ежедневно проходят мобильные платежи на сумму до 10 миллионов долларов (http:// bkaprt.com/mf/11).
• Общемировой объем продаж eBay через мобильные устройства составил в 2010 году около 2 миллиардов долларов ().
• В третьем квартале 2010 года мобильный поисковый трафик Google вырос на 130 % ().
• Не менее 50 % общего числа пользователей Pandora подписываются на услуги через мобильные устройства ().
И если вам кажется, что к вашему сайту или приложению это не имеет никакого отношения, то знайте: обычный владелец смартфона ежедневно посещает до 24 веб-ресурсов, а 40 % всех визитов на половину наиболее посещаемых мировых сайтов осуществляется с мобильных устройств ( mf/14). Это означает, что в ближайшее время кто-то попытается при помощи мобильного устройства зайти и на ваш сайт.
Но, честно говоря, и без статистики понятно, что использование мобильных услуг растет потрясающе высокими темпами. Достаточно просто оглядеться по сторонам: видите, сколько людей уставились в эти небольшие экраны? Мобильная связь уже повсюду.
Так что же изменилось?
Чтобы происходящее стало понятнее, расскажу вам историю, которая началась в 2006 году. Если вы уже забыли, какой была жизнь в те далекие дни, позвольте заново представить вам Motorola Z3 — модель телефона, заменившую чрезвычайно успешный Motorola RAZR (рис. 1.2).
В 2006 году модель Z3 считалась в США самой продвинутой. Этот телефон давал возможность отправлять SMS и сообщения электронной почты. Он имел двухмегапиксельную камеру, музыкальный плеер, цветной экран, а также веб-браузер с поддержкой WAP 2.0/XHTML. Телефон работал с высокоскоростным протоколом EDGE. Увы, ощущения от использования веба на Z3 были, мягко говоря, отвратительными.
Насколько плохо обстояли дела? С момента открытия окна браузера до загрузки веб-страницы, состоявшей всего из пары ссылок, проходило почти две минуты (). В мире, где время отклика большинства сайтов измерялось долями секунды, такое ожидание было невообразимо мучительным. Но проблема заключалась не только в этом. Писать текст, перебирая символы на цифровой клавиатуре, было жутко неудобно, и тут не помогала даже функция автозавершения текста T9 ().
Всего лишь год спустя произошло событие, полностью изменившее мир. 29 июня 2007 года Стив Джобс поднялся на сцену и представил аудитории первый iPhone. Даже не самые большие поклонники Apple признают, что это устройство имело невероятное влияние на развитие мобильного Интернета. iPhone оказался первым мобильным телефоном, на котором просмотр веб-страниц был не мучением, а, напротив, приятным занятием. Анализ данных мобильного трафика через каналы AT&T с 2006 по 2009 год (то есть за период, когда компания была эксклюзивным оператором iPhone в США) позволяет четко увидеть картину происходившего (рис. 1.3).
За это время мобильный трафик AT&T вырос на 4932 % (; PDF) — неудивительно, что у ее клиентов постоянно возникали проблемы с доступом! Различие между устройством, не предназначенным для быстрого передвижения по Сети, и устройством, отлично выполняющим эту функцию, играет очень важную роль. В сущности, в 2009 году каждый iPhone создавал столько же мобильного трафика, сколько 30 обычных телефонов (). Разумеется, немалое значение имело и то, что плата за пользование услугами iPhone не зависела от объема трафика.
Однако мобильный трафик растет не только потому, что появляются все более совершенные устройства — они становятся еще и дешевле. Люди, которые раньше не могли позволить себе обычный компьютер, теперь получили возможность выходить в Интернет благодаря недорогому мобильному устройству и доступному тарифному плану.
Плюс к этому расширяются зоны покрытия, и неуклонно увеличивается скорость работы мобильных сетей. Только за 2010 год скорость передачи данных возросла в два раза. В результате вдвое увеличился и объем проходящей через смартфоны информации.
В ближайшее время эта тенденция вряд ли изменится: по прогнозам, глобальный объем мобильных данных за период с 2010 по 2015 год вырастет еще в 26 раз ()!
Новые возможности открываются все быстрее.
Не все устройства созданы равными
Однако прежде чем погрузиться в сладостные грезы о новых перспективах и возможностях, давайте еще раз окинем взором действительность. Во-первых, показатели мобильного трафика включают не только данные, поступающие из Сети. Во-вторых, до сих пор основная масса мобильных устройств — это обычные телефоны с фиксированным набором функций, или фичафоны, которые, естественно, ограничивают и объемы работы в Сети.
О каких именно различиях между устройствами идет речь?
• Если говорить о владельцах смартфонов, то 35 % из них ежедневно пользуются мобильным Интернетом. Среди пользователей фичафонов этот показатель составляет всего 4 %.
• Не менее 31 % владельцев смартфонов заходят в социальные сети через браузер мобильного устройства. Для владельцев фичафонов этот показатель составляет всего 7 %.
• Не менее 70 % владельцев смартфонов проверяют электронную почту на своих мобильных устройствах. Для владельцев фичафонов этот показатель составляет всего 12 %.
Так обстояли дела в 2009 году. Кроме того, эти данные включают в себя «псевдосмартфоны» с неудобными веб-браузерами (). Так что есть все основания полагать, что на данный момент разрыв стал еще заметнее.
Если вы заинтересованы в том, чтобы доступ к вашему контенту мог иметь любой пользователь мобильной сети, вам необходимо найти решение, учитывающее особенности устройств и интересы владельцев как фичафонов, так и смартфонов и разного рода промежуточных вариантов. И все же в этой книге я буду в основном говорить о дизайне для смартфонов. И вовсе не потому, что Google платит мне процент с каждого проданного телефона с Android, а вот почему:
• Смартфоны отвечают за непропорционально высокий объем трафика как при работе в Сети, так и при передаче данных. По данным компании Cisco, смартфоны составляют лишь 13 % используемых в мире мобильных устройств, однако на их долю приходится 78 % общего трафика (; PDF).
• Число владельцев смартфонов увеличивается все более быстрыми темпами. В третьем квартале 2010 года их продажи выросли на 96 % по сравнению с аналогичным показателем предыдущего года. Доля владельцев смартфонов в общем числе пользователей день ото дня увеличивается ().
• Смартфоны становятся все более доступными. Устройство, прежде стоившее несколько сотен долларов, сегодня можно купить менее чем за сотню. Рынок подобных устройств поистине огромен.
• Так что есть все основания полагать, что современные смартфоны завтра будут восприниматься как вполне заурядные мобильные телефоны — других просто не останется.
И по этим, и по ряду других причин смартфоны представляют для многих компаний великолепную возможность вовлечь клиентов в близкие и длительные отношения. Разумеется, это не повод забывать и о множестве возможностей, предоставляемых обычными мобильными телефонами. Например, об SMS-услугах или специальных мобильных браузерах типа Opera Mini (которые значительно упрощают работу в Сети для устаревших моделей телефонов).
Однако перспективы мобильной отрасли все-таки связаны со смартфонами, поэтому мы будем говорить в основном о них.
Стоит отметить, что не все устройства, именующиеся «смартфонами», предоставляют равные возможности и одинаково удобны в использовании. В начале 2010 года трафик данных через iPhone более чем в четыре раза превышал объем трафика с телефонов на других платформах. Однако ближе к концу года для iPhone этот показатель был всего в 1,75 раза больше, чем для устройств на базе Google Android (http:// bkaprt.com/mf/17).
Показатели использования сетевых ресурсов могут значительно меняться даже в рамках одной платформы. После того как компания Research in Motion (RIM) представила более удобный веб-браузер, интегрированный в смартфон Storm, мобильный трафик RIM в сети Verizon увеличился на 16 % (). У смартфонов Blackberry, выпускаемых RIM сегодня, браузер еще лучше, поэтому можно ждать дальнейшего роста этих показателей.
Подобные примеры указывают не только на связь между удобством мобильного устройства и интенсивностью его использования, но и на исключительно высокий темп инноваций в этой сфере. В результате перед нами открываются невиданные перспективы.
Вместе с новыми возможностями появляются и новые способы взаимодействия с Сетью и людьми, использования информации и получения цифровых услуг. Мы еще будем говорить об этом, но пока я хочу подчеркнуть, что наличие хороших устройств и высокой скорости передачи данных могут привести не только к росту трафика — они открывают для веб-дизайнеров новое окно возможностей.
Достаточно посмотреть на сайт для поиска услуг на местном рынке Yelp. Мобильными версиями этого сервиса пользуются лишь 7 % общей аудитории, но это 35 % всех поисковых запросов. Каждые две секунды обладатели мобильных устройств запрашивают через Yelp информацию, касающуюся деятельности местных компаний, или узнают, как проехать к нужной цели (). Пока клиенты не начали использовать мобильные устройства, сервис Yelp вообще не предоставлял информацию такого рода.
Другой пример — онлайн-каталог недвижимости Zillow.
Его клиенты обращаются к базе сервиса с мобильных устройств на 45 % чаще, чем с обычных компьютеров. ( mf/23). Большинство из них — активные покупатели, которые изучают предложения, существующие в непосредственной близости от их текущего местоположения; это совершенно новая аудитория, с которой компания смогла взаимодействовать только с появлением мобильного Интернета.
А как насчет нативных приложений?
Разумеется, мы не можем в разговоре о росте мобильного Интернета оставить без внимания бесконечные дискуссии о том, что лучше: программы, специально создаваемые для того или иного мобильного устройства (так называемые нативные приложения), или мобильные веб-решения.
Споры идут яростные, однако истина в том, что оба этих направления имеют право на жизнь.
Нативные приложения разрабатываются под конкретную платформу и поэтому имеют такой уровень доступа к системным ресурсам устройства, каким веб-приложения похвастаться не могут. Это означает, что при взаимодействии с пользователем интерфейс нативных приложений работает, как правило, более быстро и гладко. Попытки воспроизвести такой интерфейс в браузере часто приводят к сбоям и задержкам в работе.
Нативные мобильные приложения позволяют использовать оборудование мобильных устройств так, как не может сделать ни один из мобильных браузеров. В частности, речь идет о доступе к адресной книге, работе с SMS, встроенными сенсорами, камерой и записи аудио. Веб-приложения нельзя запускать в фоновом режиме, а их создатели не могут зарабатывать на продаже своих разработок через апп-сторы или реализуя товары и услуги через сами приложения. Ненативные приложения не могут попасть в апп-сторы, поэтому им гораздо сложнее оказаться на домашнем экране устройства, их становится труднее найти и использовать.
Поэтому если вашему мобильному продукту или бизнесу необходим доступ к «железу» устройства или работа в фоновом режиме, если вы хотите распространять свое приложение через апп-сторы или продавать с его помощью товары и услуги, без нативного формата вам, скорее всего, не обойтись.
Однако это вовсе не означает, что придется отказаться от решений, связанных с мобильным Интернетом.
Как отмечает эксперт по мобильному бизнесу Джейсон Григсби, «веб-ссылки не открывают приложения, они направляют вас на веб-страницы» (). Если у вас есть контент в Сети, то пользователи найдут его и расскажут о нем другим — через системы поиска, по электронной почте, через социальные сети или на своих веб-страницах. Отсутствие мобильного вебрешения означает, что пользователь, который пойдет по ссылкам на ваш ресурс с мобильного устройства, не увидит ничего хорошего (а то и вообще не сможет получить доступ к контенту). И наличие нативного приложения ситуации не изменит (рис. 1.4).
Для пользователя главное преимущество мобильных устройств — их доступность. Даже если вы решили создать нативное приложение для одной или нескольких платформ, велика вероятность, что все существующие платформы вам охватить не удастся. Для 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 % ().
То же самое можно сказать и о Facebook. Около 19 % постов в Facebook отправляются с мобильного сайта, в то время как с использованием нативных приложений для iPhone, Android и Blackberry публикуются лишь по 4 % сообщений (http:// bkaprt.com/mf/26). Причина все та же — доступность мобильного сайта на любых платформах.
Скажу больше: наличие нативного приложения зачастую стимулирует пользователей применять мобильный веб. Каждый раз, когда вы делитесь ссылкой или нажимаете на нее в нативном приложении, она открывается в окне браузера. Таким образом, увеличение числа нативных приложений приводит к росту мобильного трафика.
Веб-приложения не требуют от пользователя загрузки обновлений (сайт обновляется непосредственно на сервере, на котором располагается). С их помощью можно постоянно исследовать предпочтения пользователей, сравнивая, как они реагируют на различные варианты интерфейса (A/B-тестирование). Если какие-то из перечисленных факторов для вас важны, имеет смысл отдать предпочтение мобильному вебу.
И наверное, лучше всего начинать с мобильного решения хотя бы потому, что у вас уже имеются навыки в области вебдизайна и развития проектов. Стартовать можно в любой момент. В сущности, я думаю, стартовать следует прямо сейчас.
Время пришло
Мобильный Интернет развивается бешеными темпами, чему способствует модернизация устройств и увеличение скорости передачи данных. Применение подхода «сначала мобильные!» позволяет воспользоваться преимуществами этого роста и открывает новые перспективы для привлечения клиентов.
Теперь вы сможете не только создавать мобильные версии веб-продуктов. У вас появляется возможность более полно соответствовать потребностям аудитории.
Давайте посмотрим на социальную сеть Facebook. Более 250 миллионов ее пользователей () получают доступ при помощи мобильных устройств.
Они в два раза активнее тех, кто заходит на сайт со стационарного компьютера или ноутбука.
Комбинация решений для мобильных устройств и компьютеров повышает вовлеченность пользователей обоих типов. Это происходит потому, что Facebook не расценивает свой мобильный сайт как дополнение к основному, а использует его, чтобы сделать ресурс более удобным для всех посетителей.
Джо Хьюитт, в прошлом ведущий разработчик приложения Facebook для iPhone, говорит:
Изначально мы рассматривали мобильное веб-приложение только в качестве вспомогательного сервиса, но я быстро понял, что могу создать версию, которая будет гораздо лучше, чем основной сайт.
В сущности, в его словах заключена основная идея стратегии развития мобильных приложений.
А теперь зададимся следующим вопросом: каким образом ограничения и возможности мобильных устройств помогут нам достичь заветной цели?
2
Ограничения
НЕСОМНЕННО, НЕВЕРОЯТНЫЙ РОСТ использования Интернета через мобильные устройства связан с улучшением их характеристик, однако сами эти устройства имеют и серьезные ограничения. У них маленькие экраны, телефонные сети зачастую ненадежны, да и доставать телефон иногда бывает просто неудобно. Но на самом деле все эти ограничения полезны, и не только для бизнеса, но и для самого дизайна.
Со мной согласятся все те, кто считает, что для достижения совершенства необходимо отсекать все лишнее и необязательное. Другими словами, ограничения надо приветствовать, а не бороться с ними — это позволит нам сделать дизайн лучше.
Размер экрана
На протяжении многих лет в дизайнерском сообществе горячо обсуждалась тема пространства на экране стационарных компьютеров. В итоге мы сошлись на том, что будем считать стандартом размер 1024 × 768 пикселей. Однако мобильные устройства сжимают наш огромный песчаный пляж до размеров песочницы.
Первое поколение смартфонов на платформах iOS, Android и WebOS имели экраны разрешением 320 × 480 пикселей, что составляет примерно 20 % экрана обычного компьютера. Таким образом, 80 % всех ссылок, рекламных объявлений, текстов, картинок и прочих элементов прежнего дизайна должны были либо найти себе новое место, либо исчезнуть. На экране мобильного телефона им просто не хватало пространства.
И это… прекрасно!
Как только вы поймете, каким количеством бессмысленных навигационных элементов, пустого контента и неэффективных рекламных баннеров завален типичный сайт, вам станет очевидно, почему мобильная «диета» может оказаться полезной как для самих владельцев сайта, так и для их клиентов. Как только потребитель начинает использовать мобильную версию, он хочет, чтобы и версия для обычного компьютера стала «поскромнее».
Давайте посмотрим на сайт авиакомпании Southwest Airlines (рис. 2.1), отвечающий, как кажется, на все возникающие у клиентов вопросы — даже те, которые они никогда не зададут. Добавлять новые элементы на сайт довольно легко, поэтому на веб-страницах размещаются горы контента — особенно при наличии множества заинтересованных сторон.
Требования к сайтам весьма разнообразны: владельцы хотят одного, пользователям нужно другое. Поэтому при разработке дизайна страницы часто приходится искать баланс между различными рекламными предложениями, контентными модулями, вариантами навигации… На экране 1024 × 768 так много свободных пикселей!
Мобильное решение (в данном случае нативное приложение Southwest для iPhone) позволяет максимально сконцентрироваться на том, что нужно клиенту: бронировании путешествий, регистрации на рейс, проверке расписания, расчете призовых миль и получении уведомлений (рис. 2.2). Ничего лишнего — лишь то, что может понадобиться в первую очередь.
Ограниченное пространство дисциплинирует разработчиков. На небольшом экране им необходимо представить набор свойств, наиболее важных для бизнеса и клиентов. Для сложных интерфейсов или контента сомнительной ценности просто нет места. Приходится оставлять самое важное.
А для этого нужно хорошо знать и своих клиентов, и суть бизнеса. Нравится вам это или нет.
Чтобы еще раз проиллюстрировать эту мысль, предлагаю взглянуть на сайт популярного фотохостинга Flickr. Многие из вас наверняка с ним знакомы. В течение многих лет сайт активно развивался, в результате в одном только верхнем навигационном меню появилось около 60 пунктов (рис. 2.3).
Когда же пришло время для создания мобильного приложения, команда Flickr смогла выбрать из 60 опций шесть наиболее важных. Каким образом они это сделали? Просто Flickr знали, чего ждут их клиенты. Большинство пользователей этого сервиса заходят на сайт, чтобы проверить свои фотоальбомы, просмотреть новые фотографии друзей или взглянуть на самые популярные изображения. Мобильная версия сайта ставит во главу угла именно эти функции (рис. 2.4).
Начиная разработку мобильного веб-приложения, необходимо прежде всего определить, что считать самым важным. Впоследствии тот же подход вы можете применить при проектировании версий для стационарных компьютеров или других устройств. Если вы уже определились с тем, какие свойства будут основными для ваших клиентов и вашего бизнеса, то почему эти приоритеты должны меняться, как только в вашем распоряжении окажется больше экранного пространства?
Конечно, поведение посетителей обычного сайта и его мобильной версии будет в чем-то различаться. Однако главная ценность любого веб-сервиса остается неизменной и не зависит от форматов и устройств. В сущности, клиенты ожидают от мобильной версии практически того же, что и от версии для большого экрана. Особенно это справедливо для тех, кто выходит в Интернет преимущественно с мобильных устройств. Поэтому не зацикливайтесь на простоте мобильных приложений, лучше подумайте о том, что действительно важно для ваших пользователей.
Подход «сначала мобильные!» предполагает, что конечный результат будет обеспечивать решение наиболее важных для пользователей задач, поэтому при проектировании сайтов разработчикам необходимо безжалостно избавляться от избыточного интерфейса, пустого контента и всего того мусора, которым сегодня заполнены многие интернет-ресурсы. На экране размером 320 X 480 пикселей для всего этого просто нет места.
Эффективность
Мобильными устройствами мы готовы пользоваться всегда и везде, но мобильные сети зачастую не дают нам этого делать. Даже при наличии сети путешествие по Интернету может оказаться достаточно дорогостоящим удовольствием (это зависит от тарифа), соединение — не всегда стабильным, скорость соединения — невысокой, а значит, придется нервничать в ожидании загрузки очередной страницы.
Такова реальность, и, проектируя дизайн для мобильных устройств, необходимо ее учитывать. Все, что можно сделать для того, чтобы повысить эффективность работы вашего мобильного сайта, должно быть сделано. На практике это означает снижение интенсивности обмена данными и использование всех доступных методов для ускорения загрузки и сокращения трафика между сервером и мобильным устройством.
Если вы будете управлять размерами и количеством отправляемых на устройства файлов (то есть HTTP-запросами), ваши пользователи смогут загружать меньшие объемы данных, а значит, не только быстрее получать всю необходимую информацию, но и существенно экономить на оплате счетов. Ни для кого не секрет, что из-за задержек с передачей сигнала каждый HTTP-запрос, сделанный с мобильных устройств, способен изрядно ударять по карману. Поэтому убедитесь, что вы:
• Использовали «спрайты» для группировки нескольких изображений в единый закодированный файл. (Главное, чтобы при раскодировании он не оказался слишком большим!)
• Объединили и максимально уменьшили размер файлов CSS и JavaScript.
• Ограничили использование и вообще постарались избегать зависимости от тяжелых библиотек JavaScript, особенно если они применяются всего для одной-двух функций.
• Ограничили использование CSS-сеток.
• Применили соответствующие HTTP-заголовки, для того чтобы нужные файлы правильно сохранялись в кэше браузера.
• По возможности использовали такие HTML5-функ: ции современных браузеров, как Canvas ( mf/29) и AppCache ().
И моя любимая рекомендация: используйте CSS3 для скругленных углов, градиентов, теней текста и HTML-объектов.
Это позволит вам избавиться от необходимости публиковать картинки по всему сайту — в современных мобильных браузерах сайт будет выглядеть прекрасно; кроме того, он будет смотреться вполне достойно даже в браузерах, не обеспечивающих полную поддержку CSS3.
Однако не стоит перегружать сайт тяжелыми CSS3-эффектами, так как это может снизить результативность работы браузера.
Скорость важна не только для мобильных сайтов. Как показывают результаты тестов, проведенных Amazon, Yahoo! Microsoft и многими другими компаниями, даже небольшая задержка (100 миллисекунд) при работе в Сети может заставить пользователя покинуть сайт. Многолетние исследования компании Google показали, что низкая эффективность имеет отсроченный эффект: даже после того, как проблема задержки была решена, посетители в течение пяти недель менее активно заходили на такие сайты (). Так что эффективность имеет значение и для стационарных компьютеров.
Если вы следуете принципу «сначала мобильные!» и разрабатываете веб-приложения с учетом нестабильности мобильных сетей, то на обычных компьютерах они будут загружаться с поразительной скоростью. Это наверняка понравится вашим клиентам — вот вам и дополнительные преимущества такого подхода.
Время и место
Сейчас речь пойдет о контексте — об условиях, в которых мы находимся. К примеру, стационарные компьютеры чаще всего используются в офисе или дома; они имеют постоянное подключение к Сети и источнику питания; работают на них обычно в одиночестве, как правило, сидя — ну и далее в том же духе. Конечно, кто-то может постоянно пользоваться мобильным устройством и за рабочим столом, однако они потому и называются мобильными, что их обладатели не привязаны к месту.
Поскольку владельцы мобильных устройств практически всегда носят их с собой, придется учитывать такие факторы, как место и время. Очевидно, что в данном случае контекст будет влиять на дизайн. Если вы занимаетесь дизайном для мобильных устройств, то, по сути, создаете дизайн, пригодный всегда и везде.
Место.
Разработчики мобильных приложений зачастую представляют пользователя как спешащего куда-то по оживленной улице бизнесмена. Конечно, бывает и так, но на самом деле список мест, где люди постоянно прибегают к помощи мобильных устройств, гораздо более разнообразен. Вот результаты опроса (), целью которого было выяснить, где люди обычно используют смартфоны. Оказалось, что они делают это:
• дома (84 % опрошенных);
• в различных ситуациях в течение дня (80 %);
• ожидая кого-либо или стоя в очередях (74 %);
• в магазинах (69 %);
• на работе (64 %);
• во время просмотра телепередач (62 %; другое исследование называет цифру 84 %);
• во время поездок на общественном транспорте (47 %).
Тот факт, что 84 % опрошенных пользуются мобильными устройствами дома, говорит о многом. Оказывается, типичный пользователь мобильного приложения — это не спешащий бизнесмен, а человек, который находится у себя дома.
Короче говоря, как бы мы ни старались, нам вряд ли удастся удовлетворить требования всех типов пользователей.
Размышляя о тех, кто обращается к мобильным приложениям, я представил себе человека, который использует один глаз и один палец. «Один палец» — потому что именно так мы обычно управляем мобильным устройством, а «один глаз» — поскольку в большинстве случаев нас непременно что-то отвлекает.
Кто-то, стоя в очереди, решил узнать счет футбольного матча; кто-то держит в одной руке мобильное устройство, а в другой — руку ребенка; кто-то едет в переполненном вагоне метро на работу, а кто-то удобно устроился на диване перед телевизором. Ясно представив себе этот образ — «один глаз и один палец», вы поймете, почему дизайн для мобильных устройств должен быть максимально простым. Только тогда потребители смогут эффективно использовать их в самых разных ситуациях.
Но даже в среде, свободной от отвлекающих факторов, пользователи чувствуют себя гораздо более комфортно, если мобильное приложение оказывается достаточно простым.
Время.
Несмотря на то что компьютеры доступны нам в любое время суток, все же в течение дня одни устройства мы используем чаще, чем другие. Рис. 2.5 показывает, сколько статей прочитывают каждый час пользователи сервиса Read It Later со стационарных ПК и ноутбуков. Число материалов стабильно растет до полудня, а затем падает и остается низким вплоть до окончания рабочего дня (до 6–9 часов вечера).
Второй график (рис. 2.6) отображает количество статьей, ежечасно прочитываемых пользователями iPhone. Здесь можно выделить четыре основных пика: 6 часов утра (завтрак); 9 часов утра (дорога на работу и начало рабочего дня); 5–6 часов вечера (окончание рабочего дня и дорога домой); 8-10 часов вечера (отдых, свободное время, чтение в постели).
На графиках хорошо видно, что периоды использования компьютеров и мобильных устройств не совпадают. С планшетами ситуация еще интереснее. Чтобы наглядно продемонстрировать, как различные устройства влияют на сайты или приложения, приведу график, отображающий динамику прочтения статей пользователями Read It Later, заходящими на сайт со своих iPad (рис. 2.7). Несмотря на небольшой всплеск активности утром и постоянное обращение к услугам сервиса в течение дня, основной объем трафика приходится на вечер, когда люди ложатся в кровать. Я и сам читаю в постели — но, клянусь, только статьи по веб-дизайну.
Иногда такая периодичность обусловлена физической доступностью устройства: до какого из них мне проще дотянуться прямо сейчас? Во многих других случаях обращаются именно к тем устройствам, которые лучше подходят для решения конкретных задач. Это становится особенно очевидно, если совместить данные об использовании компьютеров и мобильных устройств на одном графике (рис. 2.8).
График наглядно иллюстрирует одну характерную особенность: владельцы мобильных устройств задействуют их в течение коротких промежутков времени (именно поэтому пики оказываются столь резкими). Рэйчел Хинман из Nokia, описывая различия в поведении пользователей при работе со стационарными компьютерами и мобильными устройствами, провела замечательную аналогию: она назвала первых «аквалангистами», а вторых — «ныряльщиками» (. com/mf/34).
С каждым днем появляется все больше веб-приложений для мобильных устройств, позволяющих выполнять короткие, импульсивные действия и способных на протяжении всего дня быстро обеспечить потребителей необходимой им актуальной информацией. Доступ к Facebook через мобильные браузеры всего за один год вырос на 112 %, а к Twitter — на 347 % ()! Оба сервиса идеально подходят для кратких погружений в океан последних новостей вашей френд-ленты.
Но обратите внимание: и тех, кто погружается с аквалангом, и тех, кто ныряет, имея из снаряжения лишь маску и дыхательную трубку, интересует одно — подводный мир. Время и место взаимодействия пользователя с вашим мобильным сайтом могут быть различными, но основные ценности остаются неизменными. Вот почему я еще раз хочу подчеркнуть: не стоит лишать посетителей контента и ограничивать доступные им функции только потому, что они зашли на мобильную версию сайта.
Чем хороши ограничения
Мобильные устройства имеют несколько естественных ограничений, которые, на первый взгляд, могут сужать ваши возможности при проектировании мобильных приложений. Речь идет о небольшом размере экрана, о низкой скорости, о том, что пользователи обращаются к вашему приложению на короткое время или уделяют ему мало внимания. Разрабатывая дизайн по принципу «сначала мобильные!», вы будете вынуждены учитывать все эти ограничения. Но именно они заставляют нас находить элегантные решения. И преимущества такого подхода не ограничиваются мобильными устройствами.
Небольшой размер экрана заставляет определить, какой контент действительно важен для клиентов и компании.
Для всего остального просто нет места. Медленная связь и ограничения трафика вынуждают вас предельно упрощать и облегчать сайты, чтобы ускорить их загрузку.
Место и время также накладывают свои ограничения, заставляя вас задумываться о том, как потребитель будет использовать ваши продукты в течение дня. Но все эти ограничения создают и новые возможности для привлечения потенциальных клиентов, что, в свою очередь, позволяет внедрять инновации. Давайте теперь поговорим о новых возможностях, которые обещает нам применение мобильного подхода.
3
Потенциальные возможности
ЕСТЕСТВЕННЫЕ ОГРАНИЧЕНИЯ мобильных устройств, сетей, а также особенности их использования заставляют при разработке мобильных приложений сосредоточиться на самом важном. Однако, проектируя дизайн для мобильных приложений, следует не просто придерживаться заданных рамок, но и подумать, как эти рамки можно раздвинуть.
Владельцы мобильных устройств могут использовать (и используют) их в любое время и в любом месте, что позволяет нам лучше узнать о потребностях наших клиентов, а значит, быстрее достичь намеченных бизнес-целей. Когда наши возможности объединяются с техническими возможностями современных мобильных устройств, открывается множество перспектив для инноваций. Мои слова похожи на корпоративную презентацию? Проиллюстрирую все вышесказанное примером из жизни.
Как я искал метро
Во время очередной поездки в Лондон я решил наконец посетить некоторые достопримечательности. Я уже бывал в Лондоне и знал, что метро (его еще называют Tube) — это лучший способ передвижения. Оставалось выяснить, какая станция находится ближе всего. Включив ноутбук, я зашел на сайт лондонской транспортной системы (рис. 3.1).
Я быстро нашел ссылку на карту метро и перешел на нужную страницу.
Теперь позвольте мне на минуту прерваться, чтобы продемонстрировать несколько примеров чрезвычайно разумного подхода к юзабилити и информационной архитектуре, характерных для сайта лондонской транспортной системы (рис. 3.2). Яркие ссылки, крупные изображения, поясняющие содержание каждого раздела; кроме того, каждую ссылку сопровождает соответствующая иконка PDF с указанием размера файла, так что вы сразу понимаете, что находится за каждой из них.
Я уверен, что разработчики потратили немало времени, продумывая структуру каждой страницы и определяя принципы навигации по сайту. В результате я легко нашел нужную информацию и загрузил карту метро в формате PDF (рис. 3.3).
А теперь давайте попробуем решить ту же задачу посредством нативного мобильного приложения Nearest Tube. Это приложение использует целый ряд возможностей мобильных устройств, формируя принципиально иной опыт взаимодействия. В основе программы лежит функция определения текущего местонахождения пользователя при помощи систем навигации, цифрового компаса (или магнитометра), видеокамеры и акселерометра.
Система навигации позволяет установить ваше местоположение на карте, цифровой компас определяет, к какой из сторон света вы стоите лицом, а видеокамера позволяет воспроизвести изображение той части города, которая в настоящий момент попадает в поле вашего зрения. Таким образом, чтобы найти ближайшую станцию метро, достаточно просто открыть приложение и посмотреть на экран (рис. 3.4).
На экране вы увидите маркеры, указывающие на ближайшие станции метро, линии, к которым те относятся, и расстояние, на котором вы от них находитесь. Приложение также использует акселерометр (сенсор, измеряющий параметры движения устройства); благодаря ему изображение на экране меняется в зависимости от того, куда направлена камера. Поместите устройство прямо перед собой, и вы увидите детальную информацию о близлежащих станциях; поднимите его чуть выше, и появится информация о более отдаленных станциях (рис. 3.5).
Я не хочу сказать, что приложение для мобильного телефона значительно лучше, чем сайт. Проблемы с юзабилити есть у обоих решений. Но насколько сильно эти проблемы отличаются друг от друга! И сайт, и мобильное приложение решают одну и ту же задачу, но совершенно разными способами.
Nearest Tube использует функции мобильного устройства (камеру, систему навигации, компас и акселерометр), предлагая целый ряд инноваций для решения достаточно простой задачи. Именно это чаще всего и позволяют делать мобильные устройства: изобретать способы удовлетворения потребностей пользователей, предоставляя им великолепные новые инструменты.
А что же происходит с браузером?
Не все из того, что предлагает приложение Nearest Tube, в настоящее время работает в мобильных веб-браузерах. Половина функций уже реализовано (например, определение местонахождения и ориентация устройства), однако на момент написания этой книги вторая половина (видеокамера и компас) пока была недоступна. Так что, как я говорил выше, для разработки нативных приложений имеются веские причины. Если вы все же склонны считать, что стакан наполовину полон, то современные веб-браузеры мобильных устройств предлагают вам множество интересных возможностей, и чуть ли не ежедневно к ним добавляются новые.
Важно отметить, что первоочередность тех или иных функций определяется потребностями пользователей, а не техническими преимуществами того или иного устройства. Технические возможности позволяют предлагать оригинальные способы решения задач, однако клиентам вряд ли понравится тот факт, что новые функции появились исключительно потому, что мы могли их предложить.
Определение местоположения.
Когда посетитель заходит на наш сайт со стационарного компьютера, в 99 случаях из 100 мы знаем, в какой стране он находится. Для кого-то эта информация наверняка будет полезной, для нас же она особой ценности не представляет.
Но и в большинстве смартфонов функция определения местоположения доступна через веб-браузер. В табл. 3.1 (созданной Рахулом Наиром) приведен краткий обзор технологий, имеющихся в нашем распоряжении.
И хотя местоположение современного мобильного телефона может быть определено по сотовым вышкам, устройства, подобные iPhone, способны делать это при помощи Wi-Fi-маяков.
Wi-Fi-маяки (привязаны к точкам доступа Wi-Fi):
а) работают внутри помещения;
б) не потребляют энергии батарей;
в) способны определить местоположение практически мгновенно.
GPS-устройства имеют проблемы по всем трем фронтам, однако их показания гораздо более точные. Поэтому, если вам нужно как можно более верно определить, где вы находитесь, следует делать ставку на GPS и сотовые вышки.
В любом случае по этому поводу сильно беспокоиться не стоит. Веб-браузеры с поддержкой локационных API получают от устройств максимально точную информацию о вашем текущем местоположении.
Определение местоположения — важная вещь, так как она позволяет мобильным приложениям предоставлять пользователю полезные сведения о близлежащих кинотеатрах или ресторанах, информацию о погоде и пробках, цифровой контент (фотографии и комментарии к ним), оставленные другими пользователями, и многое другое. Текущее местоположение может использоваться для уточнения поисковых запросов или адаптации действий и возможностей под конкретного потребителя (рис. 3.6–3.7).
Итак, возможность точно определить местоположение позволяет создавать новые услуги. Каждые две секунды пользователи мобильных устройств обращаются к сервису Yelp, чтобы связаться с компаниями, предоставляющими необходимые услуги. С помощью мобильного приложения Zillow можно за час просмотреть изображения 20 тысяч домов. Перспективы для подобных сервисов поистине безграничны.
Ориентация устройства / акселерометр.
Вряд ли у кого-то возникает желание повсюду таскать с собой свой компьютер, пусть даже это ноутбук. С мобильными устройствами дело обстоит совершенно иначе. Они помещаются на ладони, их легко перемещать, вращать или направлять в разные стороны. Акселерометры отслеживают все, что происходит с аппаратом, и дают возможность сайтам и приложениям реагировать на это соответствующим образом.
Наиболее простое использование акселерометра — определение того, как мы держим устройство: горизонтально или вертикально (). Эта мелочь может существенно повлиять на поведение приложения.
В нативном почтовом приложении Google для Android смена ориентации устройства применяется для увеличения окна ввода текста при создании электронного сообщения. Если устройство перевести в горизонтальное положение, текстовое поле расширяется, занимая всю свободную площадь экрана над клавиатурой, а в правом углу появляется кнопка «Отправить» (рис. 3.8).
Не будь этого небольшого изменения в дизайне, приведение мобильного устройства в горизонтальное положение значительно осложнило бы процесс создания сообщения. Текстовое поле стало бы меньше, а поля — шире. Однако Google нашел решение, при котором поле не уменьшается, а увеличивается — иными словами, он превратил потенциальное ограничение в преимущество.
Акселерометры могут также определять, с какой скоростью перемещается устройство в руке пользователя. Это простое свойство можно использовать в Сети и сделать массу процессов более простыми и приятными. Представьте себе, как выглядит чтение статьи в онлайне: каждый день миллионы людей читают первый абзац текста, а затем двигаются вниз, крутя колесо мыши или пользуясь линейкой прокрутки браузера. Не слишком много вариантов для инноваций, не так ли?
Аналогичные возможности мобильных устройств богаче, чем возможности стационарных компьютеров. Например, сервис Instapaper позволяет пользователю сохранять вебстраницы и просматривать их в любое время при помощи мобильного устройства (или обычного компьютера). Приложение Instapaper для iPhone использует данные акселерометра, чтобы пролистывать текст, когда вы наклоняете телефон вперед или назад, избавляя вас от необходимости делать это самостоятельно (рис. 3.9). Изменяя угол наклона, можно регулировать скорость пролистывания, что позволяет читать в удобном для вас темпе. Это пример того, как правильный подход к использованию функций мобильного устройства помогает проще решать даже самые привычные задачи.
Внимательные читатели наверняка заметили, что последние два случая касались нативных, а не веб-приложений. Давайте уравняем позиции и рассмотрим два примера того, как ориентация устройства применяется в веб-браузере.
В первом примере воссоздана привычная с детства игрушка — стеклянный шар со снегом внутри. Потрясешь телефон, и в окне браузера начинает идти снег (рис. 3.10).
Второй пример немного сложнее — здесь используется гироскоп iPhone 4, способный реагировать на движения с радиусом в 360 градусов. Можно делать панорамные кадры, просто поворачивая телефон в руке (рис. 3.11).
Прикосновение.
Дизайнеры интерфейсов всегда были сторонниками предельной простоты в обращении с устройствами. Зачем нужны мышь и клавиатура, если к объекту можно прикоснуться пальцем? Мобильные устройства с сенсорным экраном позволяют работать в Интернете с помощью прикосновений — это открывает совершенно новые горизонты использования «естественных» для человека способов взаимодействия.
О веб-навигации для мобильных устройств с сенсорным экраном я расскажу во второй части книги. Сейчас хочу лишь заметить, что сенсорный интерфейс открывает широкое поле для инноваций. Мы только начинаем понимать, как можно использовать прикосновения, чтобы управлять устройствами, создавать и получать доступ к информации в Сети. Привыкнув к таким простым действиям, как «потянуть экран вниз, чтобы обновить его», или «перелистнуть экран для перехода к дополнительным опциям», пользователи ждут и от мобильного интерфейса простых, «натуральных» способов взаимодействия.
Иногда сенсорный экран становится главным фактором, определяющим принципы работы всего приложения в целом. Достаточно посмотреть на нативное приложение Sketch a Search от Yahoo! чтобы найти ближайший к вам ресторан или кафе, достаточно нарисовать пальцем круг или линию на карте (рис. 3.12). Результаты поиска появляются внутри нарисованной фигуры или около нее.
Если сравнить это со стандартным (для обычных компьютеров) подходом, при котором вы вводите адрес и поисковый запрос с клавиатуры, новый метод поиска — всего лишь с помощью пальца! — кажется не только простым, но и довольно забавным.
Расширение возможностей
Начав применять принцип «сначала мобильные!», вы сможете сразу оценить широкие перспективы такого подхода и использовать его, чтобы лучше удовлетворять потребности своих клиентов. Такие технические новшества, как определение местонахождения, ориентация устройства в пространстве и сенсорный экран, уже реализованы во многих мобильных браузерах. Вскоре появятся и новые функции, например:
• определение направления с помощью цифрового компаса;
• гироскоп: поворот устройства на 360 градусов;
• аудио: прием входящего сигнала с микрофона и вывод на динамик;
• видео и изображения: захват и ввод с камеры;
• двойные камеры на передней и задней панелях устройства;
• связь между устройствами при помощи Bluetooth;
• определение расстояния от устройства до различных объектов;
• контроль освещенности: автоматическое определение интенсивности внешнего освещения;
• NFC: «коммуникация ближнего поля» с помощью устройств считывания RFID-меток.
Приоритет, отдаваемый разработкам для мобильных устройств, позволяет не только воспользоваться всеми этими возможностями, но и дает шанс переосмыслить взаимоотношения пользователей как с вашим сайтом, так и с окружающим миром. Потенциал мобильных веб-браузеров будет возрастать по мере того, как они получат доступ к возможностям, которые сегодня предоставляют нативные приложения.
Как начать использовать принцип «сначала мобильные!»
Подведем итог и перечислим причины, почему при создании веб-приложений стоит использовать принцип «сначала мобильные!».
Такой подход:
• готовит вас к новым возможностям, возникающим по мере развития мобильного рынка;
• помогает определиться с приоритетами в разработке продуктов — этому способствуют ограничения, накладываемые мобильным дизайном;
• позволяет находить инновационные решения, опираясь на свойства, органически присущие мобильным устройствам.
Надеюсь, я смог убедить вас в том, что мобильный Интернет не только предоставляет широкие возможности для роста, но и предлагает новые варианты удовлетворения потребностей клиентов. И теперь вы наверняка спросите меня: «Отлично, но с чего начать?» Что ж, спасибо за вопрос.