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

Автор оригинала: QArea Development Company
  • Перевод
Большинство пользователей, наткнувшись на страницу ошибки 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:

    image

    Яндекс:

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


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

Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 17

    +10
    Я таки извиняюсь, что именно в списке картинок «Designed by QArea», цвет фона, шрифт надписей или радиус уголков?
      +5
      Фон картинки на которой лежат скрины, очевидно же.
        –2
        Подборка скриншотов.
        +3
        Напомнило proteys.info/404/
          0
          Ага) И без флеша не показывает ничего…
          0
          Как насчёт snk-games.ru/404.html?
          Там же лежат 403, 502 и 500.
            0
            Согласен, отличные все четыре.
            +5
            Странно, я думал речь пойдет о том, как удержать пользователя на сайте, а не как прогнать его окончательно (с чем отлично справляется испуганный Гомер Симпсон).

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

            Максимум информации о предполагаемой странице можно извлечь из реферера и запрошенного ошибочного url:
            — Определив запрашиваемую рубрику, надо показать список популярных товаров или статей этой рубрики;
            — Если в адресе присутствует slug, можно транслитерировать его в кириллицу и попытаться выполнить полнотекстовый поиск по сайту с выдачей наиболее релевантных результатов;
            — Выдать спец.предложения, акции, кнопки действий и т.д., превратив таким образом страницу в landing page;
            — Наконец, сделать специальное предложение пользователю («К сожалению, запрашиваемого вами товара у нас нет. Мы приносим свои извинения и дарим вам скидку при покупке аналогичных товаров...»).
              0
              Ну, Гомер — дело вкуса)

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

              Насчет реферера — не во всех случаях это может помочь. Если переходишь с главной страницы сайта, то в реферере будет ссылка на главную страницу, а что даст такая ссылка? Понятно, что вместе с ошибочным url можно получить немного больше информации, но, на мой взгляд, это все равно не универсальный рецепт. Но в целом, да, в ситуациях, когда это может помочь, почему бы и не использовать.
              0
              — Наконец, сделать специальное предложение пользователю («К сожалению, запрашиваемого вами товара у нас нет. Мы приносим свои извинения и дарим вам скидку при покупке аналогичных товаров...»).

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

                Неверно. В протоколе HTTP средняя цифра ничего не означает. Код ошибки 404 состоит всего из двух частей — первой 4 и последних 04.
                  0
                  Спасибо за замечание, Вы правы. Исправлю в статье, если не возражаете.
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      Ну, как мне кажется, я дал достаточно контекста для понимания. А за схему спасибо, довольно интересная, хотя местами загадочная. Так, в моем понимании, редиректы — это все-таки реально существующие ресурсы, пусть и по другому адресу.
                    +1
                    А почему на 404 хабрахабра планеты летают по одной не эллиптической орбите?
                      +1
                      Это другая вселенная.
                      0
                      Вот ещё, например

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

                      Самое читаемое