SlideShare une entreprise Scribd logo
1  sur  135
Télécharger pour lire hors ligne
СCD
Conversion Centered Design
Human Centered Design
HCD
Рис. 1
Ценности HCD дизайна берутся из философии
гуманизма – в рамках идеологи, что приложения
создаются для людей и человеческое
удовлетворение от их использования, является
высшим мерилом и предназначением приложений.
Основные принципы HCD
•Immersion (погружение)
•Empathy (эмпатия)
•Co-creation (совместное создание)
Планирование процесса
человеко-ориентированного
проектирования
Понимание
и определение условий
использования
Определение
требований
пользователей
Разработка проектных
решений, соответствующих
требованиям пользователей
Проект
соответствует
требованиям
пользователей
Разработанный проект
соответствует
требованиям
пользователей
START FINISH
ДАНЕТ
NO!
Рис. 2
СCDConversion Centered Design
Рис. 3
Conversion — отношение числа пользователей,
выполнивших целевые действия, к общему числу
пользователей
HCD Дизайн (CCD) – это идеология,
специально предназначенная для
разработки интерфейсов, достигающей
одной бизнес-цели.
Выбор KPI для улучшения
Определение как новые KPI,
повлияют на бизнес модель
и лайф стори продукта
Просчет рисков и расходов
Выбор решений, которые могут повлиять
на изменения KPI проекта и на отклик пользователей
START
Определяем
методику
внесения
изменений
Имея гипотезу
которую хочется
проверить
Внесение
изменений
в проект
Рубануть шашкой
и внести изменения
Имплементация
успешного
решения
A/B тесты или
мультивариативное
тестирование
Проверка эфективности внедренных изменений.
Проверка основных KPI всего проекта.
Получение фидбека от пользователей.
Процесс тестированияОпираясь на аналитические
данные или данные,
полученные иным способом
Способствовала
итерация росту KPI.
Не уронила другие показатели.
Был положительный отклик
пользователей
Отчет о неудачном опыте.
Отказ от повторной итерации.
С ДАННЫМИ БЕЗ ДАННЫХ
МАМКИН СИМПАТЯГА
ДАНЕТ
НЕТ
FINISH
GOOD!
Рис. 4
Основные принципы СCD
•Сatch (захват)
•Сontrol (управление)
•Сonduct (ведение)
•Target hit (целевой удар)
Сatch (захват)
Hook and Bonuce
Sweep Technique
Сontrol (управление)
Pretty Girl
Looking Mirror
Сonduct (ведение)
Piercing Bridge,
Returning to Cave
Target hit (целевой удар)
Ocean Wave Bouncing Ball
UI for СCD
Рис. 5
1. Ясность (базовая композиция)
2. Соразмерность
3. Закрытие (гештальта)
4. Внимание
5. Непрерывность
6. Контекст
7. Достоверность
Композиция и цвет
Психология
Сторителлинг
Композиция
Рис. 5
Ясность –
это простота восприятия
1
1 2
2
1
3
1
4
2
3
Соразмерность
Дитер Рамс
Дитер РамсДитер Рамс
Инкапсуляция
“не выпусти их”
Daniel Tan
Психология
Психология среды
(энвайронментальная психология)
Поведение определяется
особенностями личности и средой
Курт Левин
В — поведение;
F — знак функциональной зависимости;
Р — особенности личности;
Е — окружение.
В = f(P, E)
В = f(UX, UI)
Сигнал – Шум
Отношение сигнал/шум — безразмерная
величина, равная отношению мощности
полезного сигнала к мощности шума
СCD
Conversion Centered Design
uxa.one
Daria Pozolotina
по принципу воздействия на человека
Группировка элементов
Инфо-блок
Промо-блок
Блок разрыва
Инфо-блок
Poppie Pack
Non-Verbal Club
Non-Verbal Club
Промо-блок
Pavel Samokhvalov
Блок разрыва
Non-Verbal Clubchristian boiteux
Рифмы
Промо-блок
Инфо-блок
Промо-блок
Инфо-блок
Промо-блок
Инфо-блок
Инфо-блок
Промо-блок
Инфо-блок
Промо-блок
Промо-блок
Инфо-блок
Инфо-блок
Промо-блок
Промо-блок
Инфо-блок
Блок разрыва можно ставить везде где он будет помогать сюжету
Инна Герман
Цвет
Рис. 6
Как работает
зрительная система
Как мы понимаем,
на что смотрим
Селекция — выделение из потока информации
объекта восприятия
Организация — объект идентифицируется
по комплексу признаков
Категоризация и приписывание объекту
свойств объектов этого класса
Цветовые контрасты
Иоганнес
Иттен
Теория цветов
Виды контрастов
1. Контраст цветовых сопоставлений
2. Контраст светлого и тёмного
3. Контраст холодного и тёплого
4. Контраст дополнительных цветов
5. Симультанный контраст
6. Контраст цветового насыщения
7. Контраст цветового распространения.
Контраст

