Внедрение статьи Wulin.com (www.vevb.com): краткое обсуждение дизайна форм в ежедневном веб -дизайне.
Входная коробка (вход) должна быть логически разделена на группы, чтобы мозг мог хорошо справляться с большими областями. - «Авторитетное руководство HTML»
Веб -приложения всегда используют формы для обработки ввода данных и конфигурации, но не все формы являются согласованными. Выравнивание области ввода, соответствующих меток, методов работы и окружающих визуальных элементов будет более или менее повлиять на поведение пользователя.
Форма макета
Учитывая, что пользователь должен заполнить форму максимально коротким, а собранные данные знакомы пользователю (например, имя, адрес, платная информация и т. Д.), Вертикально выровненные этикетки и входные окно можно сказать лучшими. Каждая пара метров и ящиков ввода выровнена вертикально, чтобы придать ощущение того, что они близки к обоим, а последовательное левое выравнивание уменьшает движение глаз и время обработки. Пользователь должен двигаться только в одном направлении: вниз.
В этом макете рекомендуется жирные ярлыки, которые могут увеличить их визуальный вес и увеличить их значимость. Если не жирный жирник, с точки зрения пользователя, текст тега и блока ввода будет почти таким же.
Если данные в форме не знакомы или логически сгруппированы (например, несколько компонентов адреса), выровненные левые теги могут легко прочитать информацию формы. Пользователи должны смотреть вверх и вниз на метке на левом столбце, не прерывая их мышление по входной коробке. Но таким образом, расстояние между меткой и соответствующей входной коробкой обычно удлиняется более длинной меткой, что может повлиять на время для заполнения формы. Пользователь должен прыгать вперед и назад, чтобы найти два соответствующих тега и входных поля.
Это создает альтернативное решение, выравниваемое правой макеткой тегов, что прилагает соединение между тегами и коробками ввода ближе. Тем не менее, в результате неравномерные пробелы и этикетки слева затрудняют пользователям быстро извлечь то, что нужно заполнить форму. В западных странах люди привыкли писать слева направо, поэтому эта правая выровненная макет вызывает дислексию для пользователей.
С помощью визуальных элементов
Из-за преимуществ выравниваемой левой макету этикетки (легко извлекать и уменьшить вертикальную высоту), заманчиво исправить его основные недостатки (разделение метки и входного ящика).
Одним из решений является добавление фоновых цветов и линий разделения. Различные цвета фона создают столбец с вертикальными метками и колонку с вертикальными ящиками ввода. Каждый набор меток и ящиков ввода разделяется прозрачными горизонтальными линиями. Хотя это звучит хорошо, все еще есть проблемы.
Сравнивая предыдущую форму (субъективное визуальное различие пользователя), это добавляет 15 визуальных элементов: средние линии, фоновые ячейки и горизонтальные линии. Эти элементы отвлекают внимание пользователя и мешают пользователю сосредоточиться на важных элементах, таких как теги и поля ввода. Как отметил Эдвард Туфте: существуют различия в самой информации, которая неизбежно приводит к сенсорным различиям. Другими словами, любой визуальный элемент, который бесполезен для макета, будет постоянно нарушать макет. Когда вы попытаетесь просмотреть теги слева, вы обнаружите, что ваше зрение всегда прерывается, остановитесь, чтобы подумать об этих горизонтальных линиях, ячеек и фоновых цветах.
Конечно, это не означает отказ от фоновых цветов и линий. Они по -прежнему очень эффективны в разделении соответствующей информации о области. Например, тонкая горизонтальная линия или светлый цвет фона могут быть визуально объединены с соответствующими данными. Цвета фона и линии особенно эффективны для основных кнопок эксплуатации, которые различают форму.
Первичные и вторичные операции
Основная работа формы (обычно отправляя или сохранение) требует относительно сильного визуального веса (в приведенном выше примере, ярких тонах, жирных шрифтах, фоновых цветах и т. Д.). Это эквивалентно предоставлению пользователю: у вас есть/собираетесь заполнить форму.
Когда форма имеет несколько операций, таких как продолжение и возвращение, необходимо снизить визуальный вес вторичных операций. Это минимизирует риск потенциальных операционных ошибок для пользователей.
Хотя вышеупомянутый контент может лучше позволить вам проектировать формы, сочетание макета, визуальных элементов и контента по -прежнему требует пользовательского тестирования и анализа данных (оценка завершения, отчет об ошибках и т. Д.).