Ошибки в создании мобильных версий интернет-магазинов

Контент

1. На некоторых сайтах в мобильной версии представлен не весь контент. Чаще всего пользователи не догадываются, что контент сократили намеренно. Они ждут, что увидят полную информацию. Разделы, которые нельзя урезать в мобильной версии ни при каких условиях: каталог товаров и помощь или FAQ.
2. Слишком много текста на странице.

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

3. Отсутствие подробных характеристик товара в корзине покупки.

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

4. В большинстве случаев на главной странице нужно представить как минимум 30−40% категорий верхнего уровня. Полная или хотя бы частичная структура каталога на главной помогает новым пользователям представить себе ассортимент сайта, а повторным — быстро перейти в интересующие категории.
5. Разместить на продуктовой странице сайта список сопутствующих товаров, особенно если они входят в ассортимент вашего магазина — ход незамысловатый и обещающий немалую прибыль. Однако стоит визуально отделить сопутствующие товары от содержимого корзины, чтобы избежать путаницы. Желательно разместить список рекомендуемых товаров под кнопкой «Перейти к оформлению заказа», чтобы пользователь мог без проблем перейти к оплате товаров в корзине.

Дизайн

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

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

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

4. Адаптивные мобильные сайты нередко используют в навигации нативное выпадающее меню. Оно неудобно, так как сразу невидно весь список. Нельзя выделить какие-то пункты. Нужно отрисовывать свое выпадающее меню.
5. Избегайте названийвнутри полей. Исключение составляют единичные поля или часто заполняемые формы из двух пунктов — в случае, если необходимо разгрузить интерфейс или того требует эстетика.

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

6. Карточки товаров в каталоге должны быть более компактными. Не просто уменьшенные до определенных размеров, а именно перекомпанованные так, чтобы отображалось больше товаров на странице каталога.

Можно располагать карточки друг под другом или плиткой по две в ряд, например

Технические моменты

1. Проверить, как сайт работает с кнопкой «Назад» браузера. В мобильных версиях пользователи пользуются ей очень активно. Например, при нажатии на кнопку «Назад» в оформлении заказа на 4 этапе, нужно чтобы пользователь попадал на 3 этап, а не на страницу корзины.
2. Также на мобильных бывает часто, что вы долго заполняете форму (доставки или оплаты), но когда ее заполнили – вдруг нужно что-то уточнить. Может вы ошиблись с размером или моделью, в общем нужно вернуться назад. Вы вернулись к товару, убедились, что все правильно, нажали вперед и…все пропало. Сделайте так, чтобы заполненные формы не сбивались, это же касается и фильтров в поиске.
3. Во время покупки не исключены технические сбои: пользователь случайно закрыл страницу, разорвалось соединение и т.д… В случае технической проблемы пользователь должен иметь возможность продолжить заказ с того же места, где остановился. Но часто корзина автоматически очищается, и процесс покупки приходится начинать заново. Это серьёзная ошибка: в таких ситуациях велик риск того, что покупатель откажется от покупки.

Дополнительно

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

Не ленитесь, продумывайте мобильные версии сайтов, хорошо тестируйте. А мобильные версии интернет магазинов — особенно.