404 дизайн страницы: 80+ великолепных страниц ошибки 404

PornHub

Старая версия 404 Хабра

Новая версия 404 Хабра

Virgin.com

Google

YouTube

Facebook

Reddit.com

Amazon.com

Vk.com

Linkedin.com

Imgur.com

Aliexpress.com

Bing.com

Stackoverflow.com

Github.com

Dropbox.com

Craigslist.org

Dribbble.com

Awwwards.com

Csswinner.com

Coolhunting.com

Codyhouse.co

Mailchimp.com

Slack.com

Mashable.com

Bloomberg.com

Airbnb.com

Bitly.com

МГУ, психфак

Разговаривающая страница 404.

Еще подборки

Anatomy of a 404 Error Page, Envato, 2016

Лучшие 404 страницы, Tproger, 2015

404 – страницы, ради которых стоит заблудиться на сайте, cossa, 2015

Идеальная страница 404 ошибки, или как удержать пользователя на сайте?, Habrahabr, 2014

Лучшие примеры 404 страницы, seo-design, 2013

Лучшие 404 страницы Рунета, oakhill, 2012

Лучшие примеры ошибки 404, netpeak, 2012

50 прикольных страниц ошибки 404 , Дежурка, 2009

Интерактивные

Играем в Pacman

Рушим сайт

Суслик

Спасаем леммингов

Поймай кота

P.S.

А какая ваша любимая 404 страница?
Какая 404 страница на вашем сайте?

Как оптимизировать страницу 404

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

Ошибка 404 вредит SEO?

404 Not Found (ресурс не найден) — код ответа сервера, который сообщает, что невозможно найти страницу по указанному адресу.

Существует мнение, что наличие страниц с 404 ошибкой на сайте негативно влияет на SEO, но на самом деле это не совсем так.

Из справки Google:

Обычно ошибки 404 не влияют на рейтинг сайта в Google, поэтому их можно игнорировать. Чаще всего они бывают связаны с опечатками, неправильными настройками или попытками Google распознать и просканировать ссылки во встроенном контенте (например, в коде JavaScript).

Появление 404 ошибок на сайте —  явление неизбежное и причины тому могут быть разные:

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

Эти причины требуют тщательной проработки — необходимо заменять битые ссылки на актуальные, при изменении структуры и URL адресов сайта корректно настраивать 301-е редиректы на актуальные страницы. Однако существуют и вполне «житейские» ситуации появления 404-х страниц. Например:

• опечатка при введении URL адреса пользователем;
• удаление товаров на сайте.

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

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

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

2. Не следует делать 301 редирект на главную. Таким образом вы вводите в заблуждение пользователя: он ожидал получить одну страницу, а непонятным образом оказался на главной. C 404-й страницы должна стоять ссылка на главную, но не редирект.

Нужно ли создавать кастомные 404 страницы?

Очень часто страницы 404 оформлены стандартным образом и выглядят примерно так:

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

Google рекомендует создавать собственные страницы 404:

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

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

Создаем 404 страницы для людей

Основные рекомендации по созданию собственных 404 страниц:

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

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

3. Дайте ссылки, которые могут оказаться полезными для пользователя. Как вариант: самые посещаемые страницы, популярные категории или новые материалы на сайте. У пользователя должна быть возможность перейти на главную.

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

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

6. Действенный прием для интернет-магазинов — вывод на 404 страницах похожих или недавно просмотренных товаров.

7. Если сайт у вас небольшой и хорошо структурирован, разместите ссылку на карту сайта.

Дизайну страницы 404 быть!

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

1. Задействуйте свой творческий потенциал и все таланты в области дизайна и юмора. Четыре идеи в помощь:

2. Интерактивные элементы. Развлеките человека, добавьте простую игру, дайте ненавязчивый контент. Не исключено, что так ваш сайт запомнится и получит шанс попасть в закладки. Собрала 9 хороших примеров. Наслаждайтесь (только предварительно убавьте громкость):

