40 умных страниц ошибки 404 с реальных сайтов

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

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

Это неудобно, но факт жизни. И реакция посетителей, когда они попадают на несуществующую страницу, может варьироваться от «не воспринимать это как должное» до «полностью сходить с ума».

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

В этом посте будут показаны некоторые из наших любимых страниц с ошибками веб-сайтов. Надеюсь, вы сможете почерпнуть несколько идей, чтобы придумать собственное сообщение 404.

Что такое ошибка 404?

Ошибка 404 — это стандартный код сообщения об ошибке HTTP, который означает, что веб-сайт, который вы пытались открыть, не может быть найден на сервере. Это ошибка на стороне клиента, означающая, что либо веб-страница была удалена или перемещена, а URL-адрес не был соответствующим образом изменен, либо пользователь просто неправильно ввел URL-адрес.

По большей части вы можете настроить свой сервер для создания настраиваемой страницы ошибки 404. (Если вы являетесь клиентом HubSpot, нажмите здесь, чтобы узнать, как настроить страницу 404 в HubSpot.)

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

Лучшие примеры веб-страниц с ошибкой 404

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

Страница не найдена: креативные страницы с ошибкой 404

1. Пипкорн

В то время как страница 404 может легко выделяться на веб-сайте, страница ошибки Pipcorn идеально сочетается с остальным брендингом сайта. Есть приятный анимированный фон, дружественная текстовая подсказка, направляющая посетителей к поиску на веб-сайте (в комплекте с умной игрой слов), и кусочек попкорна, используемый как «0» в «404».

2. Спотифай

Гигант потоковой передачи музыки Spotify прикрыл свои базы умной страницей 404. Используя остроумный каламбур из альбома Канье Уэста «808s and Heartbreak» и анимацию записи, веб-сайт ненадолго развлекает посетителей, а затем отправляет их обратно на страницу, с которой они пришли.

3. Гениально

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

4. Adobe

Как и следовало ожидать, страница ошибки Adobe 404 полезна и визуально приятна. В нем перечислены популярные ссылки, которые могут понадобиться посетителям, а также некоторые интересные цифровые изображения, служащие визуальной метафорой для сломанной или потерянной страницы. Честно говоря, веб-сайты должны чаще использовать визуальные метафоры.

5. Клорокс

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

6. Думский коллектив

В других случаях вам может не понадобиться остроумная реклама — просто скажите посетителям, что по адресу нет страницы, и дайте им двигаться дальше. Консультационное агентство по развлечениям Duma Collective делает именно это со своей страницей с ошибкой, хотя она дополнена фоновым изображением для небольшого чутья.

7. Холодильная камера

Говоря о стиле, бренд товаров для ухода за собой Chillhouse проделал дополнительную работу, чтобы стильно перенаправить своих посетителей. Страница 404 оформлена соответствующим образом и даже отправляет посетителей в небольшое путешествие по нескольким кадрам изображений, прежде чем они вернутся на домашнюю страницу.

8. Немного

Если вы введете неправильную ссылку Bitly, вы попадете на страницу Bitly 404. Мы предполагаем, что это происходит довольно часто, поэтому страница 404 сразу переходит к делу. Он объясняет, что могло пойти не так, и предлагает пользователям посетить домашнюю страницу Bitly, если это то, что им нужно.

9. Икеа

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

10. Мокси Дизайн Ко.

Конечно, фраза «взорвал Интернет» может быть немного преувеличенной, но она говорит посетителям, что Moxie Design Co. не воспринимает себя слишком серьезно с такими небольшими оплошностями, как этот. Кроме того, панель поиска удобно расположена внизу, чтобы отправить вас в путь.

11. МакКиссак и МакКиссак

Ах, классический трюк «мы потеряли страницу». Опять же, простой способ представить 404, не отталкивая вашу аудиторию. Если вы представляете такое агентство, как McKissack & McKissack, которое управляет многими взаимодействиями с клиентами, четкий и краткий текст необходим для всех страниц вашего сайта, включая страницы с ошибками.

12. CSS-трюки

