Ошибаться красиво — рассказываем про ошибки 404

Когда мы вводим на сайте неверный адрес или щёлкаем по «мертвой» ссылке, он должен выдать стандартный код ответа HTTP — Not Found или «Ошибка 404». Но хорошо оформленная страница (с точки зрения дизайна и юзабилити) может не только поднять настроение пользователю, но и понять, что делать дальше. 

Сегодня расскажем что это за ошибка, зачем нужна страница 404 и покажем несколько примеров удачных четырестачетвертых страниц, которые вдохновят вас на создание креативной страницы 😏. 

Что значит ошибка 404?

У этой ошибки много имён:

• 404 Not Found
• 404 Error
• HTTP 404 Not Found
• The page cannot be found
• The requested URL was not found on this server

Своё название страница 404 получила от кода ответа сервера 404 — он означает, что сервер ничего не нашёл по указанному адресу. Обычно такая ошибка возникает, когда человек вводит некорректный адрес сайта или переходит по несуществующей ссылке (например, когда вы удалили старую ссылку, а в поисковой индексации она осталась). 

Страница 404 —  та, которая открывается автоматически, если запрашиваемый сайт невозможно найти. Такая страница может возникнуть на любом сайте, потому что её невозможно проконтролировать полностью.

Зачем нужна страница 404?

Кажется, что можно и обойтись без собственного дизайна страницы ошибки? Но на самом деле страница 404 нужна всем по нескольким причинам:

1. Вы не можете предотвратить все случайные ошибки, опечатки. Например, ваш потенциальный клиент может пропустить букву, не найти того, что искал и просто уйти.
2. Если у вас многостраничный сайт, то достаточно сложно отследить все адреса. К примеру, какой-то раздел сайта удалили, а где-то могли заменить адрес для улучшения SEO-показателей.
3. Когда у вас много неоформленных страниц 404, с которых пользователи не могут перейти на главную или другие разделы, у вашего сайта снижаются позиции в органическом поиске. Так что продумать дизайн страницы 404 — полезно для SEO.

В каких случаях возникают ошибки 404

На самом деле причин не так много. Вот несколько наиболее распространённых примеров: 

• удаление страницы с сайта;
• перенос ресурса на другой URL без установки редиректа;
• временная недоступность сайта;
• ввод неправильного URL;
• вирусы на сайте.

Неправильная переадресация тоже может быть причиной появления ошибки, поэтому при установке редиректа всегда необходимо проверять, всё ли работает корректно. Подробнее об этом можете прочитать в статье «Как поменять домен, чтобы сайт не просел в поисковой выдаче».

Памятка о создании страницы 404 — о чем стоит помнить

Хороший дизайн страницы 404 — способ по-человечески поговорить с вашим пользователем и удержать его на сайте. Поэтому при создании страницы с ошибкой держите в голове несколько правил.

Объясните пользователю, что вообще происходит

Для начала успокойте человека, попавшего на страницу 404. Объясните, что произошло. Например, можно перечислить причины ошибки: ссылка устарела и её убрали с сайта, допущена ошибка в адресной строке, раздел переехал на другую страницу и так далее.

Развлекайте и веселите

Дизайн такой страницы может быть не только удобным, но и забавным. Поэтому можете постараться отвлечь пользователей юмором и избавить их от чувства потерянности. С этим очень хорошо справляются изображения, видео, анимации (особенно смешные).

Конечно тон сообщения на странице ошибки зависит от позиционирования вашего бренда, но если есть возможность пошутить — почему нет?

Верните пользователя на сайт

Юмор и красивые картинки — это прекрасно. Но не стоит забывать, что вам нужно поскорее вернуть посетителя страницы 404 на сайт. Например, разместите кнопку «Вернуться на главную», чтобы не потерять потенциального клиента. Также можно разместить меню, поиск или раздел «Помощь», чтобы человек сам выбрал и нашёл, куда ему отправиться.

Сохраняйте свой стиль

Страница 404 — часть вашего сайта, поэтому она должна быть оформлена в стиле вашего бренда. Это касается цветов, шрифтов, персонажей и другого контента.

Будьте на шаг впереди

Лучший способ сделать так, чтобы пользователь не попал на страницу 404 — постоянно проверять «битые ссылки» на сайте. Если раз в месяц проверять потерянные статьи, видео, картинки и так далее, ваши пользователи будут все меньше попадать на страницу 404.

Кстати, у Google и Яндекс есть бесплатные сервисы для веб-мастеров, которые помогают найти неработающие ссылки.

12 примеров страниц 404

Теперь давайте рассмотрим удачные на наш взгляд примеры четырестачетвёртых страниц.

Посмотрите на крутую анимацию с сайта «Bench». Это ошибка? Или такой страницы нет, как и снежного человека, единорога или лох-несского чудовища. …или она существует? Хмм....

Или, к примеру, сервис email-рассылок «MailChimp» не только порадует пользователя прикольной иллюстрацией, но и вернёт на главную страницу.

Сайт игровой компании «Blizzard» ломается в прямом смысле этого слова. 

Некоторые компании делают страницы 404 интерактивными. Например, «Canva» предлагает пользователю собрать несложный пазл.

А сайт «Amphibian» — целую мини-игру с лягушками. 

А как насчёт не менее известного «Docker», где расстроенный кит смотрит на утонувший корабль. Нравится ли вам такая анимация? 

Ещё одну интересную реализацию ошибки 404 можно найти в блоге «Я люблю иконки». Попадая на такую страницу, посетитель увидит светящиеся число 404, по которому пробегает ящерица — очень креативно!

Если продолжать говорить о милых анимациях, то посмотрите на сайт «Airbnb» — при переходе на сломанную ссылку вы увидите не только девочку с упавшим мороженным, но и найдёте полезные ссылки.

На странице ошибке сайта «Pirate Code» вас встретит персонаж с главной страницы. Сейчас он задумчиво прогуливается по 404-й и ждет фикса...

А некоторые сайты предлагают целую блок-схему действий для тех, кто попал на страницу с ошибкой. Отличный пример — сайт «Orangecoat». 

Страница «9GAG» обыгрывает ошибку 404, используя популярные мемы. 

И ещё один пример — сайт «Discord». Здесь вы не только увидите анимацию с робото-хомяком, который старательно чинит страницу, но и полезные ссылки с очень креативным текстом для поднятия настроения! 

⌘⌘⌘

Идеальной формулы для страницы 404, конечно, не существует. Всё индивидуально и зависит от конкретного бизнеса — будьте креативными, но и не забывайте о пользе для посетителя сайта. 

Подписывайтесь на рассылку нашего блога — впереди ещё больше интересных статей и вдохновляющих подборок 💙.