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

Важно: открыв сайт, для полного погружения включите звук правом верхнем углу сайта.

Итак, особенность проекта — два фактических заказчика.

Systeme Electric заказал промосайт у агентства Praxis Group.

Непосредственно к нам обратилось агентство Praxis Group, с которым сотрудничаем уже много лет.

Systeme Electric — российский производитель электрооборудования и разработчик комплексных решений для распределения электроэнергии, промышленной автоматизации и IT-инфраструктуры. Systeme Electric образован в 2022 году на базе российского бизнеса Schneider Electric. Компания локализовала производство и разработки, сохранила портфель продуктов и работает под собственными брендами Systeme Electric, DEKraft и «Механотроника».

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

Systeme Electric заказал у Praxis Group промосайт. Дизайнеры агентства придумали концепцию сайта, продумали дизайн, визуализировали и анимировали 3D-модели продуктов. Чтобы детально продемонстрировать пользователям конструктивные особенности выключателей, Praxis разламывали устройства молотком и разбирались в деталях.

Разработчиками выступили мы, Sborka Project. Агентство ожидало, что мы не просто напишем код, но и выступим полноценным партнером, грамотно и креативно реализуем дизайн-решения.

Итак, задачи со стороны конечного заказчика, Systeme Electric:

1. Наглядно продемонстрировать не самые стандартные для креативной презентации продукты: — выключатели и автоматы.

2. Отразить ключевые УТП (уникальные торговые предложения) через анимацию и видео.

3. Реализовать удобный с пользовательской точки зрения сайт, безупречно работающий на любых устройствах.

Задачи со стороны Praxis Group:

1. Провести пользователя по пути от «зашел случайно из поисковика» до «хочу купить только это!» через цепочку принятия решения, накидывая все больше и больше аргументов «за».

2. Удивить дизайном и наполнением, сформировать мнение через дизайн о том, что предлагаемый продукт — золотой стандарт в категории/нише.

3. Предоставить покупателю исчерпывающую информацию о каждом продукте.

4. Отстроиться от конкурентов через форму подачи/дизайн/wow-эффект.

Начали с базы – подготовили основу для одноэкранных страниц.

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

Этап работы с видео* можно разбить на два пункта.

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

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

Кроме того, мы решили задачу, как сопоставить время стандартного видео со временем видео, которое воспроизводится в обратном порядке. Зачем это нужно? Дело в том, что на главной странице не одно, а два видео, поэтому у пользователя должна быть возможность листать слайды туда-обратно без скачков.

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

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

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

Всегда следим за трендами в анимации и веб-разработке и быстро внедряем лучшие решения. Например, прямо во время работы над проектом вышла новая версия Anime.js, и на нее мы переходили сразу на рабочем проекте.

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

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

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

Веб-анимация — инструмент обучения и удержания пользователя.

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

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

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

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

Что дает такое решение клиенту:

- закрытие пробелов в знаниях пользователей;

- точную демонстрацию УТП (следовательно, упрощает и ускоряет процесс выбора);

- отстройку от конкурентов;

- рост показателей вовлеченности за счет проработанного CJM, закрытия возражений на всех этапах воронки;

- сокращение времени принятия решения, сокращение цикла сделки;

- увеличение конверсии;

- укрепление имиджа бренда как технологического лидера.

А что говорит клиент?