Каковы наилучшие методы разработки страницы с ошибкой 404?

Я прочитал так много блогов и статей по этому поводу. Кто-то говорит об использовании причудливых изображений, а кто-то о том, чтобы придерживаться основ.

Есть ли какие-либо рекомендации по этому поводу? Каковы лучшие практики? Какие из следующих деталей неверны или должны соблюдаться?

Перенаправление

  • На главную страницу
  • На страницу поиска
  • К карте сайта
  • Автоматическое перенаправление??

Сообщение об ошибке

  • Должны ли мы явно указать 404 Page not found

  • Некоторые другие необычные удобные сообщения

Используемые изображения

  • Изображение, относящееся к ошибке

  • Изображение, соответствующее типу веб-сайта

Другие элементы страницы

  • Должны ли быть включены общие элементы на веб-сайтах, такие как навигация, нижний колонтитул и т. д.?

  • Контрастная цветовая тема или та же тема, что и на сайте?

Любое полезное руководство приветствуется

Изменить:

Кого винить?

В сообщении об ошибке мы должны указать, что the page you typed not exist (возлагая вину на пользователя) или какие-то другие сообщения, берущие вину на себя, даже если причиной может быть неправильный URL-адрес?

84
Uwe Keim 20 Июл 2021 в 11:26
27
404 Error not found означает, что сама ошибка не найдена. 404 Page not found встречается чаще.
 – 
Mast
22 Сен 2015 в 23:34
4
Всегда предлагать пользователю ссылку на главную страницу сайта. довольно велика вероятность того, что ваш пользователь, особенно новичок, будет искать быструю помощь
 – 
Jedi Commymullah
23 Сен 2015 в 07:36
28
Что бы вы ни делали, никогда не перенаправляйте (например, изменяет адресную строку) на страницу с ошибкой. Когда кто-то печатает или копирует/вставляет адрес, мало что раздражает больше, чем невозможность исправить адрес из-за того, что он пропал. (Особенно, когда на странице с ошибкой написано «пожалуйста, исправьте адрес». Я видел это.)
 – 
Medinoc
23 Сен 2015 в 12:00
7
Однажды я увидел на веб-странице зоомагазина страницу с ошибкой 404 с 404 вместе с некоторыми случайными сообщениями, такими как «Извините, страница, которую вы искали, была съедена собакой» или «Хомяк использовал эту страницу как свою кровать». Это добавляет приятную настройку на ваш сайт в зависимости от того, о чем он, но также следует отметить, что это очень зависит от того, знает ли пользователь, что на самом деле означает 404.
 – 
Josh Part
23 Сен 2015 в 20:13
5
Также убедитесь, что код ответа HTTP на самом деле 404, а не "200 OK".
 – 
Vi.
25 Сен 2015 в 00:23

8 ответов

Лучший ответ

Перенаправление: следует ли перенаправлять, и если да, то куда?

В общем нет.

Нет, если только вы не уверены, что знаете, куда на самом деле хотел перейти пользователь (а в большинстве случаев вы этого не сделаете). Лучше дать им явное сообщение об ошибке, и пусть они решают, что делать дальше.

Если пользователь пытается получить доступ к старому URL-адресу, который был перемещен, можно перенаправить его на старый URL-адрес. Но вы действительно должны использовать перенаправление 3xx вместо 404.

Должна ли страница явно указывать 404: Страница не найдена?

Мне нравится, когда на странице отображается ошибка 404, потому что я думаю, что многие люди знают, что означает это число, и оно действует как сокращение для ошибки. Но это всего лишь предпочтение — например, Apple и Microsoft на страницах 404 об этом не упоминается.

Обязательно должна быть формулировка типа «страница не найдена». Это распространенное и хорошо понятное сообщение.

Как должна выглядеть страница?

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

Кого следует винить?

Никто. Простое сообщение «Страница не найдена» нейтрально и точно.

  • Возложение вины на пользователя будет раздражать его; возложение вины на себя является излишне самоуничижительным.
  • Вы не можете сказать, чья это вина. Возможно, пользователь ввел неверный URL (их вина), или часть сайта не работает (ваша вина).

