Промо на dev.uaТакая жизнь
27 октября 2023, 16:27
2023-10-27
Купить хостинг в Украине теперь проще на обновленном сайте Hyperhost.ua
Корректно утверждение, что разработка любого сайта не завершается с релизом, а продолжается вплоть до новой итерации. Средний жизненный цикл стандартного коммерческого сайта составляет около 5 лет. За это время полностью обновляется не только стек технологий, но и клиентский UX. Меняются правила адаптивности, требования поисковиков, браузеров, или вообще дизайн морально устарел, или банально «приедается». Так и у нас, в компании HyperHost, процесс редизайна фронтовой части сайта, задуманный еще в 2022-м, перерос фактически в ремастер (говоря терминологией из геймдева) всего проекта.
Корректно утверждение, что разработка любого сайта не завершается с релизом, а продолжается вплоть до новой итерации. Средний жизненный цикл стандартного коммерческого сайта составляет около 5 лет. За это время полностью обновляется не только стек технологий, но и клиентский UX. Меняются правила адаптивности, требования поисковиков, браузеров, или вообще дизайн морально устарел, или банально «приедается». Так и у нас, в компании HyperHost, процесс редизайна фронтовой части сайта, задуманный еще в 2022-м, перерос фактически в ремастер (говоря терминологией из геймдева) всего проекта.
В основу разработки заложили задачу сохранить лучшие элементы, упростить взаимодействие пользователя с проектом, при этом обеспечить максимальную скорость работы сайта и, конечно, воспользоваться лучшим опытом использования искусственного интеллекта имплементировано в опыт пользователей сайтов.
Далее более подробно рассмотрим реализацию трех основных задач разработки, с определенными выводами, которые могут быть полезны всем запланировавшим редизайн в 24-м.
Задача 1: Не сломать то, что работает
Самая сложная задача из всех. Старый сайт, хоть и «приелся», но свои функции выполнял в полной мере. Постоянные пользователи сайтами обычно достаточно консервативны и плохо воспринимают радикальные изменения. Но основные фишки все же удалось сохранить:
Покупка услуги или заказ теста в несколько кликов;
Вся корзина в 1 окне в противовес пошаговым решениям. Стандартная корзина WHMCS — в основном пошаговая, увеличивающая нагрузку на пользователя и блокирующая часть контента. У нас принято использовать кастомизированное решение для упрощения взаимодействия;
Табличная подача параметров для сравнения тарифов хостинга. Мы заметили, что данный тип подачи данных все меньше используют другие сервисы в отличие от карт. Однако анализ взаимодействия с клиентами показал, что именно таблицы упрощают восприятие больших массивов информации (привет фанатам google sheets);
Возможность протестировать функционал конструктора сайтов в 1 клик прямо с сайта, без регистрации. Да, все наработки будут удалены в течение 24 часов, однако это позволяет клиенту понять, будет ли он разрабатывать сайт на конструкторе, или закажет готовое решение у вебмастера.
Вывод: Любое переосмысление старого дизайна следует производить под пристальным наблюдением менеджера проекта и менеджеров компании всех уровней, ведь только вы знаете, что работает на сайте. Даже самые архаические вещи на старых сайтах могут быть лид-магнитами для вашей ЦА.
Задача 2: Добавить новые элементы — не забыть об ИИ
Кажется, ни один современный проект не может обойтись без искусственного интеллекта, что же нам удалось не просто реализовать «хайповую» вещь, мы смогли удовлетворить потребность клиента.
Искусственный интеллект поможет подобрать имя домена только по нескольким ключевым словам в любой доменной зоне. Мы заметили, что одна из самых сложных задач клиента — выбрать хорошее, неповторимое и вместе с тем короткое название сайта. Использование AI идеально подходит для этих задач, ведь позволяет использовать синонимы, аналоги слов и разнообразную комбинацию терминов.
Новый тип подачи тарифов в формате карт, идеально вписывающихся в любое расширение экрана;
Подача запроса на бесплатный перенос сайта в «Гипер», буквально в несколько кликов. Больше не нужно долго подобрать тариф и сформировать запрос на перенос. Согласно тарифу старого хостинга формируется заказ и производится согласованный перенос.
Мобильное взаимодействие с сайтом теперь столь же просто, как и десктопное. Хотя только 17% пользователей сайта используют смартфоны, теперь они просто могут воспользоваться всем функционалом.
Вывод: Изучая конкурентов, вы никогда не знаете, работают ли на самом деле элементы дизайна, у них на сайте. К сожалению, нужно быть готовым, что даже идеальный элемент, отрисованный в дизайне, не сработает на практике, и вам придется отказаться от кнопок, ховеров, карточек, анимаций и многих других вещей, которые вам очень нравились, но не нравятся вашим клиентам.
Задача 3: Скорость
Сегодня скорость сайта — это не только требование поисковых систем, это уважение своих клиентов, в том числе и пользователей мобильного трафика. Именно поэтому мы отказались от изображений PNG в пользу SVG, широко применяем WebP, а также актуальные системы кэширования контента, что позволило значительно улучшить показатели быстродействия сайта.
Вывод: Используйте Lighthouse — уже на этапе разработки, а dev-сервер близок по конфигам к рабочему проекту. Замерьте характеристики и отказывайтесь от тяжелых частей. Используйте heatmap-сервисы после релиза, чтобы собрать реальный опыт использования вашей разработки.
К слову, предыдущий редизайн был проведен в далеком 2017-м году и работа над ним не остановилась ни дня, а значит и сегодня, нас ждет большая работа по улучшению пользователей интерфейса и обеспечению баланса между функциональностью и скоростью работы. Впереди — реализация многих интересных идей, нового функционала и сервисов, в частности, с углублением применения искусственного интеллекта клиентами на этапе создания и использования собственного сайта.
