15 действительно креативных страниц ошибки 404


Содержание

15 примеров креативного оформления страницы 404 и рекомендации по её грамотному оформлению

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

Советы по дизайну

Универсальной формулы для оформления технической страницы нет. Её нужно разрабатывать с учётом особенностей проекта. Черпать идеи можно у креативных конкурентов.

Задачи, которые решает page 404:

  1. Объясняет, что случилось. «У нас сгорел сервер. Пожарные и системные администраторы уже в пути, скоро здесь будет контент».
  2. Рассказывает о причинах. «Наш сотрудник Василий мониторит битые ссылки, но в этот раз недоглядел. Придётся снизить ему зарплату».
  3. Даёт советы по дальнейшим действиям. «Не переживайте, это случается со всеми. Ниже мы разместили 2 кнопки. Перейдите на главную или используйте поиск».

Создавать нестандартный дизайн Not Found надо на этапе проектирования структуры онлайн-проекта.

Рекомендации по оформлению:

  1. Сконцентрируйтесь на пользе. Посетители не любят переходить по битым ссылкам, им поднимет настроение бонус или промокод на скидку. К примеру, книжный магазин может извиниться за ситуацию и предложить бесплатный экземпляр популярной книги.
  2. Найдите баланс. Красивая графика, анимация и геймификация круто работают, но важно не переборщить с визуальными компонентами. Перед публикацией покажите прототип друзьям и коллегам.
  3. Сохраните стиль. Очень важно, чтобы раздел не выбивался из общей композиции. Иначе люди подумают, что попали в другое место и закроют вкладку.

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

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

Пример 1 — Ueno

Компания помогает бизнесу выстраивать отношения с клиентами. Ueno с юмором отнеслись к разработке структуры page 404. Анимация бегущего хот-дога завораживает. Над текстом маркетологи тоже потрудились: «Вы нашли её и выиграли стиральную машину и сушилку». Ниже размещена ссылка перехода на главную с текстом «На самом деле, нет». Этот пример демонстрирует нестандартный подход — компания по философски относится к ситуации. Ueno предлагают последовать за хот-догом и сбежать отсюда в другие разделы.

Пример 2 — Canva

Популярный сервис для разработки графики — от логотипов до полноценных макетов — позаботился о посетителях. Юзеры, которые потерялись в «дебрях» интерфейса, могут собрать пазл или вернуться обратно. Примечательно, что Canva сделал раздел в другой стилистике. Хедера и футера нет, зато есть два призыва к переходу на главную. Сервис не забывает давить на психологию: «Попробуйте разобраться». Почти все захотят сначала пройти квест и только потом уйдут решать свои проблемы.

Пример 3 — Airbnb

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

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

Пример 4 — Agnes Lloyd-Platt

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

Никакого призыва на странице нет. Скорее всего, автор хотел просто удивить пользователей нестандартной концепцией.

Пример 5 — Android

Page 404 на официальном сайте операционной системы для смартфонов раньше была оформлена очень круто. Юзеры могут попробовать силы в веселой игре. Принцип простой: нужно запускать пончики, бобы и зефирки в стеклянные трубы. У игроков есть 5 попыток до обнуления очков.

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

Пример 6 — PayJunction

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

В этом проекте даже есть пасхалка (бонус). На одной из планет установлен флажок с логотипом PayJunction. Если захотите зайти посмотреть вживую — подключитесь к VPN с американской локацией, сервис заблокирован в России и Украине.

Пример 7 — Spotify

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

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


Пример 8 — Superrb

Фирма занимается веб-дизайном и транслирует истории клиентов через UX. Философия агентства построена на том, чтобы аудитория получала уникальный цифровой опыт. С несуществующим URL эта задача выполнена на 200%. Красивый анимационный персонаж грациозно бежит по разноцветному колесу. Детализация настолько крутая, что на круге даже видны его шаги.

Текст и Сall to action — стандартные. В духе «Здесь ничего нет, возвращайтесь в начало».

Пример 9 — Goooders

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

Пример 10 — Romain Avalle

Ромен занимается веб-разработкой. Он креативно подошел к оформлению портфолио и не побоялся экспериментировать с темным интерфейсом. В центре 404 — объёмный текст. При перемещении курсора он растягивается на всю длину. Если поместить фокус в центр цифры 0, магия прекращается.

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

Пример 11 — Andrea Reni

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

Пример 12 — Dribbble

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

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