• http://kvartirakrasivo.ru/404/index.php
• http://www.tinsanity.net/404.shtml
• https://www.agens.no/404
• https://imgur.com/404
• https://github.com/404
• http://hotdot.pro/404/
• https://www.tumblr.com/404/
• https://www.kualo.co.uk/404
• https://amplifr.com/blog/ru/t

+ 18 примеров креативной 404-й страницы.

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

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

Существует достаточно плагинов для настройки 404 страниц на платформе WordPress. Но не всегда получается настроить через плагин или сделать это для сайта на другой платформе. Предлагаю вам такой способ:

1. Создайте 404 страницу HTML.
2. Настройте переадресацию в .htaccess, чтобы при неправильном URL пользователь переходил на 404 страницу. Для этого пропишите в .htaccess «Error 404 www.site.com/404.html».
3. Разместите файл .htaccess на хостинге в корневом каталоге сайта.
4. Нужно, чтобы созданная страница 404 отдавала код ответа сервера отличный от 200, а именно 404 (Not Found). Для этого пропишите на странице 404 строчку кода и добавьте файл на сервер:

Если этого не сделать, то страницы могут попасть в индекс, а в панеле для вебмастеров вы можете увидеть:

Чтобы проверить код ответа сервера, воспользуйтесь такими сервисами: 

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

1. Как найти битые ссылки на страницах вашего сайта.
2. Как найти актуальные страницы сайта для существоваших ранее страниц.
3. Как избавится от большого количества 404-х ошибок.

Выводы

Работайте над лояльностью аудитории, старайтесь врезаться в память: запомниться и выделиться даже с помощью 404-й ошибки. Сделайте ее фишкой сайта и помните:

1. Наличие 404-й ошибки на сайте не влияет напрямую на позиции в выдаче.
2. Чтобы не потерять трафик и улучшить поведенческие факторы, необходимо создавать кастомные страницы с 404-м ответом сервера.
3. На страницах с 404-й ошибкой следует размещать информацию с пояснением, почему пользователь оказался здесь, куда следовать дальше. Это нужно, чтобы человек понял: сайт работает и можно остаться на нем.

При создании 404-х страниц правильно настраивайте коды ответа сервера и проверяйте их на https://www.bertal.ru/, http://checkmy.ru/, https://webmaster.yandex.ru/tools/server-response/. Это поможет избежать проблем с индексированием сайта поисковыми системами.

Нашли крутые по дизайну, идее, реализации страницы — давайте ссылки в комментариях, добавлю в пост. 

Как ошибка 404 может приносить пользу сайту

Статья из блога АРТИЗАН-ТИМ.

Ненайденные страницы — самая распространенная ошибка, с которой сталкиваются интернет-пользователи. Думаем, многие согласятся, что если бы чувствам присваивали числа, то разочарованию как нельзя лучше подошел номер 404. Столкнувшись с ошибкой Page Not Found, большинство людей предпочитает закрыть страницу и покинуть сайт. Разработчики давно смекнули, что лучшее, как можно выйти из этой ситуации — блеснуть остроумием.

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

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

Иногда креатив оказывается на грани фола.

Код 404 и почему появляются страницы Not Found. Максимально коротко

Ошибка 404 — код ответа HTTP о том, что запрашиваемая страница не найдена. Он состоит из двух частей: 4 и 04. Цифра 4 означает, что проблема на стороне клиента. Комбинация 04 в протоколе HTTP конкретизирует саму ошибку: Not Found.

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

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

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

Вредят ли ошибки 404 вашему SEO?

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

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

Рекомендации по проектированию страниц ошибок

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

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

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

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

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

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

Нетривиальный пример использования интерактивности можно найти у хостера Kualo. Он превратил свои 404-е страницы в культовую игру Space Invaders.

Накопив определенное количество очков в «Космических захватчиках», провайдер предоставит скидку на свои услуги

А вот пример совершенно другого, но не менее мотивирующего формата интерактивности.

Попали на несуществующую страницу? Выбирайте, кого уволить

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

ожидание — реальность

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

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

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

