Ошибочная напасть или 404 в строю
Как часто вы задумывались над тем, что видит пользователь, промахнувшись в наборе адреса? Или из-за внутренней ошибки обработчика ссылок, который выдал пользователю полностью несуразный 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), разьяснить значение этого индекса (можно на отдельной странице, но ссылку оставить стоит — как я и сделал). Также нужно оставить логотип, который используется на сайте, чтобы пользователь не потерялся, и не вздумал мигом закрыть страницу. Для ошибок стоит применять красный (кровавый) цвет ради психологических ассоциация «плохо-хорошо». Также стоит добавить и форму комментирования, чтобы человек не чувствовал безнадежность ситуации, а разработчики получили ценные мысли по улучшению.
Критика уважается и поощряется, также как и конструктивные дискуссии на эту тему, ведь тема обширная, и одной заметкой тут точно не обойдется, обещаю.
Идею для сей заметки мне подсказал Футуриус, за что ему низкий поклон.
Кстати — кому нужна иконка «внимание!» (треугольник) — дарю. 256x256px, PNG24
Тем временем
1. Миша Квакин пишет инструкцию для спаммеров в комментариях.
2. Юра Гугнин ищет рекламную площадку, и не может найти.
3. Сергей Чаботько размышляет о насущном — что писать, если ничего в голову не приходит?
Телефон: +38 091 314-600-4,
E-mail: my@birzool.com,
Skype: dezmaster,
jabber: dezmaster@gmail.com,
icq: 486914
Вывод формы — дело отличное! Человек сразу может что-то написать!
Согласен, поэтому и добавил её непосредственно на страницу. Думаю пользователю будет приятно осознавать факт, что его случай не пропадет втуне.
Не стоит такой агрессии. Думаю многими подобное воспринимается как камень в свой огород. И на примере знакомых блондинок замечено, что эти многие в спешке закрывают страницу, даже не читая никаких сообщений, как и в случае с системными ошибками ПО.
а еще можно в эту страницу встроить автоматическую отсылку адреса страницы который запрашивался, и адреса страницы, с кторой был переход (насчет второго не уверен)
в принципе, тогда и форма не нужна.
потому что не все будут в форму что-то писать
а чем не подходят стандартные страницы ошибок на тех же блогах?
Вопрос. Как можно попасть на страницу, которая не существует? Никогда не понимал такой формулировки. Как видим, Гугл и Яху тоже не понимают такой формулировки.
Скорее всего я ЗАПРОСИЛ страницу, которая не существует. А, раз я нахожу на странице, с которой читаю текст, то страница существует.
А в целом согласен с ходом мыслей автора.
Вообще-то это стеб над стандартными страницами ошибок
Сергей, потому что стандартная страница ошибок на блогах — это обычный шаблон *page с одним заголовком. На этих «страницах ошибок» также выводится всё, кроме самих заметок, а сама надпись об ошибке настолько мала, что её часто просто незаметно.
Да и сама ошибка в wordpress настолько непонятна, что просто внушает ужас.
VoiD, ну судя по вашей логике, блоги тоже не нужны, ведь в них не все что-то пишут :)
Стеб этот начал Яндекс
Для примера далеко ходить не буду — возьму твой блог: s13.by/404
По идее страница ошибок не должна содержать ничего лишнего, и наоборот — должна содержать полезную информацию:
1. Номер ошибки. (и поясняющая ссылка)
2. Название ошибки.
3. Несколько возможных причин случившегося.
4. Варианты решения этой проблемы.
Смотрим, что есть у тебя и у меня:
1. Номер ошибки.
2. Название ошибки.
3. Одно предложение, которое говорит пользователю, что его положение безвыходное :)
При этом всё это на английском языке (при твоей русско-говорящей аудитории), и не имеет ни малейшего пояснения пользователю, что ему делать-то.
Да нет, вы что — никакой агрессии нет в заметке. А с вашим примером:
> И на примере знакомых блондинок замечено
есть ответ непосредственно в статье: 4. У пользователя произошла ошибка в ДНК.
Замечено в многократном тестировании, что если страница как-то выделяется из общего дизайна (выбивается) — пользователь невольно задумывается над тем, что произошло — и ищет пояснительную информацию.
Однако, я совершенно не отрицаю и некий процент «боящихся», которые закрывают страницы не читая.
Значит я зануда. Гы.
интересно, почему при наборе
www.birzool.com/40
www.birzool.com/404
редиректит на
www.birzool.com/404403503/
это браузер мой так помогает или движок?
вообще, тоже неправильно
а насчет того, что в блогах не все пишут, это нельзя сравнивать
при автоматической отсылке вебмастер получает еще один удобный инструмент для отслеживания битых ссылок и.т.д.
допустим, видит он, что толпа народу ломится на несуществующий адрес — взял, создал страницу с таким адресом и навешал туда баннеров :)
Я не знаю, я ни разу не программист.
То, что в данный момент у меня неправильно я признаю строками из статьи:
> Похожая страница ошибки будет применяться и в новом дизайне для этого блога, ждем Сергея Клейменова и его волшебные программерские руки.
> а насчет того, что в блогах не все пишут, это нельзя сравнивать
почему?
Вы меня неверно поняли — я только ЗА автоматическую отсылку, но я также ЗА форму комментария. Ничто не мешает нам совместить и одно и другое, верно? :)
> допустим, видит он, что толпа народу ломится на несуществующий адрес — взял, создал страницу с таким адресом и навешал туда баннеров
правильнее всего было бы узнать почему они туда идут, и поставить по этому адресу редирект на нормальную страницу, которая содержит нужный пользователям контент.
А не проще ли сделать на ней какую нить фишку, которая позволит продолжить искать то, что не найдено?
Поиск там, рубрики, метки, предыдущие запросы пользователей?
сделал себе автоматическую отсылку и форму, потом понял, что авт.отсылку заменяют логи сервера. По поводу формы комментария — я вот не представляю, что бы я написал в ней. Как можно прокомментировать ошибку 404?
>>Делается это для того, чтобы человек знал, что его ошибка безвести не пропадет, и о нем помнят.
Это же не его ошибка, скорее это ошибка либо вебмастера, либо того, кто поставил кривую ссылку (руками вряд ли кто-то набирает длинные ссылки на пост, набирют максимум адрес сайта)
Что он по этому поводу думает — по-моему и так понятно :)
А как вы определите, что пользователь искал?
Форму поиска добавить можно — но в моем примере на сайте поиска нет.
Вы статью внимательно читали?
1. Прокомментировать нужно не сам факт ошибки 404, а тот факт, «КАК ПОЛЬЗОВАТЕЛЬ СЮДА ПОПАЛ?»
2. Это может быть ошибка пользователя. Или вы ниразу не ошибались в наборе адреса?
3. Скажем так, в этом блоге люди часть набирают адрес конкретной статьи вручную, тем более, что я предоставил им такую удобную возможность, как простые и короткие названия.
> Что он по этому поводу думает
Боже, я вас прошу — отличайте иронию от серьезного текста :) или вы реально считаете, что я бы предоставил в качестве обьяснения следующую фразу: «У пользователя произошла ошибка в ДНК».
Вот такой вопрос, с подковыркой, а не проще ли просто отдать заголовок «404» что б браузер показал стандартную заставку «не найдено»?
А как стандартная браузерная заставка сочетается с логотипом сервисов и их дизайном? :) Да и так скорее всего можно только запутать пользователя.
Для примера: если бы у меня показалась заставка браузерная, я бы подумал, что сайт недоступен вообще, а вот 404 — говорит о том, что сайт работает, но ИМЕННО ЭТА страница недоступна.
>>А как вы определите, что пользователь искал?
1. Тема в самом деле интересная. Варианты?
2. Я плагин такой поставил — 404 Notifier — уведомляет о битых ссылках))))
1. Вариант — дать ему самому об этом сказать — через форму контактов тоже выход, не так ли?
2. Дайте ссылочку — попользую :) Но вы должны понимать, что интернет состоит не только (и не столько) из блогов и сайтов на движках стандартных, есть ведь еще и сайты на собственных движках, как сайт из примера :)
Пожалста:)
«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.»
alexking.org/projects/wor...404-notifier.zip
Мои благодарности :)
Понравился твой блог! Добавил в свой список 100 самых интересных блогов под номером 81. Удачи!
По поводу формы для обменника.
Цвет не такой агрессивный, как показалось на превьюшке.Приятно. Понятно.
Но:
Зачем имя оставлять в комментарии? Я бы написал слово из трёх букв.
И в данном случае кнопку (почему «Пиу») нужно поместить под поле ввода слева. Потомучто само поле большое и до кнопки двигаться мышкой не интересно долго.
А ещё хорошо добавть ссылку на начальную страницу сайта. А то не понятно что делать дальше, елс ия не отправлю комментарий
Анонимные комментарии бы совсем избавили людей от ответственности писать туда что-то серьезное. Имя сдерживает.
Возможно и стоит переместить, но лично мне удобно. Тестеры не жаловались, и ни разу не терялись, сразу замечая такую большую кнопку. Пиу — потому, что настроение хорошее.
Ссылкой на главную страницу сайта является логотип :)
Логотип является, но не каждый понимает. Могу сказать по своим исследованиям, что есть люди, еоторые не понимают это. И из не так уж и мало. Так что хорошо бы указать явно ссулку.
Могу сказать лишь одно — нужно пробовать.
Да. Соглашусь с вами. Нужно будет проветси тестирование.
Самое главное это выдавать заголовки (header) правильные, а потом заниматься юзабилити.
У меня такая страничка:
kurapov.name/404
Да ну вас, Артем. Слишком негативные у меня впечатления от «Fatal Error». Лучше бы если было «Страница не найдена. 404».
Поправил, у меня просто многоязычие на сайте ( kurapov.name/404?language=eng например).
Странно что хотя у вас публикации об идеальном комментировании и внушительны, сами их реализовывать вы не спешите... Или я не понял как работает у вас древовидное комментирование.
Артем, мои статьи внушительны, но чтобы их реализовать мне нужна помощь программистов :) Этим сейчас я и занимаюсь — дождитесь нового дизайна :)
Доля здравого смысла имеется. Спасибо.
Доля?
Тема хорошая. Однако прокачана вяло.
Пишите, я с удовольствием почитаю ваши мысли на эту тему.
>> Пападя на страницу, человек должен понять, куда он попал и что ему дальше делать.
>Мы ему даем пояснения.
>> вы ему рассказываете сто такое ошибка, какой дурак пользователь, кто разработал сайт, кому принадлежат копирайты, предлагаете написать в саппорт
>Вы сами себе противоречите. Так давать поясненения или нет?
«куда он попал» — это есть, даже 3 раза, я был неправ.
«что ему дальше делать» — писать в саппорт?
Слишком много ненужной писанины на странице, потому что Вы просто взяли по чуть-чуть из приведенных примеров. Информация должна быть краткой и понятной, например «Такой страницы не существует. Вы можете попробовать найти интересующую Вас информацию с помощью поиска или перейти на главную страницу сайта.» В вашем случае про поиск придеться не писать.
> Нет, не это. По-моему я об этом упомянул в статье — написать человек туда может то «откуда и как он попал на эту страницу». Логично?
Про статистику посещений страницы 404 я написал ниже. В ней есть всё, что может написать о себе пользователь и даже больше.
>> Где ссылка на главную страницу сайта
>В логотипе.
>Нет не считаю, но склонен доверять тестированиям, в которых ясно показано одно — >пользователь пугается. Не нужно судить по себе, целевая аудитория зачастую не слишком >сильно знакома с интернетом.
Вот именно потому что «целевая аудитория зачастую не слишком сильно знакома с интернетом» — и стоит отдать предпочтение ссылке на главную в виде «Перейти на главную страницу сайта» (или «Главная страница»). А про то, что можно кликнуть на логотип — не знает большая часть даже опытных интернет-пользователей.
>>где поиск по сайту
>Тут уже личное дело каждого. Тут, понимаете ли, поиск не был предусмотрен в движке. Или >вы забываете, что мы рассматривали вполне конкретный пример от заказчика?
Про невозможность добавить поиск упомянуто не было, поэтому я и спросил.
>> где карта сайта наконец?
>А еще давайте форум туда засунем, и еще пару фото-галерей.
Раз уж на сайте нет поиска, то единственная возможность быстро найти что-то — это карта сайта.
> PS: уважайте собеседника, а уж тем более хозяина «дома», чтобы он уважал вас.
Во первых, Вы сами не уважаете собеседника, потому что в блоге нет возможноcти ответить на Ваш комментарий. Во вторых — к чему этот PS? Вы обиделись на критику?
В принципе многое отдельно вкомментах упомянуто уже, можно и апдейт к статье выпускать. )
А как пояснить человеку куда он попал без пояснения, что означает страница ошибки?
> какой дурак пользователь
Где такое подразумевается?
> Про статистику посещений страницы 404 я написал ниже
Техническая возможность и жале
> Про невозможность добавить поиск упомянуто не было, поэтому я и спросил.
О невозможности речь не идет, вопрос в бюджете проекта.
Карту сайта можно добавить поставив ссылки сверху страницы, как на сайте — с этим я согласен.
> Во первых, Вы сами не уважаете собеседника, потому что в блоге нет возможности ответить на Ваш комментарий.
Во-первых, я уважаю собеседника только потому, что детально отвечаю каждому, спорю, докапываясь до истины. У меня в блоге есть возможность (пока) ответить только на один комментарий. Я тоже не могу ответить на любой другой. А вы можете ответить на мой, если он в древе комментариев первый. Не передергивайте техническую невозможность и неуважение. Тем более после многократного «дождитесь нового дизайна», который кстати совсем не за горами. Там я вообще откажусь от древа комментариев. Дабы не было подобных обвинений в «неуважении».
> Во вторых — к чему этот PS? Вы обиделись на критику?
Нет, не имею привычки обижаться :)
> В принципе многое отдельно в комментах упомянуто уже, можно и апдейт к статье выпускать. )
Я после замечаний имею привычку писать продолжение где обсуждаются эти моменты. Т.е. оттачиваю до конца с вашей помощью.
>Там я вообще откажусь от древа комментариев. Дабы не было подобных обвинений в «неуважении».
Я Вас не обвинял. Это Вы мне ткнули в уважение, если помните. А почему я напомнил Вам об отсуттвии возможности отвечать на Ваши комментарии видимо не поняли:
>Не передергивайте техническую невозможность и неуважение.
Не перекладывайте свои проблемы на других. Нет дерева комментариев — не упоминайте о какой-либо беседе, потому что ее нет.
Если на какие-то Ваши вопросы я ответа не давал, значит считаю что ответы уже были выше в контексте.
Спасибо, интересно было пообщаться. Дабы не засорять блог обьемными комментариями, д ругие ваши статьи комментировать не буду, хоть утвеждения, выдвинутые там Вами, не менее спорны .
> Спасибо, интересно было пообщаться.
Спасибо, мне тоже.
Кстати, у Яндекса очень творческие и интересные 404. Вот только древние :) — одна проблема.
benna111, ага.
Занятная статья. Краткость явно чья-то сестра ;)
Да уж Но, как говорится, а воз и ныне там :)
Давно искал данную инфу, Большое спасибо за Вашу работу.
Мне вот интересно, а комментарии которые не нравятся автору стирают? :)
Стираются только спам-комментарии. А также те, которые содержат откровенные наезды.
На Webmascon есть замечательная статья 3-летней давности webmascon.com/topics/development/18a.asp , там прекрасно описана не только идеология создания правильной страницы 404-й ошибки, но и подробное описание, как сделать ее динамической. Т.е. она не тупо перечисляет возможные причины ошибки, а определяет эти причины.
Кстати, вот моя:) skliarevsky.org/404
Банально. Лебедев — первый(поправьте, если не так) в рунете придумал описанную в заметке формулу «Страницы 404», и насколько мне известно, никто не придумал лучше.
Лебедев, конечно, крут... и написал действительно хорошо.
Как бы еще так сделать, чтобы серваки массово реально отдавали
И КОД ошибки, И страницу 404 для пользователя.
Были приведены неплохие примеры страниц 404, но по итоговой страничке, описанной автором создается ощущение, что она создана не для того, чтобы облегчить жизнь пользователя, а для того, чтобы не тратить время администратора сайта...
«Расскажите о том, как сюда попали»
Что за бред? Я искал информацию, попал сюда, если не найду способа «отсюда» выбраться, то уйду на другой сайт, все просто!
Думаете
«Ошибка 404. Что это?»
Да мне плевать что это, если я не продвинутый пользователь, а если таковым являюсь, то и так знаю. Дайте мне лучше ссылку на карту сайта, на главную страницу, на предыдущую, с которой сюда попал (если конечно не руками вбил адрес), поиск, помогите мне! Мне почти все равно как я сюда попал, но важно как все таки найти то, что я пытался найти на вашем сайте. Не поможете, уйду к другому, все просто. А если я пользуюсь сайтом постоянно и не могу уйти, то при попадании на 404 постоянно буду испытывать дискомфорт.
Иван, каждая страница ориентирована на своих посетителей, не так ли? Так вот, я еще в самом начале статьи писал о том, что страница далается для конкретного сайта.
Посетители там НЕ продвинутые как вы. И им НЕ плевать на то, что такое 404. До того, как была протестирована эта страница — были регулярные запросы в службу поддержки — «Что значит 404».
И еще. Всегда учитывайте специфику сайта, на котором страница ошибки стоит. Скажем, на этом сайте нет никаких пояснений. Знаете почему? Потому, что люди, которые читают эти статьи достаточно продвинуты для этого.
Проверьте: www.birzool.com/bla1387
Эта страница удовлетворяет вашим требованиям?
Кстати, у Яндекса очень творческие и интересные 404. Вот только древние :) — одна проблема.
В приныпе со всем согласен, кроме формы... Она не нужна. Если администратору нужна информация о ошибках, намного проще сделать какой-то лог (как написал в комментариях VoiD).