50 Best 404 Page Examples: Smart, Funny, And Inspiring

Мы все это видели время от времени — 404: Страница не найдена — три страшных цифры и слова, сообщающие вам, что URL-адрес, по которому вы нажали, не существует в каталоге веб-сайта. Страницы с ошибками обычно рассматриваются как точка отсрочки для посетителей сайта и являются для них общей точкой возврата – фактически дляпочти 74% людей. Но знаете ли вы, что, проявив немного творчества и веселое перенаправление, вы можете снизить показатель отказов вашего сайта?

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

Что такое страница с ошибкой 404?

A 404 error page is a page telling you that the link or URL you have typed in does not exist. This kind of page is a placeholder for broken links on a website – it also comes up when a URL is mistyped.  An error page is also integral for overall website Сканируемость в SEO.

Почему вам следует заботиться о ее дизайне?

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

Какой должна быть ваша страница 404?

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

• Ссылка на домашнюю страницу
• Ссылка на карту сайта
• Поисковая панель, которую трудно не заметить| ||287
• Links to popular items or articles

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

Как создать страницу 404

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

Если вы используете готовый магазин дизайн в AliDropship, проверьте настройки темы вашего магазина.

[]

Темы AliDropship позволяют настраивать страницы 404, добавляя свои собственные текст и изображения. А если вы чувствуете, что вам нужно вдохновение для веб-дизайна, просто продолжайте прокручивать.

Лучшие примеры страниц 404 (и что делает их такими замечательными)

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

• Toyota USA

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

• Министерство обороны США

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

• Jamba Сок

Нет страницы не означает отсутствие напитков. Сеть напитков Jamba Juice сообщает посетителям, которые наткнулись на страницу с ошибкой, что они все еще «смешивают». В качестве альтернативы предлагаются меню и указатель магазина, чтобы посетители могли перейти в другое место на веб-сайте.

• Dropbox

| ||352

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

• McDonald's

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

• AliExpress

AliExpress использует текст, чтобы побудить посетителей совершить покупку с помощью кнопки «Продолжить покупки». Кнопка переводит пользователя на домашнюю страницу веб-сайта, где есть множество категорий на выбор (так что ему не придется беспокоиться о том, что он не найдет то, ради чего изначально посетил).

• YouTube

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

• Amazon

Taking a page from the branding book, Amazon fluffied up its error pages with its company dogs, which are a huge part of its корпоративной культуры.|| |408

• Nike

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

• Microsoft

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

• Square

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

• New York Post

Неверный URL? Без проблем. New York Post помогает читателям и посетителям сориентироваться благодаря строке поиска и боковой панели с популярными историями. Удобная навигация увеличивает вероятность того, что посетители перейдут на другие страницы веб-сайта, уменьшая показатель отказов.

• Starbucks

Пятном от кофейной чашки международная сеть кофеен показывает, что на этой странице ничего нет (и определенно нет кофе). Java-гигант предлагает посетителям логический подход к странице 404, предлагая объяснения того, что могло вызвать страницу 404, а также простые решения. Что интересно, у Starbucks также есть ссылка, позволяющая пользователям оставлять отзывы о неработающих ссылках – это показывает пользователям, что компания ценит и приветствует отзывы.

• Marriot

Оператор сети отелей Marriot обеспечивает удобство работы на странице 404, предлагая пользователям поля для ввода информации о своем пребывании и получения необходимой им информации о поездке.

• ABC

|| |485

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

• Oakley

Сохраняя свой крутой имидж, Окли шутит, что служба безопасности будет уведомлена о вашей ошибке 404.

• Hubspot

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

• Otterbox

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

• Cost Plus World Market

< /picture>

В этом международном магазине товаров вы можете найти практически все — только не ту страницу ! Cost Plus World Market направляет клиентов на неправильный URL-адрес, чтобы продолжить покупки, используя ссылку на домашнюю страницу или непосредственные категории, даже используя предложения на месте для стимула кликнуть.

• IBM

Американский технологический гигант IBM сохраняет свою страницу ошибок простой и понятной, позволяя пользователям либо сообщить об ошибке или перейдите на целевую страницу ее продукции.

• Hydroflask

The maker of the super popular insulated water bottle keeps its error page short and simple. The company minimizes its page’s blank space and instead uses the real estate to ensure its bottom navigation and social media handles are most prominent for a higher possibility of customer clickthrough.

• MailChimp

