Глава 10. Мобильные сайты.

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

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

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

Основное отличие мобильного сайта от его традиционной версии в том, что мобильные пользователи ориентированы не просто на просмотр контента, а на определенные действия (рис. 10.1). Это означает, что мобильный сайт должен быть максимально функциональным и предлагать конкретные шаги: «Заполняйте анкету и получайте кредит», «Адреса наших магазинов» или «Скачать последний альбом здесь».

Рис. 10.1. Экран смартфона предполагает другой формат взаимодействия с информаций

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

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

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

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

Проблема маленьких экранов не нова – с ней сталкиваются разработчики сайтов с самого появления Интернета. Язык HTML позволяет делать динамическую верстку – но при этом экранное разрешение устройств, на которые нацеливаются разработчики, варьируется от 320 × 240 пикселов и сейчас доходит до 2048 × 536 пикселов у последнего iPad 3.

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

Рис. 10.2. Экраны iPhone 3, iPhone 4 и различных версий Android вмещают разное количество информации

Поэтому доверьтесь профессионалам – компаниям, которые имеют опыт разработки мобильных сайтов для самых разных устройств. Существуют экраны совершенно разных конфигураций, размеров, с различным количеством точек на дюйм, с наличием физических кнопок на самом устройстве (или их отсутствием). Также есть несколько разных положений экрана (например, вертикальное и горизонтальное – для чтения и просмотра изображений и видео) и даже несколько версий операционной системы, которые работают на одном и том же смартфоне. Конечно же, в ответ на такое разнообразие устройств появились технологии, которые позволяют упростить создание мобильной версии сайта – например, компания InfoGin предлагает адаптацию веб-контента для мобильных устройств с помощью своей разработки Smartphone Web Optimizer (рис. 10.3).

Рис. 10.3. Сайт без применения функции Web Optimizer (слева) и с использованием Web Optimizer (справа)

Smartphone Web Optimizer автоматически анализирует содержимое вашего сайта и генерирует версию, предназначенную для мобильных устройств. Хотя такое решение и упрощает взаимодействие с мобильным контентом, оно не адаптирует его: длина текста, количество картинок и ссылок при этом остаются прежними, без учета «мобильного контекста».

Жесты и multi-touch.

Существуют жесты, которые сейчас активно используют при взаимодействии с мобильными сайтами. Если в старых мобильных телефонах (например, Motorola Razr или Nokia) мы не задействовали ничего, кроме кнопок на корпусе телефона, то теперь любой ребенок с легкостью разбирается, каким образом увеличивать или уменьшать размер изображения на экране iPhone или iPad (рис. 10.4).

Рис. 10.4. Экраны с функцией multi-touch сделали управление устройствами максимально простым

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

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

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

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

Врезка 10.1. Kiddicare.com: забота о детях через мобильный сайт Приблизительно 7 % трафика сайта Kiddicare.com приходится на трафик с мобильных устройств. Это означает, что сайт посещают около 70 000 уникальных пользователей в месяц. Компания, которая занимается продажей детских товаров, запустила одновременно мобильное приложение и мобильную версию сайта и в конце 2010 г. получила приток новых посетителей – пользователей мобильных устройств. Приложение было разработано для поддержки мультиканальной стратегии и включает в себя безопасную оплату покупок, сканирование штрихкодов на товарах, сравнение цен и поиск. Основная функция мобильного приложения – помогать потребителю при покупках из дома, в том числе в сравнении цен в физических магазинах, включая магазины конкурентов, в которых продаются такие же детские товары, как и на сайте Kiddicare.com (очевидно, что задача Kiddicare – переключить покупателя с конкурентного магазина на покупку на своем сайте). При этом полноценный мобильный сайт Kiddicare.com позволяет покупателям выбирать товары и приобретать их на ходу. Покупатели имеют доступ к своему личному кабинету, в котором уже сохранена информация о кредитной карте, и поэтому процесс покупки товаров максимально упрощен.

Кафе и рестораны.

Для этой сферы гораздо проще внести изменения в уже существующий сайт: это гораздо быстрее и результативнее, чем разрабатывать мобильное приложение. Вы можете добавить функцию click-to-call – чтобы на главной странице сайта потребитель мог нажать на номер телефона, моментально соединиться с рестораном и, например, заказать столик.

Сервисная компания.

Здесь для вас оптимальной будет комбинация «мобильный поиск + мобильный сайт». Таким образом вы решите все срочные задачи, дав клиенту ответы на вопросы: «Где купить краску?», «Когда “переобуть” машину в летнюю резину?» и т. д.

Компании, у которых уже существует интернет-магазин.

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

Продавцы сезонных товаров.

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

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

Например, вам нужно, чтобы заинтересовавшийся пользователь оставил свои контакты для проведения тест-драйва автомобиля. В этом случае через мобильный сайт можно собирать данные потребителей, как это делает компания «Jaguar Land Rover Россия» для тест-драйва нового автомобиля Range Rover Evoque (рис. 10.5).

Рис. 10.5. Страница мобильного сайта компании «Jaguar Land Rover Россия», на которой пользователь может заказать тест-драйв

Не забывайте, что у пользователя мобильной версии сайта гораздо меньше возможностей для ввода своих данных, поэтому ограничьте число полей для заполнения (фамилия, имя, e-mail, телефон). Или же воспользуйтесь функцией click-to-call, чтобы пользователь мог сразу позвонить на горячую линию и пообщаться уже с живым человеком, вместо того чтобы заполнять длинную «простыню» с помощью клавиатуры телефона.

Помните о дополнительных возможностях, которые дает мобильная версия сайта: вы можете предложить пользователю установить приложение (если оно у вас есть). Так, например, работает мобильная версия «Ведомостей» (рис. 10.6).

Рис. 10.6. Мобильная версия «Ведомостей» доступна после установки приложения с App Store

Также можно предложить пользователю поставить закладку на экране телефона, которая будет выглядеть точно так же, как и мобильное приложение (эта функция работает на iPhone – рис. 10.7).

Рис. 10.7. Закладка на экране iPhone, позволяющая быстро перейти на мобильный сайт

Выводы и практические рекомендации.

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

Экран мобильного устройства отображает меньше, чем экран компьютера. У смартфонов меньшее количество пикселов и хуже разрешение экрана (рис. 10.8).

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

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

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

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

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

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

Рис. 10.9. Мобильный сайт может по-разному выглядеть на различных устройствах – количество отображаемой информации зависит от ширины экрана

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

Понимайте отличия условий использования. Как правило, мобильное потребление информации осуществляется на ходу – и это обусловливает типы вопросов, которые задает посетитель вашего сайта: «Где находится ваш ближайший магазин?», «Каков график работы отделения банка?», «Как мне позвонить в головной офис?» и т. д.

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

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