Чеклист для улучшения форм

Чеклист для улучшения форм

Специально для вас (для кого же еще?) присмотрел забавную статейку про улучшение форм. И уже даже перевел, но наткнулся на форм-чеклист на сайте Merttol и подумал, что он должен идти первым в разговоре о формах и юзабилити.

Во-первых, он поможет нам выработать приемлемую терминологию (некоторые вещи я переводил по наитию, потому что в словарях их не пишут). Во-вторых, пройдясь по листу, мы сможем отсеять вещи, всем очевидные, о которых лишний раз говорить только воздух трясти.

Поэтому данная публикация рассчитана больше не на почитать-узнать, а на просмотреть и рассказать, что из этого знал, что не знал, что интересно, что нет. Ибо по вашим коментам, в зависимости от среднего уровня подготовки читателей, будем строить дальнейший разговор о юзабельности форм. Приступим? 

Платежные модули для Magento.
Создание интернет-магазинов.

Прочти, откоменть, что здесь слишком очевидное и подлежит вычеркиванию, а что интересное и полезное.

Юзабилити:

  1. Ты все сделал для того, чтобы пользователю пришлось потеть по-минимуму?
  2. Минимизировал клики, нажатия клавишь, двигание мышкой и скроллинг?
  3. Пообещал пользователю плюшек перед тем, как запрашивать у него информацию?
  4. Необязательную и избыточную информацию не запрашивал?
  5. Пометил обязательные поля?
  6. Инпуты поставил в ожидаемом порядке?
  7. Мастера и группы контролов использовал по назначению?
  8. Контролы сгруппированы по смыслу?
  9. Прописал табордер и начальный фокус как надо?

Документация и хелп:

  1. Инструкции к форме написал? (Такие, чтобы хелп не понадобился.)
  2. Написал лейблы для всех элементов? Понятно ли, к чему относится каждый лейбл?
  3. Написал понятную и краткую документацию?
  4. Ты использовал подходящую терминологию? А?
  5. Написал инпутам тайтлы, чтобы подсказка всплывала?

Поддержка:

  1. Дизайн формы не является допольнительным источником нагрузки для службы поддержки?
  2. Ты действительно предоставлял пользователям только необходимую информацию и не забивал их мозги чепухой?
  3. Написал доки о наиболее вероятных вещах, а не просто обо всех подряд?

Accessibility: 

  1. Везде, где можно, расположил подписи слева от полей? И тег <label> использовал?
  2. Использовал <fieldset> для групп контролов? А <legend> для них написал?
  3. Надеюсь, ты не пихал поясняющий текст внутрь инпутов? (В выпадающих списках так часто делают.)
  4. Точно поставил multiple для выпадающих списков там, где возможен выбор нескольких пунктов?
  5. Для да/нет контролов «да» по умолчанию нигде не поставил, случаем?
  6. Title написал, чтобы всплывающая подсказка всплывала? 

Хелп:

  1. Сделал контекстные подсказки?
  2. Сделал оглавление, если твой хелп велик?

Обратная связь:

  1. Обратная связь-то вообще есть?
  2. Твой фидбек немодальный (не блокирует взаимодействие с прочими элементами страницы)?

Обработка ошибок:

  1. Сообщения об ошибках помогабельные? Понятные? Не технические? Краткие? Вежливые? Не обвинительные? Они заметны?
  2. При серверных ошибках ты показываешь пользователю заново форму (или ту часть контролов, к которым имеет отношение ошибка)?
  3. Сообщения об ошибках находятся на той же странице, что и поля, к которым они относятся?
  4. Ты помнишь о том, что успешное решение проблем вызывает у пользователя больше лояльности, чем безупречный продукт?

Отправка формы:

  1. Для отправки формы использован подходящий контрол?
  2. Не говорил пользователю не кликать «Отправить» дважды?
  3. Кнопок сброса форм не наставил? Если все же наставил, то убедился, что он не кликнет на нее случайно.
  4. Расположение кнопок достаточно явно указывает их отношение к другим элементам формы?
  5. Располагая подтверждающую кнопку слева, а отменяющую / очищающую / удаляющую — справа, убедился, что фокус не на отменяющей?
  6. Фары и ремень? Подтверждения для опасных действий?
  7. После отправки формы ты выдаешь пользователю страницу с введенным данными, чтобы он мог их проверить?
  8. Производится ли вся возможная валидация до отправки формы?

