Мобильный сайт или мобильное приложение?

Мы просматриваем новости и твиттер, даже когда едим в кафе. Наши приемники Wi-Fi все чаще включены в поисках бесплатного интернета. Мы отмечаемся в любимых местах и ставим напоминания не только во времени, но и в пространстве. Мы не расстаемся с друзьями и коллегами ни на секунду, держа их в кармане джинсов и отвечая на каждую вибрацию. У нас в кармане не просто телефон, а полноценный компьютер с полным комплектом мультимедиа возможностей на борту. Раньше мы удивлялись двум симкам в телефоне, теперь двум ядрам процессора в смартфонах.

Обладатели мобильных смартфонов и планшетов находятся в разных потребительских сегментах. Здесь и премиум сегмент дорогих аппаратов, и бюджетные модели для среднего класса. По данным Gartner в 2011 году прогнозируется объем продаж порядка 179 миллиона устройств на платформе Android и 90 миллионов на платформе iOS, что в совокупности составит 57,9% от всего рынка смартфонов.1 По сравнению с 2010 годом, объем продаж этих устройств увеличится более чем в два раза, а к 2015 году увеличится в 7 раз.

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

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

Оставляем все как есть

В смартфонах можно встретить различные браузеры для серфинга в интернете, но всех их объединяют практически одинаковые движки для отображения страниц. Наиболее популярным является бесплатный движок WebKit, разработку которого Apple начала в 2000 году и поддерживает до сих пор. Штатные браузеры обеих платформ, а так же большинство альтернативных им, построены с применением WebKit. Кто не знает — Safari и Chrome работают на данном движке.

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

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

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

Рассмотрим все технологии подробнее.

Браузерная мобильная версия

Наиболее заметным в мобильной версии сайта можно отметить отсутствие «дизайна» в привычном для нас с вами понимании. Основной упор делается на простую навигацию и представление контента. Мобильные версии как бы имитируют интерфейсы нативных приложений. Создаются эти версии на привычных технологиях HTML + CSS + JavaScript. Это позволяет сделать мобильную версию доступной для всех основных платформ: iOS, Android, BlackBerry, Bada, Windows Phone, WebOS, MeeGo, Symbian.

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

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

