SlideShare a Scribd company logo
1 of 33
Download to read offline
Теория потока в интерфейсах
Как сделать пользователя счастливым
Юрий Грановский | USABILITYLAB Украина
Дизайн
Human-Centered Design
Usability
• Эффективность
• Продуктивность
• Удовлетворённость
User Experience
• опыт
• переживание
• знания
Ощущение и реакция человека, вследствие
использования или предполагаемого использования
продукта, системы или услуги
User Experience Designer
Conversion Rate Optimizer
Процесс и результат
freshcanteen.com
Процесс и результат
cubebreaker.com
Процесс и результат
uncorneredmarket.com
Процесс и результат
gratisadvertentieplaats.nl
E-commerce
Погоня за конверсией отодвигает опыт взаимодействия
даже не не второй план
E-commerce
• Максимально сокращённое время взаимодействия
• Нет никаких причин возвращаться сюда же
• Давно не предлагаем ничего выбирать и оформлять
самостоятельно
• И люди охотно соглашаются
E-commerce
Так где же шоппинг?
Отпуск
Новый год
4tololo.ru
Возможные последствия
Чек-иниться автоматически
Удовольствие
• Агон - соревнования
• Алеа - случай
• Вертиго - нарушение восприятия реальности
• Мимикрия - альтернативная реальность
Хороший интерфейс — это тот, взаимодействие с
которым приносит удовольствие
Теория потока
“Люди наиболее счастливы, если пребывают в особом потоковом состоянии —
напоминающем Дзэн состоянии полного единения с деятельностью и ситуацией.
Состояние потока можно считать оптимальным состоянием внутренней мотивации,
при которой человек полностью включён в то, что он делает. Вероятно, каждый
испытывал это ощущение, характеризующееся свободой, радостью, чувством
полного удовлетворения и мастерства, когда некоторые потребности, в том числе и
базовые, обычно игнорируются. Человек забывает о времени, голоде, своей
социальной роли и т.д.”
- Wikipedia
Условия возникновения потокового
сотояния
1. Ясность и определённость поставленных целей
2. Постоянная обратная связь при выполнении задач
3. Сложность решаемых задач должна соответствовать
навыкам и умениям
4. Полная концентрация на поставленной цели и
вовлечение в выполняемые задачи
Ясность целей
Система ценностей
Ясность целей
Storymapping
Постоянная обратная связь
Технические сообщения
Постоянная обратная связь
Глубокая обратная связь
• Потребности
• Страхи
• Жизненные цели
Постоянная обратная связь
Почувствовать себя пользователем
• Персонажи
• Карты эмпатии
• Наблюдения за работой пользователей
Сложность задач должна
соответствовать навыкам
Сложность задач должна
соответствовать навыкам
Полная концентрация
Customer Journey Mapping
Полная концентрация
Один экран — один Call-to-Action
В заключение
Чтобы продукт был успешным, он должен
приносить радость
В заключение
1. Ясность и определённость целей
2. Постоянная обратная
3. Соответствие навыкам пользователя
4. Полная концентрация и вовлечение
В заключение
• Storytelling
• Storymapping
• Storyboarding
• Customer Journey Mapping
Продукт должен рассказывать историю, которая займёт
своё место в жизненной истории пользователя
В заключение
Лучше идеальное взаимодействие по одному
сценарию для одного персонажа, …
… чем плохое взаимодействие для всех.
Спасибо. Это конец.
Вопросы, комментарии?
Юрий Грановский | USABILITYLAB Украина
y.granovsky@usabilitylab.net
facebook.com/y.granovsky

More Related Content

Similar to WebCamp:Designers Day.Юра Грановский «Теория потока» в интерфейсах. Как сделать пользователя счастливым

CJM как дэшборд для продукта
CJM как дэшборд для продуктаCJM как дэшборд для продукта
CJM как дэшборд для продуктаNikita Efimov
 
Искусство создания интерфейса, простота, удобство и рентабельность
Искусство создания интерфейса, простота, удобство и рентабельностьИскусство создания интерфейса, простота, удобство и рентабельность
Искусство создания интерфейса, простота, удобство и рентабельностьCybermarketing, Moscow
 
Happy customer. Myth or Reality?
Happy customer. Myth or Reality?Happy customer. Myth or Reality?
Happy customer. Myth or Reality?IT Weekend
 
iDeal Machine - UX - 27052014 - preview
iDeal Machine - UX - 27052014 - previewiDeal Machine - UX - 27052014 - preview
iDeal Machine - UX - 27052014 - previewcgvictor
 
