19 July 2008

Подача ошибок. Часть 1. Вступление.

Interfaces



Путеводитель: Часть 1. ВступлениеЧасть 2. Речевой барьерЧасть 3. Ошибки в формах • Часть 4. Ошибки на сервере • Часть 5. Рука помощи

Вступление
Миллионы людей ежедневно посещают различные как они сами сайты. Естественно, это не всегда проходит как по маслу и иногда случаются ошибки, происходящие то по вине разработчиков, то по вине пользователей. По моему, очевидно, что если ошибка имело место быть, причём не важно с чьей стороны, скрипт должен показаться её в удобной для пользователя форме.

Всего я планирую написать 5 статей о том, как подавать ошибки пользователям — сколько перчить и солить, куда капать соусом и на каком подносе подносить. Поскольку я не люблю многословность, я буду показывать всё на примерах и пояснять их комментариями да бы читатели не уставали. Итак, поехали.

Простая истина: ошибки надо показывать (http://www.dexknows.com)

Я зашел на сайт желтых страниц, выбрал вкладку PEOPLE, а затем в графе Food & Dining выбрал Restaurants и ввел, что (what) я ищу «First Cafe», но забыл указать где (where) я это ищу. Сайт показал мне ошибку о том, что я забыл указать где я ищу, вместо того, чтобы показать мне пустую страницу, как это делают некоторые сайты, или того хуже перенаправить на главную.

Действие без пояснения или Ошибки надо показывать 2 (http://www.hilton.com)

Это блок авторизации на сайте Hilton. Если не ввести один из параметров в форме авторизации она перенаправляет вас на страницу авторизации (на скриншоте, ниже), которая зачем-то имеется на сайте отдельно. На этой странице не показывается ошибка, а есть только робкая просьба о том, что можно использовать либо username либо HHonors.

Ошибка в виде системного диалогового окна (http://www.hilton.com)

При вводе лишь одного параметра уже на отдельной странице авторизации мы лицезреем диалоговое окно (в моём случа Firefox) с просьбой ввести либо username либо норме HHonors. К просьбе нет претензий, есть претензии к её виду. Сайт сам по себе — это система, которая имеет свой интерфейс. Использовать элементы интерфейса других программ, мягко говоря — плохой тон (за исключением радиобаттанов, полей текста и чекбоксов; выпадающие списки — в отдельных случаях). Иной вообще нажмет на эту ошибку и подумает, что браузер дал течь.

Привязанность ошибки к её причине (http://gmail.com)

При регистрации аккаунта в система Gmail ошибки показываются прямо, что называется, «на месте» (под полем, которое было заполнено не верно). Ошибки корректны и заметны.

Привязанность в тесноте (http://sonyawards.com)

На сайте Sonyawards дизайнеры исопльзовали цветовое кодирование (и неправильные поля и блок с ошибками выделены розовым) для привязанности ошибок, т. к. в силу сжатости формы (поле State и Zip Code) разместить их подобно Google не удалось. Неправильные поля подсвечены. Ошибки заметны.

Примечание! В первом примере статьи (dexknows.com) ошибка указана не под полем. В место этого она указана там, где должны появиться результаты поиска. Будьте внимательнее в размещении ошибок, т. к. их размещение в форме регистрации или в форме поиска различаются.


Неуверенность ошибки (http://etrade.com)

На сайте etrade.com я умышленно ввёл неправильный пароль. Во-первых, система показала неуверенную ошибку, точно не указав, где я допустил ошибку. Во-вторых, она очистила поля User ID и Password и теперь я буду вынужден вводить их заново (стереть надо было только неправильно поле, и то только в случае, если это пароль).

Предотвращение ошибок (http://dexknows.com, http://gmail.com)
Взгляните на скриншоты этих сайтов выше. Под полями написан либо пример, либо пояснение, где указывается как должно быть заполнено это поле. Это является правилом хорошего тона и предостерегает пользователя от ошибок.

Подведём итог
Целью этой стать является напоминание разработчикам сайтов о том, что ошибки должны выводиться на сайте грамотно. На разных видах ошибок я буду останавливаться в других статьях. А сейчас давайте сделаем основные выводы:
— Ошибки надо показывать, никаких переадресаций
— Надо оформлять их в едином с сайтом стиле и не использовать интерфейс других программ
— Необходимо использовать привязанность ошибок к их причинам или размещать их в ожидаемом месте
— Если нет возможности использовать привязанность, использовать цветовое кодирование
— Избегать неуверенных ошибок типа «У вас введен неверно либо пароль, либо логин»
— Предотваращать ошибки, путем пояснений, под полем ввода

Оригинал статьи можно найти в моём жж.
Роман Горшков
Tags:юзабилитиошибкисайтыдизайнформы
Hubs: Interfaces
+1
3.6k 85
Comments 82