“Хотим как у Apple”: как мы разработали сайт для производителя электрооборудования с незабываемым UX

Главное о кейсе

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

Сайт Systeme Electric — интерактивный мост между продуктом и пользователем:

- благодаря анимации аудитория заглядывает в сердце продукта — такой опыт не всегда можно получить даже в офлайне (еще бы — не всегда под рукой есть молоток, чтобы разломать изделие и оценить внутреннее устройство);
- пользователи получают максимальную детализацию в интерактивной форме, что помогает им быстро и комфортно изучать продукты;
- качественная анимация создает уникальную визуальную атмосферу, которая запоминается и вызывает доверие.

Как проект изменил жизнь пользователей

Аудитории Systeme Electric больше не нужно разбираться в сложной документации и заказывать образцы продуктов: используя анимацию, мы детально отразили, как выглядят и работают изделия. Мы буквально показали устройства изнутри, тем самым снабдив пользователей уникальной информацией и закрыв их возражения ("Выключатель не хлипкий?", "А здесь предусмотрена защита" и т.д.).

Бизнес-задача и ее решение

Бизнес-задачи клиента:
- доходчиво продемонстрировать технические решения и дизайн сложного продукта;
- дать клиенту уникальный пользовательский опыт;
- сформировать доверие к бренду, узнаваемость.

Какой результат получил заказчик:
- закрытие пробелов в знаниях пользователей;
- точная демонстрация УТП;
- отстройка от конкурентов;
- рост показателей вовлеченности за счет проработанного CJM, закрытия возражений на всех этапах воронки;
- сокращение времени принятия решения, сокращение цикла сделки;
- увеличение конверсии;
- укрепление имиджа бренда как технологического лидера.

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

Крафт (мастерство), реализация, технические детали

Глобально отработали в пять шагов:
Собрали сайт и доработали верстку так, чтобы все элементы страницы отображались корректно в любом браузере.
Интегрировали видео: продумали всю логику и применили лучшие практики для управления состояниями видео.
Придумали и внедрили кастомную анимацию HTML-элементов.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Вёрстка
Начали с базы – подготовили основу для одноэкранных страниц. Мы использовали резиновую вёрстку — это такая вёрстка, при которой содержимое страницы должно масштабироваться пропорционально размеру окна браузера. Как правило, резиновая вёрстка учитывает только ширину окна браузера. Мы же развили подход, учитывающий сразу несколько метрик. Обычно это ширина и высота окна, а мы добавили еще и третий параметр – размер контейнера сайта, то есть той области, в которой масштабируются элементы страницы. Это исключает гигантизм элементов на больших мониторах и делает отображение сайта более универсальным.

Видео
Следующий этап мы посвятили работе с видео*, и его можно разбить на два пункта.

Пункт первый. Видеофайлы Praxis Group нам передали в двух кодеках: H.264, который работает практически на всех устройствах, и H.265, который позволяет сохранить высокое качество при небольшом весе файла. Мы написали скрипт, чтобы подбирать оптимальное видео для пользователя, исходя из возможностей его устройства.

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

И ещё нюанс: на главной странице это не одно, а два видео. Потому что у посетителя должна быть возможность листать слайды туда-обратно без скачков. Так что дополнительно мы решали задачу, как сопоставить время стандартного видео со временем видео, которое воспроизводится в обратном порядке.

*Всегда обращаем внимание на то, как оптимизирован контент клиента; предоставленные агентством видео в мире видеороликов потянули бы на «сына маминой подруги».

Анимация
На следующем этапе мы придумали и внедрили анимацию: плавные переходы, бабл-эффекты, ховеры, анимацию текстов.

Чаще всего для работы над анимациями используют библиотеку GSAP, однако мы предпочли Anime.js — функциональность такая же, но весит меньше. Всегда следим за трендами в анимации и веб-разработке и быстро внедряем лучшие решения. Например, прямо во время работы над проектом вышла новая версия Anime.js, и на неё мы переходили сразу на рабочем проекте.

Для анимации текстов мы использовали свою кастомную разработку, потому что готовые решения либо имеют недостатки, либо совсем не подходят, либо потребляют слишком много пользовательских ресурсов (чем замедляют работу сайта).

И кстати, в погоне за эстетикой нельзя забывать про удобство пользователя, так что в конце проекта по своей инициативе мы сделали тулбар с навигацией по экранам и базовую доступность с клавиатуры (стрелки и табы).

Скриншоты