Визуальная коммуникация в контекстно-зависимых полях
Visually Communicating Selection Dependent Inputs
Автор:
Источник:
Контекстно-зависимые поля требуют от пользователя ввести дополнительную информацию в зависимости от первоначального выбора, чтобы завершить заполнение формы. В статье (Контекстно-зависимые поля) я описал ряд способов решения этого вопроса.
В каждом из этих решений визуальная часть необходима, чтобы помочь пользователям понять, как их первоначальный выбор связан с последующими вопросами, на которые им нужно ответить. Когда визуальная коммуникация отсутствует, форма становится вксьма запутанной.
Рассмотрим пример с сайта Apple. Первый вопрос, на который нужно ответить в этой форме авторизации: Вы хотите войти с помощью Apple ID или AOL ID? После того как первоначальный выбор сделан, нужно ввести конкретный ID и пароль. Проблема состоит в том, что эта связь визуально не представлена. В результате, вы можете оказаться в такой ситуации: форма просит вас ввести пароль, но визуально кажется, что ошибка связана с выбором AOL.
Для контраста пример с сайта Stumble Upon. Здесь с помощью визуального дизайна зависимость между полями сделана ясной.
Еще один пример путаницы с контекстно-зависимыми полями можно найти на сайте Southwest airlines. Здесь выбор между вариантами оплаты (кредитной картой или PayPal) связан с блоком контекстно-зависимых полей, расположенных ниже. И опять отсутствие ясной связи создает возможность для ошибок. В данном случае не ясно, что поля, расположенные под вариантом PayPal, на самом деле относятся к выбранному варианту «Кредитная карта».
Визуальная коммуникация может исправить эту связь, ассоциируя первоначальный выбор вверху с блоком полей, расположенных ниже. Возможное решение показано ниже, но, учитывая количество зависимых полей, возможно, лучше подойдет комбинация нескольких дизайнерских решений.
Оставьте комментарий
You must be logged in to post a comment. Log in