+38 (044) 495-31-30
Украина, г. Киев, ул. Ванды Василевской 7, офис 209

Дизайн интернет-магазина: как сделать красивый и продающий магазин

Автор: Веб-студия "Бизнес Сайт"

Все большее количество людей предпочитает совершать покупки онлайн.

В Украине каждый 6 пользователь сети покупает что-то в Интернете, а это около 2,5 млн людей.

Преимущества торговли онлайн, впрочем, оценили не только потребители, но и владельцы бизнеса. И вместе со средним чеком постоянно увеличивается и количество новооткрывающихся интернет-магазинов. Если бы каждый из них был успешным, во многих крупных городах уже был бы свой Уолл-Стрит. Но в реальности остаться на плаву удается только 10% счастливчиков, которые получают прибыль и регулярно осуществляют продажи. В чем их секрет и как не оказаться среди 90% остальных?
структура интернет-магазина
Первое, что можно сделать, это пропустить этап набивания собственных «шишек» и научиться на чужом опыте. Среди ошибок, которые допускают владельцы интернет-магазинов, чаще всего встречаются следующие:

  • Отсутствие стратегии. Чтобы online-магазин успешно функционировал, недостаточно просто взять и перенести бизнес из оффлайна. В мире e-commerce действуют свои законы, которые нужно учитывать, чтобы достойно конкурировать в любой нише.
  • Слабое УТП или его отсутствие. В условиях высокой конкуренции важно сразу объяснить клиенту, почему он должен купить именно у вас.
  • Непривлекательный дизайн. Посетителю достаточно первых трех секунд, чтобы интуитивно принять решение: остаться на вашем сайте или вернуться к поиску.
  • Непродуманное юзабилити. Доверие к магазину, в том числе, формируется понятной навигацией, привычным расположением кнопок. Если пользователь столкнется со сложностями при поиске товара или оформлении покупки, ему ничего не помешает купить тот же товар у конкурентов.
  • Фото товарных позиций в плохом качестве, небольшом разрешении, нет вида с разных ракурсов (что крайне важно для таких категорий, как одежда, обувь, аксессуары).
  • Отсутствие достаточной информации для совершения покупки. Прежде чем купить что-либо онлайн, человеку важно минимизировать риски и убедиться, что он получит именно то, что ожидает.
  • Неадаптивный дизайн. Это сразу отсекает пользователей смартфонов, планшетов, которые могли бы приобрести ваш товар.

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

Подготовительные работы

Хорошее начало – половина сражения, гласит английская поговорка. Фундамент успешного интернет-магазина закладывается на следующих подготовительных этапах.

  1. Исследование. Именно на этом этапе отсеиваются идеи, которые не принесут прибыль. Маркетолог проводит исследование ниши, анализ магазинов-конкурентов, изучает спрос на основной товар (с помощью планировщика Google Adwords, Yandex Wordstat, Google Trends). На основе полученных данных разрабатывается стратегия продвижения магазина, позиционирование, уникальное торговое предложение, изучается целевая аудитория.
  2. Создание маркетинговой концепции. Согласно этой концепции определяются способы привлечения, удержания и конвертирования целевых посетителей в покупателей интернет-магазина. С учетом поведенческих особенностей ЦА определяется порядок размещения всех ключевых элементов на сайте.
  3. Создание прототипа будущего сайта на основе маркетинговой концепции и современных трендов оформления интернет-магазина, среди которых:
  • Чистый белый фон, который аккумулирует внимание посетителя на товарах и важном контенте.
  • Минимализм. Ничего не должно отвлекать посетителя и мешать ему в совершении покупки.
  • Крупные и красочные фото на главной странице, как способ завладеть вниманием посетителя.
  • Продуманная типографика. Главная задача – понравится посетителю, создать у него приятное впечатление уже при первом знакомстве с сайтом.
  • Преимущественно плоский дизайн. Подробнее о плоском дизайне можно узнать в специальной статье блога.

Главная страница интернет-магазина

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

Помните: у вас есть всего 3 секунды, чтобы убедить посетителя остаться на сайте.

