Улучшаем страницу 404-ой ошибки

в 18:12, , рубрики: веб-дизайн, интерфейсы, страница 404, юзабилити

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

Улучшаем страницу 404 ой ошибки


Наша цель: улучшить страницу 404!

image

Что не так с страницей 404-ой ошибки по умолчанию?

Ответ прост: все. Страница 404, на которой лишь написано «Страница не найдена», не будет полезной для посетителя; даже ссылка «Вернуться на главную» не поможет.
Отсутствие достойной 404-ой страницы ухудшает впечатление пользователя. Посетители, которые ищут определенную страницу на вашем сайте, но попали на битую ссылку, будут вынуждены вернуться на главную страницу и начать поиск заново. Если они не найдут, что ищут, то тут же покинут веб-сайт. В идеале пользователь никогда не столкнется с подобными ошибками, но 404-ая страница позволяет извиниться перед пользователем и помочь ему найти то, что он ищет. Довольный посетитель вероятнее всего вернется на ваш веб-сайт.
Еще хуже, когда 404-ая страница отсутствует вовсе. У посетителя не будет представления о том, что происходит. Отсутствие такой страницы делает сайт непрофессиональным и заставляет пользователей покинуть его.

image


Пространство для улучшения

Самое важное сделать страницу 404-ой ошибки простой и понятной пользователю. Напишите, что страница, которую ищет посетитель, не существует. Объясните, почему именно она не существует.

Извини, друг. Страница, которую вы запросили, не находится в нашей базе данных. Скорее всего вы попали на битую ссылку или опечатались при вводе URL. – A List Apart 404-ая страница


Совет 1: Придерживайтесь дизайну

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

image


Совет 2: Максимальная польза

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

  • Поисковая форма
  • Ссылка на главную страницу
  • Список самых популярных страниц
  • Ссылка на карту сайта
  • Кнопка сообщения о битой ссылке

image


Совет 3: Будьте дружелюбными и понятными

Не думайте, что все знают, что такое 404-ая ошибка. Вас нужно объяснить, в чем проблема, в дружелюбной манере. Лучше сказать так: «Упс! Мы не можем найти страницу, которую вы ищете.», чем так: «404-ая ошибка. Страница не найдена».

image


Совет 4: Минималистичный дизайн тоже сработает

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

image


Совет 5: Будьте проще

404-ая страница может быть простой и даже смешной. Если ваша страница является таковой, то она бесспорно задержит посетителей на вашем сайте. Возможно даже, что они буду скидывать эту страницу своим друзьям. Именно это и произошло с 404-ой страницей GitHub:

image

image

На сайте nosh.com вообще размещено видео:

image


Результаты поиска

Ваша страница 404-ой ошибки может быть эффективной и отлично смотреться, но очевидно, что она не долдна появляться в результатах поиска. Это можно осуществить двумя способами:

  • Убедитесь, что веб сервер возвращает правильный статус 404 HTTP, тогда поисковики будут игнорировать эту страницу.
  • Добавьте страницу 404 в файл robots.txt.

Просто добавьте URL любого файла в robots.txt и загрузите на сервер:

Disallow: /404.html


Используем страницу 404-ой ошибки

Чтобы использовать собственную страницу 404-ой ошибки, нужно создать файл .htaccess и добавить в него следующую строчку:

ErrorDocument 404 /error/404-error.html

Заключение

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

PS Все замечания по поводу перевода, орфографии и т.п. с удовольствием приму в личку. Спасибо!

Автор: shimapa23


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js