$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

Taya Kostjuk (Kryzhanouskaya)

November 02, 2019
Tweet

More Decks by Taya Kostjuk (Kryzhanouskaya)

Other Decks in Design

Transcript

  1. Мозг. Эмоции. Интерфейсы. Анализирую их и собственные решения Проектирую сценарии,

    информационную архитектуру, прототипы Исследую бизнес, пользователей, конкурентов Не рисую красивенько хотя... Тая Крыжановская UX Engineer at SENLA @funnypersimmon Поясняю по UX-понятиям
  2. Мозг. Эмоции. Интерфейсы. Обсудить • Как работает наш мозг? •

    Где рождаются эмоции? • Почему нам нравятся одни продукты, а другие - ну… не очень. • Как мы можем использовать это в проектировании.
  3. Мозг. Эмоции. Интерфейсы. Хэллоу Маслоу * Абрахам Маслоу — известный

    американский психолог, основатель гуманистической психологии.
  4. Мозг. Эмоции. Интерфейсы. Хэллоу Уолтер * Аарон Уолтер — ведущий

    дизайнер в области пользовательского опыта компании MailChimp.
  5. Мозг. Эмоции. Интерфейсы. Эмоции? Ок, not bad. Это приложение работает

    как надо. Кажется. Мне действительно нравится и удобно им пользоваться! Это восхитительная штука! Почти как Falcon. Невероятно!
  6. Мозг. Эмоции. Интерфейсы. 12 Фото fannykitchen.com, povar.ru Функциональный, надежный =

    съедобный Съедобный !== вкусный Фото /i.ytimg.com, lifehacker.com
  7. Мозг. Эмоции. Интерфейсы. 13 Просто вкусный !== с изюминкой Или

    с пряностями, если вы не любите изюм Фото attuale.ru
  8. Мозг. Эмоции. Интерфейсы. Три вида мозга * Пол Маклейн —

    американский нейрофизиолог, автор теории о трехслойном триедином мозге Неокортекс мысли, анализ, творчество Лимбический мозг эмоции, чувства Рептильный мозг инстинкты
  9. Мозг. Эмоции. Интерфейсы. Все переплетено Самоактуализация и уважение развиваться; думать;

    анализировать; планировать; оценивать; сравнивать… Социальные потребности Бесконечного комфорта! Хорошо и вкусно кушать. Интересно отдыхать. Постоянно радоваться. Наслаждаться жизнью. Любить. Физиологические потребности, безопасность питаться; размножаться; защищаться – убегать или нападать. мозг и потребности * Пол Маклейн — американский нейрофизиолог, автор теории о трехслойном триедином мозге
  10. Мозг. Эмоции. Интерфейсы. Все переплетено нейромедиаторы, гормоны и эмоции *

    Пол Маклейн — американский нейрофизиолог, автор теории о трехслойном триедином мозге Миндалевидное тело эмоции Шишковидная железа серотонин (социальная значимость, власть) Гипоталамус эндорфин (эйфория, маскировка боли) окситоцин (доверие, причастность, влюбленность) кортизол (тревога, стресс) Черное тело дофамин (стремление узнавать, мотивация, награда)
  11. Мозг. Эмоции. Интерфейсы. Эстетика и целостность образа Индикатор Breathing Led

    Indicator мерцает с частотой дыхания человека в покое, 12-20 тактов.
  12. Мозг. Эмоции. Интерфейсы. Улыбка “Я часто думаю, что должен существовать

    специальный типографский знак, обозначающий улыбку, — нечто вроде выгнутой линии, лежащей навзничь скобки; именно этот значок я поставил бы вместо ответа на ваш вопрос.” 1969 Идея Владимир Набоков 1982 Типографское сочетание Скот Фалман 1998 Эмоджи Шигетака Курита
  13. Мозг. Эмоции. Интерфейсы. Юмор Фредди предупреждает, что “Пользователь с таким

    именем уже существует. Может быть, это ваш злой близнец. Жутковато.”
  14. Мозг. Эмоции. Интерфейсы. Юмор Вы - точно человек? Мы приносим

    извинения за путаницу, но мы не можем определить, человек вы или скрипт.. Пожалуйста, не принимайте это на свой счет. Боты и скрипты могут быть удивительно похожи на живых в наше время!
  15. Мозг. Эмоции. Интерфейсы. Проявление заботы Google Maps предлагает адрес аэропорта

    как точку назначения, если у вас запланирован перелет.
  16. Мозг. Эмоции. Интерфейсы. Проявление заботы Сбербанк замечает и подсказывает, если

    вы пытаетесь пополнить счет своего номера телефона и ввели его с ошибкой.
  17. Мозг. Эмоции. Интерфейсы. Удивление и радость Asana - таск менеджер.

    Единорог, серьезно? “Вы только что видели единорога, очень редкое явление, отмечающее вашу производительность”.
  18. Мозг. Эмоции. Интерфейсы. Сюрпризы И даже facebook - далеко не

    корпорация добра - заставляет улыбнуться :)
  19. Мозг. Эмоции. Интерфейсы. Ми-ми-милота Грокончик - милый, но серьезный персонаж

    для серьезной такой технической IT-конференции, и поэтому зубастый
  20. Мозг. Эмоции. Интерфейсы. Угадывание желаний IOs понимает, когда твоя заметка

    - не просто заметка. Когда действительно может понадобится напомнить накануне.
  21. Мозг. Эмоции. Интерфейсы. Стратегия: эмоциональный образ продукта • Свойства бренда

    • Карта индивидуальности • Голос • Примеры текста • Визуальный лексикон • Методы связи
  22. Мозг. Эмоции. Интерфейсы. Эмоциональный образ: создание маскота Имя бренда: MailChimp

    Обзор: Фредди фон Чимпенхаймер IV, крутой, дружелюбный, радушный, Любит пошутить, подбросить пасхалку, но серьёзен, когда шутки не уместны. Праздник всегда с тобой, если он не мешает работе. Индивидуальность Свойства бренда: весело, но не по-детски. Смешно, но не глупо. Функционально, но не сложно. Стильно, но не чуждо. Просто, но не простецки. Надежно, но не скучно. Неформально, но не разгильдяйски. Голос: Дружелюбный, любит травить анекдоты (но такие, которыми можно поделиться с мамой), рассказывает истории и общается с пользователями, как с близкими. Неформальные приёмы: сокращения и строчные буквы.
  23. Мозг. Эмоции. Интерфейсы. Эмоциональный образ: создание маскота Примеры текста: «Дай

    пять! Твой список успешно импортирован»., «Ой, кажется, ты забыл ввести адрес». Сбой: «Один из наших серверов временно недоступен. Наши инженеры работают над этим и скоро все исправят. Спасибо за терпение». Методы связи: Удивление и восторг, Пасхалки и тематические страницы, Предвкушение. Улыбка. Юмор. Визуальный лексикон: Цвет. Яркая палитра с чистыми цветами. MailChimp забавный, но функциональный и не детский. Типографика. MailChimp легок на подъем, прост и эффективен, и типографика это демонстрирует. Простые шрифты без засечек, грамотная иерархия создают ощущение уюта. Общий стиль. Элементы интерфейса простые, интуитивно понятные, не устрашающие. Мягкие, нежные текстуры смягчают пространство. Человечный дизайн.
  24. Мозг. Эмоции. Интерфейсы. Спасибо за внимание Вам и Вашим лобным

    долям! * Особые благодарности: затылочным долям - за то, что смотрели, височным долям - за то, что слушали и запоминали, теменным долям - за то, что понимали.
  25. Мозг. Эмоции. Интерфейсы. Ваши вопросы? и ваши крутые примеры из

    памяти и недр миндалевидного тела... @funnypersimmon сообщество Gribbble на community-z.com
  26. Мозг. Эмоции. Интерфейсы. Спасибо за помощь: • Аарон Уолтер, книга

    “Эмоциональный дизайн” • Стефен Андерсон, книга ”Приманка для пользователя” и Mental Notes • Дон Норман, книга “Эмоциональный дизайн” • Джон Медина, книга “Правила мозга” • Вячеслав Дубынин об устройстве мозга - shorturl.at/dnLP8 (лекции, Постнаука) • Дарья Косило, Александра Привадо - “Seductive Mobile Design”, shorturl.at/BUV79 • Дмитрий Мацкевич - “Behavioral engineering”, shorturl.at/hmK07 (видео, youtube) Еще замечательно по теме: • Дмитрий Ваницкий - “Закрытые операции на мозге”, shorturl.at/vDVW5 (статья, Medium) • Юлия Анкудинова - “Эмоциональный дизайн. Как создать продукты, которые полюбят пользователи” (выступление, UX-Марафон#17)