С помощью одного простого перенаправления на домашнюю страницу MailChimp рискует «потерять» страницу и иллюстрирует это ошибка с анимацией лошади, копающей яму в никуда. Страница сочетает в себе немного юмора с прямым призывом к действию.

• Chick-Fil-A

|| |582

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

• Кеннет Коул

|| |594

Мы видим образец голоса бренда (и забавные каламбуры). Кеннет Коул обыгрывает слова с «единственным поиском» в своем сообщении на странице ошибки (поскольку бренд наиболее известен своей обувью), одновременно показывая подборку новых продуктов, чтобы привлечь покупателей в дополнение к другим категориям покупок.

• Chase

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

Забавные примеры страниц 404 (и почему они так хорошо работают)

Помимо перенаправляя трафик, страницы 404 — это неожиданный способ посмеяться над ошибками пользователя или придать вашему веб-сайту индивидуальность бренда. От крупных развлекательных гигантов до динамично развивающихся сайтов электронной коммерции — немного развлечься никогда не помешает (просто убедитесь, что вы правильно перенаправляете трафик). Давайте посмотрим, как некоторые компании отлично справляются с этой задачей:

• Диснейленд в Париже

Веб-сайт французской версии «Самого счастливого места на Земле» позволяет Стичу из «Лило и Стич» 2002 года взять на себя вину за ошибочную страницу. На странице есть интерактивные информативные вкладки прямо под сообщением об ошибке, позволяющие посетителям сайта быстро найти нужную информацию. Кроме того, мечтательный фиолетовый фон заставляет нас думать, что Дисней сделал домашнее заданиепсихология цвета (фиолетовый ассоциируется с творчеством и… как вы уже догадались – магией).

• American Airlines

|| |635

Ироничный заголовок и три ссылки «нажми и пойди» быстро доставят путешественников к месту назначения.

• Yelp

Международный Сообщество обзоров продуктов питания и бизнеса использует созданного персонажа, чтобы добавить немного смелости и веселья на свои 404 страницы. Детектив Дарвин расследует неправильный URL-адрес – в то время как у вас, посетителя, есть строка прямого поиска и поле почтового индекса, чтобы найти то, что вы ищете.

• AMC Theatres

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

• Marvel

Utilizing The Watcher, a famous Marvel figure, the comic giant plays on metaphors in copy to tell users that their page is unseen.

• Virgin Atlantic

Еще одна авиакомпания, использующая веселый и яркий язык, — это Virgin Atlantic. Авиалайнер говорит о том, что страница 404 «теряется» во всем волнении путешествия.

• eBay

|| |696

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

• 20th Century Fox

< /a>

Создатель приложения для чата поступает умно, создавая повторяющийся фон из зелени, чтобы связать его с сообщением о сбое на странице (примечание: сбой обычно иллюстрируется одинаковыми изображениями/предметами, повторяющимися в одном месте).

• Moz

< /p>

Интеллектуальная SEO-компания высмеивает своего робота-талисмана и предлагает пользователям функцию поиска, создавая забавную, но полезную страницу.

• Pixar

< /picture>

Плачь, плачь. Pixar высмеивает Печаль, персонажа из фильма «Наизнанку» 2015 года, ссылаясь при этом на «долговременную память», основной элемент анимационного фильма.

• Венди

< /picture>

Известный своей пылкой личностью в социальных сетях, неудивительно, что американский ресторан быстрого питания реализовал целую ИГРУ на своей странице 404. Чтобы начать игру, вам нужно нажать клавиши со стрелками на клавиатуре.

• Airbnb

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

• Lexus| ||778

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

• Glossier

< /p>

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

• Слим Джим

Capitalizing on its tagline “Snap into a Slim Jim,” the American beef jerky giant uses puns to make a joke.

• Blizzard Entertainment

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

• Городской Outfitters

Иллюстрируя, что там абсолютно ничего нет, Урбан Outfitters добавляет анимированный эскиз пустыни, чтобы донести суть. Интересно, что быстрых ссылок нет нигде, кроме верхней панели навигации.

• Vans

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

• Spotify

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

• Lego

Некоторые забавные персонажи и метафорические иллюстрации добавляют юмора (и уменьшают разочарование) для пользователей, которые натыкаются на несуществующую страницу Lego. Нельзя же винить в технической ошибке пару игрушек, не так ли?

• Volkswagen

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

• iStock

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

• Lyft

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

• Magnt

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

ОБЗОР

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