ГлавнаяБлогКак должен выглядеть интернет-магазин продуктов: 15 правил хорошего интерфейса
Как должен выглядеть интернет-магазин продуктов: 15 правил хорошего интерфейса
Главная задача дизайна в интернет-магазине продуктов — конвертировать посетителей в покупателей. Чтобы клиенты не уходили к конкурентам, нужно спланировать пользовательский путь от главной страницы сайта до оформления заказа, соблюдая баланс между уникальностью и юзабилити.
Правильный дизайн интуитивно понятен: он включает в себя удобную навигацию по продуктам, логичные категории и фильтры, простоту оформления заказа. На какие еще элементы в интерфейсе интернет-магазина продуктов следует обратить особое внимание при разработке, спросили у нашего UX/UI-дизайнера Сергея Рогова.
Баннеры являются одним из инструментов для увеличения конверсии на сайте. На главной странице можно размещать информацию об акциях, товарах дня, новые рецепты или подборки товаров. Главное, чтобы это было заметно, но не создавало визуальный шум. Важно, что 84% пользователей взаимодействуют только с первым изображением на карусели, не просматривая дальше, поэтому предусмотрите динамическую смену баннеров.
Баннер на главной странице «ВкусВилл» включает в себя и акции, и рецепты, и подборки
2. Установите «умный» поиск
Поле для поиска должно быть видимым и располагаться в привычном месте для пользователя. Лучше всего выделить строку поиска графически, так покупатели ее точно заметят. Хороший тон современного поиска в интернет-магазине: автоподстановка, коррекция опечаток и поиск по синонимам.
Мгновенная автоподстановка в интернет-магазине «Продуктовая база №1», но релевантность выдачи оставляет желать лучшего
Избежать подобных проблем можно с модулем «Живой поиск». С помощью него можно настроить внешний вид, задать любые условия поиска, использовать автоподсказки и многое другое. Потеря покупателей из-за запутанного процесса поиска и нерелевантной выдачи исключена.
3. Добавьте дополнительное меню с тематическими разделами каталога
Чтобы у покупателя был быстрый доступ к популярным товарам и подборкам, их можно вынести в отдельное меню. Обычно его располагают вверху страницы, то есть там, куда сразу же попадает взгляд пользователя.
Тематические разделы каталога на маркетплейсе «ЕшьДеревенское»
4. Используйте качественные фотографии
Привлекательные фотографии еды могут многое рассказать покупателю о вашем продукте, даже когда он не может его попробовать. Загрузка качественных изображений товаров важна для повышения продаж.
Фотографии продуктов должны вызывать аппетит и быть оформлены в едином стиле. В идеале стоит обратиться к фуд-фотографам. При фотографировании следует использовать естественный свет, простой и неброский фон, пробовать разные ракурсы и добавлять триггеры, вызывающие аппетит. Детали упаковки или текстура продукта также должны быть видны.
Интересное решение на сайте «Фермы Никола-Ленивец»: фотографии овощей с грядки хорошо передают ощущение свежести продуктов
Разный фон карточек товара, нет единообразия сервировки и освещения. В результате продукты не кажутся такими аппетитными, а сайт не вызывает доверия
Качественные фотографии фуршетов на маркетплейсе услуг Event.top: сохранен единый стиль, покупатель может рассмотреть всё, что входит в состав сетов
5. Добавьте инфографику
Люди выбирают товары на основе разных характеристик, но некоторые не хотят тратить время на изучение всех параметров. Это требует времени: нужно открыть карточку товара, найти вкладку с характеристиками и прочитать их. Если важная информация будет сразу видна, покупателям будет проще и быстрее принять решение о покупке. Характеристики товара можно добавлять в виде инфографики на основное фото продукта или в виде дополнительных изображений на карточке товара.
Продавец добавил характеристики меда на главные фото: вид меда, год сбора, вес банки. Покупателю не нужно искать их в описании
6. Составляйте подробное описание
В описании товара повторите информацию с упаковки: состав, калорийность, условия хранения, название производителя. Это поможет покупателям принять решение о покупке. Укажите особые отметки, например «в составе есть аллерген», «подходит для людей с диабетом», «вегетарианский», «можно в пост». Если у ваших продуктов особые свойства или конкурентное преимущество, например, если вы производите безглютеновое печенье, укажите это в описании.
Описание товаров во «ВкусВилл» закрывает все вопросы покупателя в один клик
А вот так лучше не делать. Такое замысловатое описание бесполезно для покупателя, который интересуется качеством продукта
7. Сокращайте путь к оформлению заказа
Чем меньше шагов нужно сделать покупателю для оформления заказа, тем больше вероятность, что он совершит покупку. Упрощение процесса покупки увеличивает конверсию и привлекает больше клиентов. Дайте возможность быстрого просмотра продукта и быстрого перехода к оформлению заказа, чтобы покупатель не успел передумать.
Во «ВкусВилл» перейти на страницу оформления заказа можно с помощью всплывающего окна на любой странице сайта
Быстрый просмотр продуктов на сайте «Перекрестка»
Сократить путь покупателя можно, используя гостевые заказы. Клиенту не нужно регистрироваться, он просто оформляет заказ. Но это создает определенные проблемы в администрировании, так как появляются заказы никак не привязанные к пользователям интернет-магазина. Решить проблему можно автоматически создавая аккаунт пользователю уже после успешного оформления заказа. Для этого в CS-Cart есть модуль «Автоматическое создание аккаунта пользователя».
8. Опции товара добавляйте на карточку, а не в каталог
Все доступные для заказа варианты товара лучше добавить в одну карточку, а не перегружать каталог однотипными товарами. Например, как это делают пиццерии. На карточке товара удобно размещены кнопки выбора диаметра, вида теста, остроты. При выборе опций — автоматически меняется цена. Больше о том, как еще рестораны могут зарабатывать онлайн.
Варианты приготовления пиццы на сайте «Додо Пицца»
Важно, чтобы при выборе определенной опции, менялось и изображение товара. Это вызывает аппетит и помогает покупателю убедится в правильности выбора. Чтобы загрузить неограниченное число изображения для опций в CS-Cart, есть модуль «Дополнительные изображения для опций товаров».
9. Используйте блок рекомендуемых товаров
Когда посетитель уже настроен заказать, не сложно подтолкнуть его к дополнительной покупке. Добавьте на карточку товара блоки «С этим товаром часто покупают», «Вам может понравиться» и подобные. Это хорошо стимулирует кросс-продажи. Например, если посетитель магазина заказал упаковку молотого кофе, можно предложить конфеты или шоколад. Дополнительные товары особенно актуальны при доставке готовых блюд. Например, если покупатель заказывает роллы, его заинтересует ассортимент соусов и добавок. Чем больше выбора у клиента, тем выше прибыль.
Дополнительные блоки можно размещать как на карточке товара, так и в корзине. Это одинаково хорошо влияет на пользовательский опыт. Где именно размещать блок «Похожие товары» и «С этим товаром покупают», зависит от специфики интернет-магазина.
Дополнительные блоки на маркетплейсе «ЕшьДеревенское» находятся на каждой карточке товара
Суши-бар «Farfor» предлагает дополнительные товары в корзине перед оформлением заказа
10. Добавьте оценки и отзывы
Перед покупкой часто возникают опасения, что продукт может быть ненадлежащего качества. Позаботьтесь о том, чтобы покупатели могли увидеть отзывы и оценки, не покидая карточку товара и не переходя на сторонние сайты. Сделайте эти разделы максимально удобными и доступными, это повысит доверие к товару. Оценки и отзывы также работают как социальное доказательство: если у продукта стоит пять звезд, возникает доверие и желание его купить.
Подробная система оценок и отзывов на сайте «ВкусВилл»
11. Предусмотрите возможность гибко управлять корзиной
Удобство пользователя состоит не только в том, чтобы легко добавлять товары в корзину, но и управлять ими по своему усмотрению. Например, удалить товар, если покупатель передумал, изменить количество и т.д. Выбранные товары должны сохраняться даже после закрытия окна браузера.
Управление товарами в корзине на сайте «ТортБери»
12. Сохраняйте информацию в личном кабинете
Удобный личный кабинет тот, в котором пользователь может следить за статусом заказа, видеть историю покупок, в один клик повторить заказ.
История заказов в личном кабинете «СберМаркета»
13. Добавьте страницы, которые ответят на вопросы покупателей
Каждый интернет-магазин пытается отстроиться от конкурентов и убедить покупателей, что именно их продукты нужно купить. Основной акцент делают на особенностях производства, сырье и поставщиках. Особенно это актуально для локальных фермерских или узкоспециализированных магазинах.
Чтобы не перегружать карточку товара избыточной информацией, лучше всего вынести интересные факты и конкурентные преимущества на отдельную страницу «О нас» или «Часто задаваемые вопросы».
Страница с концепцией бизнеса в интернет-магазине ZozhDessert
14. Используйте блог для нативной рекламы товаров
Рецепты на сайтах или в социальных сетях — один из драйверов роста покупок в сегменте e-grocery. Размещайте их в блоге, чтобы нативно рекламировать ваши продукты. Предусмотрите удобную навигацию, чтобы посетитель мог добавлять продукты в корзину непосредственно со страницы рецепта. В CS-Cart привязать рецепты к продуктам можно с помощью модуля «Расширенный блог».
Внешний вид рецепта на маркетплейсе «СвоёРодное»: есть вкладка «Продукты из рецепта» и добавление товаров в корзину в один клик
15. Проверьте адаптивность и разработайте приложение
Большая часть пользователей делают заказы продуктов и доставку еды через смартфон. Проверьте, что у них не будет проблем попасть в нужные кнопки, найти нужную информацию без лишних кликов и прокруток, картинки должны влезать в ширину экрана.
Возможно, стоит инвестировать в создание мобильного приложения, так как это даст конкурентное преимущество и упростит покупку для покупателей. Но при создании приложения не забудьте, что его основная функция должна быть простой и понятной. Приложение должно использовать преимущества смартфона: быстрый доступ к мессенджерам, автозаполнение форм, регистрацию через социальные сети, мобильную оплату.
UX/UI-дизайн от Cart-Power — это не просто красивый внешний вид вашего сайта. Мы разрабатываем интернет-магазины и food-сервисы, которые решают проблемы пользователей при любом сценарии взаимодействия, а в результате — больше продают.
Какой функционал должен быть на сайте… Что обязательно нужно предусмотреть для площадки по сбору пожертвований, чтобы она была эффективной и соответствовала законодательству. Много примеров.
Как открыть интернет-магазин одежды и обуви По данным Яндекс.Маркета одежду и обувь покупают чаще остальных товаров онлайн. Описали пошаговый план, как открыть свой онлайн-магазин в fashion…
Как должен выглядеть интернет-магазин продуктов: 15 правил хорошего интерфейса
Главная задача дизайна в интернет-магазине продуктов — конвертировать посетителей в покупателей. Чтобы клиенты не уходили к конкурентам, нужно спланировать пользовательский путь от главной страницы сайта до оформления заказа, соблюдая баланс между уникальностью и юзабилити.
Правильный дизайн интуитивно понятен: он включает в себя удобную навигацию по продуктам, логичные категории и фильтры, простоту оформления заказа. На какие еще элементы в интерфейсе интернет-магазина продуктов следует обратить особое внимание при разработке, спросили у нашего UX/UI-дизайнера Сергея Рогова.
1. Используйте баннеры на главной странице
Баннеры являются одним из инструментов для увеличения конверсии на сайте. На главной странице можно размещать информацию об акциях, товарах дня, новые рецепты или подборки товаров. Главное, чтобы это было заметно, но не создавало визуальный шум. Важно, что 84% пользователей взаимодействуют только с первым изображением на карусели, не просматривая дальше, поэтому предусмотрите динамическую смену баннеров.
2. Установите «умный» поиск
Поле для поиска должно быть видимым и располагаться в привычном месте для пользователя. Лучше всего выделить строку поиска графически, так покупатели ее точно заметят. Хороший тон современного поиска в интернет-магазине: автоподстановка, коррекция опечаток и поиск по синонимам.
Избежать подобных проблем можно с модулем «Живой поиск». С помощью него можно настроить внешний вид, задать любые условия поиска, использовать автоподсказки и многое другое. Потеря покупателей из-за запутанного процесса поиска и нерелевантной выдачи исключена.
3. Добавьте дополнительное меню с тематическими разделами каталога
Чтобы у покупателя был быстрый доступ к популярным товарам и подборкам, их можно вынести в отдельное меню. Обычно его располагают вверху страницы, то есть там, куда сразу же попадает взгляд пользователя.
4. Используйте качественные фотографии
Привлекательные фотографии еды могут многое рассказать покупателю о вашем продукте, даже когда он не может его попробовать. Загрузка качественных изображений товаров важна для повышения продаж.
Фотографии продуктов должны вызывать аппетит и быть оформлены в едином стиле. В идеале стоит обратиться к фуд-фотографам. При фотографировании следует использовать естественный свет, простой и неброский фон, пробовать разные ракурсы и добавлять триггеры, вызывающие аппетит. Детали упаковки или текстура продукта также должны быть видны.
5. Добавьте инфографику
Люди выбирают товары на основе разных характеристик, но некоторые не хотят тратить время на изучение всех параметров. Это требует времени: нужно открыть карточку товара, найти вкладку с характеристиками и прочитать их. Если важная информация будет сразу видна, покупателям будет проще и быстрее принять решение о покупке. Характеристики товара можно добавлять в виде инфографики на основное фото продукта или в виде дополнительных изображений на карточке товара.
6. Составляйте подробное описание
В описании товара повторите информацию с упаковки: состав, калорийность, условия хранения, название производителя. Это поможет покупателям принять решение о покупке. Укажите особые отметки, например «в составе есть аллерген», «подходит для людей с диабетом», «вегетарианский», «можно в пост». Если у ваших продуктов особые свойства или конкурентное преимущество, например, если вы производите безглютеновое печенье, укажите это в описании.
7. Сокращайте путь к оформлению заказа
Чем меньше шагов нужно сделать покупателю для оформления заказа, тем больше вероятность, что он совершит покупку. Упрощение процесса покупки увеличивает конверсию и привлекает больше клиентов. Дайте возможность быстрого просмотра продукта и быстрого перехода к оформлению заказа, чтобы покупатель не успел передумать.
Сократить путь покупателя можно, используя гостевые заказы. Клиенту не нужно регистрироваться, он просто оформляет заказ. Но это создает определенные проблемы в администрировании, так как появляются заказы никак не привязанные к пользователям интернет-магазина. Решить проблему можно автоматически создавая аккаунт пользователю уже после успешного оформления заказа. Для этого в CS-Cart есть модуль «Автоматическое создание аккаунта пользователя».
8. Опции товара добавляйте на карточку, а не в каталог
Все доступные для заказа варианты товара лучше добавить в одну карточку, а не перегружать каталог однотипными товарами. Например, как это делают пиццерии. На карточке товара удобно размещены кнопки выбора диаметра, вида теста, остроты. При выборе опций — автоматически меняется цена. Больше о том, как еще рестораны могут зарабатывать онлайн.
Важно, чтобы при выборе определенной опции, менялось и изображение товара. Это вызывает аппетит и помогает покупателю убедится в правильности выбора. Чтобы загрузить неограниченное число изображения для опций в CS-Cart, есть модуль «Дополнительные изображения для опций товаров».
9. Используйте блок рекомендуемых товаров
Когда посетитель уже настроен заказать, не сложно подтолкнуть его к дополнительной покупке. Добавьте на карточку товара блоки «С этим товаром часто покупают», «Вам может понравиться» и подобные. Это хорошо стимулирует кросс-продажи. Например, если посетитель магазина заказал упаковку молотого кофе, можно предложить конфеты или шоколад. Дополнительные товары особенно актуальны при доставке готовых блюд. Например, если покупатель заказывает роллы, его заинтересует ассортимент соусов и добавок. Чем больше выбора у клиента, тем выше прибыль.
Дополнительные блоки можно размещать как на карточке товара, так и в корзине. Это одинаково хорошо влияет на пользовательский опыт. Где именно размещать блок «Похожие товары» и «С этим товаром покупают», зависит от специфики интернет-магазина.
10. Добавьте оценки и отзывы
Перед покупкой часто возникают опасения, что продукт может быть ненадлежащего качества. Позаботьтесь о том, чтобы покупатели могли увидеть отзывы и оценки, не покидая карточку товара и не переходя на сторонние сайты. Сделайте эти разделы максимально удобными и доступными, это повысит доверие к товару. Оценки и отзывы также работают как социальное доказательство: если у продукта стоит пять звезд, возникает доверие и желание его купить.
11. Предусмотрите возможность гибко управлять корзиной
Удобство пользователя состоит не только в том, чтобы легко добавлять товары в корзину, но и управлять ими по своему усмотрению. Например, удалить товар, если покупатель передумал, изменить количество и т.д. Выбранные товары должны сохраняться даже после закрытия окна браузера.
12. Сохраняйте информацию в личном кабинете
Удобный личный кабинет тот, в котором пользователь может следить за статусом заказа, видеть историю покупок, в один клик повторить заказ.
13. Добавьте страницы, которые ответят на вопросы покупателей
Каждый интернет-магазин пытается отстроиться от конкурентов и убедить покупателей, что именно их продукты нужно купить. Основной акцент делают на особенностях производства, сырье и поставщиках. Особенно это актуально для локальных фермерских или узкоспециализированных магазинах.
Чтобы не перегружать карточку товара избыточной информацией, лучше всего вынести интересные факты и конкурентные преимущества на отдельную страницу «О нас» или «Часто задаваемые вопросы».
14. Используйте блог для нативной рекламы товаров
Рецепты на сайтах или в социальных сетях — один из драйверов роста покупок в сегменте e-grocery. Размещайте их в блоге, чтобы нативно рекламировать ваши продукты. Предусмотрите удобную навигацию, чтобы посетитель мог добавлять продукты в корзину непосредственно со страницы рецепта. В CS-Cart привязать рецепты к продуктам можно с помощью модуля «Расширенный блог».
15. Проверьте адаптивность и разработайте приложение
Большая часть пользователей делают заказы продуктов и доставку еды через смартфон. Проверьте, что у них не будет проблем попасть в нужные кнопки, найти нужную информацию без лишних кликов и прокруток, картинки должны влезать в ширину экрана.
Возможно, стоит инвестировать в создание мобильного приложения, так как это даст конкурентное преимущество и упростит покупку для покупателей. Но при создании приложения не забудьте, что его основная функция должна быть простой и понятной. Приложение должно использовать преимущества смартфона: быстрый доступ к мессенджерам, автозаполнение форм, регистрацию через социальные сети, мобильную оплату.
UX/UI-дизайн от Cart-Power — это не просто красивый внешний вид вашего сайта. Мы разрабатываем интернет-магазины и food-сервисы, которые решают проблемы пользователей при любом сценарии взаимодействия, а в результате — больше продают.
Узнайте как инновации и новейшие технологии вдохновляют дизайнеров. От органических форм до расширенной реальности – будущее веб-дизайна уже здесь.
Получите консультацию специалиста по вашему проекту
Получите консультацию специалиста по вашему проекту
Другие статьи этой категории