Зміна навігаційного меню та хедеру сайта Molniya

Хід роботи

Завдання, поставлені перед командою розробки, були чітко сформульовані та включали в себе наступні ключові аспекти:

• Оновлення навігаційної системи: Необхідно було повністю переробити структуру та візуальне оформлення головного меню, що дозволить користувачам швидше та ефективніше знаходити потрібну інформацію про асортимент продукції, зокрема про різні типи блискавок та супутні товари.
• Адаптивність та кросплатформність: Важливо було забезпечити коректне відображення та функціонування нового меню на всіх типах пристроїв – від широкоформатних моніторів настільних ПК до компактних екранів мобільних телефонів та планшетів. Це передбачало розробку адаптивного дизайну, що динамічно підлаштовується під розмір екрана.
• Розширення функціоналу “Каталогу”: Центральним елементом змін мав стати розділ “Каталог”. Для нього було поставлено завдання реалізувати багаторівневе випадаюче меню з інтерактивною поведінкою при наведенні курсору (на ПК) та натисканні (на мобільних пристроях). Це мало забезпечити не тільки візуальне представлення підкатегорій, а й можливість прямого переходу на сторінки відповідних категорій або підкатегорій.
• Покращення візуальної взаємодії: Детально було описано вимоги до візуального зворотного зв’язку: зміна кольору фону елементів меню при наведенні/натисканні, відображення стрілок, що вказують на наявність підменю, та чітке розмежування між розкритим та згорнутим станом елементів.
• Адміністративна гнучкість: Ключовою вимогою була можливість повного керування вмістом меню (додавання, видалення, редагування пунктів) через адміністративну панель сайту. Це забезпечує незалежність власників сайту від розробників для майбутніх оновлень та розширень асортименту.

Етапи реалізації

Етап 1: Аналіз та Планування

На початковому етапі було проведено ретельний аналіз існуючої структури сайту molniya.com.ua та molniya.eu.com/de/, а також детально вивчено наданий технічний опис та візуальні макети. Команда розробки сформулювала технічне завдання, розробила архітектуру нового меню та спланувала послідовність робіт. Особливу увагу було приділено визначенню оптимальних технологій для реалізації адаптивного дизайну та інтеграції з існуючою CMS. Були обговорені можливі варіанти реалізації багатоступеневих меню та обрано найбільш ефективний підхід, що забезпечує як функціональність, так і продуктивність.

Етап 2: Розробка інтерфейсу (UI) та користувацького досвіду (UX)

На цьому етапі було створено прототипи нового меню, враховуючи всі вимоги до візуального оформлення та інтерактивної поведінки.

• Дизайн для ПК-версії: Розроблено макет шапки сайту без бургер-меню, з інтегрованими основними пунктами навігації: “КАТАЛОГ”, “КАТЕГОРІЇ”, “ПРО НАС”, “БЛОГ”, “ЯКІСТЬ”, ””КОНТАКТИ”, “ПЕРЕДЗВОНІТЬ МЕНІ”, а також контактний номер телефону, іконка пошуку та вибір мови. Особливу увагу було приділено розробці випадаючого меню :
  • Взаємодія при наведенні: Реалізовано зміну фону на помаранчевий при наведенні та основні категорії в ньому.
  • Багаторівневість: Забезпечено можливість розкриття підменю при наведенні на конкретні типи блискавок (наприклад, “Спеціальні блискавки”), а також клікабельність як основних категорій, так і їх підпунктів для прямого переходу на відповідні сторінки.
  • Візуальні індикатори: Впроваджено відображення стрілок поруч з пунктами меню, які мають підкатегорії, що з’являються тільки за наявності відповідних елементів в адмінці.

До:

Після:

• Дизайн для мобільної версії: Для мобільних пристроїв було розроблено спрощений, але функціональний інтерфейс, що забезпечує зручність використання на невеликих екранах. Замість наведення, основною інтеракцією стало натискання.
  • Розгортання/Згортання: При натисканні на категорію (наприклад, “Спіральна блискавка”) або на іконку “+” поруч з нею, розгортаються підпункти.
  • Двоетапний перехід: Реалізовано функціонал, за яким перше натискання на категорію розгортає підпункти, а друге натискання (на ту ж категорію) здійснює перехід на відповідну сторінку. Якщо підпунктів немає, перехід відбувається з першого натискання.
  • Візуальна індикація стану: Іконка “+” змінюється на “–” при розгорнутому меню, вказуючи на можливість згортання.
  • Зміна кольору при активації: Колір фону змінюється при натисканні на елемент, що відкриває підменю, забезпечуючи візуальний зворотний зв’язок.

До:

Після:

Етап 3: Програмна Реалізація та Інтеграція

На цьому етапі була виконана безпосередня розробка програмного коду для впровадження нового функціоналу.

• HTML/CSS/JavaScript: Розроблено структуру HTML для нового меню, стилізовано за допомогою CSS, та реалізовано інтерактивну поведінку за допомогою JavaScript. Було використано сучасні підходи для забезпечення високої продуктивності та плавності анімацій.
• Інтеграція з CMS: Ключовим моментом була розробка модулів або налаштування існуючих компонентів CMS (систем управління контентом), що дозволяють адміністраторам сайту легко додавати, редагувати та видаляти пункти меню, а також вказувати наявність підкатегорій без залучення програмістів. Це забезпечує повну автономність у підтримці та розвитку навігації.
• Тестування: Проведено комплексне тестування функціоналу на різних пристроях та в різних браузерах для виявлення та усунення можливих помилок та недоліків. Тестування включало перевірку коректності відображення, швидкості відгуку, клікабельності всіх елементів та відповідності вимогам адміністративної панелі.

Етап 4: Розгортання та Моніторинг

Після успішного тестування, оновлене меню було розгорнуто на основних сайтах molniya.com.ua та molniya.eu.com/de/. Після розгортання було проведено моніторинг для відстеження поведінки користувачів та виявлення будь-яких неочікуваних проблем або можливостей для подальшої оптимізації.

Отриманий результат