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

2634

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

Повышаем конверсию: поиск по сайту как часть воронки продаж

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

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

AliExpress

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

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

Amazon

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

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

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

Aviasales

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

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

Blizzard

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

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

Coca-Cola

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

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

Convert Monster

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

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

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

Ebay

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

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

Evernote

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

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

Facebook

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

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

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

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

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

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

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

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

Лабиринт

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

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

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

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

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

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

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

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

Ozon

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

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

Сотмаркет

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

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

Texterra

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

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

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

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

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

Викиум

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

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

Яндекс

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

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

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

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

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

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

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

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

Lego

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

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

«Кинопоиск»

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

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

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

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

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

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

Playboy Russia

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

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

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

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

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

Udemy

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

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

Pikabu

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

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

Pixar

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

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

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

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

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

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

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

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

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

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

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

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