Рассылка по интернет-маркетингу:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных

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

6 Сентября 2018 Алексей Александров
Время чтения: 6 минут Нет времени читать? Нет времени? 14 комментариев
Отправим материал вам на:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных

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

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

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

AliExpress

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

Amazon

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

Aviasales

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

Blizzard

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

Coca-Cola

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

Convert Monster

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

Ebay

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

Evernote

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

Facebook

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

Тупичок Гоблина

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

Студия Дениса Каплунова

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

Лабиринт

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

Студия Артемия Лебедева

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

Новолипецкий металлургический комбинат

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

Ozon

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

Сотмаркет

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

Texterra

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

Банк «Тинькофф»

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

Викиум

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

Яндекс

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

Университет «Синергия»

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

Студия аниматоров «Кудесник»

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

Lego

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

«Кинопоиск»

Страница 404 «Кинопоиска»
  • На странице показываются кадры из известных фильмов.
  • В описании указывается, почему могла появиться такая страница. Способы решения оформлены гиперссылками.
  • Каждый раз страница 404 генерирует новое изображение:
Если на картинке сверху это был Рон Уизли из «Гарри Поттера», теперь – Хан Соло из «Звездных войн»

Творческая мастерская «Штуки»

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

Playboy Russia

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

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

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

Udemy

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

Pikabu

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

Pixar

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

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

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

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

  1. Мгновенный переход на главную страницу: в этом случае человек не поймет, что он ввел неверный адрес или перешел по неработающей ссылке, и может повторить неверный ввод.
  2. Внешний вид страницы
  • с нечитаемыми символами:
Страница 404 с «кракозябрами» – совершенно непонятно, что делать дальше
  • со стандартной и малоинформативной надписью:
Дежурная и неинформативная страница, которая никак не объясняет, что делать дальше
  • дзен-вариант страницы 404 (такой, например, у Школы-студии МХАТ):
Белоснежный пустой фон страницы 404

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

© «TexTerra», при полном или частичном копировании материала ссылка на первоисточник обязательна.
Нашли ошибку в тексте? Выделите нужный фрагмент и нажмите ctrl + enter.
Оцените материал:
Texterra – продвижение в интернете x
Заказать звонок:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных
Texterra – продвижение в интернете x
Заказать услугу:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных