Вчера выложил список для проверки юзабилити веб-форм. Netklon сказал, что «из всех пунктов только 4 и 7 отличаются ясностью и законченностью». Я подумал и понял, о чем речь.
Полгода назад я написал статью «С чего начать разработку сайта». В ней фигурируют шаги. Однажды попытался им следовать, и споткнулся уже на третьем, который называется «Набросайте бизнес-план». Водица-с...
Контрольные списки имеют смысл, когда не нужно думать. То есть кто-то хорошо подумал один раз и составил список, не вызывающий вопросов. А ты просто берешь и идешь по списку, не отвлекаясь на толкования.
Попробую вчерашний список улучшить. Правда конкретика убивает универсальность.
Итак, чеклист юзабилити форм. У хорошей формы ответы на все вопросы должны быть «да».
Состав полей
1. Форма содержит минимально необходимое для работы системы количество полей?
2. Форма содержит минимально необходимое для работы системы количество полей, обязательных для заполнения?
3. Все обязательные поля находятся сверху формы?
4. Поля формы сгруппированы по смыслу?
GUI controls
5. Недлинные раскрывающиеся списки заменены на группы radiobutton?
6. Длинные раскрывающиеся списки заменены либо на поля с автозаполнением, либо на иерархические структуры с radiobutton?
7. Раскрывающиеся списки с множественным выбором вообще не используются?
8. При вводе длинных значений в поля text и textarea не возникает прокрутки?
9. При щелчке по подписям к элементам checkbox и radiobutton их состояние изменяется?
10. У формы есть кнопка submit?
Описание формы
11. Все обязательные для заполнения поля помечены звездочками?
12. У всех полей есть понятные подписи?
13. У всех полей, понятность подписей к которым вызывает сомнения, есть примеры заполнения?
14. Присутствуют диагностические сообщения и об ошибках, и об успешном завершении операции?
15. По тексту сообщений об ошибках пользователь может понять, что он сделал не так, и исправиться?
Функциональность кода
16. Ограничения на ввод вызваны только причинами безопасности?
17. При возврате к форме из-за ошибок заполнения значения всех полей сохраняются в том виде, в котором их отправил пользователь?
Дмитрий Сергеев, 26 лет, разрабатываю сайты на Drupal, управляю интернет-проектами
Комментарии
madhun, 14.07.2007 20:55
Браво. Вот теперь этот список реально можно использовать в практике. Цель сделать список, который не заставлять тратить время на толкования пунктов, достигнута.
Дмитрий Сергеев, 14.07.2007 21:20
Достигнута или не достигнута, но шажок сделан :)
Junior, 15.07.2007 15:59
Дима, молодец! Список хороший, но не будем забывать, что: "Знание нескольких принципов освобождает от необходимости запоминать множество фактов".
;)
Мне кажется, что самое сложное в проектировании форм (и не только в них), это предусмотреть скрытые варианты или нештатные ситуации.
Поясню: у меня, например, периодически случаются провалы в проектировании результатов поиска. Т.е. шаблон (прототип) с результатами поиска подготовлен, а вот что выводить, если ничего не найдено, или найдено очень мало - про это постоянно забываю. :(
Тоже самое и с формами: спроектировал форму, все удобно и приятно, но вот п.п.14-17 постоянно норовят куда-то свались из моей головы. :)
Дмитрий Сергеев, 15.07.2007 16:17
Из моей головы периодически сваливают не только пункты 14--17 :) Поэтому попробую пользоваться этим списком. Интересно, применима ли вообще идея таких списков в жизни и станут ли формы лучше.
А предусмотреть все варианты, даже штатные, действительно бывает трудновато. Потом ошибка проектирования набирает обороты. И вот уже не предусмотрено оформление для каких-то элементов, шаблон что-то там не позволяет, стили неуниверсальные. Не хочется признавать, но ошибки в подобных ситуациях частенько исправляются не «как надо», а «лишь бы побыстрее».
Junior, 17.07.2007 20:22
Вот-вот :) Все валят на бедного архитектора.
Нужна методология какая-то, что бы вести самоконтроль. Вот сейчас думаю, что блок-схемы к каждому модулю должны помочь. По крайней мере, начну применять. И документация будет полнее, и себе эдакая памятка.
P.s. Блин, с такой документацией программеры совсем расслабятся :) Сейчас в проектную документацию входит:
1. Бриф: инфо о заказчике, услугах, цели и задачи проекта, аудитория (user stories).
2. Прототипы всех шаблонных страниц (порой до 30-40 шаблонов).
3. Спецификация к модулям (алгоритм работы, нефункциональные требования, приложения в виде примеров XML или что-то подобное.
4. * Планирую блок-схемы.
Дмитрий Сергеев, 19.07.2007 14:27
Я периодически рисую блок-схемы. Только по-моему их перевод из состояния «Начирикал на бумажке и в голове всё сложилось» в читабельную документацию -- затратное дело. Но вообще по блок-схемам приято работать, что и говорить :)
phoinix, 16.07.2007 23:27
Если уж до такой степени расписывать все, я бы добавил пункт про проверку данных на стороне клиента.
А вообще этот чеклист читается несколько сложнее предыдущего. Пункт 13 вообще ввёл в ступор (:
Дмитрий Сергеев, 16.07.2007 23:54
Да, над формулировками можно поработать :)
Тут в комментариях к прошлому посту Алексей Камедов посоветовал посмотреть презентацию про best practice веб-форм. Очень рекомендую. Штук 100 слайдов на 4 Мб.
phoinix, 17.07.2007 00:02
Скачал ещё при чтении того поста. Спасибо!
Никита Козин, 22.07.2007 19:58
Отличный список! Спасибо )
Velarix, 23.05.2008 23:22
По безопасности форм я ничего не нашёл особенно ценного в интернете. Можете что-то посоветовать или прокомментировать относительно угроз, и методов борьбы с ними?
madhun, 24.05.2008 06:20
В принципе стандартной проверки на Refferer (откуда пришли данные) достаточно для безопаности (если форма отправлена с вашего сайта - это ВАША форма, а поэтому проблем не должно быть). И, конечно, валидация на стороне сервера.
Если этого недостаточно - на прошлом PhpConf Дмитрий Котеров представлял свою библиотеку MetaForm и доклад о метаданных формы, защита от подделки, валидация, т.д. Доклад:
http://www.phpconf.ru/ptt/11_koterov_phpconf2007.ppt
Прочее:
http://dklab.ru/lib/HTML_MetaForm/
http://www.rit2008.ru/images/html_metaform%20-%20dmitry%20koterov.ppt (РИТ2008)
Дмитрий Сергеев, 26.05.2008 13:12
madhun, спасибо.
Дмитрий Сергеев, 26.05.2008 13:09
>> По безопасности форм я ничего не нашёл...
Тема необъятная: здесь и XSS, и SQL-injection, и защита от ботов, и потеря пользовательских данных при обработке. Многое из того, что связано с безопасностью PHP, применимо и для форм.
Можно попробовать поискать «безопасность PHP».
А можно взять движок (Drupal, например), и посмотреть что там внутри делается при обработке форм.