Интернет-магазины

Создаём магазины в интернете, в которых так и хочется что-нибудь купить.

Интернет магазин — это сайт с корзиной и системой оплаты. Создаётся он в 4 шага:
01.

Анализируем целевую аудиторию, продумываем мотивы покупки, изучаем конкурентов.

02.

Согласуем навигацию и функционал, создаём интерактивный прототип.

03.

Обсуждаем концепцию и рисуем дизайн под разные платформы. Верстаем десктоп и адаптив версии.

04.

Делаем программную часть. Выполняем front-end и back-end настройки и передаем управление сайтом. Либо берем на сопровождение

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

Ниже мы расскажем вам о нескольких таких инструментах.

Инструмент первый

Customer Journey Map

Этапы CJM

  1. Составление собирательного образа покупателя. Нескольких образов.
  2. Определение точек соприкосновения с клиентом. Где и как мы можем встретиться.
  3. Нахождение препятствий на пути к покупке. И особенно скопление таких препятствий.
  4. Оценивание трудозатрат на уборку проблемных мест. Выбор оптимальных вложений.
  5. Построение нового, максимально удобного пути клиента. Это и есть цель CJM.
Инструмент второй

Удобный интерфейс

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

Чтобы такого не случилось важно хорошо проработать UX-дизайн и User flow*

Мы это делаем хорошо.

 

*(Переход пользователей от одного сценария взаимодействия с интерфейсом к другому. Пользовательский маршрут)

Инструмент третий

Дизайн система для web

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

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

Существует большой выбор современных стилей в дизайне: Метро, Материал, Флэт, Неоморфизм, Сквеморфизм, Ар-деко, Ретро, Hi-tech, Полигональный и Рисованный стили.

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

Инструмент четвертый

Интерактив

Интерактивные элементы дизайна убивают сразу две задачи:

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

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

Инструмент пятый

Поиск по товарам

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

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

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

Рассмотрим два примера:

 

 

 

 

Интернет магазин чая и кофе Унция

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

Screenshot at Mar 22 15-15-15

 

 

Интерьерная галерея Stilhaus

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

Инструмент шестой

Умная фильтрация для SEO

Фильтр по товарам удобным сделали. Но его же можно сделать ещё и инструментом для приведения дополнительных посетителей! Как? Да вот так:

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

  • Показываются get-параметры в адресной строке
  • Нет уникальных мета-тегов
  • H1 заголовки не меняются на актуальные

А также если верстка идёт на технологиях SPL*,React**, Angular***, Vue****, то не так просто добиться изменения url адресов. Но мы это делаем.

(*SPL — это сокращение от Smart Programming Language, или «Умный язык программирования». SPL предназначается для того чтобы дать возможность легко и эффективно создавать программы, работающие на любых устройствах — планшетах, ноутбуках и смартфонах на базе Windows 10)

(**React — это декларативная, гибкая и эффективная JavaScript библиотека для создания пользовательских интерфейсов. Она даёт возможность собирать сложный UI из небольших изолированных кусочков кода, которые называются «компонентами»)

(***Angular — JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений Его цель — расширение браузерных приложений на основе MVC-шаблона, а также упрощение тестирования и разработки.)

(****Vue — JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов. Легко интегрируется в проекты с использованием других JavaScript-библиотек. Может функционировать как веб-фреймворк для разработки одностраничных приложений в реактивном стиле.)

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

ВЫВОД:  чем меньше человек тратит времени на поиск товара, тем для него это лучше и он ближе к покупке.

Инструмент седьмой

Интеграция с 1С

В услугу по созданию интернет магазина может входить и подключение к вашей 1С, если она есть. Интеграция даёт следующие возможности:

  1. Выгрузка на сайт данных о товарах - цены, характеристики, изображения и прочее.
  2. Обновление и обмен данными сайта и 1С в режиме реального времени.
  3. Выгрузка информации по расписанию, в назначенное время.
  4. Показ наличия товара в интернет магазине, а в 1С точное количество остатков.
  5. Загрузка данных контрагентов на сайт интернет-магазина из 1С.
  6. Уведомление об ошибках в процессе загрузки.
  7. Прочие автоматизационные процессы

Всё это сильно упрощает работу компании и даёт актуальную информацию пользователю сайта.

Инструмент восьмой

Адаптивность сайта

Уже ВСЕ заходят в интернет со смартфонов, даже бабушки. Потому адаптив под мобильную версию просто обязателен, тут даже спорить не о чем. Но вот соотношение пользователей заходящих со смартфона и с компьютера бывает разным. Потому мы создаём интернет магазин исходя из вашей аналитики.

Если у вас преобладают пользователи мобильных, то сайт создаётся под Mobile Only.

Если аудитория делится между смартфонами и компьютерами примерно поровну, то идём из концепции Mobile First. То есть сначала делается мобильная версия, а затем уже добавляется десктоп.

Если больше пользователей всё таки с ПК и ноутбуков, то применяем метод Desktop First. Тут наоборот - сначала для компьютерной версии, а затем сайт адаптируется под мобильник.

Инструмент девятый

Система оплаты

Среди вариантов оплаты на сайте есть два пути:

  • Агрегатор
    Это специализированный сервис - Робокасса, ЯндексКасса и другие. Плюсы агрегаторов в большом количестве способов оплаты, помимо банковских карт, а также минимальные время на подключение. За это нужно платить высокой комиссией. Причем не только с продавца, но и с покупателя.

     
  • Эквайринг
    Это прямой договор с конкретным банком. Плюсы в низком проценте комиссии и скорости поступления денег на расчетный счет. Минус в том, что принимать оплаты можно только с банковских карт определенных платежных систем, которые есть у выбранного банка.
Инструмент десятый

Upsell

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

Вот пример созданный нами для винного онлайн-магазина:

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

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

Давайте начнём

Хочу интернет магазин от Cake

Мы всегда развиваемся и постоянно находим новые идеи и инструменты. А главное — не боимся глубоко прорабатывать проект клиента. Например мы можем прийти в магазин и послушать как продавец общается с покупателем, чтобы лучше понять психологию компании. С нами вы точно определите что нужно и что не нужно вашему сайту и мы возьмем на себя создание интернет магазина под ключ. Заполните форму и получите расчет стоимости работ.