Неуместно указывать пальцем на вину; было бы легко ошибиться.

Есть другие предложения?

URL-адрес, который вводит пользователь, может дать вам информацию о том, куда он хотел перейти. Если вы будете осторожны, вы можете использовать это, чтобы перенаправить или предложить альтернативу. (Это предполагает, что у вас не так много похожих URL-адресов и что у вас есть какой-то конечный список для сравнения; это не будет работать на всех сайтах.)

  • Мне нравится модуль Apache mod_speling. Если страница не найдена, она ищет очень похожие страницы (разница в один или два символа) и выполняет соответствующее перенаправление. Это хороший способ поймать опечатки. Но это довольно консервативно, потому что перенаправление на неправильную страницу, вероятно, хуже, чем возврат ошибки.

  • Когда это слишком далеко от подлинного URL-адреса, вы все равно можете предположить, что пользователь мог ввести. Это идея от Бретта Терпстры: его 404 страница предлагает URL-адреса, аналогичные текущей странице. Например, это результат для http://brettterpstra.com/2013:

    введите здесь описание изображения

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

89
alexwlchan 22 Ноя 2015 в 13:40
3
Да, этот скриншот, вероятно, был плохим примером. Обычно это больше похоже на одну или две ссылки, которые очень похожи на введенный URL-адрес, или ничего, если это совершенно странный URL-адрес. Я согласен, что это может сбивать с толку, если вы выбрасываете слишком много URL-адресов, но при правильной настройке, я думаю, это работает хорошо.
 – 
alexwlchan
22 Сен 2015 в 18:40
3
Обязательно укажите код ошибки 404. Когда пользователь звонит в службу поддержки, это ключевая информация, которую необходимо иметь, и она почти наверняка ускорит решение проблемы.
 – 
Mohair
22 Сен 2015 в 20:22
5
Технически вы можете иногда сказать, что это ваша вина, например. если запрос содержит заголовок Referer(sic), указывающий на ваш сайт. Вопрос в том, стоит ли изменять сообщение об ошибке для этого особого случая; однако, по крайней мере, это определенно стоит зарегистрироваться. (К счастью, большинство веб-серверов регистрируют эту информацию по умолчанию.)
 – 
Ilmari Karonen
23 Сен 2015 в 08:48
3
Вы не можете действительно доверять точности Referer, поскольку она отправляется клиентом (например, часто боты подделывают реферер вашего сайта по какой-либо причине). Также я предполагаю, что вы уже регулярно следите за всеми внутренними ссылками и их действительностью.
 – 
Hagen von Eitzen
24 Сен 2015 в 16:53

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

Следовательно, мы получаем несколько электронных писем в неделю, которые помогают нам привести наш сайт в порядок и решить проблемы.

Мы также включили очевидное окно поиска, чтобы попытаться помочь людям найти то, что они искали. Мы обновляем нашу карту сайта, но как только это будет сделано, мы снова дадим ссылку на нее отсюда.

Мне нравится решение Бретта Терпстры (предполагающее, какую страницу вы, возможно, искали), но я думаю, что нам было бы сложно кодировать, основываясь на нашей CMS...

http://lawsociety.org.uk/broken-link/

enter image description here

23
BenLF 22 Сен 2015 в 16:46
7
Часть об электронной почте была полезной и новой информацией. Спасибо
 – 
Sooraj
22 Сен 2015 в 17:54
1
Я всегда удивляюсь, почему это не автоматизировано на стороне сервера с соответствующими ограничениями скорости.
 – 
Cees Timmerman
23 Сен 2015 в 20:02
3
В зависимости от стека технологий он может быть автоматизирован. В ASP.NET есть плагин ELMAH, который при добавлении будет (по умолчанию) регистрировать все ошибки и имеет несколько способов настройки того, что фильтруется и что генерирует уведомление. Я был бы удивлен, если бы в других фреймворках не было чего-то подобного.
 – 
