Мобильная версия сайта: оформляем правильно карту товара

Мобильная версия сайта: оформляем правильно карту товара

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

А как же уместить все это на экране небольших устройств?

Об этом мы и расскажем в нашей статье.

Функционал и детали о продукции

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

Информация о продукте понятна интуитивно

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

1-uCuDVKyawNCIXBxo4ccYrQ

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

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

1-EM5PmsUrW3B7lz0iMm2Bvg

Уменьшить ввод текста вручную

Много заказов приходится отменять, если человек ошибся в цифре номера, количестве товара и другом. Идеально, когда все поля, где пользователь вводит данные на странице продукта, предугаданы (кроме ФИО и номера телефона, но тут вы можете помочь с выбором оператора, что уже минимизирует ошибку).

Идеальные и красивые изображения

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

1-OIZULK_-jZFmQ3oQ1WsmHg

Пример хорошего изображения, достаточно информативного для карты товара

1-ZNIm6CwBeHoOQWwRCwAdLA

Как не стоит зуммировать товар в мобильной версии сайта

1-h1UkvgkTd9iJo4IOWxsq2A

Как стоит это делать? Клиенту нужно дать возможность самому выбирать степень зуммирования

1-rr9tO0IVnvvfmYbmvthnUw

А еще лучше позволить юзеру пользоваться привычными жестами: свайп для увеличения или двойной тап.

1-GJ4gkyuyAOigaBUQrNegkg

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

Сроки доставки и наличие в магазинах

Когда дело дошло до покупки, второе, что интересует клиента — это когда доставят товар либо его наличие в магазинах. И вот как это это можно легко показать:

1-D8VTDe2aO1oDr-efL3FjWw

1-3Y_xmdk27gJ2bc6cTEpsFQ

Увеличиваем допродажи

А как же увеличить глубину чека, количество товаров? Когда человек положил товар в корзину, вам стоит сделать страницу «чаще всего с этим товаром покупают».

Например, как на скриншоте

1--K0XqZIJQm-cj_Je_iD5pA

И в заключение, примерно 30% пользователей мобильных устройств уходят с сайта, если он плохо оптимизирован под размеры экраны, с нашими советами вы существенно уменьшите этот показатель!

Превью: Depositphotos

Читайте также:

Как стать веб-дизайнером за 10 дней

20 отличных примеров использования карточного UI

Как усовершенствовать UX с помощью карточного дизайна

comments powered by HyperComments
comments powered by HyperComments

Теги

Мы Вконтакте

Яндекс.Метрика