404-а помилка - це така штука, яка обов'язково має бути у будь-якого сайту з кількома сторінками. І найголовніше, щоб вона була приємно оформлена, щоб людина, отримавши помилку, не пішла з сайту, а повернулася в той розділ, де вона хотіла бути, і продовжила свої справи. Ось кілька порад, як це можна зробити.

Почнемо з пояснення, чому іноді перед нами виникає ця помилка. Це допоможе тобі правильно сформулювати пояснення для користувача. Є кілька варіантів:

  • Помилка в URL. Ну, буває, ми всі люди, помиляємося іноді. І якщо людина неправильно набрала адресу сторінки або перейшла за неправильним посиланням, то 404-а помилка на неї напевно чекає.
  • Сторінку перемістили в інший розділ і в підсумку у неї змінилася URL-адреса. Тут, власне, все зрозуміло - якщо адмін сайту щось перетягує з одного місця в інше, то й адреса у сторінки змінюється, і за старим посиланням вона вже недоступна.
  • Якщо розділи перейменовуються, то, звісно ж, і URL-адреса теж змінюється, і старі посилання стають недійсними.
  • Буває, що сервер платформи недоступний або просто не відповідає. У цьому випадку теж вискакує сторінка 404.
  • І, нарешті, сторінку за вказаним посиланням уже видалили. Це часто відбувається зі спецпропозиціями, розпродажами та сезонними товарами - вони з'являються, тішать нас певний час, а потім зникають без сліду, і за старими посиланнями ми вже нічого не знайдемо.


Так ось, саме це і варто пояснити відвідувачеві сайту, коли він бачить 404. Поясни користувачеві, що сталося і чому він потрапив на 404. Непогано додати нотку розради, щоб користувач не засмутився. Адже коли бачиш ось такий напис "404 Page Not Found" без жодних пояснень, можна відчути дискомфорт і почати нервувати.

У принципі, помилка трапляється на будь-якому сайті, тож створення сторінки 404 - це обов'язкова умова. Тільки односторінкові сайти можуть вважатися винятком. Адже на них немає ніяких інших сторінок, а отже, і немає інших посилань. Але якщо в тебе є кілька сторінок і складніша структура сайту, то й помилки під час переходу виникатимуть.

Приклад сторінки з сайту Adidas - є рядок пошуку, пропозиція популярних товарів, перехід на головну. Усе чітко.

Навіщо потрібна окрема сторінка

Як хороший дизайнер, ти маєш реалізувати цю сторінку нормально, а не "щоб було". 

Нам потрібна сторінка, яка продумана ретельно і має стильний вигляд. Навіщо?

Коли користувач стикається з помилкою, його перша, навіть неусвідомлена думка - закрити сайт. Наше завдання полягає в тому, щоб не допустити цього. І якщо зробити все грамотно, сторінка 404 може виявитися дуже корисною:

  1. Збереження і навіть збільшення трафіку. Часті відходи з сайту погано впливають на його рейтинг у видачі. І якщо помилку вибиває часто, то так і станеться. Тому важливо створити такий дизайн, щоб відвідувач не втік, а залишився на платформі. За належного підходу ти збережеш трафік і навіть зможеш збільшити його.
  2. Підвищення впізнаваності бренду і лояльності аудиторії. Дружелюбність, зручна навігація і продумані кроки для клієнта створюють позитивне враження про фірму.
  3. І, нарешті, це підвищить конверсію. Ми повинні дати відвідувачеві те, що він шукав, якщо він зайшов на сайт, але не побачив потрібну сторінку. Тому не просто повідомляй про помилку, що виникла, а й пропонуй вирішення проблеми.


Ось так вирішує питання Airbnb

Варіанти контенту

Для початку завжди повідомляй, що бачить користувач і чому. Простими словами. І неодмінно розмісти клікабельні елементи. Як мінімум кнопку з переходом на головну. Або меню. Сторінка повинна мати СТА, інакше ми ризикуємо втратити відвідувача. 

