Ошибка 404: можно ли извлечь из неё пользу?


Ошибка 404... кто из пользователей Интернета с ней не сталкивался? Она является самой распространённой и возникает вследствие того, что при наборе адреса страницы в него закралась ошибка. В результате запрос был понят сервером, однако по указанному адресу web-ресурс не был обнаружен, о чём пользователь и получил данное уведомление.

Современные разработчики стремятся делать страницу 404 максимально полезной: как для её посетителей, так и для себя. Во-первых, соответствующе её оформив, можно подсказать посетителю, что ему делать дальше, а во-вторых – перевести его на некую другую страницу сайта. Данная статья посвящена подобным решениям. Кто знает: возможно, какое-то из них вдохновит Вас на разработку своего!

“SerpTop”: Приём! Приём! Вы в открытом космосе, возвращайтесь на Землю!

Мы постарались, чтобы нашим посетителям не было скучно… А потому сделали 404 страницу не совсем обычной, оформив её в виде открытого космического пространства с «летающей тарелкой».

Пример страницы 404

Использовав эффект “Parallax”, мы добавили ей оригинальности. Так и хочется покрутить курсором на странице и подождать появления инопланетян! На этот раз контакт не состоится – ну а мы предлагаем вернуться на Землю, перейдя по ссылке «Начать сначала».

“Mantra Labs”: ещё один выход в космос

Разработчик цифровых решений “Mantra Labs” на своей странице 404 «Не найдена» сообщает о том, что у Вас закончился кислород.

Mantra Labs - страница 404

На странице изображён космонавт в скафандре и предусмотрена возможность возвращения домой (точнее – автоматического перехода на главную страницу сайта через 10, 9, 8… ну, и так далее секунд). Если Вы слишком нетерпеливы или не хотите испытывать судьбу и оставаться без кислорода, можете просто нажать на ссылку “Home Page”.

“Ready to Go Survival”: готов ко всему

Интернет-магазин, предлагающий комплекты жизнеобеспечения в чрезвычайных ситуациях, на своей странице 404 уведомляет посетителя о том, что он снова потерялся в Матрице.

Ready to Go Survival - страница 404

На странице изображён Морфеус, предлагающий, как и в фильме, две таблетки:

  • Синяя отправит посетителя на главную страницу, где история закончится и ему будет позволено верить в то, во что он верит;
  • Красная позволит ему перейти в «Страну чудес», т. е. на страницу где представлены индивидуальные комплекты для выживания, созданные для профи, и увидеть, насколько далеко могут зайти приготовления к ЧС.

“Dribble”: дизайн не только ради дизайна

Дизайнеры агентства “Dribble” не были бы дизайнерами, если бы не оформили страницу ошибки с присущей им креативностью и отсылкой на аспекты своей работы. Использовав анимацию при составлении цифр “404”, они прибегли к разным цветовым решениям.

Dribble - страница 404

Цифры же состоят из маленьких открыток, каждая из которых увеличивается при наведении на неё. Помимо этого, посетитель может выбрать цвет изображения, использовав шкалу ниже, и даже узнать цифровое обозначение выбранного ним оттенка.

Dribble - страница 404

Помимо этого, он имеет возможность найти дизайнера или дизайн с помощью формы поиска, увидеть решения, представленные в выбранном им цвете, перейти на главную страницу или написать сотруднику.

“Ueno”: креатив в действии

Сотрудники креативного агентства “Ueno” демонстрируют знание испанского, неплохое чувство юмора и, конечно же, свою креативность. Их страница “Not Found” оформлена с использованием анимации, изображающей забавный хот-дог, бегущий по сюрреалистичному ландшафту.

Ueno - страница 404

Поясняющая надпись гласит сначала на испанском «Фигово!», а потом – и на английском: «Вы попали сюда, потому что что-то искали, но в результате получили глупый бегущий хот-дог. Это нехорошо. Ох как нехорошо!». Посетитель имеет возможность перейти в любой из разделов сайта, поскольку все они представлены на данной странице (что действительно удобно).