Данная библиотека построена на базе HTML5 и JavaScript и предназначена для разработки сайтов под мобильные устройства. Оптимизирована на работу под браузерами, построенными на базе WebKit. На сайте имеется конструктор интерфейса мобильного приложения (http://www.dhtmlx.com/touch/designer.shtml). Текущая версия — 1.0 Release Candidate.

Браузерная версия от 1С-Битрикс

Среди мобильных версий, построенных на JavaScript фреймворках, хочется отметить готовое решение от 1С-Битрикс для интернет-магазинов. В основе решения все тот же jQueryMobile, отсюда узнаваемые интерфейс и навигация. Несомненное преимущество решения — это готовые шаблоны и структура интерфейсов для типового интернет-магазина. Все интегрировано с компонентами CMS системы «1С-Битрикс: Управление сайтом». В результате, владелец интернет-магазина получает из коробки весьма приятный магазин, готовый принимать и обрабатывать заказы с мобильного телефона. Остается лишь внести необходимые изменения под свои задачи. Познакомиться с решением можно в следующем видео или по ссылке https://www.1c-bitrix.ru/products/cms/features/bitrixmobile.php.

К сожалению, пока у двух других популярных в России коммерческих CMS систем NetCat и UMI.CMS аналогичных решений от производителя найти не удалось.

Генераторы браузерных версий

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

Можно выделить 3 вида таких сервиса:

• Плагины к CMS: позволяют с небольшими затратами создать мобильную версию с каталогом товаров.
• Генераторы по URL: работают с доступными страницами, для них потребуется создавать всю процедуру оформления заказа с нуля.
• Онлайн конструктор мобильной версии сайта: очень эффектный способ, позволяющий сохранить большую часть функционала сайта.

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

Конструктор Mobify

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

Генератор bMobilized

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

Плагины к бесплатным CMS

Для некоторых популярных в России бесплатных CMS, таких как Joomla, Drupal и WordPress существуют плагины, позволяющие генерировать в автоматическом режиме мобильные версии. В их основе используется все тот же jQueryMobile.

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

Генераторы нативных приложений

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

• Короткий доступ к любимому магазину прямо из списка приложений.
• Возможность установки из различных маркетов (AppStore, Android Market,...)
• Быструю загрузку контента с применением кеша.
• Сохранение данных пользователя для комфортной работы.
• Удобство работы пальцем и на небольшом экране.
• Красивые эффекты. Возможность ограниченно использовать программные и аппаратные возможности телефона, но о том, что это дает, мы расскажем подробнее в нативных приложениях.

Наиболее ярким представителем данного класса генераторов является PhoneGap — http://www.phonegap.com/. Данный фреймворк позволяет создавать нативные приложения под разные мобильные платформы, используя только HTML, JavaScript и CSS. Таким образом, не требуется дорогих разработчиков под каждую платформу: Object C, Java и т.д. Фреймворк даёт доступ к различным сервисам телефона: акселерометр, камера, запись аудио и видео, доступ к сети, компас, геолокация, контакты, файлы на телефоне. Phonegap использует урезанный вариант движка WebKit, о котором мы говорили в начале.

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

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

Однако, несмотря на всю красоту решения, недостатками сгенерированной нативной версии являются:

• Медленная скорость работы, нежели у нативных приложений, написанных под конкретную платформу на своём языке (Object C, Java).
• Ограниченность в работе с аппаратными возможностями. Например, дополненную реальность уже не сделаешь.
• Однообразность интерфейсов. Например, в jQueryMobile всегда доступно меню, как в iPhone, которое в телефонах Android нередко скрыто (и доступно при нажатии на кнопку Menu), что может вызывать неудобства у пользователей. Тоже самое и с остальными кнопками на устройствах Android, которых на iPhone просто нет. Так же, с помощью данных фреймворков под Android нельзя написать виджеты для размещения на рабочих столах.
• Ограниченность в написании собственных визуальных компонентов. Разработчику приходится использовать только стандартные компоненты платформы, он не может расширять их возможности.

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

Полноценные нативные приложения

Нативные приложения — это программы, предназначенные для выполнения на операционных системах, в нашем случае — iOS и Android. Интернет-магазин становится программой и тут-то и начинается все самое интересное. Предлагаем познакомиться с возможностями нативных приложений для электронной торговли на западных примерах.

Примерка товаров

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

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

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

Или часы:

Можно обойтись и без создания дорогих 3D-моделей. Например, в виртуальных примерочных одежды.

Или аксессуаров:

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

Поиск похожих товаров

Используя последние технологии в области обработки изображений, с помощью своего телефона можно делать снимок одежды, и, после анализа картинки, приложение будет выдавать похожие товары, либо указывать магазин, в котором его можно приобрести. Ярким примером такого сервиса является приложение на iPhone от Adidas — Adidas Originals.

Пользователь фотографирует свои кроссовки, изображение обрабатывается в приложении, и уже на основе этих данных подбираются модели Adidas, которые максимально соответствуют «оригиналу». Затем, пользователю предлагают заглянуть в один из магазинов поблизости (в радиусе 50 метров), просмотреть каталог продукции (кроссовки можно вращать на 360 градусов) и присоединиться к сообществу бренда на Facebook, где можно узнать последние новости о новых акциях и пополнениях линейки.

Поиск товаров с лучшей ценой

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

Например, приложение на Android Pic2Shop сканирует штрих-код товара, и потом ищет его в различных интернет-магазинах.

Составление списка покупок

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

Приложения для курьеров

В этом году в маркетплейсе 1C-Битрикс для курьеров интернет-магазинов появится мобильное приложение на платформе Android от компании Ареал, интегрированное с продуктом «1С-Битрикс: Интернет-магазин». Курьер будет получать задания по доставке товара, отмечать статус доставки, общаться в чате с оператором, видеть карту с пунктом назначения. Оператор будет знать местоположение курьеров и сможет использовать это для повышения качества логистики.

Навигация по карте

Навигация по карте и дополненная реальность предоставляют широкий спектр возможностей для пользователя. Например, с помощью карты он может видеть все пункты выдачи товаров, находить ближайшие и строить маршруты проезда к ним. Дополненная реальность позволяет значительно расширить данный функционал: пользователь с помощью камеры может видеть в реальном времени, где и на каком расстоянии находятся пункты выдачи товаров. Ярким примером подобного сервиса является приложение «Stella Artois Le Bar Guid».

Геонапоминалки

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

Факторы окружающей среды

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

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

Породажа электронного контента

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

В качестве примера подобного сервиса можно привести приложение от DC Comic­­s.

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

Время разработки

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

В качестве заключения

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