Инпуты: 

  1. Используешь <input type="text" /> для однострочных текст-инпутов, и <input type="password" /> для инпутов с символами, замененными кружочками?
  2. Размер шрифта и maxlength подходят друг другу?
  3. Ты используешь человеческое форматирование и пунктуацию (например, длинное тире в датах и диапазонах)?
  4. Проставляешь дефолты с помощью value, если 80% пользователей (или более) эти дефолты подойдут?
  5. Не использован ли где-нибудь value для вывода вспомогательных текстов, подсказок?
  6. Для многострочных инпутов использованы <textarea>?
  7. Используешь ли wrap="soft", "hard" или "off" для настройки переноса текста в <textarea>? (Странный пункт при наличии CSS-свойства white-space, которое кроме normal и nowrap еще умеет делать pre, pre-line, pre-wrap, inherit и поддерживается эксплорером, начиная с седьмого — примечание Временно.нет)
  8. <textarea> для отображения текстов, требующих скролла? (Тоже спорный пункт.)

 Селекты: 

  1. <input type="radio" />, <input type="checkbox" /> или <select> для ситуаций с ограниченными вариантами?
  2. Фильтруешь ли ты варианты, неактуальные из-за выбранного ранее?
  3. <input type="radio" /> для коротких списков опций с возможностью выбора одной?
  4. <input type="checkbox" /> для коротких списков опций с возможностью выбора нескольких?
  5. Чекбоксы и радио выровнены вертикально?
  6. Чекбоксы и радио сгруппированы по смыслу?
  7. <select> для длинных списков опций? (Сомнительный выбор, подобающий лишь при нехватке времени или других ресурсов.)
  8. Наиболее востребованные опции расположены вверху списка?
  9. Уменьшенный размер текста для списков с прокруткой?
  10. <optgroup> для группировки связанных опций?

 

Прочел? Теперь откоменть, что было для тебя слишком очевидным и подлежит вычеркиванию, а что интересное и полезное. И друзьям покажи.

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 9

Радмир
Спасибо, хорошая статья =)
#
Радмир
Александр
Я бы еще добавил прописывать type="email" и type="url", для соответствующих инпутов. Невалидно в xhtml, зато полезно для современных телефонов.
#
Александр
Ovjer
Есть мнение, что «accessibility» на русский язык можно перевести, как «общедоступность».
Саша Кириллов
Безусловно, гугл нам так и переводит. Но я не стал вообще переводить, потому что accessibility считывается однозначно, а общедоступность — пока еще не так однозначно.
Talleyran
...Располагая подтверждающую кнопку слева, а отменяющую / очищающую / удаляющую — справа…

Так лучше в принципе не делать. Очень непривычно и раздражает.
Саша Кириллов
Вот как раз по этому поводу сейчас много терок: правильно так или наоборот. Я по этому поводу наметил себе исследование существующей литературы и юзкейсов, но руки пока не дошли.
Нужно будет, кстати, внести это в статью.
bosha
Так лучше в принципе не делать. Очень непривычно и раздражает.

Имхо, лучше кнопку отменыочистки делать менее заметной и без разницы с какой стороны. Главное не располагать её рядом с кнопкой отправки. Прихожу в адский ужас когда так делают
Vlad
Главное не располагать её рядом с кнопкой отправки.
Если Submit делать кнопкой, а Cancel - ссылкой - не перепутаешь, что из них важнее. Но это уже не совсем формы будут.

А где про связки label-for/input-id?
#
Vlad
Alex
...Располагая подтверждающую кнопку слева, а отменяющую / очищающую / удаляющую — справа…
Так лучше в принципе не делать. Очень непривычно и раздражает.

т.к. Человек читает и пишет слева направо, то заполняя форму, он ожидает увидеть сначало ОК, а во-вторую очередь отмену, поэтому Сабмит и должен быть слева. Мне кажется, разница между ними должна быть светофорная, ок зеленый, кэнсел красный и плюс небольшая разница в размерах.
#
Alex

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler