web 2.0 e-commerce
DESCRIPTION
Новые технологии в разработке интерфейсов магазинов, интернет площадок, а именно о Flex, Flash и AJAX. А также как создать убеждающий, мотивирующий к покупке дизайн. Обзор инструментов.TRANSCRIPT
![Page 1: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/1.jpg)
e-commerce
web 2.0 для
Полякова Еленапроектировщик интерфейсов HumanoIT Group
![Page 2: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/2.jpg)
Web 2.0 в контексте интернет- магазинов
Weи 2.0 - технология второго поколения разработки и дизайна, направленная на облегчение общения, обмена информацией, взаимодействия и сотрудничества в WWW.
Маркеры Web 2.0:
1) Богатый, удобный пользовательский интерфейс Rich Internet Application Interface (RIA)
2) Поиск с Auto Suggest (автоматической подсказкой)
3) Динамический, постоянно обновляемый контент
2/55
![Page 3: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/3.jpg)
3/55
Web 2.0 в контексте интернет магазинов4) Теги: метки, которые присваиваются объекту, чтобы определить его место среди других объектов
5) Сигналы: RSS подписка на обновление содержимого6) Социализация: сообщества, блоги, пользовательский контент и т. д.
![Page 4: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/4.jpg)
4/55
RIA интерфейсы (Rich Internet Applications Interface)
Тонкий Client
HTMLDHTML
RIA клиент
AjaxFlash
Rich User ExperienceПриложение интерактивное, мультимедийное,UI библиотеки.Асинхронная коммуникация, движок клиента может взаимодействовать с сервером не дожидаясь, пока пользователь совершит действие в приложении (Google Maps подгружает прилегающие сегменты карты)
ОткрытыйИспользует популярные открытые стандартыРаспространенРаботает во всех брaузерах, не зависит от ОС
Java Applets Flex
![Page 5: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/5.jpg)
5/55
Виджеты (Widgets):
1. Выпадающий список (combo box)
Компоненты RIA:
![Page 6: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/6.jpg)
6/55
2. Аккордеон (Accordion)
3. Календарь (Datepicker)
Компоненты RIA:
![Page 7: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/7.jpg)
7/55
4. Диалог (Dialog)Компоненты RIA:
![Page 8: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/8.jpg)
8/55
5. Индикатор (Progressbar)
6. Слайдер (Slider)
Компоненты RIA:
![Page 9: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/9.jpg)
9/55
5. Слайдер (Slider)Компоненты RIA:
![Page 10: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/10.jpg)
10/55
5. Вкладки (Tabs)Компоненты RIA:
![Page 11: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/11.jpg)
11/55
Перетаскивание (Drag and drop)
Растягивание (Resizable)
Интерактивность RIA:
Выделение (Selectable )
![Page 12: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/12.jpg)
12/59
Эффекты: подсвечивание, пульсирование, увеличение в размерах, встряска (shake), мерцание, появление и исчезновение.
Интерактивность RIA:
![Page 13: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/13.jpg)
Как улучшить структуру каталогаПрофиль товара1) Описание
2) Фото
3) Цена4) Заказ товара (добавление в корзину)5) Обсуждение товара, отзывы, ссылки, FAQs
6) Информеры: изменение цен, появление в продаже 7) Объявления8) Похожие товары
13/59
![Page 14: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/14.jpg)
Профиль товараhttp://www.onlineshoes.com/
14/59
![Page 15: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/15.jpg)
Профиль товараhttp://www.onlineshoes.com/
15/59
![Page 16: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/16.jpg)
Как улучшить структуру каталогаКаталог с использованием RIA контролов1) Фильтры - слайдеры
2) Диаграммы с результатами поиска
16/59
![Page 17: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/17.jpg)
17/55
![Page 18: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/18.jpg)
18/55
![Page 19: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/19.jpg)
Как улучшить структуру каталога
Логическое мышление
«Процесс мышления и коммерческого выбора более сложный и эмоциональный, а не логичный и линейный»
Malcolm Gladwell «Blink: The Power of Thinking Without Thinking »
Образное мышление
Образная память
19/55
![Page 20: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/20.jpg)
Как улучшить структуру каталогаМнемотехнические принципы запоминания образов:
1) Синестезия – комбинирование всех основных компонентов чувственно-эмоциональной сферы человека
2) Движение
3) Ассоциации
4) Символизм
5) Позитивность образов
6) Преувеличение
20/55
![Page 21: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/21.jpg)
Как улучшить структуру каталога
Распознавание образов:
«А у вас есть такой же, но с перламутровыми пуговицами…»
Like.com (http://www.like.com/)Интернет –площадка, продающая обувь, одежду, аксессуары, часы, сумки, бижутерию и многое другое.
21/55
![Page 22: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/22.jpg)
Как улучшить структуру каталога
3) Фрагментированный поиск
4) Загрузку собственного контента и поиска по нему.
5) RIA - контроллы
Что использует:
1) Визуальный поиск
2) Фильтры Ajax: цвет, стиль, бренд, материал, интернет магазины
22/55
![Page 23: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/23.jpg)
Как улучшить структуру каталога
23/55
![Page 24: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/24.jpg)
Browsegoods (http://browsegoods.com/)
Интернет –площадка, специализирующаяся на продажах обуви.
Что использует:
1) Визуальный поиск, зуммирование
2) Локализатор
3) Сохранение выбранных товаров (корзина)
Как улучшить структуру каталога
24/55
![Page 25: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/25.jpg)
Browsegoods (http://browsegoods.com/)Как улучшить структуру каталога
25/55
![Page 26: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/26.jpg)
Modista (http://www.modista.com/)
Интернет –площадка, специализирующаяся на продажах обуви, товаров для детей, сумок и очков.
Что использует:
1) Визуальный поиск, сортирующий горизонтально - по форме, вертикально – по цвету.
2) RIA профиль товара всплывающий с большими крупными фотографиями
Как улучшить структуру каталога
26/55
![Page 27: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/27.jpg)
3) Добавление в выбранные товары, разослать друзьям, добавить в блог
4) Фильтры со слайдерами по цене, скидке, цвету.
Как улучшить структуру каталога
27/55
![Page 28: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/28.jpg)
Modista (http://www.modista.com/)Как улучшить структуру каталога
28/55
![Page 29: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/29.jpg)
Как улучшить структуру каталогаКаталог с использованием Flex
Volkswagen (http://www.volkswagen.co.uk/used)
Преимущества:
1) Интерактивность
2) Визуализализация фильтра, сортировки
3) Дозированность и структурность информации
4) Большая часть информации и функционала сжата в одном блоке.
29/55
![Page 30: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/30.jpg)
Как улучшить структуру каталога
30/55
![Page 31: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/31.jpg)
Оптимизация процесса выбора, заказа и покупки товара
Корзина товаров, характеристики: 1) Визуально похожа на корзину
3) Показывает добавленные товары: фото, название, количество и цену
4) Отображающая суммы заказа, скидки, стоимость доставки
2) Удобно расположена на странице
31/55
![Page 32: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/32.jpg)
Оптимизация процесса выбора, заказа и покупки товара
6) Хранит историю покупок
7) Добавление товара доступно даже не зарегистрированному пользователю
8)Содержит калькуляторы, планеры, списки to-do
9) Содержит информацию о купонах и подарках
10) Предлагает товары, исходя из предпочтений пользователя
32/55
![Page 33: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/33.jpg)
Корзина товаров
33/55
http://www.diapers.com/
![Page 34: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/34.jpg)
Оптимизация процесса выбора, заказа и покупки товара
Помощники по выбору товара:1) Гуру
2) Пошаговый помощник
3) FAQs
4)Поиск по каталогу
5) Обзоры, рейтинги товаров, отзывы
6) Реклама товара, спецпредлажения и акции по товарам
34/55
![Page 35: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/35.jpg)
Оптимизация процесса выбора, заказа и покупки товара
Гуру по выбору товаров: http://market.yandex.ru/
35/55
![Page 36: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/36.jpg)
Обзор RIA приложений для интернет - магазинов
Что это такое?Калькуляторы, журналы расходов, планеры, бронирование и т.д.
1) Повышение личной эффективности пользователя
Какие задачи решают?
2) Уменьшение трудоемкости процесса и количества пользовательских ошибок3) Увеличение субъективной удовлетворенности
36/55
![Page 37: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/37.jpg)
Обзор RIA приложений для интернет - магазинов
Заказ тест драйва online https://www.volkswagen.co.uk
37/55
![Page 38: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/38.jpg)
Обзор RIA приложений для интернет - магазинов
Журнал расходов http://avtomarket.ru/
38/55
![Page 39: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/39.jpg)
Обзор RIA приложений для интернет - магазинов
Задачи которые решает1) Самопрезентация авто и его жизни (поломки, расходы)2) Статистика расходов3) Помощь при продаже, покупке авто4) Стимуляция общения
39/55
![Page 40: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/40.jpg)
Обзор RIA приложений для интернет - магазинов
Составляющие успешного интернет магазина:1) Структурность, компоновка и качество контента
3) PET дизайн (Persuasion, Emotion, and Trust)
4) Социальная составляющая
2) RIA приложения
40/55
![Page 41: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/41.jpg)
PET дизайн (Persuasion, Emotion, and Trust )Убеждающий, эмоциональный и вызывающий доверие дизайн.
«Процесс мышления и коммерческого выбора более сложный и эмоциональный, а не логичный и линейный»
Malcolm Gladwell «Blink: The Power of Thinking Without Thinking »
41/55
![Page 42: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/42.jpg)
PET дизайн (Persuasion, Emotion, and Trust )
Дизайн должен не только простым и удобным, а еще и мотивировать, убеждать пользователей совершить действие, покупку.
Первое впечатление о вашем магазине формируется за 1-2 сек.
42/55
![Page 43: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/43.jpg)
PET дизайн (Persuasion, Emotion, and Trust )Пример убеждающего спецпредложения с onliner.by
Исходный вариант
После применения PET - инструментов
43/55
![Page 44: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/44.jpg)
PET - инструментыОптимальный уровень диссонанса (Optimal Level of Dissonance)
Указание причины для решения (Reason for Request, Fill Good )
Принципы контраста(Contrast Principle)
Визуальное восприятие(Visceral Processing)
44/55
![Page 45: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/45.jpg)
PET - инструментыСоциальные доказательства(Social Proof)
Социальное доверие(Social Learning)
45/55
![Page 46: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/46.jpg)
PET - инструментыНехватка(Scarcity)
Внешнее вознаграждение(Extrinsic Reward)и ограничение во времени
46/55
![Page 47: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/47.jpg)
PET - инструментыАссоциации(Association)
Возможность персонального выбора(Public Statement, Choice)
47/55
![Page 48: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/48.jpg)
PET - инструменты
48/55
![Page 49: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/49.jpg)
PET - инструментыСкидки(Discounts)
Дорогой, значит хороший(High price equals good )
Власть людей, которые нам нравятся(The power of people we like)
Правило взаимного обмена(Rule of reciprocation )
49/55
![Page 50: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/50.jpg)
PET - инструментыИмпульс ДА(Momentum of "Yes")
Превышение ожидания(Overestimation of big unlikely events)
Распределения ответственности(Diffusion of responsibility)
50/55
![Page 51: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/51.jpg)
PET дизайн (Persuasion, Emotion, and Trust )
51/55
![Page 52: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/52.jpg)
PET дизайн (Persuasion, Emotion, and Trust )PET дизайн для onliner.by
52/55
![Page 53: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/53.jpg)
Подведение итогов
RIA технологияТехнология настоящего будущего
Победит сильнейшийСпециализированные магазины, супермаркеты
Один в поле не воин Роль интернет площадок в жизни интернет магазинов
53/55
![Page 54: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/54.jpg)
Подведение итогов: роль и возможности технологий WEB
Будьте на волне новых технологий и успешного плавания в океане торговли!
54/55
![Page 55: Web 2.0 e-Commerce](https://reader036.vdocuments.net/reader036/viewer/2022062319/557fc3fbd8b42a40118b51d9/html5/thumbnails/55.jpg)
Благодарю за внимание!
Полякова Еленапроектировщик интерфейсов HumanoIT Group
55/55