Поисковая строка в качестве основного навигационного элемента Page Not Found

Тут тоже ставка сделана на поисковую строку, но с большей долей юмора.

Плохая новость — мы не смогли найти страницу, которую вы искали;
Хорошая новость — мы нашли все ваши потерявшиеся носки.

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

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

Вот как это сделал отец русского веб-дизайна

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

О заглушках техобслуживания

В рамках основного разговора уместно затронуть еще одну близкую тему — оформление заглушек. Речь идет о страницах, которые единственными остаются активными во время проведения технических работ на сайте. Если страницы Not Found — постоянное состояние веб-ресурса, то заглушка техобслуживания носит временный характер. Казалось бы, с точки зрения пользовательского опыта неработающий сайт — абсолютно патовая ситуация. Но грамотно спроектированная заглушка может предложить выход и из этого тупика.

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

Юмор, креатив и вежливость — все так же ваши верные помощники в коммуникации с пользователями.

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

Читайте также: 
Как оформить страницу «Товар не найден», чтобы пользователь остался на сайте

404 Страница: Дизайн не найден. Как создавать большие страницы ошибок | Катя Шокурова

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

У вас есть возможность выбрать, как это будет чувствовать ваш пользователь.

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

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

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

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

Итак, ошибка 404 означает, что кто-то напортачил.

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

Надежная страница с ошибкой 404 может превратить плохое качество обслуживания клиентов в приятное.

Не полагайтесь на 404, предоставляемый браузерами.

Ух! Это так жестко, холодно, скучно и трудно понять. Слишком много текста и технического жаргона. Он ничем не помогает посетителям.

Пользовательская страница 404 намного лучше:

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

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

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

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

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

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

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

• Несколько ссылок на самые популярные страницы

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

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

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

Лучший дизайн — самый простой, который работает.

— Альберт Эйнштейн

Каким бы цифровым ни было современное общество, было бы ошибкой думать, что все осознают значение ошибки 404. В конце концов, это не та страница, к которой люди привыкли. Более эффективно разъяснить, в чем проблема, полезным и ясным образом.

Обратите внимание на текст 404 страницы и выбор слов. Более эффективно выбрать вариант «Извините! Мы не могли найти эту классическую страницу по сравнению с машинной «Ошибка 404: страница не найдена», как раньше.

Извините. Возможно, это даже не ваша вина, но это покажет пользователю, что вам не все равно.

Многие веб-сайты используют забавный подход и делают свои страницы интересными, например, GitHub или Pixar.

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

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

Дизайн страницы 404: лучшие практики и потрясающие примеры

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

Вы знаете это чувство. Вы нажимаете интересную ссылку на сообщение в блоге, которое хотите прочитать, и БАМ! 404 Страница не найдена. Это автоматически раздражающий и негативный опыт.Но как эта страница 404 говорит с вами? Это полезно? Даже восхитительно?

Начните создавать запоминающиеся интерактивные страницы 404 с помощью Justinmind

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

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

Коды состояния HTTP: краткая история страницы 404

Так почему же она вообще называется страницей 404? Как обычно, объяснение довольно загадочно и возвращает нас в темные века Интернета (где-то около 1990 года).Несмотря на популярные мифы о 404, относящиеся к древней серверной комнате или к офису изобретателя во всемирной паутине Тима Бернерса-Ли, оказывается, что 400 было произвольным ярлыком, прикрепленным к ошибкам клиента, включая 404: Страница не найдена.

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

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

Конкурирующие философии страницы с ошибкой 404

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

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

Что должна включать страница 404?

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

• Сообщение об ошибке
  Вам нужно, чтобы ваш пользователь немедленно распознал, что он попал на страницу с ошибкой.
• Внешний вид бренда
  Точно так же убедитесь, что ваша страница 404 соответствует внешнему виду вашего сайта.Представьте свой логотип, сделайте его своим.

Присмотритесь: важные аспекты вашей 404-страницы

Превратите ошибку пользователя в возможность UX

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

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

