Ошибка 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        

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

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

    Спасибо.

  2. ]]> Игорь ]]> (Май 27, 2010)

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

  3. ]]> Tod ]]> (Май 27, 2010)

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

  4. ]]> MyFreeWeb ]]> (Май 27, 2010)

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

  5. ]]> Anna Volkova ]]> (Май 27, 2010)

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

  6. ]]> Tod ]]> (Май 27, 2010)

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

  7. ]]> Benedicte ]]> (Май 28, 2010)

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

  8. ]]> dacascas ]]> (Май 28, 2010)

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

  9. ]]> Oleg Mykhailenko ]]> (Май 28, 2010)

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

  10. ]]> Alli ]]> (Май 28, 2010)

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

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

  11. ]]> Tod ]]> (Май 29, 2010)

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

  12. ]]> Жека ]]> (Июнь 6, 2010)

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

  13. ]]> i_am_banana ]]> (Июнь 23, 2010)

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

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

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

  15. ]]> xfiles ]]> (Август 1, 2010)

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

  16. ]]> TRSteep ]]> (Февраль 11, 2011)

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

  17. ]]> Polina ]]> (Август 18, 2011)

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

  18. ]]> Никитос ]]> (Апрель 24, 2012)

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

  19. ]]> Эльдар ]]> (Сентябрь 12, 2012)

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

  20. ]]> Юрий ]]> (Июнь 27, 2013)

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

  21. ]]> Связной ]]> (Сентябрь 8, 2013)

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

  22. ]]> Tod ]]> (Сентябрь 8, 2013)

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

  23. ]]> Grin ]]> (Март 17, 2014)

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

  24. ]]> Роман ]]> (Июнь 8, 2014)

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

  25. ]]> Юрий ]]> (Ноябрь 22, 2014)

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

  26. ]]> Коля ]]> (Январь 6, 2015)

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

  27. ]]> Moipol ]]> (Февраль 28, 2016)

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

  28. ]]> Seostotel ]]> (Июнь 30, 2016)

    В нашей компании оригинальное графическое решение https://artklen.ru/404

  29. ]]> Николай Корзинин ]]> (Август 17, 2016)

    Одна из самых уместных 404-х http://televizor-x.ru/404 (из тех, что я видел).

  30. ]]> Tod ]]> (Август 18, 2016)

    Николай, когда подходит к тематике сайта это плюс. Хотя долго на нее смотреть сложно)

  31. ]]> Саня ]]> (Август 19, 2016)

    Вот вам креатив))) (Тестовый домен) http://smile.vrezerve.com/404-error/

  32. ]]> Настя ]]> (Ноябрь 14, 2016)

    Есть какие то креативные дизайны для детского сайта? что бы могли улыбнуть.

  33. ]]> Tod ]]> (Ноябрь 14, 2016)

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

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