Мне всегда импонирует, когда на сайтах или в ПО разработчики добавляют что-то такое, что по-доброму заставляет улыбнуться. В продажах — это отличный маркетинговый прием, а в разработке — хорошая возможность выделиться и сделать так, чтобы вас запомнили.
Вводные
Итак, у нас есть обычная форма входа: логин, пароль и кнопка входа. Функционально, скучно, знакомо. Мы видим такое каждый день и не замечаем. А теперь вообразите, что под полями сидит веселый анимированный персонаж. Например, йети.
Когда вы печатаете логин, он с интересом водит глазами за курсором. Как только вы начинаете вводить пароль, он в страхе закрывает глаза лапами — секрет есть секрет 🙂 Нажали на значок «показать пароль»? Йети с хитростью приоткрывает один глаз и смотрит. Ввели всё правильно — он рад. Сделали ошибку — он хватается за голову.
Это больше, чем веселая игрушка. Это пример дизайна, вызывающего эмоции. Такой подход делает работу с программой и функциональной, и приятной.
Что это и как устроено?
Эта идея существует давно. Один из хороших примеров — проект «Teddy», который сделал веб-дизайнер Дарин Сенеф (Darin Senneff). Технически он состоит из трех частей:
- SVG-анимация: Персонаж нарисован в формате SVG. Поэтому он легкий, меняет размер без потери качества, и его легко анимировать.
- CSS: Стили делают переходы между состояниями анимации плавными.
- JavaScript: Скрипт следит за действиями пользователя — выбор поля, ввод букв, нажатие кнопок — и меняет состояние персонажа.
Главные состояния анимации:
- Idle (Ожидание): Персонаж сидит спокойно, дышит и моргает.
- Login Input: Глаза двигаются за кареткой в поле логина.
- Password Input: Персонаж прячет глаза за руками.
- Success: Показывает радость после верного входа.
- Fail: Показывает удивление или печаль при неудаче.
Готовые примеры кода есть на Codepen. Это позволяет довольно легко встроить такую функцию в свой веб-проект.
Почему это полезнее, чем просто украшение?
Для руководителя ИТ в разработке любая функция должна иметь цель. Добавление такого персонажа — это не бесполезная трата времени, а шаг, у которого есть несколько задач.
1. Уменьшение стресса и создание контакта
Форма входа может создавать преграду. Пользователь может неверно ввести пароль или логин. Это вызывает небольшое раздражение. Смешная реакция персонажа на ошибку делает этот опыт веселым и снимает напряжение. Пользователь начинает думать, что система дружелюбна. Это первый шаг к построению лояльности.
2. Узнаваемость и отличие от других
Ваш продукт больше не будет «просто еще одним сервисом». Он станет «тем сервисом со смешным йети». Эта деталь запоминается и хорошо отличает вас от конкурентов со стандартными, одинаковыми интерфейсами.
3. Увеличение интереса
Это называется микровзаимодействие. Маленькая, но продуманная реакция программы на действия человека. Такие детали оживляют продукт. Они побуждают пользователя дольше оставаться в программе и изучать её.
Практический взгляд: какие есть риски и минусы
Даже с учетом плюсов, внедрять такую функцию нужно обдуманно.
- Скорость работы. Анимация, если она плохо сделана, может замедлить загрузку страницы входа. Это плохо, потому что скорость важна для хорошего впечатления. Решение: использовать легкий SVG-файл и простой JS-код.
- Уместность. Веселый элемент подходит не для всех продуктов. В программе для банка или управления важной системой он будет выглядеть странно и может снизить доверие. Но для CRM, менеджера задач или сайта компании это хорошее решение.
- Отвлечение. Некоторых пользователей анимация может отвлекать. Нужно дать возможность её выключить в настройках. Это особенно важно для программ для бизнеса, где нужна полная концентрация.
- Поддержка. Это новый код. Его нужно обслуживать и проверять, как он работает в разных браузерах и на разных устройствах.
Вывод
Это отличный и полезный пример дизайна. Он с первого шага помогает наладить контакт с пользователем, делает продукт запоминающимся и смягчает неприятные ощущения от ошибок.
Да, на такие вещи нужны дополнительные время и силы для разработки и поддержки. Но когда много конкурентов, именно такие детали создают хороший пользовательский опыт и помогают удержать клиентов надолго.
А вы видели похожие «живые» интерфейсы или какие-то не стандартные приемы шутки на сайтах или в интерфейсах программ? Что вам больше всего запомнилось? Напишите в комментариях!
