Мозг. Эмоции. Интерфейсы

Почему функционального, надежного и удобного интерфейса порой не достаточно? Почему некоторые приложения способны по-настоящему "украсть сердечко" пользователя? Что такое эмоциональный дизайн, и как его приемы связаны с человеческой психикой

Выступление на конференции Grocon'19

Transcript

1. Мозг. Эмоции. Интерфейсы. как создавать интерфейсы, способные украсть сердечко пользователя
2. Мозг. Эмоции. Интерфейсы. Анализирую их и собственные решения Проектирую сценарии, информационную архитектуру, прототипы Исследую бизнес, пользователей, конкурентов Не рисую красивенько хотя... Тая Крыжановская UX Engineer at SENLA @funnypersimmon Поясняю по UX-понятиям
3. Мозг. Эмоции. Интерфейсы. Обсудить • Как работает наш мозг? • Где рождаются эмоции? • Почему нам нравятся одни продукты, а другие - ну… не очень. • Как мы можем использовать это в проектировании.
4. Мозг. Эмоции. Интерфейсы. Плохие новости: 80% информации ваш мозг забудет уже через час
5. Мозг. Эмоции. Интерфейсы. Хорошие новости: у вас останутся фильтры восприятия
6. Мозг. Эмоции. Интерфейсы. UX это вообще о чем?
7. Мозг. Эмоции. Интерфейсы. Хэллоу Маслоу * Абрахам Маслоу — известный американский психолог, основатель гуманистической психологии.
8. Мозг. Эмоции. Интерфейсы. Хэллоу Уолтер * Аарон Уолтер — ведущий дизайнер в области пользовательского опыта компании MailChimp.
9. Мозг. Эмоции. Интерфейсы. Пирамида Уолтера
10. Мозг. Эмоции. Интерфейсы. Эмоции? Ок, not bad. Это приложение работает как надо. Кажется. Мне действительно нравится и удобно им пользоваться! Это восхитительная штука! Почти как Falcon. Невероятно!
11. Мозг. Эмоции. Интерфейсы. 11 Фото fannykitchen.com, povar.ru Функциональный, надежный = съедобный Фото /i.ytimg.com, lifehacker.com
12. Мозг. Эмоции. Интерфейсы. 12 Фото fannykitchen.com, povar.ru Функциональный, надежный = съедобный Съедобный !== вкусный Фото /i.ytimg.com, lifehacker.com
13. Мозг. Эмоции. Интерфейсы. 13 Просто вкусный !== с изюминкой Или с пряностями, если вы не любите изюм Фото attuale.ru
14. Мозг. Эмоции. Интерфейсы. Восхищающий. Откликающийся. Эмоциональный. за такой дизайн мы любим продукты
15. Мозг. Эмоции. Интерфейсы.
16. Мозг. Эмоции. Интерфейсы. Три вида мозга * Пол Маклейн — американский нейрофизиолог, автор теории о трехслойном триедином мозге Неокортекс мысли, анализ, творчество Лимбический мозг эмоции, чувства Рептильный мозг инстинкты
17. Мозг. Эмоции. Интерфейсы. Все переплетено Самоактуализация и уважение развиваться; думать; анализировать; планировать; оценивать; сравнивать… Социальные потребности Бесконечного комфорта! Хорошо и вкусно кушать. Интересно отдыхать. Постоянно радоваться. Наслаждаться жизнью. Любить. Физиологические потребности, безопасность питаться; размножаться; защищаться – убегать или нападать. мозг и потребности * Пол Маклейн — американский нейрофизиолог, автор теории о трехслойном триедином мозге
18. Мозг. Эмоции. Интерфейсы. Все переплетено нейромедиаторы, гормоны и эмоции * Пол Маклейн — американский нейрофизиолог, автор теории о трехслойном триедином мозге Миндалевидное тело эмоции Шишковидная железа серотонин (социальная значимость, власть) Гипоталамус эндорфин (эйфория, маскировка боли) окситоцин (доверие, причастность, влюбленность) кортизол (тревога, стресс) Черное тело дофамин (стремление узнавать, мотивация, награда)
19. Наконец, интерфейсы эмоциональное запоминается лучше Мозг. Эмоции. Интерфейсы.
20. Мозг. Эмоции. Интерфейсы. Первое впечатление
21. Мозг. Эмоции. Интерфейсы. Эстетика и целостность образа
22. Мозг. Эмоции. Интерфейсы. Эстетика и целостность образа
23. Мозг. Эмоции. Интерфейсы. Эстетика и целостность образа Индикатор Breathing Led Indicator мерцает с частотой дыхания человека в покое, 12-20 тактов.
24. Мозг. Эмоции. Интерфейсы. SENLAINC.COM Внимание к мелочам Йети не подглядывает и ценит конфиденциальность
25. Мозг. Эмоции. Интерфейсы. SENLAINC.COM Внимание к мелочам
26. Мозг. Эмоции. Интерфейсы. Интрига
27. Мозг. Эмоции. Интерфейсы. Интрига
28. Мозг. Эмоции. Интерфейсы. Мистика, волшебство
29. Мозг. Эмоции. Интерфейсы. Интрига, мистика, волшебство
30. Мозг. Эмоции. Интерфейсы. Социальное одобрение
31. Мозг. Эмоции. Интерфейсы. Социальное одобрение
32. Мозг. Эмоции. Интерфейсы. Социальное одобрение
33. Мозг. Эмоции. Интерфейсы. Улыбка “Я часто думаю, что должен существовать специальный типографский знак, обозначающий улыбку, — нечто вроде выгнутой линии, лежащей навзничь скобки; именно этот значок я поставил бы вместо ответа на ваш вопрос.” 1969 Идея Владимир Набоков 1982 Типографское сочетание Скот Фалман 1998 Эмоджи Шигетака Курита
34. Мозг. Эмоции. Интерфейсы. Улыбка
35. Мозг. Эмоции. Интерфейсы. Юмор Фредди предупреждает, что “Пользователь с таким именем уже существует. Может быть, это ваш злой близнец. Жутковато.”
36. Мозг. Эмоции. Интерфейсы. Юмор Вы - точно человек? Мы приносим извинения за путаницу, но мы не можем определить, человек вы или скрипт.. Пожалуйста, не принимайте это на свой счет. Боты и скрипты могут быть удивительно похожи на живых в наше время!
37. Мозг. Эмоции. Интерфейсы. Проявление заботы Google Maps предлагает адрес аэропорта как точку назначения, если у вас запланирован перелет.
38. Мозг. Эмоции. Интерфейсы. Проявление заботы Сбербанк замечает и подсказывает, если вы пытаетесь пополнить счет своего номера телефона и ввели его с ошибкой.
39. Мозг. Эмоции. Интерфейсы. Проявление заботы Mos.ru сглаживает негатив от нехорошей новости позитивным посылом в call to action
40. Мозг. Эмоции. Интерфейсы. Удивление и радость Информационные, анимированные дудлы и дудлы-игры
41. Мозг. Эмоции. Интерфейсы. Удивление и радость Asana - таск менеджер. Единорог, серьезно? “Вы только что видели единорога, очень редкое явление, отмечающее вашу производительность”.
42. Мозг. Эмоции. Интерфейсы. Пасхалки Пасхалки: ответ на главный вопрос жизни, Вселенной и всего такого?
43. Мозг. Эмоции. Интерфейсы. Сюрпризы И даже facebook - далеко не корпорация добра - заставляет улыбнуться :)
44. Мозг. Эмоции. Интерфейсы. Ми-ми-милота Lingualeo, Duolinguo, множество приложений с использованием персонажей
45. Мозг. Эмоции. Интерфейсы. Ми-ми-милота Стикеры! Тысячи их. IT Cats (Grodno Design Community)
46. Мозг. Эмоции. Интерфейсы. Ми-ми-милота
47. Мозг. Эмоции. Интерфейсы. Ми-ми-милота Милейший зоопарк из неопознанных кроленей и чупакабр. А вообще-то это ваши коллеги.
48. Мозг. Эмоции. Интерфейсы. Ми-ми-милота Грокончик - милый, но серьезный персонаж для серьезной такой технической IT-конференции, и поэтому зубастый
49. Мозг. Эмоции. Интерфейсы. Комплименты
50. Мозг. Эмоции. Интерфейсы. Комплименты
51. Мозг. Эмоции. Интерфейсы. Похвала, награда
52. Мозг. Эмоции. Интерфейсы. Подарки, сюрпризы
53. Мозг. Эмоции. Интерфейсы. Подарки, сюрпризы
54. Мозг. Эмоции. Интерфейсы. Угадывание желаний IOs понимает, когда твоя заметка - не просто заметка. Когда действительно может понадобится напомнить накануне.
55. Мозг. Эмоции. Интерфейсы. Соревнование
56. Мозг. Эмоции. Интерфейсы. Вызов, соревнование
57. Мозг. Эмоции. Интерфейсы. Вызов, соревнование
58. Мозг. Эмоции. Интерфейсы. Ограниченный доступ Серотонин передает привет!
59. Мозг. Эмоции. Интерфейсы. Ограниченный доступ
60. Мозг. Эмоции. Интерфейсы. Эксклюзивность, статус
61. Мозг. Эмоции. Интерфейсы. Эксклюзивность, статус
62. Мозг. Эмоции. Интерфейсы. Безопасность, контроль
63. Мозг. Эмоции. Интерфейсы. Безопасность, контроль
64. Мозг. Эмоции. Интерфейсы. Тревога
65. Мозг. Эмоции. Интерфейсы. Конечные точки
66. Мозг. Эмоции. Интерфейсы. Конечные точки
67. Мозг. Эмоции. Интерфейсы. Конечные точки
68. Мозг. Эмоции. Интерфейсы. Конечные точки
69. Мозг. Эмоции. Интерфейсы. Ок, прикольные скриншоты, а как применить это в реальном проекте?
70. Мозг. Эмоции. Интерфейсы. Стратегия: эмоциональный образ продукта • Свойства бренда • Карта индивидуальности • Голос • Примеры текста • Визуальный лексикон • Методы связи
71. Мозг. Эмоции. Интерфейсы. Эмоциональный образ: создание маскота Имя бренда: MailChimp Обзор: Фредди фон Чимпенхаймер IV, крутой, дружелюбный, радушный, Любит пошутить, подбросить пасхалку, но серьёзен, когда шутки не уместны. Праздник всегда с тобой, если он не мешает работе. Индивидуальность Свойства бренда: весело, но не по-детски. Смешно, но не глупо. Функционально, но не сложно. Стильно, но не чуждо. Просто, но не простецки. Надежно, но не скучно. Неформально, но не разгильдяйски. Голос: Дружелюбный, любит травить анекдоты (но такие, которыми можно поделиться с мамой), рассказывает истории и общается с пользователями, как с близкими. Неформальные приёмы: сокращения и строчные буквы.
72. Мозг. Эмоции. Интерфейсы. Эмоциональный образ: создание маскота Примеры текста: «Дай пять! Твой список успешно импортирован»., «Ой, кажется, ты забыл ввести адрес». Сбой: «Один из наших серверов временно недоступен. Наши инженеры работают над этим и скоро все исправят. Спасибо за терпение». Методы связи: Удивление и восторг, Пасхалки и тематические страницы, Предвкушение. Улыбка. Юмор. Визуальный лексикон: Цвет. Яркая палитра с чистыми цветами. MailChimp забавный, но функциональный и не детский. Типографика. MailChimp легок на подъем, прост и эффективен, и типографика это демонстрирует. Простые шрифты без засечек, грамотная иерархия создают ощущение уюта. Общий стиль. Элементы интерфейса простые, интуитивно понятные, не устрашающие. Мягкие, нежные текстуры смягчают пространство. Человечный дизайн.
73. Мозг. Эмоции. Интерфейсы. Модель Кано: приоритезация функционала 1. Привлекательные 2. Одномерные 3. Обязательные 4. Неважные 5. Нежелательные
74. Мозг. Эмоции. Интерфейсы. Совершенство не достижимо. Общее впечатление важнее. Попытки достичь совершенства необоснованно трудозатратны.
75. 75 Фото teletype.in Воображение
76. Мозг. Эмоции. Интерфейсы. Насмотренность
77. Мозг. Эмоции. Интерфейсы. Что почитать? Про эмоциональный дизайн Про дизайн и исследования психики Про мозг и эмоции
78. Мозг. Эмоции. Интерфейсы. Ментальные заметки
79. Мозг. Эмоции. Интерфейсы. Спасибо за внимание Вам и Вашим лобным долям! * Особые благодарности: затылочным долям - за то, что смотрели, височным долям - за то, что слушали и запоминали, теменным долям - за то, что понимали.
80. Мозг. Эмоции. Интерфейсы. Ваши вопросы? и ваши крутые примеры из памяти и недр миндалевидного тела... @funnypersimmon сообщество Gribbble на community-z.com
81. Мозг. Эмоции. Интерфейсы. Спасибо за помощь: • Аарон Уолтер, книга “Эмоциональный дизайн” • Стефен Андерсон, книга ”Приманка для пользователя” и Mental Notes • Дон Норман, книга “Эмоциональный дизайн” • Джон Медина, книга “Правила мозга” • Вячеслав Дубынин об устройстве мозга - shorturl.at/dnLP8 (лекции, Постнаука) • Дарья Косило, Александра Привадо - “Seductive Mobile Design”, shorturl.at/BUV79 • Дмитрий Мацкевич - “Behavioral engineering”, shorturl.at/hmK07 (видео, youtube) Еще замечательно по теме: • Дмитрий Ваницкий - “Закрытые операции на мозге”, shorturl.at/vDVW5 (статья, Medium) • Юлия Анкудинова - “Эмоциональный дизайн. Как создать продукты, которые полюбят пользователи” (выступление, UX-Марафон#17)