## **Тема 5**<br>Электронная поддержка покупателей в потребительском секторе (c) [Яценко Р.М.](Roman.Yatsenko@hneu.net), 2010-2020 ---- ### Презентация <img src='https://chart.googleapis.com/chart?cht=qr&chl=https%3A%2F%2Fhackmd.io%2F%40YaRo%2FE-business-topic-05&chs=300x300&choe=UTF-8&chld=L|2' alt=''> https://hackmd.io/@YaRo/E-business-topic-05 ---- ### Содержание 1. [Понятие и функции Интернет-магазина](#/1) 2. [Технология приобретения товаров в Интернет-магазине](#/2) 3. [Основные принципы юзабилити для Интернет-магазина](#/3) 4. [Проектирование Интернет-магазина](#/4) --- ## 1. Понятие и функции Интернет-магазина ---- ### Определение _Интернет-магазин_ -- это компания, осуществляющая торговлю в сети Интернет с помощью web-сайта или мобильного приложения ---- ### Бизнес-процессы Интернет-магазина * выбор товаров * оформление заказов * проведение расчетов * отслеживание выполнения заказов * в случае продажи информационных товаров или предоставления информационных услуг -- доставка с помощью сети Интернет ---- ### Задачи Интернет-магазина * Предоставление помощи онлайн-покупателю * Регистрация покупателей * Предоставление интерфейса к базе данных продаваемых товаров * Работа с электронной корзиной * Оформление заказов с выбором метода оплаты, доставки, страховки * Резервирование товаров на складе * Проведение расчетов (эл. формы оплаты) или контроль оплаты (традиц. формы) ---- * Формирование заявок на доставку товаров * Предоставление покупателю средств отслеживания выполнения заказов * Доставка товаров * Сбор и анализ маркетинговой информации * Обеспечение безопасности личной информации покупателей * Автоматический обмен информацией с бэк-офисом ---- ### Преимущества - для посещения Интернет-магазина не надо никуда идти - можно отслеживать выполнение заказа - снижение себестоимости процесса продаж - широкий ассортимент ---- ### Недостатки - надо ждать высполнения заказа - покупатели могут легко перейти к конкурентам - в реальном магазине товар можно оценить "вживую" - "Мертвые души" в каталогах товаров ---- ### Правова база Согласно ЗУ об электронной коммерции приобретение товара через интернет *приравнивается к «обычной» покупке*, а электронная форма соглашения -- к письменной Все операции в сети должны осуществляться с использованием *«одноразового идентификатора»* -- цифро-буквенного кода, который отправляется покупателю на почту или мобильный телефон и используется для верификации соглашения ---- ### Подтверждение сделки Закон обязывает продавца предоставить покупателю *подтверждение электронной сделки* (квитанцию, товарный или кассовый чек, талон и т.д.), а также указать полную информацию о себе: наименование, местонахождение, адрес электронной почты, код ЕГРПОУ и др. ---- ### Структура * Каталог товаров с виртуальным корзиной (фронт-офис) * Система оформления заказов * Система приема платежей * Система учета и контроля выполнения заказов * Бэк-офис ---- ### Программное обеспечение бэк-офиса - база данных клиентов с историей заказов - база данных заказов с отслеживанием их выполнения - система автоматизированного складского учета и бухгалтерии - аналитические программы для менеджеров - клиентская часть системы Интернет-банкинга - ... ---- ### Дополнительные разделы * личный кабинет * общая информация о товаре * о специфике товарного ассортимента * форма быстрого поиска нужного товара * помощь в навигации и покупке * информация об оплате и доставке * новости целевого рынка * ответы на часто задаваемые вопросы --- ## 2. Технология приобретения товаров в Интернет-магазине ---- <img src="https://i.imgur.com/P2InG1n.png" style="width: 60%; border-width:0;" /> ---- ### Каталог товаров Первый интерактивный элемент интерфейса, с которым сталкивается пользователь -- это каталог товаров, отражающий товарный ассортимент Интернет-магазина Для обеспечения быстрого поиска необходимой информации используется автоматизированная система поиска, которая работает по заданным клиентом параметрам (*фильтрация*) ---- ### Типы корзин * стандартная * основная * вспомогательная (wish list) * типовая * корпоративная ---- ### Регистрация и оформление Важная составляющая взаимодействия покупателя и магазина, в которой покупатель сообщает магазину данные, необходимые для: 1. Идентификации (имя пользователя (почта), пароль) 2. Непосредственного осуществления покупки (ФИО, адрес, телефон, способ оплаты и доставки) ---- ### Сбор информации В Интернет-магазинах используется принцип *персонализации*, основанный на технологиях *профайлинга* -- систематического сбора и анализа статистической информации о покупателях ---- ### Обработка заказа * подтверждение и уточнение заказа * резервирование товаров на складе * оплата (платежные системы) * оформление документов на доставку ---- ### Виды доставки * курьер * самовывоз * почта ---- ### Способы оплаты товаров <img src="https://i.imgur.com/DMOot9r.png" style="width: 45%; border-width:0;" /> --- ## 3. Основные принципы юзабилити для Интернет-магазина ---- ### Выразительная визуализация продукта  ---- ### Быстрая загрузка <img src="https://i.imgur.com/es2nnw6.png" style="width: 60%; border-width:0;" /> Согласно Kiss Metrics, 47% потребителей ожидают, что страница загрузится за менее чем 2 секунды, а 40% людей оставляют сайт, если он грузится более 3 секунд ---- ### Подробные описания продуктов  ---- ### Пространственная навигация  ---- ### Ясный и целевой Call-To-Action <img src="https://i.imgur.com/dp2Y8kT.png" style="width: 60%; border-width:0;" /> ---- ### Знаки доверия  ---- ### Информация о наличии товара на складе <img src="https://i.imgur.com/HAxuTXv.png" style="width: 60%; border-width:0;" /> --- ## 4. Проектирование Интернет-магазина ---- ### Команда проекта Для проектирования такой объемной и специфической задачи понадобится целая команда: * руководитель проекта * бизнес-аналитик * маркетолог * специалист по электронной коммерции * UX/UI дизайнер * сторонние эксперты-консультанты для отдельных этапов, таких как требования к дизайну или требования по технологиям ---- ### Этапы проектирования 1. [Сбор требований (брифинг)](#/4/3) 2. [Исследование конкурентов](#/4/6) 3. [Целевая аудитория](#/4/8) 4. [Задачи-проблемы-решения](#/4/11) 5. [Формирование стратегии](#/4/15) 6. [Сценарии поведения](#/4/27) 7. [Структура сайта](#/4/34) 8. [Прототипирование](#/4/37) 9. [Юзабилити тестирование](#/4/45) 10. [Техническое задание](#4/47) ---- ### 1. Сбор требований (брифинг) Сбор всей основной информации от заказчика: * основная идея * желаемый результат * цели инициатора проекта (глобальные и локальные) * критерии успеваемости * целевая аудитория * конкуренты * ограничения ---- ### Варианты организации бизнес-процессов 1. Интернет-магазин создается как дополнение к уже существующему офлайн-бизнесу, следовательно, заказчик уже использует учетные системы и придется с ними интегрироваться, или переделывать 2. Интернет-магазин создается как независимый бизнес, следовательно, и все бизнес-процессы для него нужно будет создавать с нуля ---- ### Фиксация требований На выходе у нас получается текстовый документ (_бриф_) с большим количеством информации от клиента Этот документ нужно дать на утверждение заказчику, чтобы он подтвердил, что все верно и ничего не потеряно ---- ### 2. Исследование конкурентов Методы анализа: * опрос участников рынка (мини-исследование) * разнообразные рейтинги * статьи по рынку, загуглить * SWOT-анализ Очень важно искать проекты в англоязычной части Интернета, где можно позаимствовать интересные идеи ---- ### Виды конкурентов * прямые -- работают на том же рынке и предлагают аналогичный продукт * косвенные -- имеют подобные продукты и могут удовлетворять потребности, на которые нацелен проект Для проектирования важен анализ функционала магазинов конкурентов, интерфейсы основных страниц (главная страница товара, корзина и т.д.) и очень важна маркетинговая составляющая ---- ### 3. Целевая аудитория (ЦА) Необходимо составить общий портрет ЦА, разбив его на четыре группы, в каждой из которых будут различные критерии, которые могут влиять на функциональность и интерфейс: 1. Социально-демографические характеристики 2. Психографические характеристики 3. Поведенческие характеристики 4. Географические характеристики <!-- Социально-демографические характеристики: пол, возраст, образование, уровень дохода, род занятий. Информация, которая нам нужна для закладывания правильной основы. Например, сайт для подростков 15-18 лет будет отличаться от сайта для пожилых людей в возрасте 60+ лет. Психографические характеристики: стиль жизни, особенности личности, черты характера, жизненная позиция, система ценностей. Более ценная информация для проектирования, чем первая группа критериев. Например, если мы знаем, что наша ЦА больше всего ценит время, мы можем спроектировать простой интерфейс и дать возможность получать не весь контент, а самое ценное для конкретной целевой группы, или даже дать инструменты персонализации под каждого человека. Поведенческие характеристики: повод для регистрации, искомые выгоды, частота посещаемости конкурентов, степень готовности к переходу на другой сайт, отношение к проекту (если он не новый), приверженность к существующим сайтам и т.д. Тут критериев может быть много, нужно исходить из самого проекта. Эта группа показателей одна из самых важных для проектирования. В тоже время, собрать эти данные будет очень сложно. Эта информация может быть у заказчика, если мы проектируем новую версию уже существующего проекта, у конкурента, который конечно её не даст, или её нужно будет собирать по крупицам через опросы ЦА. Географические характеристики: страна, город, район. Учитывая то, что мы все же в Интернете, для нас это маловажный критерий, однако иногда стоят задачи по проектированию национальных сайтов или сайтов с геолокацией, тогда важность этого критерия резко вырастает. Кроме этого, если есть географическая привязка, это может повлиять на контент, о котором тоже нужно думать при проектировании. --> ---- ### Персонажи Для каждой группы определяют типичного персонажа -- вымышленного человека, который является типичным представителем именно этой целевой группы. В идеале найти несколько живых людей и пообщаться с ними об их образе жизни ---- ### Пример персонажа  ---- ### 4. Задачи-проблемы-решения * Для каждого из персонажей продумать ряд _задач_, важных именно для него. Все задачи должны соответствовать тематике проектируемого ресурса * Нужно выявить _проблемы_ для каждой тематической задачи * Сгенерировать _решения_ для _задач-проблем_ -- идеи, которые будут основой будущего проекта. Они создаются для решения задач нашей ЦА и несут большую ценность для проекта ---- ### Персонаж -- Задачи Купить несколько бытовых предметов через две недели ---- ### Персонаж -- Проблемы 1. Не выбрала бренды и модели 2. Будет покупать с зарплаты 3. Экономит деньги и не хочет переплачивать ---- ### Персонаж -- Решения 1. Сделать возможность подписаться на различные товарные категории и на акции 2. Сделать список желаний, на случай, если покупатель найдет нужное в каталоге, но пока не готов сделать покупку 3. Сделать акции и скидки, визуально показать экономию ---- ### 5. Формирование стратегии На данном этапе не требуется большой документ на 100 страниц с прописыванием каждой тактической мелочи. Будет достаточно общего видения стратегии. Она должна быть подстроена под ЦА и учитывать ниши, в которых работают конкуренты Можно применить известные методы «*стратегия голубого океана*» и «*поиск инсайтов*» ---- ### Маркетинговая стратегия * Брендинг и позиционирование * Модель AIDA(s) * Программа лояльности * 5P и другие теории ---- ### Брендинг и позиционирование Это одна из фундаментальных вещей, от которой будет зависеть восприятие всего магазина в целом. Брендинг переплетается с общей стратегией Понимая позиционирование конкурентов в Интернете, можно разработать свое уникальное позиционирование и провести его через весь магазин. Каждая мелочь должна отражать позиционирование Интернет-магазина. Это опять же правильная расстановка акцентов, прежде всего в интерфейсах ---- ### Модель AIDA(s) Суть модели заключается в том, чтобы заставить пользователя пройти 5 основных шагов, которые приведут к нужной нам цели: 1. Attention (внимание) 2. Interest (интерес) 3. Desire (желание) 4. Action (действие) 5. Satisfaction (удовлетворение) ---- ### 1. Attention На главной странице мы обращаем внимание. Это можно сделать слоганом или большим баннером `Мы Интернет-магазин №1`\ `Купите сейчас и получите скидку 80%!` блоком с популярными товарами и т.п. *В результате человек переходит на внутреннюю страницу, чаще всего в каталог товаров* ---- ### 2. Interest Когда человек перешел в каталог или в акцию, нам нужно вызвать его интерес. Это можно сделать с помощью демонстрации товара (*красивые фотографии*), показать социальный интерес к товару (*много отзывов*), обратить внимание на привлекательную цену или особые условия (*дополнительный товар в подарок*) *В результате человек переходит в карточку товара* ---- ### 3. Desire В карточке товара всегда много разнообразной информации и различных маркетинговых приемов. Вся она должна *«кричать», вызывать желание*. Желание можно вызвать с помощью качественной подачи информации о товаре, акции, комплектом товаров со скидкой и т.д. *В результате человек должен захотеть купить товар* ---- ### 4. Action Нужно показать клиенту большую контрастную кнопку «*Купить*» -- сделать *призыв к действию* (call-to-action) Как вариант реализации этого шага: контрастная кнопка купить и после нажатия всплывающее окно должен предложить «*оформить покупку*», как бы дожимая клиента, говоря ему, что именно он должен сделать сейчас ---- ### 5. Satisfaction 1. Нужно сделать *простое оформление заказа*, в идеале в несколько кликов и с минимумом заполняемых полей 2. После заказа, клиенту нужно позвонить и _очень вежливо_ уточнить все детали у покупателя, узнать все ему понравилось, нет ли у него вопросов или пожеланий. И пока клиент не получит товар, не проверит его и не расплатится, его надо любить и _сатисфачить_! ---- ### Програма лояльности Всем известно правило торговли:\ _80% прибыли приносят 20% постоянных покупателей_ Цель программы лояльности сделать как можно больше постоянных покупателей, чтобы они покупали только в нашем магазине и игнорировали конкурентов, даже если у них цена лучше ---- ### KPI (Ключевые показатели эффективности) 1. Посещаемость 2. Конверсия 3. Средний чек 4. Средняя маржа 5. Стоимость привлечения посетителя 6. Стоимость привлечения покупателя 7. Среднее количество просмотренных страниц ---- 8. Средняя продолжительность посещения 9. Повторные посещения 10. Повторные покупки 11. Постоянные клиенты (3+ покупок) 12. Показатель отказов 13. Средний месячный прирост посетителей 14. Средний месячный прирост покупателей 15. Среднее количество шагов/кликов к покупке ---- ### 6. Сценарии поведения Этот этап призван выявить ошибки в логике, расставить приоритеты и улучшить придуманные решения Для применения метода необходимо вжиться в образ персонажа, рассмотреть его цели и продумать его потенциальный сценарий поведения (последовательность действий) Это нужно сделать с каждой из целей всех персонажей. Сценарии необходимо записать в специальный документ ---- ### Недостатки идей Например, проектируя карточку товара в Интернет-магазине, проектировщик мог забыть сделать функцию выбора различных модификаций одного и того же товара: вроде магазин без этого работать сможет, но с существенным недостатком ---- ### Пример сценария *Иван Петров, 27 лет* Живет в Харькове, женат Хочет купить ноутбук бюджетной категории до\ `20 000 грн.` ---- ### Вход на сайт (1)  ---- ### Поиск товара (2)  ---- ### Оформление заказа (3)  ---- ### (Не)удовлетворение (4)  ---- ### 7. Структура сайта Очень важно показать все основные разделы на главной странице, кроме того сгруппировать все подразделы очевидно, чтобы пользователь на главной странице понимал, где именно и что именно находится, и имел возможность попасть в любую важную часть сайта без особых усилий Полная структура сайта со всеми разделами и подразделами - это костяк, вокруг которого будут наращиваться прототипы на следующем этапе. Структуру нужно утвердить с заказчиком ---- ### Навигация Часто на сайте может быть два уровня навигации: - основная - вспомогательная Особенно это будет полезно для Интернет-магазинов, где есть меню-каталог (главное) и отдельно есть меню с информацией о магазине (вспомогательное) То же самое для порталов с социальными функциями: отдельно тематическое меню и отдельно социальное ---- ### Пример  ---- ### 8. Прототипирование Один из ключевых этапов -- создание прототипов интерфейса. Для этого можно использовать специальное ПО (например, _Axure_), хотя это не единственная программа для создания прототипов интерфейса, есть и много других (бесплатные веб-сервисы) ---- ### Первый макет Самое сложное - спроектировать первый макет. Именно на нем будет спроектирован общий каркас: хедер, главное меню, футер и т.д. Проектировать не всегда нужно с главной страницы -- обычно начинают со страницы товара Важнейшие функции можно изобразить в виде блоков с развернутой информацией в тематической части, туда мы помещаем то, чем будут пользоваться почти все и постоянно ---- ### Меню и хедер Для начала нужно спроектировать *меню*, это самое важное. Нужно понимать, будет одно меню или несколько, будут ли там подменю и как они будут представлены После нужно спроектировать *хедер* в нем располагаются важнейшие элементы навигации: само меню, поиск, для магазинов можно разместить телефоны, слева логотип, часто там располагаются ссылки на личный кабинет пользователя и другие персональные разделы ---- ### Контент После хедера мы проектируем контентную часть, она будет меняться в каждом из макетов. Блоками представляется весь необходимый функционал и контент, некоторые блоки могут быть неизменными для всех страниц, также как и хедер Правая часть страницы традиционно считается «слепой зоной»: пользователи привыкли, что именно эта часть сайта посвящена рекламе и обращают мало внимания на нее, отсюда располагать там важные элементы интерфейса не рекомендуется ---- ### Футер Внизу страницы проектируется *футер*, который будет неизменным для всего сайта. Обычно в футере дублируют меню, в последнее время модно делать большие подвалы, где есть полная структура сайта, информация об авторских правах, ссылка на соц. сети и ссылки на контактную информацию для связи с владельцами сайта ---- ### Брендинг Логотип должен быть заметен и обращать на себя внимание новых посетителей. Его следует расположить в верхнем левом углу, так подсознательно он будет запоминаться пользователями ---- ### Утверждение Первую страницу нужно представить заказчику, рассказать, почему сделано именно так, а не иначе. После заказчик, скорее всего, захочет внести коррективы, именно визуальная часть проектирования вызывает у заказчиков большое желание внести свои правки Многие идеи могут быть весьма полезными, но другая их часть с высокой вероятностью окажется _неудачной_, поэтому проектировщик должен уметь грамотно обосновывать свои мысли и настаивать на правильном варианте ---- ### Другие макеты После утверждения первой страницы можно приступать к другим. Важно спроектировать весь заложенный функционал, каждую мелочь. Созданные прототипы можно тестировать с помощью сценариев, чтобы проверить логику еще раз, уже на интерфейсах. В крупных сайтах может быть больше 100 уникальных прототипов интерфейса. *На выходе прототипы интерфейса, каждый из которых в идеале необходимо обсудить с заказчиком и утвердить* ---- ### 9. Юзабилити тестирование Это необязательно, но тоже может помочь улучшить качество Тестирование поможет выявить ошибки в логике, возможно, всплывут места, которые спроектированы неочевидно, и их нужно будет переделывать. Кроме того тестирование может показать важные элементы, которых не видно, например, важна кнопка, которая в прототипе имеет маленький размер, эти места можно будет выделить в дизайне ---- ### Тестовая группа Для тестирования собирается группа пользователей из числа целевой аудитории, ставятся задачи что-то сделать с помощью сайта и наблюдаем за их действиями. Это позволяет увидеть недостатки интерфейса. Отдельно можно провести опрос с этими же тестовыми пользователями и выяснить их мнение о сайте вообще *На выходе мы получаем улучшенные прототипы и видим предварительную реакцию пользователей на будущий сайт* ---- ### 10. Техническое задание (ТЗ) {#part4-10} Завершающая стадия, на которой необходимо сделать описание всех макетов, прописать неочевидные методы работы, продумать бизнес-логику работы системы для разработчиков Описание должно быть *однозначным и полным*. В описании должны быть все формулы и расчеты, которые будут использоваться в работе, особенно это касается расчетов рейтингов, которые в больших сайтах могут быть очень сложными формулами с взаимосвязями Описание делаем в обычном текстовом документе, туда вставляются макеты интерфейса ---- ### Требования В ТЗ можно заложить требования к аппаратному и программному обеспечению, требования к технологиям, которые целесообразно использовать под конкретные задачи, требования к дизайну, запланированные нагрузки и т.д. По сути этот документ не должен вызывать вопросов у команды разработчиков ---- ### Утверждение ТЗ -- это достаточно объемный документ, который точно описывает будущую систему. В этом документе уже заложены интересные для ЦА «фишки», есть требования к дизайну и технологиям, то есть полное описание любой функции на сайте Документ утверждает заказчик и до конца разработки он больше его не меняет, только после утверждения можно начинать этап создания продукта --- ## Спасибо за внимание!  (c) Яценко Р.Н., 2020