“Marvel”: всё о супергероях

Разработчики сайта для “Marvel” проделали серьёзную работу, привязав сообщение об ошибке к разным супергероям и сообщениям от них, что несомненно приведёт в восторг фанатов. В качестве бонуса предусмотрен большой параллакс-эффект.

Marvel - страница 404

Более того, при перезагрузке страницы можно увидеть другого супергероя.

Marvel - страница 404

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

Marvel - страница 404

Что тут скажешь? Гениально!

“Blizzard”: всё по теме!

Известный разработчик компьютерных игр, компания “Blizzard” вывела свою страницу «Не найдена» на новый уровень. В русскоязычной версии её сайта на ней отображается один из представителей мурлоков и сообщение о том, что за посетителем выслан спасательный отряд мурлоков, которые отведут его в безопасное место.

Blizzard - страница 404

Кроме того, здесь есть возможность перехода на главную страницу сайта, а также в любой из его разделов.

“IMDb”: всё о кино

"IMDb” – крупнейшая в мире база данных и веб-сайт обо всём, что касается кинематографа. Его страница 404 содержит изменённые в соответствии с контекстом цитаты из известных и любимых многими кинофильмов.

IMDb - страница 404

В нашем случае это – «Побег из Шоушенка» и «Назад в будущее». Получилось оригинально – например, в последнем случае: «Веб-страницы? Там, куда мы собираемся, они нам не понадобятся!».

IMDb - страница 404

Внизу имеется сноска с указанием героя, произнёсшего эти слова, а также ссылка на сам фильм. Сверху – ссылка на главную страницу.

“Lego”: конструкторы на первом месте

Разработчики сайта для “Lego” использовали для оформления страницы беспроигрышный вариант. Во-первых, на ней не имеется уведомления о том, что её посетитель столкнулся с ошибкой 404, а во-вторых – она разделена на две равноценные части (решение “split sreen”).

Lego - страница 404

Обе части притягивают внимание в одинаковой мере и предлагают посетить магазин конструкторов, или же – перейти в игровую зону.

“Slack”: если и есть в Интернете рай…

Американская компания “Slack” создала анимированную страницу 404 с эффектом «Антистресс». Её посетитель сначала может и не понять, что произошло, поскольку перед ним откроются волшебные виды – и лишь сообщение в центре скажет ему о том, что «Это глюк!» и предложит «вернуться назад или обратиться в справочный центр за помощью».

Slack - страница 404

Пользователю наверняка понравятся мультяшные пейзажи, на которых изображены зеленеющие деревья, яркие цветы, горы и радуга. К тому же здесь можно увидеть бабочек, курочек и маленьких поросят. Сцену можно прокрутить смещением мыши по горизонтали. Отдохнули? Тогда переходите в нужный раздел!

Как не стоит оформлять страницу 404?

Для того, чтобы посетитель не потерялся и понял, что произошла ошибка 404, при оформлении соответствующей страницы избегайте следующего:

  • Мгновенное перенаправление на главную страницу сайта;
  • Отсутствие читаемых символов (как на изображении ниже)
Как не стоит оформлять страницу 404

Читайте также

Как сделать ТЗ на разработку сайта, чтобы оно сработало?

Закон подлости – один из самых известных и, пожалуй, единственный из всех, который работает на совесть. Кому-то даже кажется, что по отношению к ним он дышит особенно неровно, создавая те-самые ситуации, в которых то, что-то могло дать сбой.


Что такое заголовки H1 – H6, какую функцию они выполняют и как использовать их правильно?

Заголовок страницы H1 является самым важным, а важность остальных уменьшается от одного к другому. Их правильное применение обуславливает лучшее ранжирование страниц и их появление в поисковой выдаче.


Облачное хранилище данных: какое подойдёт Вам?

Американский писатель и футуролог Джон Нейсбит сказал: «Несмотря на то, что мы тонем в море информации, мы задыхаемся от недостатка знаний»... И действительно, информационные потоки с каждым годом становятся всё шире, охватывают всё больше.