Как сделать востребованное приложение
Как сделать востребованное приложениеКак сделать востребованное приложение
Как сделать востребованное приложениеKonstantin Bocharov
 
150417 презентация окна петербурга
150417 презентация окна петербурга150417 презентация окна петербурга
150417 презентация окна петербургаBasil Boluk
 
Саша Куценко — Проектируйте не интерфейс, проектируйте взаимодействие (RI...
Саша Куценко — Проектируйте не интерфейс, проектируйте взаимодействие (RI...Саша Куценко — Проектируйте не интерфейс, проектируйте взаимодействие (RI...
Саша Куценко — Проектируйте не интерфейс, проектируйте взаимодействие (RI...Sasha Kutsenko
 
IDealMachine October 2014
IDealMachine October 2014IDealMachine October 2014
IDealMachine October 2014cgvictor
 
Мобильный Воркшоп для TechNation
Мобильный Воркшоп для TechNationМобильный Воркшоп для TechNation
Мобильный Воркшоп для TechNationMax Semenchuk
 
Cтоляров Андрей, Usabilitilab
Cтоляров Андрей, UsabilitilabCтоляров Андрей, Usabilitilab
Cтоляров Андрей, Usabilitilabweb2win
 
Почему проект не заканчивается после передачи его клиенту или что надо, чтобы...
Почему проект не заканчивается после передачи его клиенту или что надо, чтобы...Почему проект не заканчивается после передачи его клиенту или что надо, чтобы...
Почему проект не заканчивается после передачи его клиенту или что надо, чтобы...Andrew Sikorskiy
 
UX наоборот - введение в UX
UX наоборот - введение в UXUX наоборот - введение в UX
UX наоборот - введение в UXcgvictor
 
Работа с требованиями в Agile
Работа с требованиями в AgileРабота с требованиями в Agile
Работа с требованиями в AgileISsoft
 
Юзабилити сайта
Юзабилити сайтаЮзабилити сайта
Юзабилити сайтаDmitry Satin
 
Юзабилити Сайта
Юзабилити СайтаЮзабилити Сайта
Юзабилити СайтаDmitry Satin
 
Human Centered Design
Human Centered DesignHuman Centered Design
Human Centered Designguvarov
 
UX в интерфейсе и в жизни
UX в интерфейсе и в жизниUX в интерфейсе и в жизни
UX в интерфейсе и в жизниNimax
 

Similar to WebCamp:Designers Day.Юра Грановский «Теория потока» в интерфейсах. Как сделать пользователя счастливым (20)

CJM как дэшборд для продукта
CJM как дэшборд для продуктаCJM как дэшборд для продукта
CJM как дэшборд для продукта
 
Искусство создания интерфейса, простота, удобство и рентабельность
Искусство создания интерфейса, простота, удобство и рентабельностьИскусство создания интерфейса, простота, удобство и рентабельность
Искусство создания интерфейса, простота, удобство и рентабельность
 
Happy customer. Myth or Reality?
Happy customer. Myth or Reality?Happy customer. Myth or Reality?
Happy customer. Myth or Reality?
 
iDeal Machine - UX - 27052014 - preview
iDeal Machine - UX - 27052014 - previewiDeal Machine - UX - 27052014 - preview
iDeal Machine - UX - 27052014 - preview
 
Как сделать востребованное приложение
Как сделать востребованное приложениеКак сделать востребованное приложение
Как сделать востребованное приложение
 
150417 презентация окна петербурга
150417 презентация окна петербурга150417 презентация окна петербурга
150417 презентация окна петербурга
 
Саша Куценко — Проектируйте не интерфейс, проектируйте взаимодействие (RI...
Саша Куценко — Проектируйте не интерфейс, проектируйте взаимодействие (RI...Саша Куценко — Проектируйте не интерфейс, проектируйте взаимодействие (RI...
Саша Куценко — Проектируйте не интерфейс, проектируйте взаимодействие (RI...
 
IDealMachine October 2014
IDealMachine October 2014IDealMachine October 2014
IDealMachine October 2014
 
Мобильный Воркшоп для TechNation
Мобильный Воркшоп для TechNationМобильный Воркшоп для TechNation
Мобильный Воркшоп для TechNation
 
Presentacion Ruso
Presentacion RusoPresentacion Ruso
Presentacion Ruso
 
Presentacion Ruso
Presentacion RusoPresentacion Ruso
Presentacion Ruso
 
Сервис как инструмент развития бизнеса
Сервис как инструмент развития бизнесаСервис как инструмент развития бизнеса
Сервис как инструмент развития бизнеса
 
Cтоляров Андрей, Usabilitilab
Cтоляров Андрей, UsabilitilabCтоляров Андрей, Usabilitilab
Cтоляров Андрей, Usabilitilab
 
Почему проект не заканчивается после передачи его клиенту или что надо, чтобы...
Почему проект не заканчивается после передачи его клиенту или что надо, чтобы...Почему проект не заканчивается после передачи его клиенту или что надо, чтобы...
Почему проект не заканчивается после передачи его клиенту или что надо, чтобы...
 
UX наоборот - введение в UX
UX наоборот - введение в UXUX наоборот - введение в UX
UX наоборот - введение в UX
 
Работа с требованиями в Agile
Работа с требованиями в AgileРабота с требованиями в Agile
Работа с требованиями в Agile
 
Юзабилити сайта
Юзабилити сайтаЮзабилити сайта
Юзабилити сайта
 
Юзабилити Сайта
Юзабилити СайтаЮзабилити Сайта
Юзабилити Сайта
 
Human Centered Design
Human Centered DesignHuman Centered Design
Human Centered Design
 
UX в интерфейсе и в жизни
UX в интерфейсе и в жизниUX в интерфейсе и в жизни
UX в интерфейсе и в жизни
 

More from GeeksLab Odessa

DataScience Lab2017_Коррекция геометрических искажений оптических спутниковых...
DataScience Lab2017_Коррекция геометрических искажений оптических спутниковых...DataScience Lab2017_Коррекция геометрических искажений оптических спутниковых...
DataScience Lab2017_Коррекция геометрических искажений оптических спутниковых...GeeksLab Odessa
 
DataScience Lab 2017_Kappa Architecture: How to implement a real-time streami...
DataScience Lab 2017_Kappa Architecture: How to implement a real-time streami...DataScience Lab 2017_Kappa Architecture: How to implement a real-time streami...
DataScience Lab 2017_Kappa Architecture: How to implement a real-time streami...GeeksLab Odessa
 
DataScience Lab 2017_Блиц-доклад_Турский Виктор
DataScience Lab 2017_Блиц-доклад_Турский ВикторDataScience Lab 2017_Блиц-доклад_Турский Виктор
DataScience Lab 2017_Блиц-доклад_Турский ВикторGeeksLab Odessa
 
DataScience Lab 2017_Обзор методов детекции лиц на изображение
DataScience Lab 2017_Обзор методов детекции лиц на изображениеDataScience Lab 2017_Обзор методов детекции лиц на изображение
DataScience Lab 2017_Обзор методов детекции лиц на изображениеGeeksLab Odessa
 
DataScienceLab2017_Сходство пациентов: вычистка дубликатов и предсказание про...
DataScienceLab2017_Сходство пациентов: вычистка дубликатов и предсказание про...DataScienceLab2017_Сходство пациентов: вычистка дубликатов и предсказание про...
DataScienceLab2017_Сходство пациентов: вычистка дубликатов и предсказание про...GeeksLab Odessa
 
DataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-докладDataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-докладGeeksLab Odessa
 
DataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-докладDataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-докладGeeksLab Odessa
 
DataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-докладDataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-докладGeeksLab Odessa
 
DataScienceLab2017_Cервинг моделей, построенных на больших данных с помощью A...
DataScienceLab2017_Cервинг моделей, построенных на больших данных с помощью A...DataScienceLab2017_Cервинг моделей, построенных на больших данных с помощью A...
DataScienceLab2017_Cервинг моделей, построенных на больших данных с помощью A...GeeksLab Odessa
 
DataScienceLab2017_BioVec: Word2Vec в задачах анализа геномных данных и биоин...
DataScienceLab2017_BioVec: Word2Vec в задачах анализа геномных данных и биоин...DataScienceLab2017_BioVec: Word2Vec в задачах анализа геномных данных и биоин...
DataScienceLab2017_BioVec: Word2Vec в задачах анализа геномных данных и биоин...GeeksLab Odessa
 
DataScienceLab2017_Data Sciences и Big Data в Телекоме_Александр Саенко
DataScienceLab2017_Data Sciences и Big Data в Телекоме_Александр Саенко DataScienceLab2017_Data Sciences и Big Data в Телекоме_Александр Саенко
DataScienceLab2017_Data Sciences и Big Data в Телекоме_Александр Саенко GeeksLab Odessa
 
DataScienceLab2017_Высокопроизводительные вычислительные возможности для сист...
DataScienceLab2017_Высокопроизводительные вычислительные возможности для сист...DataScienceLab2017_Высокопроизводительные вычислительные возможности для сист...
DataScienceLab2017_Высокопроизводительные вычислительные возможности для сист...GeeksLab Odessa
 
DataScience Lab 2017_Мониторинг модных трендов с помощью глубокого обучения и...
DataScience Lab 2017_Мониторинг модных трендов с помощью глубокого обучения и...DataScience Lab 2017_Мониторинг модных трендов с помощью глубокого обучения и...
DataScience Lab 2017_Мониторинг модных трендов с помощью глубокого обучения и...GeeksLab Odessa
 
DataScience Lab 2017_Кто здесь? Автоматическая разметка спикеров на телефонны...
DataScience Lab 2017_Кто здесь? Автоматическая разметка спикеров на телефонны...DataScience Lab 2017_Кто здесь? Автоматическая разметка спикеров на телефонны...
DataScience Lab 2017_Кто здесь? Автоматическая разметка спикеров на телефонны...GeeksLab Odessa
 
DataScience Lab 2017_From bag of texts to bag of clusters_Терпиль Евгений / П...
DataScience Lab 2017_From bag of texts to bag of clusters_Терпиль Евгений / П...DataScience Lab 2017_From bag of texts to bag of clusters_Терпиль Евгений / П...
DataScience Lab 2017_From bag of texts to bag of clusters_Терпиль Евгений / П...GeeksLab Odessa
 
DataScience Lab 2017_Графические вероятностные модели для принятия решений в ...
DataScience Lab 2017_Графические вероятностные модели для принятия решений в ...DataScience Lab 2017_Графические вероятностные модели для принятия решений в ...
DataScience Lab 2017_Графические вероятностные модели для принятия решений в ...GeeksLab Odessa
 
DataScienceLab2017_Оптимизация гиперпараметров машинного обучения при помощи ...
DataScienceLab2017_Оптимизация гиперпараметров машинного обучения при помощи ...DataScienceLab2017_Оптимизация гиперпараметров машинного обучения при помощи ...
DataScienceLab2017_Оптимизация гиперпараметров машинного обучения при помощи ...GeeksLab Odessa
 
DataScienceLab2017_Как знать всё о покупателях (или почти всё)?_Дарина Перемот
DataScienceLab2017_Как знать всё о покупателях (или почти всё)?_Дарина Перемот DataScienceLab2017_Как знать всё о покупателях (или почти всё)?_Дарина Перемот
DataScienceLab2017_Как знать всё о покупателях (или почти всё)?_Дарина Перемот GeeksLab Odessa
 
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир ...
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир ...JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир ...
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир ...GeeksLab Odessa
 
JS Lab2017_Под микроскопом: блеск и нищета микросервисов на node.js
JS Lab2017_Под микроскопом: блеск и нищета микросервисов на node.js JS Lab2017_Под микроскопом: блеск и нищета микросервисов на node.js
JS Lab2017_Под микроскопом: блеск и нищета микросервисов на node.js GeeksLab Odessa
 

More from GeeksLab Odessa (20)

DataScience Lab2017_Коррекция геометрических искажений оптических спутниковых...
DataScience Lab2017_Коррекция геометрических искажений оптических спутниковых...DataScience Lab2017_Коррекция геометрических искажений оптических спутниковых...
DataScience Lab2017_Коррекция геометрических искажений оптических спутниковых...
 
DataScience Lab 2017_Kappa Architecture: How to implement a real-time streami...
DataScience Lab 2017_Kappa Architecture: How to implement a real-time streami...DataScience Lab 2017_Kappa Architecture: How to implement a real-time streami...
DataScience Lab 2017_Kappa Architecture: How to implement a real-time streami...
 
DataScience Lab 2017_Блиц-доклад_Турский Виктор
DataScience Lab 2017_Блиц-доклад_Турский ВикторDataScience Lab 2017_Блиц-доклад_Турский Виктор
DataScience Lab 2017_Блиц-доклад_Турский Виктор
 
DataScience Lab 2017_Обзор методов детекции лиц на изображение
DataScience Lab 2017_Обзор методов детекции лиц на изображениеDataScience Lab 2017_Обзор методов детекции лиц на изображение
DataScience Lab 2017_Обзор методов детекции лиц на изображение
 
DataScienceLab2017_Сходство пациентов: вычистка дубликатов и предсказание про...
DataScienceLab2017_Сходство пациентов: вычистка дубликатов и предсказание про...DataScienceLab2017_Сходство пациентов: вычистка дубликатов и предсказание про...
DataScienceLab2017_Сходство пациентов: вычистка дубликатов и предсказание про...
 
DataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-докладDataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-доклад
 
DataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-докладDataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-доклад
 
DataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-докладDataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-доклад
 
DataScienceLab2017_Cервинг моделей, построенных на больших данных с помощью A...
DataScienceLab2017_Cервинг моделей, построенных на больших данных с помощью A...DataScienceLab2017_Cервинг моделей, построенных на больших данных с помощью A...
DataScienceLab2017_Cервинг моделей, построенных на больших данных с помощью A...
 
DataScienceLab2017_BioVec: Word2Vec в задачах анализа геномных данных и биоин...
DataScienceLab2017_BioVec: Word2Vec в задачах анализа геномных данных и биоин...DataScienceLab2017_BioVec: Word2Vec в задачах анализа геномных данных и биоин...
DataScienceLab2017_BioVec: Word2Vec в задачах анализа геномных данных и биоин...
 
DataScienceLab2017_Data Sciences и Big Data в Телекоме_Александр Саенко
DataScienceLab2017_Data Sciences и Big Data в Телекоме_Александр Саенко DataScienceLab2017_Data Sciences и Big Data в Телекоме_Александр Саенко
DataScienceLab2017_Data Sciences и Big Data в Телекоме_Александр Саенко
 
DataScienceLab2017_Высокопроизводительные вычислительные возможности для сист...
DataScienceLab2017_Высокопроизводительные вычислительные возможности для сист...DataScienceLab2017_Высокопроизводительные вычислительные возможности для сист...
DataScienceLab2017_Высокопроизводительные вычислительные возможности для сист...
 
DataScience Lab 2017_Мониторинг модных трендов с помощью глубокого обучения и...
DataScience Lab 2017_Мониторинг модных трендов с помощью глубокого обучения и...DataScience Lab 2017_Мониторинг модных трендов с помощью глубокого обучения и...
DataScience Lab 2017_Мониторинг модных трендов с помощью глубокого обучения и...
 
DataScience Lab 2017_Кто здесь? Автоматическая разметка спикеров на телефонны...
DataScience Lab 2017_Кто здесь? Автоматическая разметка спикеров на телефонны...DataScience Lab 2017_Кто здесь? Автоматическая разметка спикеров на телефонны...
DataScience Lab 2017_Кто здесь? Автоматическая разметка спикеров на телефонны...
 
DataScience Lab 2017_From bag of texts to bag of clusters_Терпиль Евгений / П...
DataScience Lab 2017_From bag of texts to bag of clusters_Терпиль Евгений / П...DataScience Lab 2017_From bag of texts to bag of clusters_Терпиль Евгений / П...
DataScience Lab 2017_From bag of texts to bag of clusters_Терпиль Евгений / П...
 
DataScience Lab 2017_Графические вероятностные модели для принятия решений в ...
DataScience Lab 2017_Графические вероятностные модели для принятия решений в ...DataScience Lab 2017_Графические вероятностные модели для принятия решений в ...
DataScience Lab 2017_Графические вероятностные модели для принятия решений в ...
 
DataScienceLab2017_Оптимизация гиперпараметров машинного обучения при помощи ...
DataScienceLab2017_Оптимизация гиперпараметров машинного обучения при помощи ...DataScienceLab2017_Оптимизация гиперпараметров машинного обучения при помощи ...
DataScienceLab2017_Оптимизация гиперпараметров машинного обучения при помощи ...
 
DataScienceLab2017_Как знать всё о покупателях (или почти всё)?_Дарина Перемот
DataScienceLab2017_Как знать всё о покупателях (или почти всё)?_Дарина Перемот DataScienceLab2017_Как знать всё о покупателях (или почти всё)?_Дарина Перемот
DataScienceLab2017_Как знать всё о покупателях (или почти всё)?_Дарина Перемот
 
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир ...
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир ...JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир ...
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир ...
 
JS Lab2017_Под микроскопом: блеск и нищета микросервисов на node.js
JS Lab2017_Под микроскопом: блеск и нищета микросервисов на node.js JS Lab2017_Под микроскопом: блеск и нищета микросервисов на node.js
JS Lab2017_Под микроскопом: блеск и нищета микросервисов на node.js
 

WebCamp:Designers Day.Юра Грановский «Теория потока» в интерфейсах. Как сделать пользователя счастливым