Пример 13 — Kommigraphics

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

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

Пример 14 — Aviasales

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

Чуть ниже сервис даёт ссылки на полезные инструменты для экономии денег и делится подборкой топовых направлений.

Пример 15 — Seegno

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

«Тупик — хорошее место для разворота». Именно так думают посетители и возвращаются на главную.

Мы проанализировали 15 крутых примеров дизайна страницы 404. Надеемся, они вдохновили вас на разработку нестандартного варианта. Специалисты IDBI создадут страницы Not Found любой сложности. Свяжитесь с нами любым удобным способом.

Записки микростокового иллюстратора

Микростоки: рисуем и зарабатываем на своем творчестве

9 сент. 2010 г.

Забавные и креативные страницы ошибки 404 в русскоязычной блогосфере

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

Многие пишут про важность ошибки 404 и правильное оформление страницы ошибки.

Некоторые делают красивые, креативные подборки «буржуйских» страниц с ошибкой 404.

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

Цукерберг рекомендует:  Работа - Вопрос по работе


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

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

Хабрахабр — Страница не найдена (404-я ошибка)

Турбомилк – Кина не будет

Магазета — Ура! Ошибка №404

Pervushin — Опаньки, опатулечки, опатулюшечки, ну нет такой страницы

Shakin.ru — Опс! Такой страницы здесь нет

Terehoff.com — Прошу прощения, но я не нашел такую страницу

Бабло побеждает Зло! — Это денежная страница

Свобода слова вебмастерского — Нет такой страницы, Барин, 404!

В мире позитива – Кажется, вы ошиблись дверью

Кого-то пропустила? У вашего блога тоже забавная и креативная страница 404? Тогда оставляйте ссылки в комментариях и я обязательно добавлю вас в эту подборку :)

Любите интересные и креативные вещи, тогда советую заглянуть на следующий блог: все про интересное и креативное

Подпишитесь на нашу рассылку, чтобы не пропустить ничего нового:

Создание правильной страницы 404 и влияние на SEO

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

Влияние ошибки 404 на SEO

Наверняка, все хотя бы раз встречали фразу «404 Not Found (ресурс не найден)» — знакомо? А увидеть ее можно из-за того, что неправильно указали адрес нужной страницы или же она отсутствует на данном сайте. Сервер таким образом сигнализирует нам о том, что не может найти нужную страницу по указанному адресу. Проверить код ответа сервера можно с помощью бесплатных сервисов, например, bertal.ru или в панели Яндекс.Вебмастера.

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

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

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

страница отсутствует (была удалена);

ссылка оказалась «битой»;

вносились изменения в структуру сайта;

произошло изменение URL’а страницы.

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

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

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

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

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

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

Дефолтные страницы 404: полезны ли они?


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

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

Даже Яндекс создал специальный пункт в «Рекомендациях для владельцев сайтов» по данному поводу и довольно подробно расписал, как правильно оформить страницу с ошибкой 404:

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

Создание внешнего вида 404-й страницы

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

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

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

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

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

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

Креатив всегда поможет

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

Чтобы быстро найти страницы ошибок на сайте и исправить их, можно воспользоваться различными бесплатными программами, например, Screaming Frog.

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

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

Кстати, страница ошибки 404 нашего блога выглядит следующим образом:

Вывод

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

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

Креативные примеры страниц ошибки 404

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

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

Текст с фото: Плохие новости – мы не смогли найти страницу, которую вы ищете. Хорошие новости – мы наши все ваши потерявшиеся носки.

Текст с фото: Снежный человек, НЛО, хорошие актеры в фильмах Майкла Бэя… сущестование их не доказано. Так же, как и страница, которую вы ищете на TemplateMonster. Но нам кажется, что Вы тут оказались не случайно. Так почему же не вернуться на нашу домашнюю страницу или заглянуть на наш блог? А, кстати, вот Вам прощальный подарочек в виде страницы 404, если вы фанат креативных страниц 404, спешите скачать один из бесплатных шаблонов страниц ошибки 404, созданных нами!

Текст с фото: Нам жаль, но страница расфокусирована.

9 самых креативных «страниц 404 ошибки»

Cтраницу ошибки «page not found» можно сделать нескучной. Более того, в мировом масштабе уже началось негласное соревнование между крупными сайтами – кто сделает 404 страницу оригинальнее, веселее, полезнее для очутившихся на ней юзеров! Удачные плоды такого креатива представляет Evo.business

