Navespro.ru

Если от пользователя требуется ввести незнакомые или редко используемые им данные, подписи лучше расположить слева от полей. Для сканирования такой формы пользователю достаточно просмотреть левый столбец с подписями. Тем не менее, расстояние между подписями и полями будет больше, что может увеличить общее время заполнения такой формы. Пользователю придется "прыгать" между колонками, чтобы найти поле, соответствующее подписи или подпись, соответствующую полю.

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

Использование визуальных элементов

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

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

Наши врожденные правила визуального восприятия добавят на форму 15 дополнительных элементов: средняя линия, все прямоугольные блоки, все горизонтальные линии. Они отвлекают внимание и мешают сфокусироваться на наиболее важных элементах формы: подписях и полях. Попытайтесь сами просканировать столбец с подписями. Глаз постоянно натыкается на разрывы, созданные горизонтальными линиями, пытается рассмотреть каждый горизонтальный блок. Форма кажется разорванной на множество отдельных маленьких форм.

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

Основные и дополнительные кнопки

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

Когда на форме расположено одновременно несколько кнопок (например, "Вперед" и "Назад"), визуальный вес второстепенной необходимо уменьшить. Это уменьшит риск потенциальных ошибок и поможет пользователю завершить заполнение формы.

Это общие принципы. При решении конкретной задачи формы все равно необходимо дополнительно тестировать на пользователях.