Картинка ошибка 404 – 50 прикольных страниц ошибки 404

50 прикольных страниц ошибки 404

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

Сайт Propeller

Иллюстрированная страница ошибки 404 на B3ta

Страница ошибки 404 Cuoma

Забавная страница ошибки 404 на Tinsanity

Сайт  latelategifts

Муха на странице ошибки сайта 24-4 Media

Разорванная бумага на CssTricks

Иллюстрации акул на Renkoo

Плачущий ребенок на iFolderLinks

Мусорная корзина на странице ошибки 404 TurboMilk

Страница ошибки 404 на Zivity

Такая страница ошибки на сайте Soocial

Разноцветные кубики на rush68

Страница ошибки на Ook

Забавный котенок на Github

Так изобразили ошибку на сайте RetardZone

Надпись на футболке на Planetgeek

Кривляющийся мужчина на PatternTap

Простая и забавная страница ошибки 404 на Studentmarket

Иллюстрация на странице ошибки 404 на BrightKite

Страница ошибки 404 на сайте ClearSpring

Иллюстрация девушки на Erotica Challenge

Грустная мордашка на kidmondo

Смешная страница ошибки сайта Funned

Необычная страница ошибки 404 на nickciske

Страница ошибки в стиле ретро на сайте Lileks

Сайт lightpostcreative и его страница ошибки

Стройка на странице ошибки сайта tele2

Яркая страница ошибки 404 на DDZ

Кот в компьютере на Catswhocode

Космос на странице ошибки Abduzeedo

Разыскивается странница на сайте Limpfish

Стильная иллюстрация на Ferdaze

И на  Expansion Broadcast иллюстрированная страница ошибки

Художественная страница ошибки сайта Chrisglass

Страница ошибки на Fuelly

Облака на Zanami

Страница ошибки на Southpark Studios

Страница ошибки сайта Geeksquad

Милый котенок на Centerd

Марио на странице ошибки сайта Dawdle

Смешной монстр на Cartoon Network

Птерозавры на странице ошибки Amorphia Apparel

Такая страница ошибки на Mozilla

Ещё один забавный пример страницы ошибки 404 Jotsai

Смешная страница ошибки на The Brand Surgery

Страница ошибки Mmo Game Zone

На странице ошибки сайта Acorn Creative разместили носок

Автор – hongkiat

Перевод — Дежурка



Комментарии

Оставить ответ

Похожие статьи

Случайные статьи

www.dejurka.ru

Советы по созданию своей ошибки 404

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

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

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

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

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

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

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

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

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

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

   

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

   

   

   

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

   

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

   

   

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

   

   

   

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

Как у нас

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

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

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

1ps.ru

Как сделать из страницы 404 что-то полезное и интересное: 30 примеров

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

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

Рассмотрим наиболее удачные примеры.

• Автоматический редирект на главную страницу сайта через 4 секунды.

• Предложение перейти на главную страницу.
• Есть ссылка на страницу «Собаки Amazon»:

Занимаемся разработкой фирменного стиля: повышаем узнаваемость бренда. Подробнее

• Предложение перейти на главную страницу.
• Ссылки на сервисы компании.

• Уместный сарказм.
• Возможности перейти во все разделы со страницы.

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

• Креативное оформление – молодая красивая девушка с призывом в духе sex sells.
• Доступ ко всем разделам сайта из футера (его видно при прокрутке вниз).
• Изображение и призыв к действию меняется каждый раз при обновлении страницы 404:

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

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

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

• Графическое оформление в духе компьютерных игр конца 90-ых.
• Анимация на странице – в прорези двери справа появляются красные глаза.
• Доступ из страницы ко всем разделам сайта.

• Оказывается адрес неверно введенной страницы.
• Оригинальный сопроводительный текст.
• Доступ из страницы к основным разделам сайта.

• Ссылка на акции в теле страницы.
• Возможность воспользоваться поиском по сайту или выбрать книгу из каталога.

• Оригинальный сопроводительный текст.
• Доступ к самым интересным разделам сайта студии.

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

• Оригинальный сопроводительный текст.
• Доступ к каталогу товаров.
• Возможность посмотреть все акции и спецпредложения «Озона».

• Нетривиально оформленные ссылки на разделы каталога электроники.
• Кликабельный логотип «Сотмаркет» для перехода на главную страницу сайта.

• Описание причин проблемы.
• Ссылка на главную страницу сайта.
• Возможность поиска нужной страницы по сайту.

• Оригинальный текст со смайликом.
• Ссылки на основные услуги банка «Тинькофф».

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

