E-commerce web 2.0 для Полякова Елена проектировщик интерфейсов HumanoIT Group. - презентация

1 e-commerce web 2.0 для Полякова Елена проектировщик интерфейсов HumanoIT Group

2 Web 2.0 в контексте интернет- магазинов Weи технология второго поколения разработки и дизайна, направленная на облегчение общения, обмена информацией, взаимодействия и сотрудничества в WWW. Маркеры Web 2.0: 1)Богатый, удобный пользовательский интерфейс Rich Internet Application Interface (RIA) 2) Поиск с Auto Suggest (автоматической подсказкой) 3) Динамический, постоянно обновляемый контент 2/55

3 3/55 Web 2.0 в контексте интернет магазинов 4) Теги: метки, которые присваиваются объекту, чтобы определить его место среди других объектов 5) Сигналы: RSS подписка на обновление содержимого 6) Социализация: сообщества, блоги, пользовательский контент и т. д.

4 4/55 RIA интерфейсы (Rich Internet Applications Interface) Тонкий Client HTML DHTML RIA клиент Ajax Flash Rich User Experience Приложение интерактивное, мультимедийное,UI библиотеки. Асинхронная коммуникация, движок клиента может взаимодействовать с сервером не дожидаясь, пока пользователь совершит действие в приложении (Google Maps подгружает прилегающие сегменты карты) Открытый Использует популярные открытые стандарты Распространен Работает во всех брaузерах, не зависит от ОС Java Applets Flex

5 5/55 Виджеты (Widgets): 1. Выпадающий список (combo box) Компоненты RIA :

6 6/55 2. Аккордеон (Accordion) 3. Календарь (Datepicker) Компоненты RIA :

7 7/55 4. Диалог (Dialog) Компоненты RIA :

8 8/55 5. Индикатор (Progressbar) 6. Слайдер (Slider) Компоненты RIA :

9 9/55 5. Слайдер (Slider) Компоненты RIA :

10 10/55 5. Вкладки (Tabs) Компоненты RIA :

11 11/55 Перетаскивание (Drag and drop) Растягивание (Resizable) Интерактивность RIA : Выделение (Selectable )

12 12/59 Эффекты: подсвечивание, пульсирование, увеличение в размерах, встряска (shake), мерцание, появление и исчезновение. Интерактивность RIA :

13 Как улучшить структуру каталога Профиль товара 1) Описание 2) Фото 3) Цена 4) Заказ товара (добавление в корзину) 5) Обсуждение товара, отзывы, ссылки, FAQs 6) Информеры: изменение цен, появление в продаже 7) Объявления 8) Похожие товары 13/59

14 Профиль товара 14/59

15 Профиль товара 15/59

16 Как улучшить структуру каталога Каталог с использованием RIA контролов 1) Фильтры - слайдеры 2) Диаграммы с результатами поиска 16/59

17 17/55

18 18/55

19 Как улучшить структуру каталога Логическое мышление «Процесс мышления и коммерческого выбора более сложный и эмоциональный, а не логичный и линейный» Malcolm Gladwell «Blink: The Power of Thinking Without Thinking » Образное мышление Образная память 19/55

20 Как улучшить структуру каталога Мнемотехнические принципы запоминания образов: 1) Синестезия – комбинирование всех основных компонентов чувственно-эмоциональной сферы человека 2) Движение 3) Ассоциации 4) Символизм 5) Позитивность образов 6) Преувеличение 20/55

21 Как улучшить структуру каталога Распознавание образов : «А у вас есть такой же, но с перламутровыми пуговицами…» Like.com ( Интернет –площадка, продающая обувь, одежду, аксессуары, часы, сумки, бижутерию и многое другое. 21/55

22 Как улучшить структуру каталога 3) Фрагментированный поиск 4) Загрузку собственного контента и поиска по нему. 5) RIA - контроллы Что использует: 1) Визуальный поиск 2) Фильтры Ajax: цвет, стиль, бренд, материал, интернет магазины 22/55

23 Как улучшить структуру каталога 23/55

24 Browsegoods ( Интернет –площадка, специализирующаяся на продажах обуви. Что использует: 1) Визуальный поиск, зуммирование 2) Локализатор 3) Сохранение выбранных товаров (корзина) Как улучшить структуру каталога 24/55

25 Browsegoods ( Как улучшить структуру каталога 25/55

26 Modista ( Интернет –площадка, специализирующаяся на продажах обуви, товаров для детей, сумок и очков. Что использует: 1) Визуальный поиск, сортирующий горизонтально - по форме, вертикально – по цвету. 2) RIA профиль товара всплывающий с большими крупными фотографиями Как улучшить структуру каталога 26/55

27 3) Добавление в выбранные товары, разослать друзьям, добавить в блог 4) Фильтры со слайдерами по цене, скидке, цвету. Как улучшить структуру каталога 27/55

