1 010 просмотров 22 сентября 2016


Мобильная версия сайта
интернет-магазина

Делаем сайт
для телефона и планшета

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

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

Техническая часть

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

В популярных CMS поставьте плагин или тему. Они есть у Joomla, WordPress, Drupal и Magento. В плагинах и шаблонах можно настроить отображение адреса: мобильный сайт будет открываться на субдомене (m.your-site.ru) или без переадресации.

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

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

Дизайн

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

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

Мобильная версия интернет-магазина. дизайн кнопки

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

В интернет-магазине есть главная кнопка – оплата. Если она не видна, похожа на другие кнопки, на ней написано что-то непонятное – все это уменьшает количество ваших клиентов. Сделайте ее уникальной, выделите цветом или дизайном. Например, в РФИ БАНКе вы можете подключить интернет-эквайринг и сделать собственный дизайн кнопок оплаты.

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

Когда человек что-то покупает, ему важно знать про условия доставки и возврата. Он всегда должен иметь возможность увидеть это.

Мобильная версия интернет-магазина. доставка и возврат

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

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

Несколько советов

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

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

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

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


Создать идеальный мобильный сайт для интернет-магазина получится не сразу. Оптимизируйте, делайте A/B-тестирование, подписывайтесь на обновления нашего блога и первыми читайте полезные статьи для предпринимателей.