Главное Авторские колонки Вакансии Образование
Выбор редакции:
6 477 21 В избр. Сохранено
Авторизуйтесь
Вход с паролем

5 советов по дизайну сайтов в сфере e-Commerce

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

Любые элементы, начиная от изображений продукции, до правильно расположенных кнопок CTA (Call to Action), влияет на решение посетителя сделать покупку с сайта. Ниже вы найдете советы, которые помогут интернет-магазину привлечь и удержать клиентов.

Используйте профессиональные изображения

b_558910a3632b0.jpg

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

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

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

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

Ведите клиента к покупке

b_558910bded0e1.jpg

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

Сайт wildberries сочетает ссылки с визуальными элементами. Заголовки и фотографии товаров кликабельны, что упрощает навигацию. На каждой странице присутствует яркая CTA кнопка «Добавить в корзину».

С чего начать: Создавайте различное оформление ссылок и CTA кнопок. Применяйте методы линковки при помощи «якорных» ссылок. Добавьте блоки «похожие» и «просмотренные» на страницу товара.

Упрощайте алгоритм покупки

b_558910d62b1d5.jpg

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

При создании и управлении вашим сайтом, рассмотрите эти варианты дизайна:

  • Несколько кнопок «Добавить в корзину» или схожих опций для каждого товара.
  • Изменение состояния корзины, когда добавляется элемент, и кнопка быстрого заказа.
  • Ссылки на корзину в навигации на каждой странице.
  • Яркие цвета и понятные СТА кнопки для добавления товаров в корзину для оплаты.

На сайте ecco можно увидеть все стратегии, описанные выше. На главной странице расположены товары с возможностью добавить в корзину. Когда товар попадает в корзину, ее внешний вид меняется. CTA кнопки большие и яркие, поэтому привлекают внимание.

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

Сосредоточьтесь на навигации

b_558910ed6a904.jpg

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

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

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

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

Ясность и структура

b_5589110a35c77.jpg

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

На сайте Bang & Olufsen используется сетка для витрины магазина, и есть много свободного пространства. Эти два пункта создают ощущение элитарности интернет-магазина, а при взаимодействии с интерфейсом вы получаете только положительные эмоции. С чего начать: Минималистичный и плоский дизайн – это современные тенденции, которые помогут сформировать положительное мнение о сайте. При создании дизайна используйте модульные сетки, свободное пространство, простую типографику. Эти методы помогут вам выделить свой продукт и бренд в глазах клиента.

А если хотите не думать об этих тонкостях − закажите разработку интернет-магазина на сайте shubalab.com. Всех читателей наших статей на Спарк.ру ждет скидка 15%. Чтобы ее получить, используйте слова «E-commerce Спарк» в комментариях к заказу. Ждём от вас отзывов и писем!

Для того, чтобы первыми получать информацию о всех статьях и скидках от Шуба Lab − подписывайтесь на нашу рассылку http://eepurl.com/bmB4X1

+6
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Strela.guru
Разработка и продвижение проектов
Дмитрий Девкалион
Хорошое такое мини пособие
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Рады стараться!
Ответить
Рожь Студия
урожайные видеоролики для бизнеса
Павел 20002
интересно.
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Будем рады отзывам, если вы планируете внедрять что-то из советов, описанных в статье!
Ответить
Дмитрий Ватченков
Возьму на заметку!
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Напишите потом о результатах внедрения)
Ответить
Adilet Erkinbekov
А что вы скажете по поводу дизайна данного шаблона?
http://evick.ru/themforest/glammy/
Он относительно недорогой, не слишком ли он кричащий? Что можете выделить из минусов/плюсов?
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Вполне себе неплохой европейский шаблон.

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

Понятная навигация и множество настроек фильтров в выдаче. Если этот шаблон недорогой − то это хорошее решение для старта, если вы не планируете работать в премиум сегменте)
Ответить
SPARK
Помогаем бизнесам 24х7
Администрация Spark
Спасибо за интересную статью. Анонсировали вас на ЦП:

http://vk.com/wall-33393308_347158
https://www.facebook.com/SMMrussia/posts/965702313454684
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Спасибо и вам, это несомненно поднимает настроение :)
Ответить
MY DRAFT
Инфосистема для стартапов
Евгений Кузнецов
А почему вы сами не используете ваши же советы в создании сайтов?
И почему так любите шрифт «Intro»?
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Евгений, а с чего вы взяли, что не используем?

А почему бы не любить то за что мы заплатили порядочно денег?)
Ответить
AutoCoder
Автоматическое программирование для Wordpress
Михаил Грибов
Начало статьи почти оскорбительное:)
Все эти советы из общих соображений, или есть какие-то реальные экспериментальные данные?
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Эти советы составлены исходя из опыта разработки сайтов, надеюсь они оказались полезны для вас.
Ответить
AutoCoder
Автоматическое программирование для Wordpress
Михаил Грибов
Разработки или использования? Ведь речь о конверсиях идет, разработчику сложно сделать оценку влияния его приемов на реальную работу сайта. Может, совместно с клиентами что-то замеряли и сравнивали? Это было бы интересно.
Ответить
shubalab
Агентство продающего дизайна
Maxim Gordienok
Спасибо за идею для будущей публикации на Спарк, Михаил. Следите за обновлениями.
Ответить
олег кожевников
Алекс, отлично написано, реальный старт-гайд для страждущих до e-commerce!
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Спасибо вам!
Ответить
Магазин Таобао
Cайт (движок) с товарами Taobao на русском языке
Магазин Таобао
сохранил, спасибо
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Всегда пожалуйста!
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.