цветовых сопоставлений
Landing Услуги
Мы как Google!
Даже круче!
Работа Цены Контакты
Подробнее
Google (евр. рас. ‫,לגוג‬ Гугл, Гугля, Гоголь, Elgoog, Пщщпду) —
самая известная поисковая система в мире, созданная
университетскими друзьями, при всяческом содействии
Всемирного Правительства.
Контакты
Продам Жигули Сайты под ключ Печать документов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Контраст
светлого и тёмного
Powered by Android
Landing Услуги Особенности Работа Цены Контакты
Продам Жигули Сайты под ключ Печать документов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Фурор от Сколково!
Телефон «Алтай»!
Развитие цифровых технологий приведет к тому, что в 
будущем мобильные телефоны заменят чипы, а покупки
за нас будут совершать роботы. Люди откажутся от 
телефонов и будут совершать звонки с помощью
Контраст
холодного и тёплого
Landing Услуги
Впустите наше приложение
туда, куда свои не впускали
Особенности Работа Цены Контакты
Подробнее
Каждая реклама Apple — это произведение искусства.
Десятки, а то и сотни фотографий создаются лишь для
того, чтобы рекламируемый товар выглядел так, что его
хочется потрогать, испытать и купить.
Контакты
Продам Жигули Сайты под ключ Печать документов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Контраст
дополнительных цветов
жёлтый — фиолетовый
жёлто-оранжевый — сине-фиолетовый
оранжевый — синий
красно-оранжевый — сине-зелёный
красный — зелёный
красно-фиолетовый — жёлто-зелёный
Landing Услуги
Аккуратно увеличиим глубину
вашего сайта
Особенности Работа Цены Контакты
Подробнее
Каждая реклама Apple — это произведение искусства.
Десятки, а то и сотни фотографий создаются лишь для
того, чтобы рекламируемый товар выглядел так, что его
хочется потрогать, испытать и купить.
Продам Жигули Сайты под ключ Печать документов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Контраст

цветового насыщения
Landing Услуги
Новая модель приватности!
Гарантия от ФСБ!
Особенности Работа Цены Контакты
Подробнее
Каждая реклама Apple — это произведение искусства.
Десятки, а то и сотни фотографий создаются лишь для
того, чтобы рекламируемый товар выглядел так, что его
хочется потрогать, испытать и купить.
Контакты
Продам Жигули Сайты под ключ Печать документов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Контраст цветового
распространения
LandingLanding
Продам Жигули Сайты под ключ Печать документов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Подробнее Контакты
Некоторые говорят, что цвет кнопки не имеет
значения, но это не так, если правильно
используешь цветовые контрасты. 
Симультанный контраст
Сергей Лачинов
Landing Услуги
В новой модели, самая узкая
воронка продаж
Особенности Работа Цены Контакты
Подробнее
Каждая реклама Apple — это произведение искусства.
Десятки, а то и сотни фотографий создаются лишь для
того, чтобы рекламируемый товар выглядел так, что его
хочется потрогать, испытать и купить.
Контакты
Продам Жигули Сайты под ключ Печать документов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Как использовать цвет
Landing Услуги
Аккуратно увеличиим глубину
вашего сайта
Особенности Работа Цены Контакты
Подробнее
Каждая реклама Apple — это произведение искусства.
Десятки, а то и сотни фотографий создаются лишь для
того, чтобы рекламируемый товар выглядел так, что его
хочется потрогать, испытать и купить.
Продам Жигули Сайты под ключ Печать документов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Он как сучок в глазу души моей! В года
расцвета Рима в дни побед, пред тем как
властный Юлий пал, могилы
стояли без жильцов
Психология
Социальное доказательство
«Все покупают, и я купил»
Направленные сигналы
Это визуальные индикаторы, указывающие на
фокусную область ваших целевых страниц.
Срочность и скудность
«Купи сейчас», «Не пропустите».
«Осталось 100 штук», «1 товар в наличии».
Попробуйте, прежде чем покупать
Дайте подержать свой товар в руках
Тестирование
Рис. 7
Методы тестирований
Количественные и качественные методы.
Удаленные и не удаленные.
• Интервью
• Опросы
• Отзывы
• Полевое этнографическое исследование
• Модерируемое и не модерируемое исследование
• Фокус-группа
• Окулография
• Исследование в юзабилити-лабораториях
• Сплит тестирования
Сплит тестирование
•Определитесь с KPI.
•Формулировка новой гипотезы.
•Определите продолжительность тестирования.
•Запуск тестирования.
•Подтверждение гипотезы.
*cторителлинг
Рис. 8
Чтение истории,
от которой невозможно
оторваться
Предложение,
от которого невозможно
отказаться
Голос, который будет
звучать в голове
Groupon
Groupon
Spotify
Netflix
Apple
HCDvsCCD
postscriptum
HCD vs CCD
Рис. 9
Спасибо
Q&A
Design first.
Cry Later.