Все превью в статье – кликабельны.

Hoppermagic

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

Cooklet


У Cooklet шутка вышла с грустинкой – мол, на этой тарелке тортика вам не оставили.

BrandCrowd

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

HotDot

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

Pixar

Pixar не побоялся изобразить ревущего мультяшного героя, дерзко подписав: «Не плачь! Это всего лишь 404 ошибка!»

TheUselessWebIndex

Склад адресов неиспользуемых сайтов с длиннющим именем TheUselessWebIndex.сom обыграл характерную высматривающую позу мангустов-сурикатов. «Мы ищем вашу страницу… но что-то ее не находим…»

Цукерберг рекомендует:  Android - Стажировка. Проект Кассиопея

На 404 странице сайта Lego типичная фигурка этого конструктора разъединила штепсель с розеткой удлинителя

Audiko

На странице 404 библиотеки рингтонов Audiko – оригинальная иллюстрация о Лондоне.

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

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

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

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

В качестве вступления отметим, что страница 404 «Не найдено» (404 Page Not Found) – это один из кодов состояния HTTP, принятых Консорциумом Всемирной паутины (W3C) в 1992 году. Для тех, кому интересно значение цифр 404, вкратце расскажем.

  1. Первая «4» означает, что произошла ошибка со стороны клиента. Такой ошибкой может быть неверно написанный URL или запрос несуществующей страницы. В свою очередь, первая «5» значила бы ошибку со стороны сервера.
  2. Цифры «04» — определяют конкретную ошибку Not Found из группы 4хх. Среди других ошибок из этой группы — 400 Bad Request, 401 Unauthorized, 402 Payment Required, 403 Forbidden и так далее.

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

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

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

В целом, кастомная страница ошибки 404 должна справляться с такими задачами:
Принимая это во внимание, приведем список рекомендаций по созданию кастомной 404-й страницы.
  1. Будьте любезны с посетителями.Они попали на эту страницу не по своей вине. Постарайтесь выразить свое сожаление и готовность помочь.
  2. Не углубляйтесь в технические детали. Термин «ошибка 404» сам по себе уже в достаточной мере техничен и в то же время понятен большинству пользователей. Нет никакой необходимости отпугивать посетителей любой другой специфической информацией о причинах этой ошибки. По сути, необязательно даже использовать цифры «404», достаточно просто объяснить суть проблемы.
  3. Предложите пользователям проверить написание ссылки. Если они вводили адрес ссылки самостоятельно, то вполне вероятно могли допустить ошибку.
  4. Придерживайтесь единого стиля сайта. Дизайн страницы 404 по оформлению и по ощущениям должен быть выдержан в стиле Вашего бренда, чтобы у пользователей не возникло заблуждения, что они попали на какой-то другой сайт.
  5. Страница ошибки 404 не должна выглядеть как обычная страница. Ваши посетители должны ясно видеть, что страница не была найдена и не содержит какого-либо контента. Поэтому не стоит наполнять ее слишком большим количеством текста и ссылок.
  6. Небольшая порция юмора никогда не помешает. Довольно часто 404 страница становится для дизайнеров и разработчиков платформой для выражения своих креативных и юмористических идей. Вместо того чтобы пользователи быстро закрывали ненайденную страницу, лучше удержать их от закрытия сайта, заинтересовав забавно и изобретательно выполненной страницей.
  7. Будьте полезными и предоставьте ссылки на возможные совпадения. Если пользователи оказались на ненайденной странице, они, вероятно, что-то искали. Так помогите же им это найти. Разместите на странице меню или ссылки на недавно перемещенные страницы. Или почему бы не дать ссылки на самые популярные страницы Вашего сайта? Либо на самый новый и актуальный контент. Так или иначе, пользователи должны быть не более чем в одном клике от перехода на какую-либо другую страницу сайта. И, конечно же, всегда давайте ссылку на главную страницу.
  8. Добавьте строку поиска. Чтобы не потерять своих посетителей, позвольте им найти то, что они искали, оказавшись на странице ошибки.
  9. Обеспечьте способ отправить отчет об ошибке. У пользователя всегда должна быть возможность отправить вам сообщение об ошибке, если он пожелает. Это поможет Вам узнать о каких-либо внутренних недочетах сайта. Еще лучшим решением для отслеживания проблем на сайте станет автоматическое уведомление. А если произойдет внезапный всплеск 404-х ошибок, полезным будет мгновенное уведомление. Это позволит исправить проблему в режиме реального времени, пока она еще релевантна.
  10. Позаботьтесь о вопросах SEO. Для оптимизации сайта важно максимально сократить количество внутренних ссылок на 404-е страницы, а еще лучше вовсе исключить возможность формирования некорректных URL адресов, ведущих на страницы 404. Инструменты для вебмастеров помогут Вам отслеживать ошибки на сайте, в том числе и ошибки с кодом 404 Not found. Более того, эти инструменты помогут Вам понять, откуда берутся ошибки и как они формируются – ошибка в URL ссылки на сайте, либо это атака конкурентов.

