Как правильно спроектировать форму обратной связи

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

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

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

Неправильный подход

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

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

Правильный подход

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

Например, пару образуют имя и фамилия, за ними следуют электронная почта и номер телефона. То же самое касается полей города и штата, полей адреса.

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

В примере выше горизонтальный интервал между связанными по смыслу полями составляет 12 пикселей, а вертикальный отступ под каждым полем — 24 пикселя. Это наглядно демонстрирует, что в первом случае речь идет о более тесной связи, чем во втором.

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

Когда использовать многоколоночные формы

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

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