Contenu connexe

Similaire à Conversion centered design 3

Business Insider. Великолепие стартапов
Business Insider. Великолепие стартаповBusiness Insider. Великолепие стартапов
Business Insider. Великолепие стартаповМихаил Климарёв
 
Как социальные сети взрывают фундаментальную экономику
Как социальные сети взрывают фундаментальную экономикуКак социальные сети взрывают фундаментальную экономику
Как социальные сети взрывают фундаментальную экономикуMaxim Yurin
 
Nordic White Nights Game Developers Conf: Monetization for Free
Nordic White Nights Game Developers Conf: Monetization for FreeNordic White Nights Game Developers Conf: Monetization for Free
Nordic White Nights Game Developers Conf: Monetization for FreeNordic Agency AB
 
Forbes presentacia-raskadrovka
Forbes presentacia-raskadrovkaForbes presentacia-raskadrovka
Forbes presentacia-raskadrovkaVladimir Starkov
 
Курс по предпринимательству ideaPerm. Part IV
Курс по предпринимательству ideaPerm. Part IVКурс по предпринимательству ideaPerm. Part IV
Курс по предпринимательству ideaPerm. Part IVAngel Relations Group
 
"Хлеба и зрелищ. Маркетинг впечатлений в отеле 21 века"
"Хлеба и зрелищ. Маркетинг впечатлений в отеле 21 века""Хлеба и зрелищ. Маркетинг впечатлений в отеле 21 века"
"Хлеба и зрелищ. Маркетинг впечатлений в отеле 21 века"Олег Фесенко
 

Similaire à Conversion centered design 3 (6)

Business Insider. Великолепие стартапов
Business Insider. Великолепие стартаповBusiness Insider. Великолепие стартапов
Business Insider. Великолепие стартапов
 
Как социальные сети взрывают фундаментальную экономику
Как социальные сети взрывают фундаментальную экономикуКак социальные сети взрывают фундаментальную экономику
Как социальные сети взрывают фундаментальную экономику
 
Nordic White Nights Game Developers Conf: Monetization for Free
Nordic White Nights Game Developers Conf: Monetization for FreeNordic White Nights Game Developers Conf: Monetization for Free
Nordic White Nights Game Developers Conf: Monetization for Free
 
Forbes presentacia-raskadrovka
Forbes presentacia-raskadrovkaForbes presentacia-raskadrovka
Forbes presentacia-raskadrovka
 
Курс по предпринимательству ideaPerm. Part IV
Курс по предпринимательству ideaPerm. Part IVКурс по предпринимательству ideaPerm. Part IV
Курс по предпринимательству ideaPerm. Part IV
 
"Хлеба и зрелищ. Маркетинг впечатлений в отеле 21 века"
"Хлеба и зрелищ. Маркетинг впечатлений в отеле 21 века""Хлеба и зрелищ. Маркетинг впечатлений в отеле 21 века"
"Хлеба и зрелищ. Маркетинг впечатлений в отеле 21 века"
 

Plus de Stfalcon Meetups

Stfalcon QA Meetup 31.01.2020
Stfalcon QA Meetup 31.01.2020Stfalcon QA Meetup 31.01.2020
Stfalcon QA Meetup 31.01.2020Stfalcon Meetups
 
Stfalcon QA Meetup 31.01.2020
Stfalcon QA Meetup 31.01.2020Stfalcon QA Meetup 31.01.2020
Stfalcon QA Meetup 31.01.2020Stfalcon Meetups
 
