Каков наилучший способ справиться с очень сложными формами?

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

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

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

Наши клиенты очень привыкли к настольным программам, и не все хорошо знакомы с веб-системами.

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

снимок экрана с одной колонкой

В приведенном выше примере я использую одну форму столбца (наиболее рекомендуется в UX-исследованиях), но с очень длинным вертикальным прокруткой.

снимок экрана с двумя столбцами

Во втором примере я попытался уменьшить вертикальное пространство, используя два столбца.

снимок экрана с четырьмя столбцами

Это любимый клик клиента, 4 столбца с пробелом и попытка сохранить все выше складки.

  • Длины полей основаны на среднем количестве символов для каждого поля.

Я хотел бы узнать ваше мнение о наилучшем подходе к этому делу.

67 голосов | спросил Marcos Rocha 16 +04002013-10-16T20:02:08+04:00312013bEurope/MoscowWed, 16 Oct 2013 20:02:08 +0400 2013, 20:02:08

12 ответов


69

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

Здесь я сделал быстрый пример того, что я имею в виду:

введите описание изображения здесь>> </p>

<p> Кроме того, вы можете: </p>

<ul>
<li> Уменьшите количество полей ввода до минимума (спрячьте дополнительные поля в расширяемом поле под формой или переместите их на дополнительную панель сбоку) </li>
<li> Группируйте некоторые логически подключенные входы по групповому полю или заголовку (не будет экономить место, но облегчит навигацию) </li>
<li> Полностью скрыть поля ввода, которые вы в противном случае отключили бы </li>
<li> Поместите метки слева (они лучше сверху для небольших форм, но если у вас большие формы, они могут быть лучше слева) </li>
<li> Использовать всплывающие окна (где простого выпадающего меню недостаточно) или даже лучше создать собственный компонент контейнера выпадающего списка. </li>
</ul>
<p> <strong> Как установить большую форму на ширину экрана без использования колонок </strong> </p>

<p> Один из полезных методов, которые я использовал в одном из моих проектов некоторое время назад, состоит из двух панелей, которые автоматически выравниваются по вертикали на меньших экранах и выравниваются по горизонтали на более широких экранах. </p>

<p> <img src =

ответил Alph.Dev 18 +04002013-10-18T19:35:48+04:00312013bEurope/MoscowFri, 18 Oct 2013 19:35:48 +0400 2013, 19:35:48
19

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

Я бы посоветовал рассмотреть следующие стратегии (а также настоятельно рекомендовать, чтобы одни столбцы были лучшими):

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

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

индекс вкладки - внимательно следите за индексом вкладки, порядком полей, выбранными такими действиями, как вкладка. Убедитесь, что все элементы доступны с помощью клавиши вкладок, и форма реагирует на интеллектуальную фокусировку. Индекс вкладки позволяет заполнять форму только клавиатурой, когда она выполнена правильно. ( http://ui-patterns.com/blog/Input-contexts-switching -из-мыши к клавиатуре ). Вкладка из поля в поле поможет пользователям игнорировать прокрутку, как только это произойдет - им не нужно будет добираться до мыши (я бы предположил, что это составляет довольно немного их прокручивающей усталости).

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

прокрутка - не чувствуйте, чтобы избежать прокрутки, если необходимо представить сложные входы. Хорошее управление заказом и управление сложностью (как описано в первых трех пунктах) поможет в этом. (Вы также можете обнаружить, что у кого-то есть пчела в капоте о «выше складки»).

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

отменить - дать пользователям функцию отмены для отката изменений.

Существует много доказательств, связанных с изучением отслеживания глаз и форм, чтобы поддержать утверждение о том, что простые формы столбцов легче всего заполнять:

ИЗМЕНИТЬ ...

В связи с представленными исследованиями и вкладами опытных членов я редактирую это, чтобы сказать, что выровненные по правому краю метки слева от полей также являются допустимым, удобным способом разметки формы, с дополнительным преимуществом поддержки Особый случай использования ОП. См. Ссылки в комментариях для получения дополнительной информации. Спасибо @Rasha и @ DA01

... END EDIT

Вот хорошая ссылка, которая идет более подробно:

http://www.cxpartners.co.uk/cxblog/web_forms_design_guidelines_an_eyetracking_study/

ответил Toni Leigh 16 +04002013-10-16T23:49:22+04:00312013bEurope/MoscowWed, 16 Oct 2013 23:49:22 +0400 2013, 23:49:22
16

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

Это позволяет:

  • для большей концентрации на текущем поле и
  • , чтобы вернуться к работе быстрее после перерыва или перерыва.

введите описание изображения здесь>> </p>

<p> Тот же подход, который вы могли видеть в Excel, который является краевым случаем сложной формы, поскольку каждая ячейка является полем ввода. <br> <img src = >

ответил Alexey Kolchenko 17 +04002013-10-17T13:01:36+04:00312013bEurope/MoscowThu, 17 Oct 2013 13:01:36 +0400 2013, 13:01:36
11

Основываясь исключительно на том, что у вас есть, и визуально переустанавливая вещи, я предлагаю перейти с ярлыков сверху:

mockup

скачать источник bmml - каркасы созданный с помощью макетов Balsamiq

Для меток слева:

mockup

скачать источник bmml

В то время как шире, это примерно половина высоты, поэтому резко сократит прокрутку.

В качестве альтернативы, как насчет макета мастера или стиля табуляции? Может ли форма быть логически сгруппирована в 2 или 3 «экраны» вместо одного длинного?

ответил DA01 17 +04002013-10-17T09:03:17+04:00312013bEurope/MoscowThu, 17 Oct 2013 09:03:17 +0400 2013, 09:03:17
11

Контекст формы и намерения пользователя - очень важная квалификация подхода ...

Категории дизайна с использованием и мотивацией пользователя

1. Транзакционные формы - целью является привлечение пользователя. Вы хотите, чтобы разрешение задало им следующий вопрос, и лучшая форма взаимодействия - щелчок. Начните с самого простого вопроса в начале или в базе дерева решений. Не начинайте с контактной информации, если у вас нет отношений. Задайте вопрос, который указывает клиенту значение VALUE. Если вы продаете гамбургеры, спросите: какой ваш любимый гамбургер? Затем вы можете запросить контактную информацию, чтобы доставить ее. Даже если у вас длинная форма, сначала получите бай-ин, если у вас нет отношений с пользователем.

screenshot: single question

Затем вы можете расширить сферу своих вопросов, но я бы рекомендовал делать это постепенно. Не подавляйте. Используйте здравый смысл в макете формы. Первое правило: будьте последовательны. Те же размеры, расположение и графические стили. Очень хорошая идея рассмотреть и проверить КОГДА вы можете запросить контактную информацию. Если это необходимо для доставки стоимости - проще запросить контактную информацию раньше.

ScreenSholt: расширенный объем информации

Дайте видимость процессу для управления ожиданиями и поддержания надежного доверия. SCREENSHOT: VISIBILITY

2. Сложные формы сбора данных Я нашел самую сложную форму, о которой я знаю .. это для страхового покрытия для клиента с несколькими домами, транспортными средствами, водителями и другими ценными активами:

ПРИМЕЧАНИЯ:

a. Посоветуйте людям, сколько времени потребуется. b. Превратите форму в разделы визуально c. Разрешить прокручивать, если их ответы могут быть подвергнуты корректировке по мере их продвижения. В противном случае, вероятно, лучше, чем страницы. d. Дайте пользователю возможность сохранять, когда они идут e. Автоматически сохранять данные регулярно (они должны быть зарегистрированы до сих пор) f. Оставлять окна закрытыми, но видимыми - они открываются при нажатии g. . По возможности создайте поля динамической формы на основе информационной архитектуры и задайте вопросы. Это может потребовать нескольких страниц в зависимости от используемых вами бэкэнд-систем. h. Сделайте возможным TAB через поля и нажмите кнопку «Назад», чтобы выбрать флажки (программирование флажка можно выполнить с помощью JavaScript).

ИСПОЛЬЗОВАНИЕ: Никто не захочет заполнить форму, подобную этой. Им нужно будет мотивировать. В этом случае они получают покрытие, в котором они нуждаются, и даже тогда мы обнаружили, что агенту часто приходилось проходить через процесс по телефону.

ОПЦИИ МНОГОСТОРОННИХ: сделать число страниц видимым с самого начала и сохранить в каждом подразделе.

Надеюсь, это полезно. Форма ниже не идеальна. Хотелось бы использовать слайдер-панели и динамический контент, но он, по крайней мере, прочный.

введите описание изображения здесь>> </p></body></html>

ответил David Shantz WOW 19 +04002013-10-19T02:35:13+04:00312013bEurope/MoscowSat, 19 Oct 2013 02:35:13 +0400 2013, 02:35:13
7

Есть несколько вопросов, на которые нужно ответить:

  1. Является ли эта система CRM исключительно для сотрудников вашего клиента?
  2. Если да, посвящают ли они использованию этого CRM большую часть своего дня?
  3. Имеют ли эти пользователи одинаковый размер экрана?
  4. Какие формы существуют? Заполняют ли они большинство полей (менее половины)?
  5. Как часто пользователи заполняют новую форму с нуля, просто просматривая их?
  6. У этих страниц форм есть отдельный режим «Просмотр /просмотр»?

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

ответил Jung Lee 17 +04002013-10-17T04:13:11+04:00312013bEurope/MoscowThu, 17 Oct 2013 04:13:11 +0400 2013, 04:13:11
5

Я думаю, вам стоит взглянуть на ответ @Jung Lee.

По моему мнению, UX должен применяться по-разному в разных контекстах, также есть барьер с клиентами, которых мы всегда забываем. Говорят, что клиент всегда прав, поэтому, если ваш клиент достаточно упрям, вы должны согласиться с тем, что им нужно (сначала убедить их), в конце концов, они платят за продукт.

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

Также у вас есть преимущество ОГРОМНОЕ , у вас есть фактические конечные пользователи в вашей досягаемости, а не некоторые «аналогичные целевые демографические тестеры». Определенно самым эффективным способом было бы позволить сотрудникам заполнить формы (или аналогичные настройки) в течение X раз и сохранить запись времени, израсходованного вместе с их обратной связью, а затем решить.

ответил aleation 21 +04002013-10-21T15:43:31+04:00312013bEurope/MoscowMon, 21 Oct 2013 15:43:31 +0400 2013, 15:43:31
4

Поскольку это форма ввода данных на основе клиентского сервера на базе Интернета, у него есть как минимум 3 основных варианта использования:

  1. новая запись
  2. запись обновления
  3. просмотреть запись

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

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

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

Multi-column /Multi-tab без прокрутки для ввода /обновления данных
Ввод данных поля (случай №1 и №2) выглядит примерно так:

  1. Определить поле исходного документа
  2. Если возможно, выберите и скопируйте поле
  3. Найти соответствующее поле формы
  4. Если возможно, вставьте выбранные данные в поле. Если нет, введите его.

Время, необходимое для шага № 3, часто затмевает другие три шага в сочетании.

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

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

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

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

Ресурсы

ответил DocSalvager 19 +04002013-10-19T01:42:47+04:00312013bEurope/MoscowSat, 19 Oct 2013 01:42:47 +0400 2013, 01:42:47
2

, если вам нужно показать формы с несколькими строками, вы должны рассмотреть бесплатную среду представления таблиц с открытым исходным кодом, такую ​​как http://Datatables.net или http://flexigrid.info/, чтобы добиться наилучшей презентации. Не беспокойтесь о них, если у вас есть только таблицы с одним пользователем /отдельным элементом, но если у вас есть таблицы для управления, перечисляющие несколько строк для разных клиентов или других потребностей в таблице многострочных таблиц, они дадут вам тонны совершенства в пользовательском интерфейсе для мало усилий. Обратите внимание, что некоторые из них поддерживают «вид карты», который представляет собой способ отображения одной строки данных, которая может быть слишком широкой, как многоуровневая серия полей ввода. В идеальной презентации вы можете использовать один и тот же макет как для презентации управления несколькими клиентами, так и для ввода данных о клиентах, и тем самым уменьшить когнитивную нагрузку, связанную с отображением одних и тех же данных в нескольких форматах.

ответил Steve Whetstone 25 +04002013-10-25T00:43:40+04:00312013bEurope/MoscowFri, 25 Oct 2013 00:43:40 +0400 2013, 00:43:40
1

Лично мне нравятся многостраничные или «шаговые» системы. Он разбивает длинный процесс на, казалось бы, более управляемые куски, и вы также можете легко показать, насколько далеко проходит процесс.

У меня также были случаи, когда форма не передавалась правильно, и я должен снова заполнить ее. Если бы это произошло, было бы лучше, если бы это было всего лишь 1/5 формы, а не целиком.

ответил Joe Taylor 17 +04002013-10-17T02:06:36+04:00312013bEurope/MoscowThu, 17 Oct 2013 02:06:36 +0400 2013, 02:06:36
1

Пока мой поток закрыт, я рассказал о некоторых проблемах, обсуждаемых в этом потоке.

https://ux.stackexchange.com/questions /39760 /мульти-колонки форм-дизайн-есть-A-консенсус

ответил erik_lev 18 +04002013-10-18T23:48:49+04:00312013bEurope/MoscowFri, 18 Oct 2013 23:48:49 +0400 2013, 23:48:49
1
  1. Вы можете использовать placeholder вместо ярлыка. Он сохраняет высоту.

  2. 4 Поля поля - плохая идея. Если вы хотите сохранить высоту, пользователь может получить разочарование, чтобы увидеть /заполнить форму.

  3. В соответствии с вашим первым, ваша форма имеет слишком много свободного пробела. Чтобы этого избежать, вы можете центрировать форму. Пользователь будет обращать внимание на центр.

  4. Вы можете разделить на 2 или 3 страницы, зависит от ваших полей, таких как шаги процесса.

  5. Мы должны заботиться о дизайне особенно для форм. Это нелегко. Мы должны принять пользователя плавно до конца формы. Для этого мы должны работать с цветами, размерами шрифтов, разделителями, некоторыми взаимодействиями, ... Вы можете проверить примеры: регистрация Yahoo, регистрация ebay,

  6. Вы можете показывать рекламу /предложения /функции вашего продукта или веб-сайта в правой или левой части формы. Ссылка: регистрация Google.

ответил Pavan Kumar 5 FebruaryEurope/MoscowbWed, 05 Feb 2014 18:07:26 +0400000000pmWed, 05 Feb 2014 18:07:26 +040014 2014, 18:07:26

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132