• Возможность воспользоваться поиском 🙂
• Ссылки на сервисы «Яндекса».
• Ссылка на установку переключателя раскладки клавиатуры Punto Switcher.
• Рекламные объявления (!) на странице 404.

• Позитивная картинка со смыслом.
• Возможность воспользоваться поиском.
• В описании страницы предлагается способ решения проблемы.

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

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

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

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

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

«Единый визовый центр»

• Запоминающаяся картинка-мем с Grumpy Cat.
• В описании страницы способы решения проблемы выполнены гиперссылками.
• За присланный на почту скриншот страницы 404 обещают подарок.

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

• Скажу просто – на этой странице прекрасно ВСЁ!
• Что за существо сидит рядом с парнем?

• Более удачный образ, чем Печаль из мультика «Головоломка» для страницы 404 трудно представить.
• Заголовок страницы «Оооо… Не плачь». Трудно сдержаться, глядя на изображение.
• Описание страницы написано будто от лица Радости из того же мультфильма:

«Этот всего лишь ошибка 404!

То, что ты ищешь, могло затеряться в долгосрочной памяти».

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

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

• с нечитаемыми символами:

• со стандартной и малоинформативной надписью:

• дзен-вариант страницы 404 (такой, например, у Школы-студии МХАТ):

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

kak-sdelat-iz-stranitsy-404-chto-to-poleznoe-i-interesnoe-primery

texterra.ru

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

Большинство пользователей, наткнувшись на страницу ошибки 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 должна справляться с такими задачами:

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

Принимая это во внимание, приведем список рекомендаций по созданию кастомной 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 у различных сайтов в интернете и предлагаем на них взглянуть.

habr.com

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

Редактор-переводчик SEOnews

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

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

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

Purée Maison

Purée Maison – французское креативное агентство, специализирующееся на коммуникационных стратегиях. Персонаж со страницы ошибки 404 нарисован в фирменном стиле сайта и также встречается на страницах загрузки.

Pixar

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

На странице ошибки 404 мультипликационной студии Pixar Печаль из мультфильма «Головоломка» приняла ошибку слишком близко к сердцу. Хороший пример тематической страницы: персонаж известен многим, кто знаком с творчеством компании.

Marvel

Страница не найдена. Даже глаз Уату не видит ваш запрос.

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

Matteo Vandelli

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

20^th Century Fox

То, на что вы смотрите, могло уже быть перемещено. Если вы, конечно, не ищете «Офисное пространство».

Киностудия 20^th Century Fox вместо страницы с ошибкой 404 выдает кадры из своих фильмов, среди которых «Эдвард Руки-ножницы», «Офисное пространство», «Месть полудурков», «Наполеон Динамит» и другие. Забавно, что на момент написания статьи при попытке кликнуть по тексту пользователя перебрасывало на другую, менее креативную страницу ошибки 404.

Cloud Sigma

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

Cloud Sigma – облачное хранилище. На странице – немного юмора и кнопка, ведущая на Главную.

BluePath

Раз вы попали на эту страницу, наслаждайтесь картой, которую мы для вас составили. На ней показаны все преступления, совершенные в Атланте за пару лет. Зачем? Да потому что то, что вы нас еще не наняли, – преступление!

Другой сайт, страница которого сделана с юмором, – сайт компании BluePath, работающей с Big Data. На странице 404 – карта Атланты с точками, обозначающими преступления, совершенные в городе за 2 года. А все потому, что вовремя не начать сотрудничать с BluePath – преступление.

The Useless Web Index

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

Kualo

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

Веб-хостинг Kualo на рынке уже 15 лет, бесконечность по меркам интернета. Их страница ошибки 404 – отсылка в прошлое. Те, кто наткнулся на нее, могут поиграть в Space Invaders, лучшую аркадную игру по версии Книги рекордов Гиннесса и основоположницу всех современных аркад.

Waaark

Упс, что-то пошло не так.

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

Steve Lambert

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

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

Figma

Надпись «404» можно растягивать за опорные точки. Расслабляет.

Airbnb

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

Hot Dot Production

Слоган веб-разработчик Hot Dot Production «Где дизайн встречается с технологией» хорошо отражен на его странице ошибки 404. Три цифры составлены из сотен маленьких точек, которые меняют направление или расходятся в разные стороны в зависимости от движений мышки.

GitHub

Страница Github нацелена на гиков-фанатов серии «Звездные войны».

Помимо 404 у GitHub еще есть креативная страница с 500 ошибкой.