Избегайте беспорядка для более высоких показателей успеха пользователей

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

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

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

Лучшие страницы 404 — это возможности для брендинга

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

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

Великолепный дизайн страниц 404 для вдохновения

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

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

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

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

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

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

Смелое использование цвета добавляет бликов, в то время как меню навигации достаточно интегрировано на страницу, поэтому не требует дополнительных ссылок. Затем есть та замечательная копия, которая привлекает и удивляет пользователя.Мы это любим!

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

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

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

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

Красивый розовый фон в сочетании с иллюстрацией вызывает чувство ностальгии и попадает в самую точку, когда дело касается копии.На этой странице хорошо спланировано все, от надписей кнопки до того, что помещаемый виниловый диск называется «404»!

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

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

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

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

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

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

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

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

12. Музей науки и промышленности Чикаго

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

Мы также ценим забавную информацию о старой школе 1902 года. Весь алфавит на одном циферблате доступен потребителям! Это заставляет вас оценить, как долго мы прошли, и в каком-то смысле это уже не может быть более репрезентативным для музея.

Дэн Вуджер — иллюстратор и графический дизайнер, работавший в таких крупных компаниях, как McDonald’s, Bloomberg’s и New York Times.Нам нравится, что дизайн его страницы 404 забавный и непринужденный, с некоторыми вещами, кроме иллюстрации гамбургера, в котором он сожалеет о пропавшей странице. Иногда это все, что вам нужно.

Дэн взял то, что побуждает большинство пользователей покинуть веб-сайт, и превратил это в возможность со ссылкой на свое портфолио. Это умный UX-дизайн!

Mashable — новостная платформа, охватывающая все, от технологий до публикаций в Game of Thrones. Их контент разнообразен и пытается охватить широкую группу пользователей.Их страница 404 — победитель, потому что она проста и приятна.

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

Blue Path — это консалтинговая компания по науке о данных, которая предлагает пользователям отличную страницу 404. Эта страница хороша своим юмором и простой графикой, которая представляет собой текст и график.Юмор размещать карту слева и сигнализировать пользователю, что он будет далеко от этой карты, справа? Отличная аналогия!

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

Это момент, когда вы выбираете момент, который обычно наполнен разочарованием и негативом, и превращаете его во что-то хорошее.Сделайте его незабываемым по правильным причинам!

19 лучших примеров страниц 404 для восстановления потерянных посетителей

Знаете ли вы, что отличная страница 404 может увеличить конверсию вашего сайта и увеличить доход?

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

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

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

Что такое страница с ошибкой 404 и зачем она вам нужна?

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

Но вот в чем дело…

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

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

Если этого не произойдет, вы можете потерять посетителей и потенциальных клиентов.

Например, если ваша страница 404 выглядит так…

… это оттолкнет людей, и они могут никогда не вернуться.

Тем не менее, если вы оптимизируете целевую страницу 404 not found с помощью:

• Отличные изображения
• Отличные копии
• Полезная информация и ссылки

Вы можете снизить показатель отказов и увеличить количество подписчиков и количество конверсий на вашем веб-сайте.

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

11 лучших примеров страниц 404 от реальных брендов

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

1. Lego — Дружественный дизайн страницы 404, вдохновение

Lego 404 — отличный пример использования юмора и хорошего бренда для привлечения посетителей сайта.

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

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

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

Чтобы создать похожий дизайн страницы 404, сначала удалите все технические термины и замените их чем-то более человечным.Используйте такие слова, как «не беспокойтесь», «ой» и «извините», чтобы убедить пользователей, что страница с ошибкой — не их вина.

Вы также можете использовать изображения, связанные с вашим брендом, чтобы пользователи знали, что они почти в нужном месте. Затем с помощью кнопки CTA вы можете помочь им найти то, что они ищут, и дольше удерживать их на вашем сайте. Включение окна поиска или панели поиска — еще один отличный способ улучшить взаимодействие с пользователем и повысить эффективность SEO.

2. Промедление — прокрутка страницы 404 не найдена, пример

Этот пользовательский дизайн страницы 404 от Slack предлагает более интерактивный пользовательский интерфейс, чем некоторые другие примеры веб-страниц в этой статье.

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

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

Вас можно простить за то, что вы подумали, что реальность на мгновение сбилась с толку, о чем, кажется, думает и Slack, как вы можете видеть из их сообщений.

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

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

3. Mantra Labs — Страница 404 с перенаправлением

Индивидуальный дизайн страницы 404 от Mantra Labs — это умный пример того, как пользователь принимает решение.

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

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

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

4. Студия 20-го века — Страница 404 с идеями фильмов

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

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

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

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

Например, с помощью настраиваемых блоков WooCommerce от SeedProd вы можете легко добавить сетку продуктов на свою страницу 404 для отображения последних продуктов, продуктов со скидкой, самых продаваемых продуктов и т. Д.

Теперь вы можете совершать продажи прямо со своей 404 страницы!

5.Фигма — Интерактивная страница 404, страница

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

Если, конечно, вы не учитываете тот факт, что вы можете манипулировать точками привязки в тексте 404 и играть с ними.

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

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

6. Behance — 404 с предложениями по проектам

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

У страницы простой заголовок «Ой! Мы не можем найти эту страницу ». с подзаголовком, предлагающим посетителям посетить галереи их проектов.

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

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

7. eBay — Страница 404 с трендами сделок

eBay — популярный веб-сайт электронной коммерции, который использует пользовательское сообщение об ошибке 404 для демонстрации самых популярных продуктов.

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

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

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

8. 9gag — Призыв к действию 404 Страница

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

На этой странице с ошибкой 404 9gag демонстрирует, что они хорошо знают свою аудиторию.

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

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

9. IMDB — 404 Page Design Inspiration

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

При входе пользователей развлекает индивидуализированная цитата из популярного фильма. В приведенном выше примере это известная цитата Гэндальфа из «Властелина колец».

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

10. Уэно — Creative 404 Page

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

Вы не можете увидеть полный эффект на скриншоте выше.

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

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

11. CloudSigma — Веселый дизайн страницы 404

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

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

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

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

12. Brett Terpstra Simple 404 Страница

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

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

Хотя страница некрасивая, она очень полезна.

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

13. Marvel Animated 404, пример

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

В этом примере они анимировали свою страницу 404 со ссылкой на Железного Человека, который понравится многим фанатам.

Движение анимированного gif привлекает внимание к инструкциям.И это побуждает посетителей либо нажать кнопку «Назад», либо воспользоваться функцией поиска, чтобы найти то, что они ищут.

14. CSS-хитрости 404 Дизайн страницы

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

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

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

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

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

16. Разбитое яйцо SeedProd 404, стр.

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

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

17. Шаблон страницы 404 SeedProd для электронной коммерции

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

18. SeedProd Sunset 404 Пример страницы

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

19. SeedProd Funny Пример страницы 404

Кто устоит перед милой собачкой в ​​костюме ананаса?

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

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

Когда дело доходит до создания собственной страницы 404, есть несколько вариантов.

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

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

Или вы можете создать страницу 404 с помощью конструктора целевых страниц, такого как SeedProd.

SeedProd — лучший конструктор целевых страниц для WordPress. Он упрощает создание любой целевой страницы и предоставляет простой конструктор перетаскивания для создания страниц без необходимости кодирования.

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

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

Так чего же вы ждете?

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

9 Примеры оформления страниц с ошибкой 404 Creative

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

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

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

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

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

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

Эрнест Асанов. Где-то в далекой-далекой стране в ветвях куста, разрывающегося цветом, укрыта страница 404.Кто бы не хотел побывать в этом мире?

Лена Зайцева. Страница ошибки не обязательно должна быть статичной. На этой странице отображается название веб-сайта, а затем отображаются слова, разделенные на «404». Это умный способ добавить движения на страницу.

Виктор Керн. Иллюзия глубины на этой странице 404 затягивает вас в дизайн и заставляет вас чувствовать, что вы действительно парите в космосе (и удобно заставляет вас забыть, что вы приземлились не в том месте!).

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

Костя Варгатюк. Эта страница, созданная для цифрового креативного агентства, показывает, насколько важна обработка шрифтов для общего внешнего вида страницы. Здесь шрифт должен выглядеть как акварель ручной работы.

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

Мы пропустили ваш любимый дизайн страницы 404? Поделитесь этим с нами в Twitter: @InVisionApp.

Основы ошибок 404: как создать идеальную страницу 404

404 страницы могут быть худшими.

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

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

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

Маленькие моменты, если их правильно спроектировать, имеют значение.

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

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

Это помогает начать с основ.

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

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

Почему именно 404?

404 — это просто самый популярный из группы плохих запросов — подумайте о нем как о Адаме Левине из плохих запросов.

Вы почти никогда не слышите имена всех остальных парней, но есть 401 (у вас нет прав для просмотра страницы), 405 (метод не разрешен) и, чтобы мы не забыли, 417 (ожидание не выполнено).

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

Что Google говорит о 404 страницах?

Вот дословно:

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

То, что это означает, если не использовать Google, …

• Будьте полезны.
• Удерживайте пользователей в навигации, когда они нажимают 404.
• Если мы увидим, что они используют кнопку «Назад», вы можете попрощаться со своим рейтингом.

Понял?

Как на самом деле выглядят страницы 404 Google?

Тьфу.

Не круто, Google. Не круто.

Так как же на самом деле должна выглядеть моя страница 404?

Ваш сайт может выглядеть так, как будто в него стреляла пуля, и он просто … умер, и он все равно будет работать, или он может быть пустым и все равно не иметь успеха.

Неважно, как выглядит ваша страница 404.

Имеет значение только , что делают ваши страницы 404 .

Хорошо, что должна делать моя страница 404?

Теперь мы к чему-то приближаемся.

У вашей страницы 404 достаточно доброй воли для двух вещей:

1. Напомните пользователю, почему бренд работает (получите капитал бренда).
2. Помогите пользователю найти то, что он действительно ищет (уменьшите количество выходов).

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

Есть ли примеры сайтов, хорошо занимающихся брендингом?

Blizzard Entertainment и Urban Outfitters стараются «говорить на языке вашего клиента». Они знают, что 404 может раздражать, но они создают «момент», которым можно поделиться с вами.

Вот что делает Blizzard , когда видит забавный URL:

А вот как Urban Outfitters обрабатывает ошибки:

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

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

Для всех остальных сайтов вам нужно уменьшить частоту выхода со страниц 404.

Есть ли примеры сайтов, снижающих процент выхода?

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

Вот что показывает Zappos , когда вы сталкиваетесь с препятствием:

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

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

Есть ли сайты, которым удается сбалансировать брендинг и пользовательские задачи?

NPR действительно хорошо работает, когда вы … (хорошо, у нас нет возможности сказать, что URL-адрес не найден, поэтому мы просто скажем, что NPR не может его найти, хорошо?)

Вот что показывает NPR , когда видит URL, который не может найти:

Строка поиска , список дел и список других людей и мест, которые еще не появились .Что не нравится? Они правильно понимают бренд, и им все равно удается быть полезными.

Итак, что мне нужно сделать, чтобы улучшить страницу MY 404?

Первое, что вам нужно сделать, это посмотреть на ваш текущий коэффициент выхода для 404 страницы . Это должно быть доступно в Site Catalyst, WebTrends, Google Analytics или в любом другом инструменте отслеживания кликов, который вы используете.

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

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

Оттуда вы можете измерить частоту выхода и поискать падения, а затем тестировать, пока страница не будет настроена.

Как создать большую пользовательскую страницу ошибки 404

Обновлено 16.07.20, чтобы включить новую информацию.

Вы потратили много времени на то, чтобы убедиться, что ваш веб-сайт удобен для пользователя, имеет описательную навигацию, организован разумным образом, но что, если кто-то допустит опечатку при вводе URL-адреса? Что делать, если другой веб-сайт ссылается на страницу, которой у вас больше нет? Что увидит пользователь на вашей странице с ошибкой 404?

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

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

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

