Промо на 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-му році, але робота над ним не зупинялась жодного дня, а отже і сьогодні на нас чекає велика робота з покращення юзер-інтерфейсу та забезпечення балансу між функціональністю та швидкістю роботи. Попереду — реалізація багатьох цікавих ідей, нового функціоналу та сервісів, зокрема з поглибленням застосування штучного інтелекту клієнтами на етапі створення та використання власного сайту.