28 Modista ( Как улучшить структуру каталога 28/55

29 Как улучшить структуру каталога Каталог с использованием Flex Volkswagen ( Преимущества: 1) Интерактивность 2) Визуализализация фильтра, сортировки 3) Дозированность и структурность информации 4) Большая часть информации и функционала сжата в одном блоке. 29/55

30 Как улучшить структуру каталога 30/55

31 Оптимизация процесса выбора, заказа и покупки товара Корзина товаров, характеристики: 1) Визуально похожа на корзину 3) Показывает добавленные товары: фото, название, количество и цену 4) Отображающая суммы заказа, скидки, стоимость доставки 2) Удобно расположена на странице 31/55

32 Оптимизация процесса выбора, заказа и покупки товара 6) Хранит историю покупок 7) Добавление товара доступно даже не зарегистрированному пользователю 8)Содержит калькуляторы, планеры, списки to-do 9) Содержит информацию о купонах и подарках 10) Предлагает товары, исходя из предпочтений пользователя 32/55

33 Корзина товаров 33/55

34 Оптимизация процесса выбора, заказа и покупки товара Помощники по выбору товара: 1) Гуру 2) Пошаговый помощник 3) FAQs 4)Поиск по каталогу 5) Обзоры, рейтинги товаров, отзывы 6) Реклама товара, спецпредлажения и акции по товарам 34/55

35 Оптимизация процесса выбора, заказа и покупки товара Гуру по выбору товаров: 35/55

36 Обзор RIA приложений для интернет - магазинов Что это такое? Калькуляторы, журналы расходов, планеры, бронирование и т.д. 1) Повышение личной эффективности пользователя Какие задачи решают? 2) Уменьшение трудоемкости процесса и количества пользовательских ошибок 3) Увеличение субъективной удовлетворенности 36/55

37 Обзор RIA приложений для интернет - магазинов Заказ тест драйва online 37/55

38 Обзор RIA приложений для интернет - магазинов Журнал расходов 38/55

39 Обзор RIA приложений для интернет - магазинов Задачи которые решает 1) Самопрезентация авто и его жизни (поломки, расходы) 2) Статистика расходов 3) Помощь при продаже, покупке авто 4) Стимуляция общения 39/55

40 Обзор RIA приложений для интернет - магазинов Составляющие успешного интернет магазина: 1) Структурность, компоновка и качество контента 3) PET дизайн (Persuasion, Emotion, and Trust) 4) Социальная составляющая 2) RIA приложения 40/55

41 PET дизайн (Persuasion, Emotion, and Trust ) Убеждающий, эмоциональный и вызывающий доверие дизайн. «Процесс мышления и коммерческого выбора более сложный и эмоциональный, а не логичный и линейный» Malcolm Gladwell «Blink: The Power of Thinking Without Thinking » 41/55

42 PET дизайн (Persuasion, Emotion, and Trust ) Дизайн должен не только простым и удобным, а еще и мотивировать, убеждать пользователей совершить действие, покупку. Первое впечатление о вашем магазине формируется за 1-2 сек. 42/55

43 PET дизайн (Persuasion, Emotion, and Trust ) Пример убеждающего спецпредложения с onliner.by Исходный вариант После применения PET - инструментов 43/55

44 PET - инструменты Оптимальный уровень диссонанса (Optimal Level of Dissonance) Указание причины для решения (Reason for Request, Fill Good ) Принципы контраста (Contrast Principle) Визуальное восприятие (Visceral Processing) 44/55

45 PET - инструменты Социальные доказательства (Social Proof) Социальное доверие (Social Learning) 45/55

46 PET - инструменты Нехватка (Scarcity) Внешнее вознаграждение (Extrinsic Reward) и ограничение во времени 46/55

47 PET - инструменты Ассоциации (Association) Возможность персонального выбора (Public Statement, Choice) 47/55

48 PET - инструменты 48/55

49 PET - инструменты Скидки (Discounts) Дорогой, значит хороший (High price equals good ) Власть людей, которые нам нравятся (The power of people we like) Правило взаимного обмена (Rule of reciprocation ) 49/55

50 PET - инструменты Импульс ДА (Momentum of "Yes") Превышение ожидания (Overestimation of big unlikely events) Распределения ответственности (Diffusion of responsibility) 50/55

51 PET дизайн (Persuasion, Emotion, and Trust ) 51/55

52 PET дизайн (Persuasion, Emotion, and Trust ) PET дизайн для onliner.by 52/55

53 Подведение итогов RIA технология Технология настоящего будущего Победит сильнейший Специализированные магазины, супермаркеты Один в поле не воин Роль интернет площадок в жизни интернет магазинов 53/55

54 Подведение итогов: роль и возможности технологий WEB Будьте на волне новых технологий и успешного плавания в океане торговли! 54/55

55 Благодарю за внимание! Полякова Елена проектировщик интерфейсов HumanoIT Group 55/55