Ошибка 404: Изящное решение

Испорченная ссылка — страшная сила. Когда мы видим «Ошибку 404» — страница не найдена («page not found»), это неважно сказывается на нашем отношении к сайту. Большинство посетителей просто сразу уйдет и даже разбираться не будет (кто-то даже может подумать что весь сайт не работает). Поэтому важно чтобы ваша «страница 404» была способна удерживать посетителей. Кстати, если вам нужно точное определение, код 404 означает что сервер понял запрос, но не нашел по указанному адресу (url) документа.

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

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

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

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

Для вдохновения хочу привести вам несколько очень креативных примеров оформления страницы 404:

Страшновато, лучше сюда, действительно, не попадать, а все находить сразу

Популярный, кстати, персонаж для страницы 404

“Похоже одного из нас нет” – таки да, ребята, потеряли страницу

Опять Он + ссылки на главную и страницу контактов

Стильно, спокойно и с блоком поиска на всякий случай

На видеохостинге Vimeo сразу отображают все возможные варианты и разделы

“Упс” встречается также часто, как и Гомер Симсон

Какая-то слишком “водяная” реализация, страницы в любом случае нету

Прикольное решение со знаком – сразу привлекает внимание

Они извиняются, что не нашли нужную страницу + ссылка на главную

Опа, а эту страницу украл ниндзя:) Ну, что ж, и такое бывает…

Часто фото разыскиваемых публикуют на пачках молока, чем страница 404 хуже

Позитивная реализация идейного черного юмора

Самая стандартная и четкая страница 404

Красивая цветовая гамма

Ухты, мимо такого уж точно сложно пройти мимо

Какой-то персонаж говорит нам, что страницы, увы, нет

Теперь о “пропаже страницы” сообщается целая команда

Просто и просторно – веб 2.0 ?

Ну, тут все всем, наверное, ясно – сериалы смотрим?

Что-то вроде черной дыры? с черным медведем сверху:)

Говорят, что страница исчезла как это часто бывает в магии

Упоминаемый ранее “упс” и ссылки на некоторые страницы

Ого, не нужно так сильно расстраиваться:)

Дохлая ссылка она как дохлая муха, ничего с нее уже не возьмешь

“Файловая реализация” страницы

Еще одна очень жестокая картинка, жизнь некоторых страниц так скоротечна…

Прикольная графическая иллюзия для разрядки + упс:)

Заключение: Наличие собственной талантливо сделанной страницы 404 говорит о многом. В-первую очередь о том что вы думаете и заботитесь о своем посетителе. Во-вторую, что у вас грамотно сделанный качественный ресурс. Кроме этого правильная страница 404 имеет и практическое значение — способна удержать  посетителя на сайте (и перенаправить в нужное место). «Мелочь!» — скажите вы. Мелочей не бывает! Вернее из мелочей все и складывается! Удачного вам креатива!

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!
А еще можно опубликовать ссылку на статью в своем блоге:
Опубликовать в twitter.com        

