Основна проблема 404 сторінки – негативні емоції, які отримує користувач, коли потрапляє на неї. Однак те, як оформлена 404 сторінка, може суттєво вплинути на ставлення користувачів до продукту та бренду. Продумана сторінка здатна справити на відвідувачів позитивне враження та звести до мінімуму ймовірність відмови від подальшої взаємодії.
Чому 404?
З технічної точки зору, 404 – це код повідомлення про помилку, який веб-сервер відправляє клієнту (вашому браузеру), коли не може знайти те, що запитав користувач. Простіше кажучи, сторінка 404 — сторінка помилки, яку бачать відвідувачі веб-сайту, коли натискають на посилання, що не працює.
3 основні причини, чому не працює посилання
- Контент більше не доступний для відвідувачів. Компанія видалила контент із сайту, але посилання все ще доступне в результатах пошуку Google.
- Модератор контенту або веб-розробник додав на сайт неправильне посилання. Наприклад, неправильно скопіював URL-адресу або перемістив сторінку на іншу URL, без редиректу.
- Відвідувач сайту неправильно ввів URL-адресу. Це особливо актуально для користувачів мобільних пристроїв, оскільки набагато простіше помилитись, якщо ви вводите дані на маленькому екрані.
У чому переваги продуманої сторінки 404?
В ідеалі користувачі ніколи не повинні бачити сторінку 404. Але насправді і відвідувачі, і модератори сайтів роблять помилки. Нудні та непродумані сторінки помилок викликають у людей розчарування, проте якщо ми зробимо все правильно, то зможемо перетворити це розчарування на захват.
- Переваги для користувачів. Коли люди потрапляють на грамотно оформлену сторінку 404, вони не відчувають, що опинилися в безвиході. Така сторінка допомагає відвідувачам вирішити, що робити далі. Наприклад, пропонує перейти на одну з найпопулярніших сторінок сайту.
- Візуальні переваги. Гарний дизайн справляє позитивне враження. Тут набуває чинності ефект естетики-юзабіліті: користувачі більш терпимі до незначних проблем продукту, якщо інтерфейс здається їм візуально привабливим.
- Маркетингові переваги. Гарний дизайн зміцнює імідж бренду. Найкращі сторінки 404 підштовхують відвідувачів до правильних рішень та можуть значно підвищити конверсію.
З яких елементів складається сторінка 404?
Кожна веб-сторінка створюється з базових будівельних блоків – хедера, основного контенту та футера. Щоб сторінка 404 виглядала послідовно, ви можете використовувати на ній той самий хедер і футер, що і на інших сторінках сайту.
Текст «сторінку не знайдено» – абсолютний мінімум. Якщо на вашому сайті багато контенту, ви також можете додати на сторінку помилки панель пошуку, яка дозволить користувачам швидко знайти те, що їм потрібно. Наприклад, компанія Apple вибрала для своєї сторінки 404 досить стандартний дизайн - заголовок + рядок пошуку (хедер і футер також на місці).
Можна зробити сторінку візуально привабливішою, додавши ілюстрацію або фотографію. Зображення можуть донести основну ідею набагато швидше ніж слова. В ідеалі текстові повідомлення та ілюстрації повинні доповнювати одне одного та допомагати відвідувачам зрозуміти, що відбувається. Сторінка 404 компанії Lego — чудовий приклад поєднання чудової графіки та продуманого тексту.
Як створити класну сторінку помилки: найкращі практики та приклади
Найважливіше правило – «Чим простіше, тим краще». Вам не потрібно створювати щось інноваційне. Основне завдання сторінки помилки – дати користувачам чіткий сигнал про те, де вони знаходяться та що їм робити далі. Ми рекомендуємо дотримуватися принципів мінімалізму — менше тексту та візуальних деталей — щоб зробити його ефективнішим.
Друге завдання сторінки 404 — запобігти виходу відвідувачів та спонукати їх до подальшої взаємодії. Для цього необхідно додати до дизайну функціональні або декоративні елементи. Які саме залежить від характеру сайту.
Не додавайте на сторінку надто багато контенту
Користувачі не читають, а сканують. Це правило стосується всіх веб-сторінок, включаючи сторінку помилки. Тому нам потрібно спроєктувати її таким чином, щоб відвідувачі могли подивитись екран і миттєво зрозуміти, що відбувається.
Уникайте довгих фрагментів тексту. Відразу переходьте до справи. Наприклад, сторінка помилки на сайті Жені Ринжук містить лише одну пропозицію («Помилка 404») та одне посилання («Поверніть мене назад»), яке веде на головну сторінку.
Уникайте типових повідомлень про помилки
Недостатньо написати сухий лаконічний текст. Переконайтесь, що повідомлення має правильний тон. Типові формулювання на кшталт «404: Сторінка не знайдена» здаються холодними та роботизованими, вони не викликають у відвідувачів позитивних емоцій.
Будьте більш доброзичливими, наприклад «Упс! Цієї сторінки не існує». Розробник Hugoware пішов ще далі. Напис говорить: «404. Сторінку затягнуло у вирву!» і... всі елементи буквально починають крутитися у центрі екрана.
Пам'ятайте про візуальну узгодженість
Візуальна узгодженість - невід'ємна якість гарного дизайну. Ми повинні використовувати ту саму візуальну мову (кольори, шрифти, відступи) для оформлення всіх сторінок, у тому числі сторінки 404. Вона повинна ідеально вписуватися в брендинг продукту, як у плані комунікації, так і в плані стилю. Так ми зробимо досвід звичнішим і спростимо навігацію по сайту.
Зверніть увагу, як Mailchimp, сервіс автоматизації електронних розсилок, підтримує візуальну узгодженість на своїй сторінці 404. Кнопка заклику до дії Mailchimp Home (Головна) оформлена, так само як і кнопка Sign Up (Зареєструватися) у верхньому правому кутку.
Зробіть сторінку помилки функціональною
Основне завдання сторінки 404 — підказати відвідувачу, як діяти далі, тому важливо запропонувати наступний крок. Це може бути одне посилання (наприклад, "Перейти на головну"), кілька посилань на ключові сторінки (наприклад, "Головна", "Продукти" та "Про нас") або навіть панель пошуку (актуально для сайтів електронної комерції).
Важливо не переборщити. Занадто довгий список посилань зробить сторінку менш естетичною, а відвідувачам буде важче вирішити, що робити далі. Це явище відоме як параліч вибору. Використовуйте дані аналітики, щоб зрозуміти, які розділи вашого сайту найбільш важливі для аудиторії (краще не більше 5), та додайте їх на сторінку помилки.
На сторінці 404 Airbnb ми бачимо кілька опцій, які становлять основні функціональні можливості продукту.
Підберіть релевантні зображення
Одне зображення може сказати більше тисячі слів. Правильно підібрані фотографії, ілюстрації та відео – чудовий інструмент візуальної комунікації та спосіб продемонструвати увагу до деталей. Вони допоможуть зацікавити користувачів, викличуть у них емоції та спонукатимуть залишитися на вашому сайті.
Приклад доречної графіки – сторінка 404 стрімінгового сервісу Spotify. Вінілова платівка — чудова візуальна метафора, зрозуміла аудиторії платформи.
Вибирайте зображення, які асоціюються у більшості відвідувачів з вашим брендом. Відвідувачам має бути легко розшифрувати ваше посилання. Наприклад, якщо ви продаєте автомобілі, ви можете додати на сторінку 404 ілюстрацію машини.
Залишіть достатньо «повітря»
На сторінці 404 не так багато контенту, а негативний простір дозволяє йому дихати. Чим більше «повітря» навколо конкретного елемента, тим більше уваги він привертає.
Цікавий приклад – чорно-біла сторінка помилки студії CUSP. Ми бачимо в центрі тривимірну сферу, яка обертається за рухом курсора миші. Контраст і негативний простір працюють у тандемі, звертаючи увагу користувача на ключове повідомлення.
Важливо пам'ятати, що лейаут вашої сторінки повинен однаково добре виглядати на будь-якому екрані та в будь-якій роздільній здатності.
Використовуйте атрибути вашого бренду
Запитайте себе: "Чи можу я наочно показати, чим займається моя компанія?". Якщо так, вітаю — вам простіше знайти унікальну ідею для оформлення сторінки 404.
Креативна агенція Myriad Video, яка, як випливає з назви, спеціалізується на виробництві відеоконтенту, використовує зображення, що імітує вертикальні кольорові смуги, які з'являлися на екранах старих телевізорів під час налаштування. Більшість користувачів знайомі із цим сигналом і легко зрозуміють, чим займається компанія.
Пограйтеся з анімацією
Анімація може зробити сторінку помилки більш динамічною та живою та приємно здивувати відвідувачів. Приклад - сторінка 404 із сайту розробника програмного забезпечення Андреа Рені. Анімований «глітч» переміщається екраном під час руху курсора, надаючи користувачам візуальний зворотний зв'язок.
Додайте трохи гумору
Гумор - найкращий спосіб встановити контакт з аудиторією. Це може бути будь-що: від жарту до захоплюючої міні-ігри. Смішна сторінка помилки викличе позитивні емоції та спонукатиме відвідувачів довше залишатися на вашому сайті.
Розробник із Франції Ромен Бразьє знайшов досить незвичайний спосіб додати гумор у дизайн своєї сторінки 404. Потрапивши на неї, користувачі стають учасниками кумедної гри - їм потрібно рятувати лемінгів, що падають зверху (щоб у персонажа з'явився парашут, треба на нього клацнути 🪂). Це класне дизайнерське рішення робить досвід взаємодії більш людяним і захоплюючим навіть якщо користувач потрапив на сайт випадково.
Бути по-справжньому смішним — завдання нелегке. Якщо ви хочете додати гумор на свій сайт, переконайтеся, що ваші жарти знайдуть відгук у користувачів. Відвідувачі не повинні почуватися ображеними. Дізнайтеся більше про цільову аудиторію та використовуйте цю інформацію при створенні сторінки 404.
Додайте несподіваний, але корисний функціонал
Несподівані, але корисні функції можуть перетворити розчарування користувачів у захват. Прекрасний приклад – сторінка помилки Dribbble. Мінімалістичний лейаут містить всю необхідну інформацію, а повзунок у нижній частині екрана дозволяє генерувати HEX-коди кольорів та переглядати приклади використання кожного кольору (роботи складаються у цифри 404, натисніть на будь-яку картинку, щоб відкрити її у повному розмірі). Дуже цікава та корисна функція!
У дизайні є важливі деталі. Чим ретельніше ви їх опрацюєте, тим краще буде досвід ваших користувачів. Продумана сторінка помилки – яскраве свідчення того, що творці продукту щиро дбають про свою аудиторію.