Вы когда-нибудь отрывали оболочку веб-сайта, чтобы посмотреть, что находится под ней? Это концепция, к которой CSS Tricks стремились на своей странице с ошибкой 404. Это и остроумно, и напоминает о том, что такое веб-сайт: разумное использование стилей страницы.

13. Старые добрые игры

Для других веб-сайтов вы разворачиваете переднюю часть и видите… просто огромную пустоту. Эта страница является отсылкой к GOG Galaxy, собственному клиенту для видеоигр от Good Old Games. К счастью, здесь есть маленький персонаж из видеоигры, чтобы посетители могли сообщить об ошибке, если захотят.

14. Канва

Что-то немного другое, посмотрите на страницу Canva 404. Он включает в себя не только сообщение об ошибке, но и изящную головоломку, в которую посетители могут поиграть, чтобы немного развлечься. Нет ничего плохого в том, чтобы позволить вашим посетителям расслабиться на пару минут, верно?

15. Иннотех

Подобно подходу Canva, Innotech предлагает игру в стиле Pong на странице 404, чтобы немного развлечься. Скорее всего, вы помните такой веб-сайт. Кроме того, забавный обходной путь дополняет действительно впечатляющий веб-сайт — серьезно, когда вы закончите играть, перейдите на домашнюю страницу и ознакомьтесь со всем этим.

16. Мириады

Видеоагентство Myriad выбрало причудливый фирменный дизайн страницы 404, который имитирует классические цветные полосы SMPTE, которые появляются на старых лентах и ​​телевизорах. Это забавный возврат к старым технологиям, представляющий более современную проблему несуществующей веб-страницы.

17. КонМари

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

18. БрендТолпа

Мало того, что иллюстрация на этой странице с ошибкой подробная и привлекательная, текст еще и умный. Нам нравится отсылка к песне Semisonic «Closing Time»: «Вы можете щелкнуть где угодно, но не здесь».

19. Хот Дот Продакшнс

Страница ошибок Hot Dot остается верной своему слогану «пересечение новых технологий и дизайна». Страница анимируется сотнями крошечных точек, которые меняют направление в зависимости от того, куда вы перемещаете курсор. Это завораживает и является отличной демонстрацией дизайнерских возможностей агентства.

20. Оранжевое пальто

Если вы собираетесь выдать сообщение об ошибке, почему бы не развлечь пользователя на несколько секунд, пока вы ему помогаете? После дружеского приветствия OrangeCoat предлагает блок-схему, которая действительно помогает пользователям понять, почему они вообще попали на страницу с ошибкой.

21. Эрвин и Смит

Эта страница 404 не просто перенаправляет пользователей обратно на активные страницы. Вместо этого страница 404 Ervin & Smith приглашает вас прокрутить вниз и узнать, почему вам нужно агентство цифрового маркетинга и почему выбрать именно Ervin & Smith, а также контактную форму. Верное своей миссии, это агентство показывает, что любая страница может быть возможностью конверсии.

22. Студии DayCloud

… или ваш 404 может быть просто местом, где можно потратить минуту, как можно увидеть на веб-сайте DayCloud Studios. Перемещение курсора по экрану показывает сообщение 404, освещенное лазерами, стреляющими из кошачьих глаз. Почему бы и нет?

23. Свободное пространство

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

24. Пекарня Вайлдвуд

Некоторые веб-сайты до сих пор интегрировали умные фирменные тексты на свои страницы, в то время как другие размещали на своих страницах полноценные онлайн-игры. Но нет ничего плохого в кратком толчке в правильном направлении. Изысканный сайт Wildwood Bakery делает вещи короткими и приятными (буквально).

Страница не найдена: забавные страницы с ошибкой 404

25. Астутео

Страница 404 дизайнерского агентства Astuteo — это идеальный баланс элегантных визуальных эффектов, юмора и полезности. Минималистичный макет дает пользователям необходимую им информацию наряду с другой забавной визуальной метафорой, тонущим грузовым кораблем и убегающей фигурой.

26. ЛЕГО

На странице ошибки 404 LEGO нужно несколько слов — выражение лица персонажа все объясняет. Кроме того, поклонникам кинофраншизы LEGO понравится забавная отсылка в копии.

