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

Создаём магазины в интернете, в которых так и хочется что-нибудь купить.
Интернет магазин — это сайт с корзиной и системой оплаты. Создаётся он в 4 шага:
1
Анализируем целевую аудиторию, продумываем мотивы покупки, изучаем конкурентов.
2
Согласуем навигацию и функционал, создаём интерактивный прототип.
4
Делаем программную часть. Выполняем front-end и back-end настройки и передаем управление сайтом. Либо берем на сопровождение.
3
Обсуждаем концепцию и рисуем дизайн под разные платформы. Верстаем десктоп и адаптив версии.

Заказать

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

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

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

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

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

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


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

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

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

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

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

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


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

Интернет магазин чая и кофе Унция
Люди регулярно заказывают чай, делая выбор по картинкам и небольшому описанию. В поле зрения мы разместили только то что нужно клиенту, а действия для покупки сократили до минимума.
Интерьерная галерея 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-библиотек. Может функционировать как веб-фреймворк для разработки одностраничных приложений в реактивном стиле.)

Screenshot_at_Mar_22_16-27-10_b1ef502362.png
Если внедрить умный фильтр, то мета-теги и релевантные заголовки будут генерироваться автоматически. Это даст возможность дополнительно показываться в поисковой выдаче по низкочастотным целевым запросам. Визиты с таких запросов дают хорошую конверсию, что опять таки положительно сказывается на SEO.
ВЫВОД: чем меньше человек тратит времени на поиск товара, тем для него это лучше и он ближе к покупке.

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


Инструмент восьмой
Адаптивность сайта
Уже ВСЕ заходят в интернет со смартфонов, даже бабушки. Потому адаптив под мобильную версию просто обязателен, тут даже спорить не о чем. Но вот соотношение пользователей заходящих со смартфона и с компьютера бывает разным. Потому мы создаём интернет магазин исходя из вашей аналитики.
Если у вас преобладают пользователи мобильных, то сайт создаётся под Mobile Only.
Если аудитория делится между смартфонами и компьютерами примерно поровну, то идём из концепции Mobile First. То есть сначала делается мобильная версия, а затем уже добавляется десктоп.
Если больше пользователей всё таки с ПК и ноутбуков, то применяем метод Desktop First. Тут наоборот - сначала для компьютерной версии, а затем сайт адаптируется под мобильник.


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


Инструмент десятый
Upsell
Данный инструмент позволяет увеличить сумму чека путем предложения более дорогого варианта или продажи дополнительных позиций.
Вот пример созданный нами для винного онлайн-магазина:
Screenshot_at_Mar_22_15-57-19_60520b0dac.png
Мы разместили карту, на которой можно было выбирать регион и конкретный виноградник. Таким образом у человека появляется стремление быть причастным к более высокому уровню и это подталкивает на покупку более дорогого вина.
Помимо этого мы поставили на сайте предложение добавить к вину сыр. Ведь все любят пить вино и закусывать его сыром. Это стало отличным апселом, который увеличил чек корзины.
Мы точно определим цели компании и создадим продукт, который соответствует вашим потребностям. Заполните форму, чтобы рассчитать стоимость работы.