Как часто вы задумывались над тем, что видит пользователь, промахнувшись в наборе адреса? Или из-за внутренней ошибки обработчика ссылок, который выдал пользователю полностью несуразный 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. Сергей Чаботько размышляет о насущном — что писать, если ничего в голову не приходит?