Йети, который подсматривает ваш пароль. Зачем делать интерфейсы живыми?

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

Вводные
Итак, у нас есть обычная форма входа: логин, пароль и кнопка входа. Функционально, скучно, знакомо. Мы видим такое каждый день и не замечаем. А теперь вообразите, что под полями сидит веселый анимированный персонаж. Например, йети.

Вводим логин
Когда вы печатаете логин, он с интересом водит глазами за курсором. Как только вы начинаете вводить пароль, он в страхе закрывает глаза лапами — секрет есть секрет 🙂 Нажали на значок «показать пароль»? Йети с хитростью приоткрывает один глаз и смотрит. Ввели всё правильно — он рад. Сделали ошибку — он хватается за голову.

Вводим пароль
Это больше, чем веселая игрушка. Это пример дизайна, вызывающего эмоции. Такой подход делает работу с программой и функциональной, и приятной.

Готовые примеры кода есть на Codepen. Это позволяет довольно легко встроить такую функцию в свой веб-проект.

Что это и как устроено?
Эта идея существует давно. Один из хороших примеров — проект «Teddy», который сделал веб-дизайнер Дарин Сенеф. Технически он состоит из трех частей:

1. SVG-анимация: Персонаж нарисован в формате SVG. Поэтому он легкий, меняет размер без потери качества, и его легко анимировать.
2. CSS: Стили делают переходы между состояниями анимации плавными.
3. JavaScript: Скрипт следит за действиями пользователя — выбор поля, ввод букв, нажатие кнопок — и меняет состояние персонажа.

Почему это полезнее, чем просто украшение?

Для руководителя ИТ в разработке любая функция должна иметь цель. Добавление такого персонажа — это не бесполезная трата времени, а шаг, у которого есть несколько задач.

1. Уменьшение стресса и создание контакта
Форма входа может создавать преграду. Пользователь может неверно ввести пароль или логин. Это вызывает небольшое раздражение. Смешная реакция персонажа на ошибку делает этот опыт веселым и снимает напряжение. Пользователь начинает думать, что система дружелюбна. Это первый шаг к построению лояльности.
2. Узнаваемость и отличие от других
Ваш продукт больше не будет «просто еще одним сервисом». Он станет «тем сервисом со смешным йети». Эта деталь запоминается и хорошо отличает вас от конкурентов со стандартными, одинаковыми интерфейсами.
3. Увеличение интереса

Это называется микровзаимодействие. Маленькая, но продуманная реакция программы на действия человека. Такие детали оживляют продукт. Они побуждают пользователя дольше оставаться в программе и изучать её.

Практический взгляд: какие есть риски и минусы
Даже с учетом плюсов, внедрять такую функцию нужно обдуманно.

- Скорость работы. Анимация, если она плохо сделана, может замедлить загрузку страницы входа. Это плохо, потому что скорость важна для хорошего впечатления. Решение: использовать легкий SVG-файл и простой JS-код.
- Уместность. Веселый элемент подходит не для всех продуктов. В программе для банка или управления важной системой он будет выглядеть странно и может снизить доверие. Но для CRM, менеджера задач или сайта компании это хорошее решение.
- Отвлечение. Некоторых пользователей анимация может отвлекать.

Вывод
Это отличный и полезный пример дизайна. Он с первого шага помогает наладить контакт с пользователем, делает продукт запоминающимся и смягчает неприятные ощущения от ошибок.

А вы видели похожие «живые» интерфейсы или какие-то не стандартные приемы шутки на сайтах или в интерфейсах программ? Что вам больше всего запомнилось? Напишите в комментариях!