Tieson T.
25 Сен 2015 в 04:44
1
Не уверен, что это то, что вы имели в виду, но сначала мой взгляд привлекла большая зеленая шкала с правой стороны.
 – 
Blacklight Shining
26 Сен 2015 в 10:41

Я всегда ценю остроумную страницу 404, так как она не только сообщает, что страница не существует, но и способствует созданию впечатления, связанного с вашим брендом.

Например, я работаю неполный рабочий день в компании Haptik, и у них есть подход Без звонков, только текстовые сообщения для улучшения обслуживания клиентов.

Следовательно, вот что они сделали для темы своей страницы 404:

enter image description here

Обратите внимание на количество вариантов, которые он дает вам ниже.

Цель состоит в том, чтобы передать, что Страница не существует, и вы можете использовать различные метафоры, чтобы сказать это, но в лучшем случае лучше оставить намек на «Страница не найдена».

В качестве хорошего шаблона проектирования следует избегать автоматического перенаправления. Если вы можете заставить пользователя перейти к нужному разделу, предоставив параметры, зачем автоматически переходить к чему-либо?

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

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

7
Swapnil Borkar 22 Сен 2015 в 16:53
2
Хорошим примером является страница Apple 404: apple.com/404 (она имеет более удобную навигацию, чем само меню и у вас еще есть поле поиска!)
 – 
Ismael Miguel
22 Сен 2015 в 14:47
32
Мне очень не нравится "Кажется, вы набрали неправильный номер". Я ничего не набирал, я ввел неправильный URL или перешел по неправильной ссылке.
 – 
Uwe Keim
22 Сен 2015 в 15:00
1
Это метафора. Это то, как вы брендируете свой продукт. Описание представлено ниже.
 – 
Swapnil Borkar
22 Сен 2015 в 15:38
16
Обратите внимание, что этот пользователь связан с Haptik, и, вероятно, поэтому его сообщение выглядит как реклама Haptik, а не фактический ответ...
 – 
ValarDohaeris
22 Сен 2015 в 16:24
6
Ваше сообщение было временно удалено. Поскольку вы связаны с этим сайтом, вы обязаны заявить о своей принадлежности (как указано здесь: ux.stackexchange. com/help/promotion). Как только вы это сделаете, мы будем рады восстановить ваш ответ (но постарайтесь сделать его менее спамным). Это действительный пост, но он не декларирует вашу принадлежность, как это требуется.
 – 
JonW
22 Сен 2015 в 16:48

Я отвечу на это с человеческой точки зрения, поскольку эмпатия — это то, к чему мы стремимся, работая над решениями для пользователей.

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

Веб-сайт = ВЫ, у которого был плохой день, или вы разочарованы, или что-то потеряли и нуждаетесь в поддержке.

Изображение 1 = ваш друг Боб, Изображение 2 = ваш друг Райан и Изображение 3 = ваша подруга Лиза

Изображение 1: Боб Изображение 1 = Боб

Изображение 2: Райан Изображение 2 = Райан

Изображение 3: Лиза Изображение 3 = Лиза

Кому из своих имиджевых друзей вы сердечно поблагодарите или позвоните позже за то, что они помогли вам сохранить позитивный настрой, когда все станет хорошо?

Я оставлю вас, чтобы ответить на этот вопрос. :)

4
Chimdi2000 22 Сен 2015 в 14:26
12
Я не совсем уверен, что вы делаете. Ни один из этих вариантов не кажется мне хорошим: 1) сбивает с толку, не дает понять, что произошло, и выглядит немного как реклама. 2) вызывает сочувствие, но также сбивает с толку и не предлагает дальнейших действий. 3) понятна для технической аудитории, но не понятна для других, излишне драматична и не предлагает дальнейших действий. Посещение веб-сайта не похоже на посещение друга — за некоторыми исключениями, я посещаю веб-сайты, чтобы выполнить определенные задачи или что-то узнать, я посещаю друзей, чтобы пообщаться (без фиксированной цели).
 – 