Комментариев - 27 для поста Ошибка 404: Изящное решение
  1. ]]> Роман ]]> (May 27, 2010)

    Классаная подборка, особенно понравилась страничка с Лостом :)

    Спасибо.

  2. ]]> Игорь ]]> (May 27, 2010)

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

  3. ]]> Tod ]]> (May 27, 2010)

    Игорь, да, есть такая проблема, но я все вчера вроде бы убрал. Неужели, опять появились:( В общем, будем бороться с ними дабы не портить облик проекта, спасибо за замечание.

  4. ]]> MyFreeWeb ]]> (May 27, 2010)

    Мое решение:
    http://krosswordr.ru/404/
    http://krosswordr.ru/500/

  5. ]]> Anna Volkova ]]> (May 27, 2010)

    А как вам наша страничка 404: http://vmirepozitiva.ru/jhlkjh;lj%27;
    Не сказать, что изящная…но вроде с юмором:) Что скажете?

  6. ]]> Tod ]]> (May 27, 2010)

    MyFreeWeb, Anna Volkova, оригинальненько! Хорошо, что в рунете тоже такие штуки делают.

  7. ]]> Benedicte ]]> (May 28, 2010)

    Тут прикольная: http://prophoto.od.ua/404

  8. ]]> dacascas ]]> (May 28, 2010)

    Я смотрю, не только у меня одного юмор туалетный :)
    ____________________________________________автор 404 на vmirepozitiva.ru

  9. ]]> Oleg Mykhailenko ]]> (May 28, 2010)

    Первое изображение, конечно, жесткое, но зачетное!))))
    Anna Volkova, ахаха))) крутая у Вас 404-я))))

  10. ]]> Alli ]]> (May 28, 2010)

    >“Упс” встречается также часто, как и Барт Симсон

    Гомер Симпсон, вы хотели сказать )) Подборка зачотная, спасиб!

  11. ]]> Tod ]]> (May 29, 2010)

    Точно, Гомер, я как-то перепутал, не смотрел их просто

  12. ]]> Жека ]]> (June 6, 2010)

    Где то я муху видел уже. Подборка зачотная, спасиб!
    А вот и муха http://postrlive.ru/error/404.html

  13. ]]> i_am_banana ]]> (June 23, 2010)

    опа! я как раз искал идею 404 для своего блога) спасибо)надо будет чавонить на днях сварганить)

  14. ]]> Александр ]]> (July 21, 2010)

    Ув. Жека (Июнь 6, 2010).
    Благодаря этому сайту и Вашему коментарю, Мы увидели, что наш дизайн 404-й совпадает с другим(муха). Было принято решение поменять дизайн.
    Спасибо.
    http://postrlive.ru/error/404.html

  15. ]]> xfiles ]]> (August 1, 2010)

    Креативная подборочка, каждая страница по-своему хороша и интересна, как раз что-то подобное искал, теперь идея есть что нарисовать для 404-ой, спасибо!

  16. ]]> TRSteep ]]> (February 11, 2011)

    самый лучшая 404 это http://proteys.info/404/ )))))

  17. ]]> Polina ]]> (August 18, 2011)

    TRSteep )))))! Супер!))) Как же нужно было потрудиться чтобы так складно нарисовать танцующего человечка!? Я в шоке! А остальное, мне не понравилось какое-то, слишком уж американское, аж скушно.

  18. ]]> Никитос ]]> (April 24, 2012)

    тут поют птицы: http://www.masterproff.ru/404

  19. ]]> Эльдар ]]> (September 12, 2012)

    Классные страницы :) Я даже теперь не уверен, что лучше настраивать CMS, чтобы их не было) Очень уж зачётно
    Полина, это без проблем делается в After Effects, там не так сложно, как может показаться

  20. ]]> Юрий ]]> (June 27, 2013)

    Боюсь вас разочаровать, но вот вам настоящий дизайн! Смотрите -> http://www.yugin-hardrokovsky.ru/404.html

  21. ]]> Связной ]]> (September 8, 2013)

    Вот тут интересное решение, на странице 404 рандомный бонус – скидка 10% или бесплатный файл – dasound.net/404

  22. ]]> Tod ]]> (September 8, 2013)

    Связной, да, интересная идея.

  23. ]]> Grin ]]> (March 17, 2014)

    а у меня вот так: http://www.old-salt.ru/404.html

  24. ]]> Роман ]]> (June 8, 2014)

    Наша ошибка 404 faktor-2.net/404-error

  25. ]]> Юрий ]]> (November 22, 2014)

    Вот ещё очень оригинальная страница с 404-ошибкой: http://svetplast.ru/inv777entar.html

  26. ]]> Коля ]]> (January 6, 2015)

    Вот обалденная 404 страничка, очень советую посмотреть – http://www.zapolsky.moscow/404/

  27. ]]> Moipol ]]> (February 28, 2016)

    Мне кажется коты управляют этим миром: moi-pol.ru/oshibka-404-takoj-stranitsy-net

Оставить комментарий
для статьи Ошибка 404: Изящное решение