Шукай шляхи для залучення. Крім стандартного переходу на Main Page можна зробити ось ще що:

  • меню, розділи, товари - з активними посиланнями і прев'ю;
  • корисні матеріали - гайд, майстер-клас, нестандартна інструкція, лайфхак, каталог;
  • реклама - але не прямо в лоб, а як вибачення за незручності. Не знайшов той самий товар за акцією? Ось посилання на інші гарячі пропозиції. Або навіть промокод.
  • афіша/анонс - нехай буде інформація про події, які очікуються в найближчому майбутньому. Знову ж таки, з можливістю записатися або купити участь.
  • рядок пошуку - особливо ефективно для великих сайтів. Якщо шукати за категоріями довго, то нехай відвідувач введе відповідні ключові слова й одразу знайде те, що шукав. 
  • часті запитання - якщо щось пішло не так, то, можливо, відвідувачеві потрібна допомога. Розмісти розділ FAQ на сторінці 404, якщо це доцільно.
  • анімація або відео - ми вже говорили про те, що ролик замість статики добре працює на сторінці Success. Це доречно і на 404. Живий контент захоплює. Але й має приносити користь. Нехай там буде потрібна інформація.
  • інтерактив - більш складне рішення в плані реалізації, але таке, що дуже залучає. Тести, онлайн-ігри, опитування і подібні штуки змушують не тільки не упустити відвідувача, а й затримати його на сторінці. 
  • зворотній зв'язок - розмісти форму для повідомлення про проблему або стандартну зі зворотним зв'язком. Або може кнопку замовлення дзвінка. Це може допомогти, якщо відвідувач заплутався. Також це демонстрація турботи, тож спрацює для підвищення лояльності до бренду.
  • видача інших товарів/послуг - доречно, якщо відвідувач ввів URL, в якому є адреса категорії/підкатегорії, а самого товару вже немає. Тоді варто сказати, що цієї сторінки не існує, але є подібні з цього ж розділу. Може там знайдеться щось підходяще. Або просто відвідувач побачить правильний шлях і перейде за іншим посиланням. 


Хороша ідея - залишати на сторінці 404 шапку сайту і футер. У цьому разі у тебе вже будуть показані всі розділи і контакти, може бути форма зв'язку. Це розв'язує руки для інших рішень і творчості. 

 

Мила анімація зі сторінки 404 сайту https://weemss.com/

Кілька порад і умов

Великий плюс полягає в тому, що немає чітких критеріїв для оформлення сторінки помилки. Тому можна дати волю фантазії. І це навіть вітається - що прикольнішою буде сторінка, то краще вона запам'ятається. Жодних правил немає, але ось трохи слушних порад:

  • Загальна концепція для всього сайту - витримуй єдиний стиль, твоя 404 не повинна відрізнятися від інших сторінок ні дизайном, ні подачею. Це важливо насамперед для сприйняття - відвідувач повинен бачити, що він все ще на тому ж сайті. По-друге, це просто зручно, якщо використовувати вже готові елементи. Наприклад, зробити 404 на основі першого екрана головної сторінки. 
  • Гумор - змагання на найдотепнішу сторінку помилки оголошується відкритим. Розрядити обстановку і обіграти невдачу весело дійсно важливо. Особливо якщо зробити це з використанням тематики сайту. Ілюстрації, кумедні підписи та анімації будуть доречні. Звісно, якщо це не суперечить Tone of voice самого бренду.
  • Індивідуальний підхід - обігравай специфіку напряму. Якщо це будівельний сайт - нехай на 404 буде показаний поламаний кран і здивований працівник у касці. На сайті зоомагазину сумний котик. Ти розумієш концепт.
  • Чіпляй. Крім користі важлива естетика. Сторінка має свої функції - не лише інформувати, а й змусити відвідувача виконати потрібну нам дію. Тому важливо зачепити його увагу цікавою подачею. Юзер не повинен закрити вікно, щойно побачить напис "Помилка 404". Тож креативність вітається. 


Легендарний Pixar використовує персонажа зі свого ж мультфільму

Чого НЕ ПОТРІБНО робити

Головне - не відмовлятися від створення сторінки. Вона має бути. Є варіанти технічно уникнути появи 404, це називається перелінковка 301. У цьому випадку замість видачі помилки відвідувача просто викидає на головну або інші сторінки. Це дратує юзера і в підсумку ми можемо його втратити. 

Друге: намагайся не робити шаблонно. Погана сторінка 404 краще, ніж ніякої. Але в такому разі ти не використовуєш потенціал сайту на максимум і втрачаєш лідів. Грамотно оформлена сторінка помилки може стати корисним маркетинговим інструментом, не втрачай цей шанс. 

І ще. Роби оригінально. Нестандартний підхід окупається. Це може стати візитівкою бренду, маленькою, але крутою пасхалкою. Потрібно не робити абияк і не копіювати чуже, а присвятити час розробці цікавої ідеї. Це не тільки для сайту, а й для тебе - репутація дизайнера важлива, якщо зробиш круто, то будеш отримувати відповідні пропозиції.

Приклад сторінки 404 української геймдев-компанії https://www.playtika.com - пропонують одразу пограти або обрати потрібний розділ у футері

Дізнайся, як зробити класно

Завжди вийде відшукати цікаві рішення, якщо пам'ятати про головні завдання: допомогти користувачеві, не дати йому засмутитися, утримати його і дати бажане. 

Сторінка 404 зазвичай стає плацдармом для найсміливіших ідей, тож не втрачай шансу для самореалізації у творчому плані. Хоча варто розуміти, що без базових навичок UX/UI нічого придатного зробити не вийде. Тому відточуй навички, вивчай теорію, тренуй своє дизайнерське бачення. І вчися у професіоналів. Приходь на онлайн-курс "UX/UI легенда", там будуть усі фішки і секрети.