Поскольку в первую очередь взгляд человека падает на центр страницы, лучше привлечь его внимание ярким тематическим изображением с основным товаром. Вот хорошая реализация этой концепции: optoshka.com.ua. В центре главной страницы дизайнер «Бизнес Сайта» поместил слайдер с изображениями основных товаров. Фото на нем сразу приковывает внимание посетителя яркой цветовой гаммой и информирует об основной категории товаров (воздушные шары).
дизайн главной страницы интернет-магазина
Предположим, изображение сработало, и пользователь принял решение остаться. Теперь ему захочется узнать, в какой магазин он попал, заслуживает ли он доверия, стоит ли совершать здесь покупку. Взгляд перемещается в шапку сайта, где необходимо разместить:

  • Логотип компании – всегда находится в верхнем левом углу.
  • Строка поиска.
  • Контактные данные (обязательно – телефоны, дополнительно – адреса и график работы, другие способы связи, кнопка для заказа звонка). По результатам опроса 90% респондентов подтвердили, что становились жертвой мошенников при совершении онлайн-покупок. А значит, доверие клиентов нужно заслужить, и подробная информация о магазине – один из эффективных способов.
  • Корзина (всегда справа).
Здесь же может находиться горизонтальное меню с категориями товара или информационными страницами (доставка и оплата, отзывы, вопрос-ответ и т. д.).

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

Оформление категории и карточек товаров

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

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

Преимуществом будет, если предусмотрена возможность отсортировать товар по цене и другим характеристикам, расположить его на странице в удобной пользователю форме, как это реализовано в магазине autogear.com.ua. Уже на странице категории товар можно купить или перейти к детальному просмотру позиции.
дизайн категории товаров интернет-магазина
Важно: если товара нет в наличии, лучше мягко предупредить об этом клиента – предложить купить под заказ или уведомить о поступлении товара.

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

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

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

Ознакомившись с внешним видом, клиент наверняка заинтересуется описанием товара.

В карточке нужно компактно и легко для восприятия разместить основные характеристики, отзывы и оценки товара покупателями (психологический триггер социального доказательства). Это усилит доверие к магазину.

Хороший пример компактного расположения информации о товаре можно найти на примере магазина Толстосум. Здесь же, в карточке товара, указана информация о способе и стоимости доставки – это важный этап для принятия окончательного решения о покупке. Хорошо работает на этой странице информация о гарантии и возврате, преимуществах покупки именно в этом ИМ. В данном случае, дизайн интернет-магазина Толстосум отличается ненавязчивой подачей информации: в карточке действует система переключения блоков (характеристика, отзывы, описание, видео), контент грамотно структурирован, предусмотрены кнопки обратной связи прямо в карточке товара («Задать вопрос», «Получить скидку»), что способствует созданию доверительных отношений с клиентом.

Здесь же уместно разместить товары для увеличения чека покупки (апсейл) – аксессуары к основному товару, комплекты, предложения со скидкой.
дизайн карточки товара интернет-магазина
Порядок расположения всех элементов в карточке товара должен отвечать логике клиента: Что за товар? Какой вид имеет? Сколько стоит? Как купить и получить?

Эта информация предлагается человеку последовательно, что соответствует маркетинговой модели AIDA: внимание → интерес → потребность → действие.

Корзина покупок и страница оформления заказа

Все та же неумолимая статистика утверждает, что 68% заказов, попавших в корзину, не завершаются оформлением и покупкой. Почему так происходит? В некоторых случаях клиент передумал совершить покупку, приценивался, или просто не готов расставаться с деньгами. Но часто причиной становится неудобный дизайн корзины и страницы оформления, проблемы с редактированием заказа, отсутствие подробной информации о доставке (способы, стоимость, сроки). Какими должны быть страницы корзины и оформления, чтобы клиент совершил покупку?

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

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

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

Личный кабинет: как убедить пользователя зарегистрироваться

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

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

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

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

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

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

оформление личного кабинета

Поисковые фильтры

Чтобы организовать поиск по магазину и облегчить клиенту выбор нужного товара, мало просто внедрить поисковую строку где-нибудь на видном месте.

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

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

Дизайн инфо страниц

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

Выводы

Итак, чтобы создать хороший и продающий дизайн интернет-магазина, нужно учитывать:

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

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

Веб-студия
Автор Веб-студия "Бизнес Сайт"
Скачайте БЕСПЛАТНО книгу
"Сайт, который приносит
$100 000 чистыми в год"
Скачать
Получите скидку -15%
Заполните эту форму