Чужие мысли

Переводы и статьи по дизайну интерфейсов, юзабилити и web-разработке

Удобные формы с помощью jQuery

Валидация

Иногда легко определить, что пользователь вводит неправильные данные. В адресе электронной почты не может быть русских символов. Почтовый индекс может состоять только из цифр. В номере телефона могут быть только цифры, скобки, пробелы и тире.

Для таких полей можно задавать ограничения, не позволяющие вводить пользователю неправильные данные.

  • Alphanumeric – позволяет указывать, какие символы можно вводить в каждое поле в форме (например, «только символы», «только числа», «только числа, пробелы и тире» и т.д.).

    Alphanumeric

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

    jVal

  • Validation – самый известный и продвинутый плагин для валидации.

    Validation

Читать дальше »



Визуальная коммуникация в контекстно-зависимых полях

Visually Communicating Selection Dependent Inputs
Автор: Luke Wroblewski
Источник: Functioning Form

Контекстно-зависимые поля требуют от пользователя ввести дополнительную информацию в зависимости от первоначального выбора, чтобы завершить заполнение формы. В статье Selection-Dependent Inputs (Контекстно-зависимые поля) я описал ряд способов решения этого вопроса.

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

Рассмотрим пример с сайта Apple. Первый вопрос, на который нужно ответить в этой форме авторизации: Вы хотите войти с помощью Apple ID или AOL ID? После того как первоначальный выбор сделан, нужно ввести конкретный ID и пароль. Проблема состоит в том, что эта связь визуально не представлена. В результате, вы можете оказаться в такой ситуации: форма просит вас ввести пароль, но визуально кажется, что ошибка связана с выбором AOL.

Читать дальше »