Следите за нами:
Про технологии Про бизнес Про опыт Про книги Прокачай!

Интернет-магазин в телефоне: почему адаптивный сайт лучше мобильной версии и приложения

У вас есть свой действующий и прибыльный интернет-магазин, проверенные поставщики и вышколенная служба доставки, а на сайте самого магазина выловлены все баги и ошибки. Мечта! Так зачем что-то менять и забивать себе голову «мобилизацией» виртуальной торговой точки? Неужели нельзя оставить все, как есть? Нельзя.

Александра Надеждина

По данным аналитической корпорации IDC в 2013 году продажи смартфонов вырастут на 32,7% по сравнению с предыдущим годом и составят порядка 958,8 млн устройств против прошлогодних 733,4 млн. Таким образом, текущий год станет переломным – продажи «умных» девайсов составят 52,2% от общего рынка мобильных устройств и впервые в истории полностью опередят продажи простых телефонов. Этот тренд будет сохраняться, и в будущем приведет к значительному росту потребления мобильного трафика, считают специалисты IDC.

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

И хотя из-за дороговизны мобильного соединения объем «карманного» трафика по-прежнему не так велик, как стационарного, на протяжении всей истории наблюдений прослеживается его стабильный и уверенный рост. Статистическая компания StatCounter приводит цифры – в июне 2013 года более 16% мирового трафика приходятся на мобильные устройства (по сравнению с 10,4% в июне 2012 года). Что до России, то здесь цифры несколько ниже – 5,62% мобильного трафика по сравнению со стационарным. Примечательно, что StatCounter считает только смартфоны и телефоны – планшетные компьютеры в эту статистику не входят. Таким образом, доля мобильного трафика в общепринятом понимании еще больше. Другое аналитическое агентство, Gemius, насчитывает в России 6,38% просмотров страниц с мобильных устройств в общем интернет-трафике по стране. По оценкам экспертов тенденция сохранится, и степень проникновения мобильного интернета будет стремительно расти.

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

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

Адаптивный сайт, мобильная версия или приложение?

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

Первый вариант — мобильная версия, пожалуй, самый простой и быстрый, но вместе с тем наименее эффективный. Такая страница, как правило, хорошо смотрится только на каком-то одном типе устройств (например, на смартфонах разрешением 480*320), но некорректно отображается на других девайсах.

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

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

2.jpg

Александр Богданов делится опытом: «Наши эксперименты показывают, что там, где мы сделали сайты, которые корректно работают на мобильном — везде просто ошеломительная конверсия. Так, если взять конверсию до того, как UX (user experience) был адаптирован под мобильные устройства, и сравнить ее с конверсией после такой адаптации, то по основным показателям (время пребывания, достижение какой-то цели и т.д.) конверсия вырастает в среднем в три раза по сравнению с тем, что было только на десктопе».

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

Основные принципы адаптивного дизайна

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

В качестве так называемых контрольных точек (breakpoints) обычно выбирают самые распространенные разрешения экранов – 320 пикселей, 480 пикселей, 600 пикселей, 768 пикселей, 1024 пикселей и 1280 пикселей. Согласно тому, к какой контрольной точке ближе текущий размер экрана, дизайн страницы перестраивается: меняются сетка, расположение элементов, контентная составляющая, шрифты, рекламные места. Так, например, на смартфонах для экономии времени и трафика будут показываться уменьшенные изображения или превью, а на большом экране ноутбука – полноценные картинки, подготовленные под Retina-экраны.

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

3.jpg

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

А что если...?

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

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

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

Бесплатный совет от Александра Богданова для тех, кто желает сэкономить: «Не думайте, какое из решений дешевле – мобильная версия, адаптив или приложение. Отвлекаясь на это, вы упустите то, что нужно именно вам. Лучше выделить какой-то бюджет на серию небольших, но вдумчивых экспериментов. Это позволит вам планомерно, шаг за шагом идти к повышению конверсии».

Особое внимание!

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

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

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

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

Александр Богданов делится соображениями: «Тема мобильной рекламы очень интересная, мы постоянно анализируем взаимодействие пользователя с рекламой на мобильных и экспериментируем в ее подаче, но правильного на 100% ответа пока дать так и не можем. Единственное, что известно наверняка – на мобильных устройствах не работают те же форматы и технологии, что и на стационарных компьютерах. Также мы должны учитывать особенности UX. Наш опыт позволил сделать некоторые выводы. Так, на экране мобильного пользователь в принципе не может воспринять больше одного рекламного места. Что до форматов, то по нашему мнению это должен быть баннер, занимающий не меньше трети или четверти экрана. Такой баннер не будет мешать, поскольку на мобильном устройстве мы привыкли постоянно скроллить и перелистывать: если баннер не интересен, мы его просто пропускаем, если интересен – нажимаем. Пока это только наши соображения. Мы не говорим, что эти выводы – 100% правило, которое нужно брать за основу. В любом случае, чтобы принять то или иное решение, необходимо провести серию экспериментов на доле трафика, чтобы понять, работает теория или нет».

Что в итоге?

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

За помощь в работе над материалом благодарим:

Александра Богданова, генерального директора AGIMA

Андрея Рыжкина, технического директора AGIMA