Ошибочная напасть или 404 в строю 
Автор: Ярослав Бирзул \ Опубликовано 22 февраля 2008 года в категории Полезные заметки \
Как часто вы задумывались над тем, что видит пользователь, промахнувшись в наборе адреса? Или из-за внутренней ошибки обработчика ссылок, который выдал пользователю полностью несуразный URL? Возможно также и из-за банального человеческого фактора, в котором всяческие защиты от дурака просто не помогут?
На все эти вопросы есть один прекрасный ответ — да, такое случается, причем не так редко, как хотелось бы разработчикам сервисов — примерно 0,5-3% по моим скромным прикидкам: тут уже зависит от «ЧеловекоПонятностности ссылок» (ЧПУ) — чем менее понятна ссылка — тем больше вероятность случайной ошибки от вездесущего человеческого фактора. Где проще ошибится, тут (site.ru/?userid=38174&sessid=1238712390721) или тут (site.ru/users/DezmASter/)
Итак, я немного затянул с вступлением, а по первым строкам и не скажешь какая тема тут будет обсуждаться, а это не много, ни мало юзабилити страниц ошибок.
Знаете, что значат такие загадочные цифры как 404, 403, 500, 501, 502 (я перечислил наиболее часто-встречаемые ошибки, весь же список можно посмотреть по этому адресу)? Это замечательно, я тоже (тихонько гордимся).
Для тех, кто в данный момент дислоцируется в тяжелой бронированной технике поясню: данные кадабро-подобные числа ни что иное, как коды определенных сообщений протокола http, которые кратко и емко для знающих людей поясняют что творится с сайтом.
Пример, который я привел в вступлении довольно узок, и затрагивает наиболее распространенную ошибку при работе с сайтом — 404, страница не найдена. Уверен, что вы не раз уже видели подобную ошибку у себя в браузере, но она была хорошо замаскирована, и не содержала всяких кармических чисел. Поэтому вы не обессудьте, но я буду в большинстве своем мудрить именно над страницей 404, а остальные в редких случаях. В крайнем случае — воспользуйтесь общими пожеланиями, которые можно найти в конце этой заметки.
Задача
Спроектировать такую страницу ошибки 404, которая бы не причиняла вреда пользовательскому мозгу.
Инструменты
Вантуз, фонарик, резиновые перчатки.Наш верный, и непотопляемый Adobe Photoshop, Axure, и толика разумного подхода. Причем Axure можно привлекать по желанию, лично я вполне обойдусь одним лишь photoshop.
Исполнение
Что нужно сделать в первую очередь? Отказатся от общего дизайна сайта, какой бы красивый он не был. Наша страница ошибки должна нести чисто функциональный характер, и быть симпатичной, но не более. От дизайна нужно оставить лишь логотип, да общую концепцию стиля.
В качестве подопытного кролика я приведу в пример сайт одного известного на Украине WebMoney обменника, который в скором времени обзаведется новым дизайном. Но у этого нового дизайна пока нет дизайна страниц ошибок — стоит это исправить.
Т.к. сам новый дизайн довольно яркий, и цветной, я специально выделил страницу ошибки полным отсутствием цветастости — она лишь отвлекает от сути, и привлекает внимание — «раз сайт потерял цвет, значит я что-то сделал не так» — таков примерный ход мыслей пользователя. И он в целом прав — страница ошибок не выдается если пользователь все сделал правильно.
Также на странице нужно дать «знающим истину» людям сразу понять куда они попали — для этого нужно особым образом подчеркнуть, что это именно 404 страница.
Для «знающих, но забывших» под загадочным индексом 404 подпишем значение ошибки.
Для «незнающих совсем» нам нужно также привести некоторые пояснения — как эта ошибка могла тут появится, и как с этим жить дальше. Лучше всего будет, если мы перечислим несколько наиболее вероятных ошибок, которые мог допустить пользователь, для того, чтобы попасть сюда. В нашем случае таких вероятностей несколько:
- Пользователь ошибся в наборе адреса.
- Пользователь перешел со страницы поисковика на УЖЕ не существующую страницу.
- Пользователь перешел по битой ссылке.
- У пользователя произошла ошибка в ДНК.
Также людям требуется какой-то знак обычно извещающий их об ошибках где-либо в жизни. В качестве очень яркого и стандартного знака может выступить ярко-желтый треугольник с восклицательным знаком посреди. Согласитесь — узнаваемо. Добавим в нашу страницу и его.
Еще можно воспользоватся довольно интересной вещью, как-то цветовые ассоциации. Для примера — красный ассоциируется с кровью, следовательно со смертью — что является нежелательным моментов у каждого нормального человека. Поэтому страницы ошибок довольно часто имеют подложку в красных тонах. У нас же при отсутвии любых цветов на странице ошибок — можно воспользоватся красным цветом, при это полная монохромность окружающих элементов только подчеркнет важность ошибки.
Еще я добавил форму комментирования для того, чтобы ошибшийся пользователь мог уведомлять разработчиков о том, как он сюда попал, и что он по этому поводу думает. Делается это для того, чтобы человек знал, что его ошибка безвести не пропадет, и о нем помнят. Разработчикам же знание того, как пользователь мог попасть на эту страницу тоже будет полезным — во избежание подобных ошибок в дальнейшем.
А вот и результат, который я получил совместив всё вышесказанное. Довольно логичный вариант, который в принципе не имеет ничего лишнего (форму комментирования при желании можно убрать). Похожая страница ошибки будет применяться и в новом дизайне для этого блога, ждем Сергея Клейменова и его волшебные программерские руки.
Выводы
Страницу ошибок нужно проектировать отдельно от всего проекта, учитывая лишь общие тенденции дизайна оного. Нужно сразу уведомить пользователей о том, куда он попал, и что с этим делать — также оставить узнаваемый индекс ошибки (в нашем случае 404), разьяснить значение этого индекса (можно на отдельной странице, но ссылку оставить стоит — как я и сделал). Также нужно оставить логотип, который используется на сайте, чтобы пользователь не потерялся, и не вздумал мигом закрыть страницу. Для ошибок стоит применять красный (кровавый) цвет ради психологических ассоциация «плохо-хорошо». Также стоит добавить и форму комментирования, чтобы человек не чувствовал безнадежность ситуации, а разработчики получили ценные мысли по улучшению.
Критика уважается и поощряется, также как и конструктивные дискуссии на эту тему, ведь тема обширная, и одной заметкой тут точно не обойдется, обещаю.
Идею для сей заметки мне подсказал Футуриус, за что ему низкий поклон.
Кстати — кому нужна иконка «внимание!» (треугольник) — дарю. 256×256px, PNG24
Тем временем
1. Миша Квакин пишет инструкцию для спаммеров в комментариях.
2. Юра Гугнин ищет рекламную площадку, и не может найти.
3. Сергей Чаботько размышляет о насущном — что писать, если ничего в голову не приходит?
Сергей Чаботько
Миша Квакин
Футуриус
Точка с запятой;
Guicci
Просто Tyomma
Юрий Дибров
WebMolot
Чернев
Юрий Ветров
Павел пишет нам 22 февраля, 2008 в 1:41
Вывод формы - дело отличное! Человек сразу может что-то написать!
Ярослав Бирзул пишет нам 22 февраля, 2008 в 1:44
Согласен, поэтому и добавил её непосредственно на страницу. Думаю пользователю будет приятно осознавать факт, что его случай не пропадет втуне.
ars пишет нам 22 февраля, 2008 в 2:40
Не стоит такой агрессии. Думаю многими подобное воспринимается как камень в свой огород. И на примере знакомых блондинок замечено, что эти многие в спешке закрывают страницу, даже не читая никаких сообщений, как и в случае с системными ошибками ПО.
VoiD пишет нам 22 февраля, 2008 в 7:51
а еще можно в эту страницу встроить автоматическую отсылку адреса страницы который запрашивался, и адреса страницы, с кторой был переход (насчет второго не уверен)
в принципе, тогда и форма не нужна.
потому что не все будут в форму что-то писать
s13 пишет нам 22 февраля, 2008 в 8:44
а чем не подходят стандартные страницы ошибок на тех же блогах?
4m@t!c пишет нам 22 февраля, 2008 в 10:57
Вопрос. Как можно попасть на страницу, которая не существует? Никогда не понимал такой формулировки. Как видим, Гугл и Яху тоже не понимают такой формулировки.
Скорее всего я ЗАПРОСИЛ страницу, которая не существует. А, раз я нахожу на странице, с которой читаю текст, то страница существует.
А в целом согласен с ходом мыслей автора.
Ярослав Бирзул пишет нам 22 февраля, 2008 в 2:31
Вообще-то это стеб над стандартными страницами ошибок
Ярослав Бирзул пишет нам 22 февраля, 2008 в 2:35
Сергей, потому что стандартная страница ошибок на блогах - это обычный шаблон *page с одним заголовком. На этих “страницах ошибок” также выводится всё, кроме самих заметок, а сама надпись об ошибке настолько мала, что её часто просто незаметно.
Да и сама ошибка в wordpress настолько непонятна, что просто внушает ужас.
Ярослав Бирзул пишет нам 22 февраля, 2008 в 2:36
VoiD, ну судя по вашей логике, блоги тоже не нужны, ведь в них не все что-то пишут :)
Ярослав Бирзул пишет нам 22 февраля, 2008 в 2:37
Стеб этот начал Яндекс
Ярослав Бирзул пишет нам 22 февраля, 2008 в 2:44
Для примера далеко ходить не буду - возьму твой блог: http://s13.by/404
По идее страница ошибок не должна содержать ничего лишнего, и наоборот - должна содержать полезную информацию:
1. Номер ошибки. (и поясняющая ссылка)
2. Название ошибки.
3. Несколько возможных причин случившегося.
4. Варианты решения этой проблемы.
Смотрим, что есть у тебя и у меня:
1. Номер ошибки.
2. Название ошибки.
3. Одно предложение, которое говорит пользователю, что его положение безвыходное :)
При этом всё это на английском языке (при твоей русско-говорящей аудитории), и не имеет ни малейшего пояснения пользователю, что ему делать-то.
Ярослав Бирзул пишет нам 22 февраля, 2008 в 2:49
Да нет, вы что - никакой агрессии нет в заметке. А с вашим примером:
> И на примере знакомых блондинок замечено
есть ответ непосредственно в статье: 4. У пользователя произошла ошибка в ДНК.
Замечено в многократном тестировании, что если страница как-то выделяется из общего дизайна (выбивается) - пользователь невольно задумывается над тем, что произошло - и ищет пояснительную информацию.
Однако, я совершенно не отрицаю и некий процент “боящихся”, которые закрывают страницы не читая.
4m@t!c пишет нам 22 февраля, 2008 в 3:03
Значит я зануда. Гы.
VoiD пишет нам 22 февраля, 2008 в 3:57
интересно, почему при наборе
http://www.birzool.com/40
http://www.birzool.com/404
редиректит на
http://www.birzool.com/404403503/
это браузер мой так помогает или движок?
вообще, тоже неправильно
а насчет того, что в блогах не все пишут, это нельзя сравнивать
при автоматической отсылке вебмастер получает еще один удобный инструмент для отслеживания битых ссылок и.т.д.
допустим, видит он, что толпа народу ломится на несуществующий адрес - взял, создал страницу с таким адресом и навешал туда баннеров :)
Ярослав Бирзул пишет нам 22 февраля, 2008 в 4:03
Я не знаю, я ни разу не программист.
То, что в данный момент у меня неправильно я признаю строками из статьи:
> Похожая страница ошибки будет применяться и в новом дизайне для этого блога, ждем Сергея Клейменова и его волшебные программерские руки.
> а насчет того, что в блогах не все пишут, это нельзя сравнивать
почему?
Вы меня неверно поняли - я только ЗА автоматическую отсылку, но я также ЗА форму комментария. Ничто не мешает нам совместить и одно и другое, верно? :)
> допустим, видит он, что толпа народу ломится на несуществующий адрес - взял, создал страницу с таким адресом и навешал туда баннеров
правильнее всего было бы узнать почему они туда идут, и поставить по этому адресу редирект на нормальную страницу, которая содержит нужный пользователям контент.
Aws пишет нам 22 февраля, 2008 в 7:12
А не проще ли сделать на ней какую нить фишку, которая позволит продолжить искать то, что не найдено?
Поиск там, рубрики, метки, предыдущие запросы пользователей?
VoiD пишет нам 22 февраля, 2008 в 7:41
сделал себе автоматическую отсылку и форму, потом понял, что авт.отсылку заменяют логи сервера. По поводу формы комментария - я вот не представляю, что бы я написал в ней. Как можно прокомментировать ошибку 404?
>>Делается это для того, чтобы человек знал, что его ошибка безвести не пропадет, и о нем помнят.
Это же не его ошибка, скорее это ошибка либо вебмастера, либо того, кто поставил кривую ссылку (руками вряд ли кто-то набирает длинные ссылки на пост, набирют максимум адрес сайта)
Что он по этому поводу думает - по-моему и так понятно :)
Ярослав Бирзул пишет нам 22 февраля, 2008 в 9:48
А как вы определите, что пользователь искал?
Форму поиска добавить можно - но в моем примере на сайте поиска нет.
Ярослав Бирзул пишет нам 22 февраля, 2008 в 9:52
Вы статью внимательно читали?
1. Прокомментировать нужно не сам факт ошибки 404, а тот факт, “КАК ПОЛЬЗОВАТЕЛЬ СЮДА ПОПАЛ?”
2. Это может быть ошибка пользователя. Или вы ниразу не ошибались в наборе адреса?
3. Скажем так, в этом блоге люди часть набирают адрес конкретной статьи вручную, тем более, что я предоставил им такую удобную возможность, как простые и короткие названия.
> Что он по этому поводу думает
Боже, я вас прошу - отличайте иронию от серьезного текста :) или вы реально считаете, что я бы предоставил в качестве обьяснения следующую фразу: “У пользователя произошла ошибка в ДНК”.
Nicholass пишет нам 22 февраля, 2008 в 10:27
Вот такой вопрос, с подковыркой, а не проще ли просто отдать заголовок “404″ что б браузер показал стандартную заставку “не найдено”?
Ярослав Бирзул пишет нам 22 февраля, 2008 в 11:10
А как стандартная браузерная заставка сочетается с логотипом сервисов и их дизайном? :) Да и так скорее всего можно только запутать пользователя.
Для примера: если бы у меня показалась заставка браузерная, я бы подумал, что сайт недоступен вообще, а вот 404 - говорит о том, что сайт работает, но ИМЕННО ЭТА страница недоступна.
Aws пишет нам 22 февраля, 2008 в 11:13
>>А как вы определите, что пользователь искал?
1. Тема в самом деле интересная. Варианты?
2. Я плагин такой поставил - 404 Notifier - уведомляет о битых ссылках))))
Ярослав Бирзул пишет нам 22 февраля, 2008 в 11:25
1. Вариант - дать ему самому об этом сказать - через форму контактов тоже выход, не так ли?
2. Дайте ссылочку - попользую :) Но вы должны понимать, что интернет состоит не только (и не столько) из блогов и сайтов на движках стандартных, есть ведь еще и сайты на собственных движках, как сайт из примера :)
Aws пишет нам 23 февраля, 2008 в 12:18
Пожалста:)
“404 Notifier
This plugin logs 404 hits on your WordPress powered site and will notify you of them via e-mail or in an RSS feed.”
http://alexking.org/projects/wordpress/plugins/404-notifier.zip
Ярослав Бирзул пишет нам 23 февраля, 2008 в 12:42
Мои благодарности :)
А.Стоблогов пишет нам 24 февраля, 2008 в 4:10
Понравился твой блог! Добавил в свой список 100 самых интересных блогов под номером 81. Удачи!
Александр Реушкин пишет нам 2 марта, 2008 в 7:24
По поводу формы для обменника.
Цвет не такой агрессивный, как показалось на превьюшке.Приятно. Понятно.
Но:
Зачем имя оставлять в комментарии? Я бы написал слово из трёх букв.
И в данном случае кнопку (почему “Пиу”) нужно поместить под поле ввода слева. Потомучто само поле большое и до кнопки двигаться мышкой не интересно долго.
А ещё хорошо добавть ссылку на начальную страницу сайта. А то не понятно что делать дальше, елс ия не отправлю комментарий
Ярослав Бирзул пишет нам 2 марта, 2008 в 8:35
Анонимные комментарии бы совсем избавили людей от ответственности писать туда что-то серьезное. Имя сдерживает.
Возможно и стоит переместить, но лично мне удобно. Тестеры не жаловались, и ни разу не терялись, сразу замечая такую большую кнопку. Пиу - потому, что настроение хорошее.
Ссылкой на главную страницу сайта является логотип :)
Александр Реушкин пишет нам 3 марта, 2008 в 10:05
Логотип является, но не каждый понимает. Могу сказать по своим исследованиям, что есть люди, еоторые не понимают это. И из не так уж и мало. Так что хорошо бы указать явно ссулку.
Ярослав Бирзул пишет нам 3 марта, 2008 в 10:57
Могу сказать лишь одно - нужно пробовать.
Александр Реушкин пишет нам 3 марта, 2008 в 11:08
Да. Соглашусь с вами. Нужно будет проветси тестирование.
Артём Курапов пишет нам 3 марта, 2008 в 6:16
Самое главное это выдавать заголовки (header) правильные, а потом заниматься юзабилити.
У меня такая страничка:
http://kurapov.name/404
Ярослав Бирзул пишет нам 3 марта, 2008 в 6:41
Да ну вас, Артем. Слишком негативные у меня впечатления от “Fatal Error”. Лучше бы если было “Страница не найдена. 404″.
Артём Курапов пишет нам 3 марта, 2008 в 9:01
Поправил, у меня просто многоязычие на сайте ( http://kurapov.name/404?language=eng например).
Странно что хотя у вас публикации об идеальном комментировании и внушительны, сами их реализовывать вы не спешите.. Или я не понял как работает у вас древовидное комментирование.
Ярослав Бирзул пишет нам 4 марта, 2008 в 8:08
Артем, мои статьи внушительны, но чтобы их реализовать мне нужна помощь программистов :) Этим сейчас я и занимаюсь - дождитесь нового дизайна :)
Ольга пишет нам 12 марта, 2008 в 7:22
Доля здравого смысла имеется. Спасибо.
Ярослав Бирзул пишет нам 12 марта, 2008 в 10:45
Доля?
Ольга пишет нам 23 марта, 2008 в 12:03
Тема хорошая. Однако прокачана вяло.
Ярослав Бирзул пишет нам 23 марта, 2008 в 1:52
Пишите, я с удовольствием почитаю ваши мысли на эту тему.
Dojd пишет нам 8 апреля, 2008 в 2:07
>> Пападя на страницу, человек должен понять, куда он попал и что ему дальше делать.
>Мы ему даем пояснения.
>> вы ему рассказываете сто такое ошибка, какой дурак пользователь, кто разработал сайт, кому принадлежат копирайты, предлагаете написать в саппорт
>Вы сами себе противоречите. Так давать поясненения или нет?
“куда он попал” - это есть, даже 3 раза, я был неправ.
“что ему дальше делать” - писать в саппорт?
Слишком много ненужной писанины на странице, потому что Вы просто взяли по чуть-чуть из приведенных примеров. Информация должна быть краткой и понятной, например “Такой страницы не существует. Вы можете попробовать найти интересующую Вас информацию с помощью поиска или перейти на главную страницу сайта.” В вашем случае про поиск придеться не писать.
> Нет, не это. По-моему я об этом упомянул в статье - написать человек туда может то “откуда и как он попал на эту страницу”. Логично?
Про статистику посещений страницы 404 я написал ниже. В ней есть всё, что может написать о себе пользователь и даже больше.
>> Где ссылка на главную страницу сайта
>В логотипе.
>Нет не считаю, но склонен доверять тестированиям, в которых ясно показано одно - >пользователь пугается. Не нужно судить по себе, целевая аудитория зачастую не слишком >сильно знакома с интернетом.
Вот именно потому что “целевая аудитория зачастую не слишком сильно знакома с интернетом” - и стоит отдать предпочтение ссылке на главную в виде “Перейти на главную страницу сайта” (или “Главная страница”). А про то, что можно кликнуть на логотип - не знает большая часть даже опытных интернет-пользователей.
>>где поиск по сайту
>Тут уже личное дело каждого. Тут, понимаете ли, поиск не был предусмотрен в движке. Или >вы забываете, что мы рассматривали вполне конкретный пример от заказчика?
Про невозможность добавить поиск упомянуто не было, поэтому я и спросил.
>> где карта сайта наконец?
>А еще давайте форум туда засунем, и еще пару фото-галерей.
Раз уж на сайте нет поиска, то единственная возможность быстро найти что-то - это карта сайта.
> PS: уважайте собеседника, а уж тем более хозяина “дома”, чтобы он уважал вас.
Во первых, Вы сами не уважаете собеседника, потому что в блоге нет возможноcти ответить на Ваш комментарий. Во вторых - к чему этот PS? Вы обиделись на критику?
В принципе многое отдельно вкомментах упомянуто уже, можно и апдейт к статье выпускать. )
Ярослав Бирзул пишет нам 9 апреля, 2008 в 12:10
А как пояснить человеку куда он попал без пояснения, что означает страница ошибки?
> какой дурак пользователь
Где такое подразумевается?
> Про статистику посещений страницы 404 я написал ниже
Техническая возможность и жале
> Про невозможность добавить поиск упомянуто не было, поэтому я и спросил.
О невозможности речь не идет, вопрос в бюджете проекта.
Карту сайта можно добавить поставив ссылки сверху страницы, как на сайте - с этим я согласен.
> Во первых, Вы сами не уважаете собеседника, потому что в блоге нет возможности ответить на Ваш комментарий.
Во-первых, я уважаю собеседника только потому, что детально отвечаю каждому, спорю, докапываясь до истины. У меня в блоге есть возможность (пока) ответить только на один комментарий. Я тоже не могу ответить на любой другой. А вы можете ответить на мой, если он в древе комментариев первый. Не передергивайте техническую невозможность и неуважение. Тем более после многократного “дождитесь нового дизайна”, который кстати совсем не за горами. Там я вообще откажусь от древа комментариев. Дабы не было подобных обвинений в “неуважении”.
> Во вторых - к чему этот PS? Вы обиделись на критику?
Нет, не имею привычки обижаться :)
> В принципе многое отдельно в комментах упомянуто уже, можно и апдейт к статье выпускать. )
Я после замечаний имею привычку писать продолжение где обсуждаются эти моменты. Т.е. оттачиваю до конца с вашей помощью.
Dojd пишет нам 9 апреля, 2008 в 1:01
>Там я вообще откажусь от древа комментариев. Дабы не было подобных обвинений в “неуважении”.
Я Вас не обвинял. Это Вы мне ткнули в уважение, если помните. А почему я напомнил Вам об отсуттвии возможности отвечать на Ваши комментарии видимо не поняли:
>Не передергивайте техническую невозможность и неуважение.
Не перекладывайте свои проблемы на других. Нет дерева комментариев - не упоминайте о какой-либо беседе, потому что ее нет.
Если на какие-то Ваши вопросы я ответа не давал, значит считаю что ответы уже были выше в контексте.
Спасибо, интересно было пообщаться. Дабы не засорять блог обьемными комментариями, д ругие ваши статьи комментировать не буду, хоть утвеждения, выдвинутые там Вами, не менее спорны .
Ярослав Бирзул пишет нам 9 апреля, 2008 в 1:14
> Спасибо, интересно было пообщаться.
Спасибо, мне тоже.
Ярослав Патрикеев пишет нам 28 мая, 2008 в 9:00
Кстати, у Яндекса очень творческие и интересные 404. Вот только древние :) — одна проблема.
benna111 пишет нам 12 июня, 2008 в 6:04
Ярослав Бирзул пишет нам 13 июня, 2008 в 6:36
benna111, ага.