CSS Ninja

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

MailChimp

Мы потеряли эту страницу. Мы посмотрели везде, но так и не нашли то, что вы ищете. Давайте найдем для вас место получше.

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

Emirates

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

Audiko

Audiko – сервис для создания рингтонов. На странице ошибки 404 – иллюстрация Лондона с его традиционными красным автобусом, телефонной будкой, Биг Беном, Шерлоком Холмсом и Тауэрским мостом. А чтобы не потеряться, по центру расположен поиск рингтонов и ссылка на домашнюю страницу.

IMDb

На 404 странице главного западного сайта о кинематографе можно найти измененные цитаты из кинофильмов, в которые вставлено слово «страница». Например, «Я отсутствующая страница Джека» из Бойцовского клуба или «Что на странице?!» из фильма «Семь».

Зайдите и проверьте, цитата из какого фильма попадется вам.

NPR

Организация National Public Radio, распространяющая новости радиостанций США, на своей странице 404 ошибки предлагает ознакомиться с материалами о других пропавших: Атлантиде, летчице Амелии Эрхарт и изображении Валдо на крыше одного из зданий Ванкувера.

Blizzard Entertainment

Компания-создатель игр World of Warcraft и Diablo обвиняет пользователя в том, что страница «сломалась». Ущерб действительно налицо: хедер навигации «упал», а экран разбит.

TProger

На странице 404 портала о разработке TProger есть все: объявление об ошибке, забавные видео (каждый раз новые) и ссылки на другие страницы.

Crello

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

Hakim.se

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

Android

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

Sumatosoft

Авторы страницы Sumatosoft намекают на то, что страницу украли инопланетяне. Но не стоит расстраиваться: вы все еще можете перейти на домашнюю страницу, просмотреть кейсы или написать компании.

Ma meilleur cuite

Этой страницы не существует… Вы пьяны или просто потерялись? В любом случае вы нашли Pacman’а, который тоже потерялся. Помогите ему найти выход, по пути собирая кружки с пивом!

Французский блог об алкоголе Ma meilleur cuite предлагает сыграть в игру Pacman, выполненную в стилистике сайта.

Romainbraser

На странице сайта разработчика Romainbraser можно сыграть в аналог популярной игры Lemmings.

Fox

На 404 странице студии Fox пользователей ждет Стьюи из Гриффинов. Кнопка «Get Together» ведет на главную страницу.

Discord

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

Slack

На странице 404 ошибки корпоративного мессенджера Slack – отсылка к небольшой MMO-игре Glitch (от англ. глюк), созданной одним из основателей программы.

Canva

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

Amphibian

На портале с комиксами Amphibian можно сыграть в лягушачий футбол.

Советы от экспертов

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

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

Задачи кастомной страницы 404:

• уведомить об ошибке в дружелюбной форме. Не забывайте про тональность коммуникации (ToV, Tone of Voice): ошибка произошла не по вине пользователя, успокойте его, просто скажите, что контент не найден;
• объяснить причину. Например, что страница была удалена либо что вы недавно обновили структуру сайта;
• предложить решение, чтобы оставить посетителя на сайте.

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

Если причина возникновения ошибки неизвестна, можно предложить типовые решения: предоставить возможность перейти на работающие страницы, показать основную навигацию, дать ссылки на популярные разделы. Например, для ecommerce-сайтов имеет смысл предложить перейти в каталог товаров или дать ссылки на самые популярные. Главное – не оставить посетителя наедине с проблемой. Хорошие примеры реализации этих идей – Squarespace и IFTTT.

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

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

Примеры того, как можно удивлять и веселить, но при этом все равно предлагать полезное действие:

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

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

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

Константин Кислейко, руководитель отдела дизайна AGIMA

Я уже давно не встречал 404 страницу в реальной жизни.

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

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

Источник: Creative Bloq

www.seonews.ru

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

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

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

Что касается неопытного пользователя, то он, увидев страницу где написано «ошибка» да в подарок к этому ещё и какие-то непонятные цифры, с вероятностью 99,[9]% в панике закроет страницу, браузер, выключит компьютер, вытащит вилку компьютера из розетки, отключит электричество в щитке, соберёт накопленное, сделает пластическую операцию, поменяет имя и переедет на другую планету.

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

Вот пример стандартной страницы ошибки 404:

Скучно, непонятно, скучно.

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

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

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

17.

Студия Олега Чулакова(???). Сайт необычный. А вот этот поток сознания можете считать либо шуткой либо бредом. И не поймешь недокреативили или перекреативили.