27. Магнит

В этом забавном сообщении об ошибке Magnt высмеивает тот факт, что да, они могли что-то сломать — или вы просто не можете печатать. Визуальное служит быстрым способом быстро проиллюстрировать свою точку зрения.

28. Иконоискатель

Страница ошибок IconFinder проста, но восхитительна. Талисман компании, одетый в мантию и выглядящий утомленным, — это намек на потерянных посетителей. Не беспокойтесь, так как сайт перечисляет некоторые из своих ссылок для посещения ниже.

29. Сладких снов

Судя по странице 404 на веб-сайте, команда компании по производству средств для сна Sweet Dreams взяла слишком много своих продуктов. Мало того, что эта страница юмористическая, она также хорошо сочетается с остальной эстетикой и сообщениями интерфейса сайта, создавая ощущение сплоченности.

30. Гитхаб

Строка «Это не те дроиды, которых вы ищете» относится к джедайскому трюку Оби-Вана Кеноби со штурмовиками в «Звездных войнах. Эпизод IV ». ход действий. GitHub воспроизводит эту известную строку в своем сообщении об ошибке 404.

31. Патагония

Пользовательская страница 404 Patagonia идеально отражает атмосферу бренда, дополненная видео-бумерангом с фрисби-вертушкой, умным каламбуром, сочетающим «404» и «алоха», и ссылками на страницы его продуктов. Это дружелюбный и забавный способ приветствовать посетителей, которые оказались не в том месте.

32. Облачная сигма

Проверьте это: Cloud Sigma позволяет нам заглянуть за кулисы. Их страница с ошибкой 404 притворяется «домашней страницей младшего разработчика» — этот младший разработчик, ну, в общем, кот.

33. Театры AMC

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

34. Бруно

Неслучайно креативные агентства отлично умеют придумывать крутые страницы 404. Вот еще один от креативщиков Bruno, который обыгрывает культовую классическую комедию 2000 года «Где моя тачка, чувак?». Нет, это не имеет ничего общего с компанией или веб-сайтом, но наверняка вызовет смех.

35. НПР

На первый взгляд страница ошибки NPR не кажется чем-то особенным. Но продолжайте читать, и вы увидите, как они умело связывают некоторые из своих замечательных историй о потерянных людях, местах и ​​вещах, например, статью об Амелии Эрхарт и одну статью о Уолдо. Это может просто заставить потерянных пользователей чувствовать себя немного менее одинокими.

36. Средний

Medium использует аналогичный подход к странице 404 NPR, рекомендуя статьи о том, как заблудиться и потерять вещи. Прочтите эти статьи, если у вас есть время — они довольно хорошо читаются.

37. HomeStarRunner

На сайте HomeStarRunner.com, где размещается мультсериал в формате Flash, на протяжении многих лет появлялась серия забавных страниц с ошибкой 404. Самые последние персонажи из мультсериала представлены в сцене, которая могла появиться прямо из одного из их эпизодов. Если вы включите звук при загрузке страницы, вы услышите, как их персонаж Strong Bad, известный тем, что громко выкрикивает фразы, говорит: «404'd!»

38. Близзард Развлечения

Вот простая идея, которая в конечном итоге выглядит привлекательно: на странице 404 от Blizzard Entertainment изображен анимированный персонаж, потерявшийся в настоящей метели, и немного юмора, который оценят поклонники World of Warcraft.

39. Привет, большая идея

Краткий обзор экспертов по маркетингу и социальным сетям Веб-сайт Hello Big Idea расскажет вам все, что вам нужно знать о смелом и прямолинейном стиле текста. И, конечно же, его страница с ошибкой 404 не является исключением.

40. ХабСпот

Бывает и у нас! Это сообщение, которое мы размещаем, чтобы сообщить посетителям нашего сайта о некоторых проблемах с сайтом. Нашей целью было оставаться верным голосу бренда HubSpot, оставаясь как можно более привлекательными, чуткими и полезными.

Превратите страницу ошибки 404 в момент восторга

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

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

Примечание редактора. Этот пост был первоначально опубликован в декабре 2015 года и обновлен для большей полноты.