Как анимация может помочь в непопулярной фиче
Перепост из корпоративного интранета от 16 августа 2017
Весной мы с Катей Моховой делали задачу под кодовым названием «цикл продаж». Мы делаем контуровский Биллинг — систему, которая помогает продавать продукты Контура. Наши пользователи — продавцы продающих подразделений и партнеры Контура.
Суть задачи в том, чтобы научиться собирать с продавцов статистику, которую мы не можем собрать автоматически. Это информация о том, как они работают с клиентом: какие есть этапы продажи, сколько времени проходит между этапами и вообще сколько времени занимает вся сделка. На основании этих данных мы планируем улучшать методологию продаж. Для сбора статистики мы добавили в карточку сделки чек-лист с этапами продажи:
Наш чек-лист отличается от списка простых чекбоксов, так как у него немного другая функция. Это скорее туду-лист — список дел, которые нужно сделать. Мы понимали, что этот чек-лист нужен далеко не всем пользователям: продвинутые партнёры и так ведут статистику у себя в CRM-системах, а небольшие партнёры вообще её не ведут.
Мы опасались, что пользователи не будут отмечать этапы. Захотелось замотивировать их пользоваться этапами и дать немного радости. Когда мы заканчиваем дело и вычеркиваем его из списка, у нас выделяется дофамин — гормон радости. Мозг награждает нас на проделанную работу. Мы заанимировали отчекивание этапа:
Первое время после релиза мы даже наблюдали забавный сайд-эффект: люди чекали и отчекивали этапы направо и налево, мы видели это в истории сделки.
Анимации завершения сделки
В этой же задаче мы увеличили жизненный цикл сделки. Если раньше сделка завершалась после выставления счета, то сейчас она живет до самого конца: надо дождаться оплаты и собрать закрывающие документы.
Поэтому доведение сделки до успешного завершения — большая радость: мы закончили работать с клиентом, никто никому ничего не должен. Почему бы это не поощрить?
Раньше, чтобы сделать какую-нибудь анимацию, мы объясняли фронтендерам на пальцах, что должно происходить. Тут это было бы сложнее. Мы с Катей обсудили на словах, какую анимацию примерно хотим, и набросали на коленке первый прототип. Потом мы сделали прототипы в Codepen с помощью CSS-анимаций. Получилось очень круто.
Нам понравилось делать анимации, это несложно и весело. Если вы ещё не пробовали, рекомендуем. Если не знаете, с чего начать, полезные ссылки:
- HTML Academy — лучшие онлайн-курсы;
- Animate CSS — примеры анимаций, которые очень легко подключить и использовать;
- CSS animation articles, tips and tutorials — много примеров с кодом;
- Codepen — бездна примеров анимаций, бери и используй.
