Юзабилити: как сделать сайт удобным

Ошибки ввода данных и их предотвращение

Когда я работал тестировщиком программного обеспечения, моим излюбленным способом поставить систему «на колени» был ввод заведомо неверных и так называемых граничных данных. Например, нескольких букв в поле для ввода даты, запрос на по­иск в базе и вывод на экран списка из 10 ООО документов, ввод длинной беспробельной строки или символов «<» в HTML-фор­ме. Все эти действия относятся к ошибкам ввода данных и явля­ются далеко не самыми безобидными для деятельности системы. Некоторые из них могли ввести систему в такой «клинч», что приходилось едва ли не перезагружать сервер. Этот же способ можно использовать для анализа ошибок ввода данных. Позже подобные ошибки стали обрабатываться и предотвращаться са­мой системой. Так, при нахождении 10 000 документов мне предлагалось либо уточнить поисковый запрос для лучшего ре­зультата, либо автоматически включался механизм работы с порциями по 100 (50, 20) документов. Символы «<» и «>» про­сто «проглатывались» и обрабатывались специальным нормали­затором ввода, а беспробельные строки разрезались на куски по сто символов. Пользователи, не став более внимательными, со­вершали меньше ошибок и работали быстрее.

Ошибки ввода данных могут быть предотвращены такими спо­собами:

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

• ограничения в способе ввода данных (предоставление выбора численных значений только из выпадающего списка);

• валидация (проверка корректности) и нормализация (приве­дение к «безопасному» виду) системой данных перед тем, как принимать их от пользователя (например, проверка наличия знака «@» в адресе электронной почты или проверка длины пароля).

Валидация бывает двух видов: прикладная и системная. Систем­ная валидация — проверка корректности информации на уровне типа данных, являются ли введенные данные строкой, числом, временем, адресом электронной почты и т. п. Прикладная валида­ция — проверка диапазона данных конкретного типа (равно, не равно, больше, меньше, от и до). Типы не сильно отличаются: прикладная валидация скорее частный случай системной. Если пользователь должен ввести год своего рождения, то при систем­ной валидации мы проверяем, все ли введенные символы есть цифры, а при прикладной мы предполагаем, что человек не жи­вет больше 150 лет, и ограничиваем ввод данных числом в про­межутке от 1854 до 2004.

Простейшими примерами предотвращения ошибок ввода данных могут служить элементы Календарь и Выбор из списка, используемые вместо простых полей для ввода даты. Рассмотрим несколько ва­риантов На примере ввода в форме даты рождения.

1. Составной компонент из трех простых полей ввода (рис. 10.1).

Введите дату Вашего рождения (дц мм гггг)

год |

Рис. 10.1. Компонент ввода даты рождения реализован при помощи трех простых полей ввода

Минусы этого варианта:

• компонент выглядит несколько громоздко и занимает много места;

• пользователь может ввести данные, не соответствующие фор­мату;

• пользователь может ошибиться при выборе формата ввода месяца («апрель»);

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

Плюс у такого варианта только один: реализация подобного

компонента требует минимальных знаний и усилий.

/

2. Составной компонент из трех полей «выпадающии список» (рис. 10.2).

Введите дату своего рождения

День [ОТ 3 Месяц j сентября З Год 11967 3

Рис. 10.2. Компонент ввода даты рождения реализован при помощи

трех полей «выпадающий список Минусы этого варианта:

• компонент также выглядит несколько громоздко и занижает много места;

• листать и просматривать список может быть неудобно из-за большого количества элементов;

• возможно непроизвольное изменение пользователе^ введен-

ных данных при использовании колеса прокрутки в то время, как фокус установлен в каком-либо поле «выбор из списка».

Плюсы этого варианта:

• пользователь не может ввести данные, не соответствующие формату (если предусмотреть проверку соответствия месяца и количества дней);

• реализация подобного компонента не требует глубоких знаний.

3. Компонент ввода при помощи выбора даты из календаря (рис. 10.3).

Введите дату Вашего рождения j2004.04.07 іїр”У^в

Минусы этого варианта:

• листать и просматривать список может быть неудобно из-за большого количества элементов;

• маловероятно, но все же возможно непроизвольное измене­ние введенных данных;

• необходимо догадаться, что пиктограмма с листком календаря не просто украшение;

• некоторые пользователи попытаются ввести /іату в недоступ­ное для редактирования поле (при этом установленная по умолчанию дата в поле ввода может вообще поставить пользо­вателя в тупик);

• реализация компонента требует серьезных знаний и дизай­нерских навыков. і

Плюсы этого варианта:

• компонент в пассивном состоянии занимает мало места;

• пользователь не может ввести данные, не соответствующие формату (если предусмотрена проверка соответствия месяца и количества дней).

Проанализировав эти варианты, получаем, что худший — пер­вый, а оптимальный — второй. Если рассматривать возможные способы ввода даты рождения только с позиции предотвращения ошибок, то пользователь не совершит ошибку при вводе данных во втором и третьем вариантах. Кроме того, сложные программы наиболее подвержены ошибкам программистов. Скорее всего программист напишет календарь на JavaScript, а какой-либо из браузеров наверняка откажется его корректно отобразить. Наряду с требованиями по предотвращению ошибок необходимо учиты­вать и юзабилити. С этой точки зрения оптимальным кажется составной компонент из трёх полей «выпадающий спиеок».

Я сократил количество вариантов, устранив те, что явно будут не­удобны пользователю. В варианте с календарем я рассматриваю сам принцип, а не способы организации календаря, ведь его трже можно исполнить по-разному.