22 декабря 2015
2 февраля 2011
9
Чеклист для улучшения форм
Специально для вас (для кого же еще?) присмотрел забавную статейку про улучшение форм. И уже даже перевел, но наткнулся на форм-чеклист на сайте Merttol и подумал, что он должен идти первым в разговоре о формах и юзабилити.
Во-первых, он поможет нам выработать приемлемую терминологию (некоторые вещи я переводил по наитию, потому что в словарях их не пишут). Во-вторых, пройдясь по листу, мы сможем отсеять вещи, всем очевидные, о которых лишний раз говорить только воздух трясти.
Поэтому данная публикация рассчитана больше не на почитать-узнать, а на просмотреть и рассказать, что из этого знал, что не знал, что интересно, что нет. Ибо по вашим коментам, в зависимости от среднего уровня подготовки читателей, будем строить дальнейший разговор о юзабельности форм. Приступим?
Платежные модули для Magento.
Создание интернет-магазинов.
Прочти, откоменть, что здесь слишком очевидное и подлежит вычеркиванию, а что интересное и полезное.
Юзабилити:
- Ты все сделал для того, чтобы пользователю пришлось потеть по-минимуму?
- Минимизировал клики, нажатия клавишь, двигание мышкой и скроллинг?
- Пообещал пользователю плюшек перед тем, как запрашивать у него информацию?
- Необязательную и избыточную информацию не запрашивал?
- Пометил обязательные поля?
- Инпуты поставил в ожидаемом порядке?
- Мастера и группы контролов использовал по назначению?
- Контролы сгруппированы по смыслу?
- Прописал табордер и начальный фокус как надо?
Документация и хелп:
- Инструкции к форме написал? (Такие, чтобы хелп не понадобился.)
- Написал лейблы для всех элементов? Понятно ли, к чему относится каждый лейбл?
- Написал понятную и краткую документацию?
- Ты использовал подходящую терминологию? А?
- Написал инпутам тайтлы, чтобы подсказка всплывала?
Поддержка:
- Дизайн формы не является допольнительным источником нагрузки для службы поддержки?
- Ты действительно предоставлял пользователям только необходимую информацию и не забивал их мозги чепухой?
- Написал доки о наиболее вероятных вещах, а не просто обо всех подряд?
Accessibility:
- Везде, где можно, расположил подписи слева от полей? И тег <label> использовал?
- Использовал <fieldset> для групп контролов? А <legend> для них написал?
- Надеюсь, ты не пихал поясняющий текст внутрь инпутов? (В выпадающих списках так часто делают.)
- Точно поставил multiple для выпадающих списков там, где возможен выбор нескольких пунктов?
- Для да/нет контролов «да» по умолчанию нигде не поставил, случаем?
- Title написал, чтобы всплывающая подсказка всплывала?
Хелп:
- Сделал контекстные подсказки?
- Сделал оглавление, если твой хелп велик?
Обратная связь:
- Обратная связь-то вообще есть?
- Твой фидбек немодальный (не блокирует взаимодействие с прочими элементами страницы)?
Обработка ошибок:
- Сообщения об ошибках помогабельные? Понятные? Не технические? Краткие? Вежливые? Не обвинительные? Они заметны?
- При серверных ошибках ты показываешь пользователю заново форму (или ту часть контролов, к которым имеет отношение ошибка)?
- Сообщения об ошибках находятся на той же странице, что и поля, к которым они относятся?
- Ты помнишь о том, что успешное решение проблем вызывает у пользователя больше лояльности, чем безупречный продукт?
Отправка формы:
- Для отправки формы использован подходящий контрол?
- Не говорил пользователю не кликать «Отправить» дважды?
- Кнопок сброса форм не наставил? Если все же наставил, то убедился, что он не кликнет на нее случайно.
- Расположение кнопок достаточно явно указывает их отношение к другим элементам формы?
- Располагая подтверждающую кнопку слева, а отменяющую / очищающую / удаляющую — справа, убедился, что фокус не на отменяющей?
- Фары и ремень? Подтверждения для опасных действий?
- После отправки формы ты выдаешь пользователю страницу с введенным данными, чтобы он мог их проверить?
- Производится ли вся возможная валидация до отправки формы?
Инпуты:
- Используешь <input type="text" /> для однострочных текст-инпутов, и <input type="password" /> для инпутов с символами, замененными кружочками?
- Размер шрифта и maxlength подходят друг другу?
- Ты используешь человеческое форматирование и пунктуацию (например, длинное тире в датах и диапазонах)?
- Проставляешь дефолты с помощью value, если 80% пользователей (или более) эти дефолты подойдут?
- Не использован ли где-нибудь value для вывода вспомогательных текстов, подсказок?
- Для многострочных инпутов использованы <textarea>?
- Используешь ли wrap="soft", "hard" или "off" для настройки переноса текста в <textarea>? (Странный пункт при наличии CSS-свойства white-space, которое кроме normal и nowrap еще умеет делать pre, pre-line, pre-wrap, inherit и поддерживается эксплорером, начиная с седьмого — примечание Временно.нет)
- <textarea> для отображения текстов, требующих скролла? (Тоже спорный пункт.)
Селекты:
- <input type="radio" />, <input type="checkbox" /> или <select> для ситуаций с ограниченными вариантами?
- Фильтруешь ли ты варианты, неактуальные из-за выбранного ранее?
- <input type="radio" /> для коротких списков опций с возможностью выбора одной?
- <input type="checkbox" /> для коротких списков опций с возможностью выбора нескольких?
- Чекбоксы и радио выровнены вертикально?
- Чекбоксы и радио сгруппированы по смыслу?
- <select> для длинных списков опций? (Сомнительный выбор, подобающий лишь при нехватке времени или других ресурсов.)
- Наиболее востребованные опции расположены вверху списка?
- Уменьшенный размер текста для списков с прокруткой?
- <optgroup> для группировки связанных опций?
Так лучше в принципе не делать. Очень непривычно и раздражает.
Нужно будет, кстати, внести это в статью.
Имхо, лучше кнопку отменыочистки делать менее заметной и без разницы с какой стороны. Главное не располагать её рядом с кнопкой отправки. Прихожу в адский ужас когда так делают
Если Submit делать кнопкой, а Cancel - ссылкой - не перепутаешь, что из них важнее. Но это уже не совсем формы будут.
А где про связки label-for/input-id?
Так лучше в принципе не делать. Очень непривычно и раздражает.
т.к. Человек читает и пишет слева направо, то заполняя форму, он ожидает увидеть сначало ОК, а во-вторую очередь отмену, поэтому Сабмит и должен быть слева. Мне кажется, разница между ними должна быть светофорная, ок зеленый, кэнсел красный и плюс небольшая разница в размерах.