16.

Далее уже поднадоевшие образы «пацанчиков с периферии»

15.

А тут пацакчики. К сожалению, не нашел сайт, где это чудо размещается.

14.

На сайте turbomilk.ru решили не «прибивать» подвал к низу странички, однако страница об ошибке у них забавная

13.

Дизайнер Евгений Филатов на своем сайте придается ностальгическим воспоминаниям. Сейчас не очень часто смотрю телевизор, но раньше помню эти полоски по понедельникам. Так же здесь вы можете откалибровать свой монитор.

12.

На lure.com.ua мы видим того самого пользователя и разжёванную инструкцию.

11.

Сайт у «Занами» так себе, но 404 страница отсылает нас мысленно к одному из лучших советских мультиков.

10.

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

9.

А вот отсыл к истокам сетевого сленга.

8.

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

7.

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

6.

Тут даже неловко стало:

5.

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

4.

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

3.

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

2.

Нет страницы? Не беда! Поиграй в пэкмана.

1.

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

Вне конкурса работы студии ClickON:

Квартиры->дома->стройка->кран

Компания продает 3D принтеры, а их 404 страницу охраняет вот такой крутой человечек со световым мечом:

Творите.

www.clickon.ru

опупенное оформление + 10 примеров

Все, кто хоть раз пользовался интернетом, попадали на страницу “ошибка 404”. И наверняка, видя её у себя на экране, просто брали и уходили с этого сайта.

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

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

Почему она появляется

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

Стандартная ошибка 404

Теперь давайте определимся, почему же посетитель сайте может видеть такую ошибку. А все происходит потому что:

1. Ссылающаяся сторона совершила ошибку при указывании информации на Вас;
2. Пользователь неправильно ввёл ссылку;
3. Страница (ссылка) была удалена;
4. Страница (ссылка) была изменена.

Ещё раз, если Ваш сайт состоит из 10+ страниц, то скорее всего у Вас уже есть эта ошибка и Вы о ней просто не знаете.

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

Чем грозит

Как Вы поняли, от этого не уйти. Такие коллапсы будут, если не по Вашей вине, то по вине клиентов.

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

А если Ваша страница не будет следовать дальнейшим рекомендациям, то посетители будут:

1. Уходить с сайта;
2. Расстраиваться, что не нашли нужную информацию;
3. Понижать свой уровень доверия к Вам.

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

НАС УЖЕ БОЛЕЕ 29 000 чел.
ВКЛЮЧАЙТЕСЬ

Как Сделать такую страницу

Если Вы задались вопросом как сделать страницу ошибки 404, то хочу Вас поздравить, она у Вас уже есть (кроме landing page).

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

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

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

И просто в любое место с новой строки вписать – ErrorDocument 404 http://ВАШ_САЙТ/404.php

Как сделать

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

Больше ничего не надо, всё очень просто! И если вдруг не хотите расширение .php, то можете сделать .html, в глобальном смысле разницы нет.

Цеплять и продавать

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

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

Просто и красиво

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

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

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

Ох, капитан, мы потерялись.
(404. Это не то место, где ты должен быть)
Идти домой Хлоп!
Я стесняюсь…
Извините, Вы попали на “битую” страницу
Свалить отсюда

Ссылки на основные разделы

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

При этом дизайн также важен как и в первом случае. Делайте уклон на оригинальность и юмор.

Упс!
Я стесняюсь…
Мы не можем показать страницу, которую Вы ищите.

Попробуй ещё раз/поиск

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

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

Попробуйте еще раз

Реклама продукта

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

Причём показать Ваш продукт можно даже когда он искал что-то другое. В идеале, не просто показать, но и сделать специальное предложение на него.

Пример рекламы 1 Пример рекламы 2

Интерактив

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

Интерактив играИнтерактив видео

Форма захвата

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

Поэтому чтобы его не терять, и чтобы он к вам ещё раз вернулся – нужно взять его контактные данные и добавить в свою e-mail рассылку.

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

Пример формы захвата

Это наш вариант страницы, на который Вы можете легко попасть введя in-scale.ru/любыеслова. Самое интересное, что такого рода ошибок почти нет на просторах интернета.

Поэтому рекомендую сделать акцент именно на этом, если ваш бизнес подразумевает e-mail маркетинг.

Коротко о главном

Ух, я Вам покажу!

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

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

Тут и встаёт вопрос, что нужно Вашему посетителю в тот момент, когда он попал на эту страницу и как его плавно перевести на то, что хотите от него Вы.

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

in-scale.ru