Изучение публичной части сайта

Содержание

Изучение публичной части сайта

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

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

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

Стандартная тема

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

Если, Вы установили PrestaShop с демо-данными, то увидите продукцию Apple.

В то время, как владелец магазина может в любой момент изменить тему публичной части сайта, спасибо огромному разнообразию тем на сайт с дополнениями к PrestaShop (http://addons.prestashop.com/), в этом разделе мы будем рассматривать только стандартную тему.

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

Путешествие по сайту

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

Шапка сайта

Шапка сайта это блок вверху сайта, доступный с любой страницы публичного сайта.

Он содержит несколько основных инструментов и ссылок, которые будут присудствовать на всём сайте:

  • Логотип сайта. Нажатие на логотип переносит покупателя на главную страницу сайта. Стандартный логотип с надписью “YourLogoHere” (ВашЛоготипЗдесь) как-бы намекает, что его следует заменить на собственный логотип вашего магазина, вместо того, чтобы оставлять стандартный вариант висеть дальше.

  • Поисковый движок. The search engine. Многие посетители предпочитают находить нужный товар через поиск, вместо перебора товаров в категориях. Во многих интернет-магазинах это вообще единственный способ нахождения нужной информации.

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

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

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

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

  • Приветствие. Простое приветственное сообщение. Когда покупатель авторизовался на сайте, то приветствие будет вида “Приветствуем, Имя”, со ссылкой на Имени покупателя ведущим на страницу его или её учетной записи.

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

Шапка сайта крайне редко меняется на различных этапах процесса покупки.

Корзина

Важнейшая часть шапки сайта это корзина. По-умолчанию, она свернута и показывает только количество лежащих в ней товаров. Покупатель может кликнуть на неё, для получения краткой информации о корзине, откуда уже можно перейти к оформлению заказа.

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

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

“Подвал” сайта

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

  • Блок “Мой профиль", содержит ссылки на основные страницы профиля пользователя (или страницу входа в систему):

    • Мои заказы. Все прошлые и текущие заказы.

    • Мои кредитные квитанции. Они выдаются при отмене заказа. Могут быть использованы при следующих заказах.

    • Мои сохраненные адреса. Покупатель может внести несколько адресов для доставки.

    • Моя информация. Имя, Фамилия, адрес электронной почты, домашний адрес, номер телефона, дата рождения: вся необходимая информация о покупателе.

    • Промокоды. Купоны на скидки, которые еще не были использованы.

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

  • Блок “Информация” содержит:

    • Три ссылки на списки товаров:

      • Скидки. Все текущие промо-акции.

      • Новые товары. Товары, которые совсем недавно были добавлены.

      • Лидеры продаж. Самые популярные позиции.

    • Четыре ссылки на информационные страницы:

      • Наши магазины

      • Обратная связь

      • Юридическая информация

      • О нас

  • Блок “Следуйте за нами” содержит ссылки на страницы магазина в социальных сетях Facebook и Twitter, а также ссылка на ленту новостей в формате RSS.

  • Блок "Обратная связь", содержит адрес, телефон и e-mail вашей организации.

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

Левая колонка

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

Блок тегов

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

Блок категории

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

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

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

Блок “просмотренные товары”

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

Этот блок служит напоминанием о товарах, которые ранее привлекли внимание покупателя и дают возможность быстро вернуться к ним, если он все же захочет их взять. This block serves as a reminder of the products previously took interest in, and gives a shortcut back to these if he wants to pick them in the end.

Блок поставщиков

Покупатели могут отобразить все товары от выбранного поставщика, независимо от их типа и цены.

Блок производителей

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

Блок CMS

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

Блок рекламы

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

Блок подписки на новости

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

Правая колонка

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

Блок новые товары

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

Блок акции

Этот блок предоставляет информацию вашим покупателям о товарах участвующих в акциях (если таковые имеются), с указанием старой цены и новой, со скидкой.

Блок “Наши магазины”

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

Блок обратной связи

Телефон вашего магазина должен быть на видном месте на любой странице. Это очень важно!

Центральная часть

Здесь происходит вся магия. Центральная часть страницы меняется постоянно, реагируя на запросы посетителя.

Главная страница

Стандартная главная страница представляет все возможности магазина. Слайдер с изображениями служит введением в магазин.

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

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

Страницы со списком товаров

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

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

  • Основное изображение слева.

  • Название и описание по центру.

  • Цена, наличие, кнопка “добавить в корзину” и ссылка на страницу продукта справа.

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

Нажатие на кнопку “добавить в корзину” запускает короткую анимацию, отправляя изображение товара в полет до секции с корзиной.

“Шапка” категории: картинка и изображение-карта

Владелец магазина может включить в заголовок категории изображение с приветственным сообщением.

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

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

Сортировка товаров

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

Заметьте: при просмотре товаров по тегу, функции сортировки не доступны.

Сравнение товаров

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

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

По-умолчанию, покупатели могут сравнить до трех товаров одновременно, но это можно изменить в разделе “товары” в административной части сайта.

Страница товара

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

За изображениями следуют два блока:

  • Краткое описание, где следует указывать наиболее важные данные о товаре.

  • Блок “добавить в корзину” с возможностью выбрать между вариациями товара, указанными владельцем магазина, и количеством товара.

Внизу страницы товара есть секция с вкладками. Обычно присудствуют эти вкладки:

  • Подробная информация. Здесь выводится текст подробного описания, указанного владельцем магазина.

  • Характеристики. Эта вкладка доступна лишь, если владелец магазина указал подробные данные о возможностях товара. Здесь доступна подробная информация, указанная в базе данных. Эти данные также используются для сравнения товаров.

Страница корзины

Нажатие на ссылку “В корзине: ХХ товаров” в шапке сайта, или на кнопку “Оформить заказ” в интерфейсе корзины, переносит покупателя на страницу “Состояние корзины”, которая является первым шагом оформления заказа. Навигация “Хлебные крошки” отражает следющие шаги процесса заказа:

  1. Состояние корзины. Здесь покупатель может убедиться в том, что в корзине лежат все нужные товары и ничего лишнего.

  2. Вход. Где не авторизовавшихся пользователей спрашивают логин с паролем или предлагают создать аккаунт. Этот шаг пропускается, если пользователь уже авторизовался.

  3. Адрес. Где пользователь может выбрать один из ранее введенных им адресов или может указать новый адрес доставки.

  4. Доставка. Где покупатель указывает параметры доставки.

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

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

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

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

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

Нажатие на кнопку “Далее” начинает процесс оформления заказа.

Создание учетной записи клиента

Данный этап является лидером по количеству потерянных клиентов. Именно поэтому в PrestaShop создание учетной записи клиента является просто и понятно процедурой.

По нажатию на “войти” в шапке странице, посетитель попадает на страницу входа в систему, где он (или она) могут заполнить одну из двух форм:

  • Создание новой учетной записи

  • Вход в существующую

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

  • Ваша личная информация. Все что нужно, чтобы однозначно идентифицировать покупателя: имя, фамилия, e-mail (уже заполнен), дата рождения.

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

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

Среди доступных ссылок будет “Добавить мой адрес”. Это будет основной адрес доставки для покупетеля. Потом можно добавить еще столько сколько потребуется.

Покупка товара

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

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

Процесс оформления заказа назван воронкой конверсии, потому что на нем многие интернет-магазины теряют огромное количество клиентов, из-за его запутанности, избытка страниц и огромного количества форм, которые за это время надо заполнить. Подробнее про воронку конверсии (англ.): http://en.wikipedia.org/wiki/Conversion_funnel.

Этот процесс начинается, когда покупатель нажимает на кнопку “Далее” на странице состояния корзины, и всегда представляет собой одну и туже последовательность страниц:

  1. (Если посетитель не вошел в систему) Страница входа в систему, где пользователь может создать учетную запись или войти с помощью существующей.

  2. Страница адреса доставки. Если в учетной записи клиента, нет адреса доставки, покупателю будет отображена форма для создания адреса.

    Два адреса обязательны для заказа:

    • Адрес доставки, куда заказ должен быть отправлен.

    • Платежный адрес, который будет привязан к способу оплаты.

    Если пользователю нужно, чтобы адрес доставки и платежный различались, то он может снять галочку “Использовать адрес доставки как платежный адрес” и выбрать адрес из внесенных ранее и добавить новый.

    Если окажется, что адрес не правильный, покупатель может нажать “Обновить" и исправить его.

    • Принятие условий обслуживания.

    • В зависимости от того, что может предложить магазин, покупатель может выбрать между обычной упаковкой и подарочной (с запиской)

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

Быстрый заказ

Когда анонимный пользователь собирает товары в корзину и нажимает на “Оформить”, странице входа есть два блока: быстрое оформление заказа и адрес доставки.

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

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

Наши магазины

Одна из замечательных возможностей PrestaShop – отображение на карте оффлайн-магазинов к которым относится данный интернет-магазин. Если доступно (в демо версии – доступно), нажатие на «Наши магазины», покажет карту с формой поиска и указанием радиуса поиска.

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

Last updated