Розробка дизайну сторінки 404 (помилки) сайту
Сторінка 404 — одна з кількох сторінок, які відвідують користувачі, вже зіткнувшись з проблемою. Мета тут не продавати та не інформувати, а утримати: дати зрозуміти, що сайт працює, та допомогти дістатися потрібного місця.
Що повинна робити хороша 404
Погана 404 — це білий екран з текстом «Сторінка не знайдена». Хороша вирішує три завдання:
- Підтверджує, що користувач на правильному сайті — логотип, кольори, навігація
- Пояснює, що сталося — коротко, без технічного жаргону
- Пропонує вихід — посилання на головну, пошук, популярні розділи
Кнопка «Повернутися на головну» — обов'язковий мінімум. Додатково: рядок пошуку (якщо він є на сайті), 3–5 посилань на ключові розділи, іноді — посилання в саппорт.
Візуальна складова
404 — одна з кількох сторінок, де уместна ілюстрація або анімація. Це компенсує розчарування користувача та створює запам'ятовуючий момент. Варіанти:
- Статична ілюстрація — кастомна графіка, що відповідає стилю бренду
- Lottie-анімація — векторна анімація вагою 20–100 KB, не нагружає сторінку
- CSS-анімація — прості анімовані елементи без зовнішніх залежностей
- Інтерактивний елемент — міні-гра (класика: Space Invaders у Google Chrome для офлайн-сторінки)
Для корпоративних сайтів часто обирають стримену ілюстрацію з гумором — космонавт у відкритому космосі, загубленого персонажа, зламаного робота. Важливо: ілюстрація не повинна відволікати від CTA.
Структура макета
Сторінка зазвичай займає viewport повністю (100vh). Центрований блок:
- Число «404» або ілюстрація — верхня частина, ~40% висоти
- Заголовок: короткий (2–6 слів), людський тон
- Підзаголовок: пояснення + пропозиція
- CTA-кнопка (основна) + текстове посилання (вторинна)
- Опціонально: рядок пошуку або список розділів
Хедер та футер зберігаються, якщо це не fullscreen-режим. На мобілі контент вибудовується в колонку, CTA займає повну ширину.
Практичний приклад
Для SaaS-платформи (B2B) розробляли 404 з Lottie-анімацією розрядженого акумулятора ноутбука — відсилка до «втрати з'єднання». Текст: «Ця сторінка розрядилася». Нижче — кнопка «На головну», пошук по документації та три посилання на популярні розділи хелпцентру. Bounce rate з цієї сторінки впав з 78% на 41% за даними за 90 днів після запуску.
Строки
Дизайн 404 з кастомною ілюстрацією — 2–4 дні: 1 день на концепцію та затвердження стилю, 1–2 дні на фінальний макет та адаптив, 0.5 дня на підготовку ассетів. Якщо ілюстрація береться з готової бібліотеки — 1–2 дні.