Design of the_future_30_05_2019
Design of the_future_30_05_2019Design of the_future_30_05_2019
Design of the_future_30_05_2019Stfalcon Meetups
 
Global sales - a few insights
Global sales - a few insightsGlobal sales - a few insights
Global sales - a few insightsStfalcon Meetups
 
How to build your own startup
How to build your own startupHow to build your own startup
How to build your own startupStfalcon Meetups
 
Первая и последняя встреча с клиентом
Первая и последняя встреча с клиентом Первая и последняя встреча с клиентом
Первая и последняя встреча с клиентом Stfalcon Meetups
 
Парнерство нидерланды
Парнерство нидерландыПарнерство нидерланды
Парнерство нидерландыStfalcon Meetups
 
Риси гарного менеджера
Риси гарного менеджераРиси гарного менеджера
Риси гарного менеджераStfalcon Meetups
 
Между заказчиком и разработчиком
Между заказчиком и разработчикомМежду заказчиком и разработчиком
Между заказчиком и разработчикомStfalcon Meetups
 
майстер-клас “Управління ризиками”
майстер-клас “Управління ризиками”майстер-клас “Управління ризиками”
майстер-клас “Управління ризиками”Stfalcon Meetups
 
Kubernetes: від знайомства до використання у CI/CD
Kubernetes: від знайомства до використання у CI/CDKubernetes: від знайомства до використання у CI/CD
Kubernetes: від знайомства до використання у CI/CDStfalcon Meetups
 
Як ефективно працювати в мережі LinkedIn
Як ефективно працювати в мережі LinkedInЯк ефективно працювати в мережі LinkedIn
Як ефективно працювати в мережі LinkedInStfalcon Meetups
 

Plus de Stfalcon Meetups (20)

Discovery phase
Discovery phaseDiscovery phase
Discovery phase
 
Stfalcon QA Meetup 31.01.2020
Stfalcon QA Meetup 31.01.2020Stfalcon QA Meetup 31.01.2020
Stfalcon QA Meetup 31.01.2020
 
Stfalcon QA Meetup 31.01.2020
Stfalcon QA Meetup 31.01.2020Stfalcon QA Meetup 31.01.2020
Stfalcon QA Meetup 31.01.2020
 
Stfalcon PM Meetup 21.11
Stfalcon PM Meetup 21.11Stfalcon PM Meetup 21.11
Stfalcon PM Meetup 21.11
 
Stfalcon PM Meetup 21.11
Stfalcon PM Meetup 21.11Stfalcon PM Meetup 21.11
Stfalcon PM Meetup 21.11
 
Design of the_future_30_05_2019
Design of the_future_30_05_2019Design of the_future_30_05_2019
Design of the_future_30_05_2019
 
2 5404811386729530203
2 54048113867295302032 5404811386729530203
2 5404811386729530203
 
Team evolution
Team evolutionTeam evolution
Team evolution
 
Mobile&Privacy
Mobile&PrivacyMobile&Privacy
Mobile&Privacy
 
Global sales - a few insights
Global sales - a few insightsGlobal sales - a few insights
Global sales - a few insights
 
How to build your own startup
How to build your own startupHow to build your own startup
How to build your own startup
 
Первая и последняя встреча с клиентом
Первая и последняя встреча с клиентом Первая и последняя встреча с клиентом
Первая и последняя встреча с клиентом
 
Парнерство нидерланды
Парнерство нидерландыПарнерство нидерланды
Парнерство нидерланды
 
Риси гарного менеджера
Риси гарного менеджераРиси гарного менеджера
Риси гарного менеджера
 
Между заказчиком и разработчиком
Между заказчиком и разработчикомМежду заказчиком и разработчиком
Между заказчиком и разработчиком
 
Cv vs resume
Cv vs resumeCv vs resume
Cv vs resume
 
Vue.js
Vue.jsVue.js
Vue.js
 
майстер-клас “Управління ризиками”
майстер-клас “Управління ризиками”майстер-клас “Управління ризиками”
майстер-клас “Управління ризиками”
 
Kubernetes: від знайомства до використання у CI/CD
Kubernetes: від знайомства до використання у CI/CDKubernetes: від знайомства до використання у CI/CD
Kubernetes: від знайомства до використання у CI/CD
 
Як ефективно працювати в мережі LinkedIn
Як ефективно працювати в мережі LinkedInЯк ефективно працювати в мережі LinkedIn
Як ефективно працювати в мережі LinkedIn
 

Conversion centered design 3