user56reinstatemonica8
23 Сен 2015 в 20:11
Я должен согласиться с @user568458. Ваш контекст разделен, и это делает ваш ответ и примеры недействительными. Основываясь на вашей точной аналогии «у меня был плохой день», я бы выбрал дружелюбное изображение 1. Но вопрос касается сообщений конечных пользователей, поэтому ваше изображение 3 лучше, хотя и не такое «дружественное», как изображение 1, это то, что Интернет-пользователь требует - информация. Если я нахожусь на веб-сайте и страницу не удается найти, я не хочу «подбадривания» или «дружелюбного лица», мне нужна информация, потенциальные решения и т. д. Однако я вижу, что вы пытались сделать: )
 – 
James
23 Сен 2015 в 20:54
Очень интересный способ взглянуть на вопрос, но, будучи ответом, я думаю, что все же лучше дать явный ответ, основанный на ваших собственных мыслях по поводу вопроса.
 – 
Michael Lai
26 Фев 2016 в 03:52

Перефразируя Стива Джобса, дизайн — это то, «как это работает».

Страница 404 — это то, чего вы хотите избежать, поэтому самое важное со страницей 404 — спроектировать ее таким образом, чтобы вы знали, что она была показана, и затем могли сделать что-то, чтобы убедиться, что она не будет отображаться в будущем. . Под этим я подразумеваю ведение журнала. Да, это уже будет в журналах сервера, но исправить проблемы из журналов сервера может быть не так просто. Если вы генерируете ошибку 404 из точки входа index.php, вы можете сделать что-то, чтобы зарегистрировать страницу 404, поэтому, когда она попадет, у вас будет соответствующая информация в месте, где вы можете легко просмотреть вопросы.

Хорошо спроектированный веб-сайт на самом деле не так часто выдает ошибку 404, дизайн является «скорее профилактикой, чем лечением», когда дело доходит до ошибки 404. В этом случае вы можете сделать его простым и точным, поэтому, если он будет показан, это будет ясно. пользователю и не тратить пропускную способность на ботов или другие источники неправильных URL-адресов. Это означает, что не нужно беспокоиться о блоках полезности CMS, окнах поиска и других обрезках, достаточно будет просто «страница не найдена» со ссылкой на домашнюю страницу (известно, что домашняя страница загружается и имеет навигацию по сайту).

Это так просто. Да, вы можете добавить простое изображение или изменить его стиль CSS, но кроме этого, сохраните тяжелую работу для контента, который вы хотите, чтобы ваши посетители видели, и исправьте эти неработающие ссылки в вашем контенте или в некоторых переписываемых стилях .htaccess. до пасхального яйца 404.

4
Henry's Cat 25 Сен 2015 в 18:13
2
«Хорошо спроектированный веб-сайт действительно не так часто выдает ошибку 404, дизайн — это скорее профилактика, чем лечение», когда дело доходит до ошибки 404». - это ложное предположение - в большинстве ответов не учитывается, что ошибки 404 могут легко возникать с другого сайта, ссылающегося на несуществующую страницу на вашем сайте, например. какой-то разработчик делает опечатку или неправильно копирует ваш URL.
 – 
GWR
12 Фев 2016 в 15:22

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

Есть много хороших примеров страниц электронной коммерции 404, полных индивидуальности, которые пытаются увеличить конверсию — некоторые даже с рекомендациями по продукту. Возможно, они считают это тем же, что идти не по тому проходу в магазине.

2
Bob 23 Сен 2015 в 18:48

Ответ в заголовке: 404 Not Found.

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

0
forloop 25 Сен 2015 в 16:28

Мне нравится идея сочетать юмор с переадресацией 404. Я думаю о том, чтобы отображать наши последние блоги под сообщением, чтобы сделать его привлекательным. Наша текущая страница 404 выглядит очень плохо и имеет высокий показатель отказов — http://www.sevenatoms.com/article_writing_services. .shtml

-1
Tina Bahadur 14 Июл 2016 в 20:44