Немного отклоняясь от оригинала статьи, добавлю ссылки и скриншоты инструментов, о которых говорится в этом пункте.
Google:

Также рекомендую ознакомиться с официальной информацией о страницах 404 от поисковых систем: Google —здесьи Яндекс —здесь.

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

404 ошибка – подборка красивых страниц, советы по улучшению

«Ошибка 404 или Not Found (не найдено) – стандартный код ответа HTTP о том, что клиент был в состоянии общаться с сервером, но сервер не может найти данные согласно запросу» – определение из Википедии.

404 ошибка — самая часто встречаемая на просторах интернета. А что же означают эти до боли знакомые всем цифры? Первая цифра ­4 указывает на ошибку со стороны клиента, например, плохое соединение или неверно введенный адрес в строку поиска. Другие два числа обозначают конкретную категорию ошибок, которая включает такие статусы, как Conflict, Precondition Failed, Bad Request и другие статусы четвертого класса. Возникновение данной ошибки имеет несколько причин:

  • плохое соединение;
  • ссылка, ведущая на адрес, устарела или была удалена;
  • страницу перенесли на новый адрес;
  • опечатка при вводе адреса сайта.


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

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

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

Как удержать посетителя?

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

Существует несколько способов вернуть доверие:

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

Объясните, что произошло. Не обязательно подробно расписывать о происхождении ошибки, составлять длиннющие инструкции. Достаточно обойтись одной или несколькими фразами. Слово «ОШИБКА» совсем необязательное, зачастую лишь больше вгоняет в ступор. Если сайт носит развлекательный характер, можно юморнуть и покреативить. Заставьте улыбнуться гостя, тогда он охотнее вернется на главную страницу. Но обойдемся без юмора ниже пояса и обидных шуточек, давайте уважать наших пользователей.

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

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

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

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

Как у нас

Наша страница с ошибкой 404 выглядит так:

Полностью весь внешний вид оставили в том же стиле, что и сам сайт. Не трогали верхнее меню и подвал, чтобы никого не шокировать резкими переходами. Для удобства вставили ссылки на самые популярные услуги (для клиентов) и основные разделы блога (для просто интересующихся). Обязательно добавили ссылку на главную страницу 1PS и призыв к действию «Напишите нам», чтобы уж точно никто не затерялся. Но! Учтя все технические вопросы, мы забыли про креатив. Уже работаем над этим. В скором будущем и мы обзаведемся привлекательной и забавной страничкой.

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

80+ творчески оформленных страниц 404

Иногда посетитель сайта видит ошибку 404 потому, что веб-страницы попросту не существует – она удалена или переименована (404 Not Found – страница не найдена). Нередко случается и неправильный ввод адреса. В любом случае, никого не обрадует безликое оформление 404-й или простое сообщение об ошибке. Креативными дизайнерами создаются более полезные для пользователя, эстетически красивые индивидуальные страницы 404.

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

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

Интересно и оригинально оформленные 404 страницы

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

01. Discord App

За работой квантовый хомяк-робот из мира Discord.

02. Beach Park

Плавник акулы, он и в луже 404-й страницы захватывает внимание.

03. Toggl

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

04. Designzillas

Дизайн-зиллы сделали страшилку из своей 404 страницы. Персонаж монстра служит символом существенных результатов креативной студии. Прокрутите – увидите как вылупляется дракон.


05. Bench

Такой страницы нет, как и снежного человека, единорога или лох-несского чудовища. …или она существует?

06. Pirate Code

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

07. Weemss

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

08. Flipping Book

Может кому знакомо? В домашнем хаосе с малышом и котом, вырванные страницы становятся самолетиками.

09. Vebk