Проблема в том, что такие страницы не понимают, что происходит, и они не t помочь пользователям оставаться на сайте.

eFax имеет настраиваемую страницу 404, которая довольно хороша. Это не креативная или глупая страница 404, но она очень хорошо помогает пользователям вернуться в нужное русло:

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

Шаг 1. Дизайн страницы

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

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

В любом случае хорошая страница 404 должна иметь следующие характеристики:

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

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

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

Шаг 2. Настройка сервера

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

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

Если ваш веб-сайт разработан как приложение с такими фреймворками, как ReactJS, Angular или Ruby on Rails, вам понадобится часть приложения для маршрутизации. Эти подходы имеют тенденцию выглядеть как создание всеобъемлющего маршрута, который отправляет пользователей на компонент страницы 404.

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

Шаг 3. Протестируйте конфигурацию

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

Вернуть код ответа HTTP 404

Отображение сообщения об отсутствующем содержимом и возврат кода состояния 200 (обычный ответ для работающей веб-страницы) запутает сканеры, и вы получите программные ошибки 404 в консолях поиска. Проверьте это с помощью сканера, такого как ScreamingFrog, или средства проверки кода состояния HTTP, введя поддельный URL-адрес, например «www.yourbrand.com/asdf ».

Присвойте странице ошибки описательный тег заголовка

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

Поместите веб-аналитику на страницу с ошибкой

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

Не перенаправлять на страницу с ошибкой

Убедитесь, что ваш веб-сайт просто отображает содержимое страницы с ошибкой, а не перенаправляет пользователя на URL, например / 404 или / error.html. Перенаправление помешает пользователям изучить проблемный URL и не отправит полезную информацию в вашу веб-аналитику.

Не перенаправлять на домашнюю страницу

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

Не используйте перенаправление мета-тега обновления

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

Шаг 4. Отслеживание сеансов 404 в Google Analytics

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

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

Посмотрите, какие URL-адреса возвращают 404

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

Затем перейдите в Поведение> Контент сайта> Все страницы, чтобы просмотреть отчет о просмотрах страниц с ошибками 404:

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

Чтобы ответить на этот вопрос, нам нужно взглянуть на сводный отчет по навигации для одной из этих страниц:

Только 44% пользователей покидают сайт после просмотра этой страницы.Неплохо, но не идеально.

Посмотреть, какие страницы отправляют трафик

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

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

Link Rot — это реально, и все в порядке.

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

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

Как создать страницу с ошибкой 404, которая удерживает пользователей на вашем сайте | Дивад Сандерс

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

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

Например, вместо начального носителя.com / @ divadsanders (моя страница профиля на Medium), попробуйте открыть medium.com/divad-sanders (этой страницы не существует). Обязательно вернись. Нам есть что обсудить.

Видите разницу? При вводе неправильного URL-адреса Medium попадает на страницу 404. На странице ошибки 404 отобразится одно из следующих сообщений:

• 404 Not Found
• Запрошенный URL-адрес не найден на этом сервере
• 404 Ошибка
• Страница не может быть найдена

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

Страница 404 — это возможность заявить о своем бренде и оставить посетителей ценными, а не разочарованными.

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

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

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

Домашняя страница вашего сайта должна определять, как страница 404 воспринимается посетителями.

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

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

Добавьте свой продукт

На этой странице ошибок Disney изображен один из их самых любимых персонажей, Wreck-It Ральф. Как видите, там, где большинство страниц представляют собой статические изображения, эта страница 404 предлагает забавное анимированное видео для улучшения взаимодействия с пользователем.

На странице также есть две отсылки к фильму « Ральф нарушает Интернет », о которых знают только фанаты.

Добавить панель навигации панели поиска

В такой ситуации, как перемещение страницы, дайте пользователю возможность искать страницу или содержимое, которое она содержит, с помощью панели поиска.

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