UI Lab · Udena

Дофаминовые интерфейсы

Полигон для исследования механик удержания пользователей через анимацию, обратную связь и психологию вознаграждения. Каждый компонент — отдельный эксперимент, готовый к переносу в продакшен.

Нейробиология
Дофаминовая петля
Дофамин выделяется не в момент получения награды, а в момент её ожидания. Анимация загрузки, счётчик баланса, прогресс-бар — всё это искусственно растягивает ожидание и усиливает удовольствие от результата.
Поведенческая психология
Variable Reward
Переменное вознаграждение — механика из теории оперантного обусловливания Скиннера. Непредсказуемый результат формирует более устойчивое поведение, чем стабильная награда. На этом работают слот-машины, соцсети и лутбоксы.
UX-психология
Feedback Loop
Каждое действие пользователя должно получать немедленный визуальный ответ. Без обратной связи интерфейс ощущается мёртвым. Микроанимации закрывают петлю действие→реакция и создают ощущение живого отклика.
Когнитивная психология
Completion Compulsion
Незавершённый прогресс вызывает когнитивное напряжение — эффект Зейгарник. Шкалы, уровни, стрики эксплуатируют навязчивое желание мозга закрыть незакрытое. Именно поэтому Duolingo не даёт уйти без урока.
Социальная психология
Loss Aversion
Страх потери сильнее желания приобрести — открытие Канемана и Тверски. Анимация списания листьев делает потерю видимой и ощутимой. Пользователь активнее пополняет баланс, чем если бы цифра просто уменьшалась.
Дизайн-психология
Emotional Design
Дон Норман выделил три уровня дизайна: висцеральный (как выглядит), поведенческий (как работает) и рефлективный (что значит). Дофаминовые механики работают на всех трёх — красиво, отзывчиво и создаёт смысловую связь с продуктом.
04
Completion Compulsion · Milestone Reward
Путь реставратора
Прогресс-трек с четырьмя милстоунами: 10, 30, 50, 100 реставраций. Каждый этап с наградой, визуальная линия прогресса, карточки наград. Тестовые кнопки для проверки всех состояний.
Эффект Зейгарник в действии — незакрытый прогресс-бар держит внимание. Пользователь видит что уже на пути и до следующей награды недалеко. Это сильнее любого напоминания.
Прогресс-линияМилстоуны с наградамиКарточки достиженийВсе состояния
03
Milestone Reward · Surprise
Bird Button — подарок
После 10 реставраций пользователь получает неожиданный подарок — живую Rive-анимацию птицы с интерактивным hover и click. Milestone-механика: награда за достижение.
Неожиданная награда запоминается сильнее ожидаемой — это эффект сюрприза. Пользователь не знал что будет кнопка-птица, и именно поэтому запомнит этот момент и расскажет другим.
Rive-анимацияHover/click интерактивMilestone триггерSurprise reward
02
Anticipation · Peak-End Rule
Прогресс реставрации
Загрузка фото drag-and-drop, анимация ожидания 45–60 сек — контур обрастает листиками, пунктирная линия светится зелёным. По завершении листики срываются ветром, и появляется шторка до/после.
Большинство пользователей никогда не видели как граница фото "прорастает" листьями пока идёт обработка. Это нестандартный паттерн — мозг автоматически маркирует незнакомое как важное и откладывает в долговременную память. Финальный момент reveal через шторку — пик эмоции, и именно его человек вспомнит про сервис.
Drag & drop загрузкаЛистики по контуруФизика ветраШторка до/после
01
Variable Reward · Embodied Cognition
Баланс листьев
Анимация пополнения и списания внутренней валюты. +100 появляется в центре экрана, летит к балансу и уменьшается — как монета в копилку. При списании листики отрываются и падают с физикой. Счётчик перебирает каждое число честно, без пропусков.
Виртуальные валюты обычно просто меняют цифру. Здесь деньги летят физически — пользователь впервые видит как монета буквально падает в копилку, а листья отрываются при трате. Тело реагирует на физическую метафору сильнее чем на абстракцию — это называется embodied cognition. Человек запоминает не цифру, а ощущение.
Конфетти при пополненииФизика падающих листьевСчётчик с easingВспышка при касании