Красивая рестро страница 404 ошибки – в тонах и жанровой стилистике самого сайта.

10. De’Nastia

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

11. Slack

В странном месте бродят свинки с курицами, природа буйствует красками. Страница «Not Found» напоминает сказку.

12. Pikabu

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

13. Rabota Gk-Rte

Обратный отсчет в ожидании столкновения ракеты с землей…

14. Lyft

Страница ошибки сайта американского такси-сервиса.

15. Kick Point

Внедорожник 4×4 на странице 404

16. Madwell

Креативное агентство развело анимированный костер на 404-й странице.

17. Clockwise

Перекати-поле подкатывается к надписи 404. Это растение пустынь и степей, а вы на странице ошибки.

18. Matteo Vandelli

Интерактивная анимация цифр 404 на странице с ошибкой.

19. Grainand Mortar

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

20. Rails Ware

Тематическая 404-я сайта разработчиков и дизайнеров.


21. Domenart Studio

Красиво оформленная 404-я страница российской студии дизайна.

22. Love Beets

Английская ферма выращивает овощи для салатов. Интереактивный редис под социальный шаринг на 404-й странице – это оригинально и уникально.

Страница 404 и красивая айдентика

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

23. Sketch

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

24. Puree Maison

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

25. Hungry Boys

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

26. Phive

После эксцентричного поведения при загрузке страниц, значок прелоадера на 404-ой выглядит изможденным: «Не могу согнуться, потеря 404 грамм жира…»

27. Mail Bakery

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

28. Moosend

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

30. A propos du cancer

Жанровая стилистика сайта мед. учреждения – обращение к докторам хосписа. Иллюстрации, спокойная анимация и успокаивающие тона. На странице 404 ошибки потерявшийся пациент.

31. Studio Wolf

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

32. Horton Works

В дополнение к логотипу и сам слон.

33. Pointless Corp

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

34. Nagyi Titka

Рекламный персонаж продукта крупным планом на 404-странице.

35. Panoraven

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

36. Waaffle


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

37. Avocode

Страница 404 весьма недвусмысленно подчеркивает креативный нейминг (avocode от авокадо).

38. Yelp

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

Тематичные 404 страницы

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

39. E-co

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

Что означает «ошибка 404» и как следует бороться с подобной проблемой?

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

Ошибка 404 – причины возникновения

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

В таком случае он выдает текст, по содержанию похожий на « not found nginx/1.0 ».

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

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

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

Ошибка 404 – что делать и можно ли устранить?

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

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

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

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

Отличным решением послужит размещение на странице, выдающей ошибку, полезной информации. Не стоит размещать банальное « error 404 not found ».

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

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

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

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

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

Следующим шагом для оформления страницы 404 является добавление функции отправки отчета об ошибке.

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

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


Ошибка 404 в WordPress – причины и способы устранения

Причины возникновения данной ошибки в известнейшей CMS схожи со всеми остальными. Часто люди задают вопрос о « wordpress 404 ошибка » и пытаются найти какое-то уникальное решение.

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

Надеемся, что данная статья окажется для Вас полезной.

Порция вдохновения: креативные страницы ошибки 404

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

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

CoolApps(e)

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

Emailcenter

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

Is It WordPress?

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

JackRabbit Design

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

KitKat

Встречали ли вы когда-нибудь страницу 404, на которой можно еще и поиграть в пинг-понг? Сайт KitKat предоставляет такую возможность. Нажмите кнопку Let’s Play и отбивайте мяч, перемещая шоколадку вверх/вниз клавишами Q и A.

Mark Dijkstra

Если на других сайтах страница 404 ссылается на главную, то здесь всё наоборот. Зайдя на главную страницу сайта markdijkstra.eu, вы увидите лишь приглашение перейти на страницу 404, где, в свою очередь, размещено чуть больше информации – ссылка на Twitter и возможность связаться с Mark Dijkstra по e-mail.

MOLOME

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

Pizzamilano

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

Romain Brasier

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

SCA Promotions

Похоже, Чак Норрис сломал эту страницу.

Snakes in Space

На этом сайте можно поиграть в «змейку» (врезаться в стены нельзя!). А вот страницы с неверным URL, по всей видимости, крадут инопланетяне…

Turbomilk

Здесь всё просто и понятно. Для тех, кто не знает русский язык, есть переключатель на англоязычную версию.

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

Цукерберг рекомендует:  Функция с именованными параметрами
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих