Ввод данных в сетку

Вопрос пользовательского интерфейса: существует ли консенсус относительно лучшего (определяемого как «тот, который конечным пользователям нравится больше всего») или наименее плохого способа реализации ввода данных в сетку?

У меня есть сетка с множеством строк. Столбцы сетки содержат различные типы свойств, которые пользователь может вводить / редактировать. К "типам" свойств относятся:

  • Свободный текст
  • Цифры (числовые цифры)
  • Значение перечисления (например, одно из «Высокий», «Средний» или «Низкий»)
  • Другое (например, дата, продолжительность)

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

Цифровые цифры

  • При использовании клавиатуры для ввода числа разрешили бы вы вводить произвольный текст, а затем запустить метод проверки при размытии? Или контролировать каждое нажатие клавиши, чтобы ограничить ввод данных только цифрами?
  • Как сообщить пользователю (в сетке, а не в форме), что синтаксис данных в некотором столбце ограничен только числовыми значениями? Что вы будете делать, если пользователь нажмет неправильную (нечисловую) клавишу?
  • Элемент управления «вращение» или «прядильщик» - это стандартный элемент управления Windows; уместно ли попробовать использовать его и в сетке на основе HTML?

Значения перечисления

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

  • Альтернативой является использование элемента управления вводом <select> (т. Е. Поля со списком). Я предполагаю, что иметь целый столбец со списком не так легко читать, как столбец с текстовым значением (потому что поля со списком добавляют дополнительные нетекстовые чернила)? Как вы думаете, что обычно отображается простой текст, но заменяется этот текст полем со списком, когда поле получает фокус ввода (а затем удаляется поле со списком при размытии)?
  • Вы бы также открывали то же самое меню в фокусе, когда фокус изменяется в результате нажатия клавиатуры (например, клавиши [Tab]), а не в результате действия мыши (например, щелчка)? Другими словами, должно ли табуляция в поле приводить к появлению всплывающего меню? Между прочим, всплывающие меню на основе CSS, которые я видел, реагируют на мышь, но не на клавиатуру (например, на клавиши со стрелками [Вверх] и [Вниз]). Знаете ли вы о какой-либо реализации ввода данных, подобной Intellisense, которая может работать в браузере?

Например?

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


Изменить: следующий вопрос с тегом [data-entry] ("Использовал ли кто-нибудь Sigma Grid (сетку данных, редактируемую на основе Javascript)? "), Я смотрю на пример Sigma Grid. Он делает много вещей хорошо IMO (хорошая поддержка клавиатуры и своевременного выбора); но его поддержка числовых полей может быть несовершенной, например, если я нажимаю 'a' в числовой ячейке, тогда иногда появляется окно предупреждения, чтобы сказать мне, что я ошибаюсь (где, возможно, всплывающая подсказка будет менее навязчивой), и / или иногда он оставляет ячейку пустой (пустой), стирая «а» и ничего не оставляя на месте.


Отредактируйте в ответ на один из ответов ниже.

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

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

Некоторые данные / свойства могут быть субъективными и относительными (например, два свойства для каждого элемента являются «приоритетом» или «сложностью» каждого элемента, что особенно важно только по сравнению с другими элементами), поэтому я хочу для отображения всех данных на одном экране: чтобы конечный пользователь мог их сравнить.

Мое приложение предназначено для относительно опытных (не новичков) пользователей компьютеров, но не для специалистов по вводу данных: например, пользователи - разработчики программного обеспечения, менеджеры проектов, менеджеры по продуктам, специалисты по контролю качества и т. д., но также в некоторой степени их клиенты; он работает в интрасети (а не в общедоступном Интернете), тем не менее, простота и удовольствие в использовании и легкость и / или интуитивность в освоении важны.

Также я не понимаю, почему удовлетворение пользователей клавиатуры полностью отличается от пользователей клавиатуры + мыши: я думал, что одно решение может / должно поддерживать одно и / или и то, и другое.


person ChrisW    schedule 14.06.2009    source источник


Ответы (6)


ИМХО, главный вопрос, который вам нужно задать, - это основная цель вашей страницы и относительная сложность ваших пользователей. Вы имеете дело с клавишами Tab + 10, машинистами, которые щелкают мышью, набирают все вместе, понемногу и тем и другим?

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

Что касается числового ввода:

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

Что касается значений перечисления:

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

Дополнительные комментарии:

  • Произвольный текст даты с преобразованиями, если это возможно. Если вы не планируете обучать своих пользователей или не решите принять какую-то драконовскую систему маскировки (и не менее раздражающие хлопки по запястьям при неудачной проверке), им должно быть разрешено вводить даты, как они хотят. Предостережение, если вы имеете дело с иностранцами, они вводят месяцы и дни по-разному. СОП в США в мм / дд / гггг, тогда как многие страны предпочитают дд / мм / гггг.
  • Если у вас много полей, вы можете рассмотреть возможность разделения ввода данных на несколько строк. Плоскую сетку из> 10 столбцов довольно сложно понять в одном представлении. Недостатком этого является увеличенная вертикальная прокрутка, поэтому вам придется балансировать между важностью использования контекста данных (например, строк выше и строк ниже) при интерпретации текущей строки данных редактирования с одной стороны и получения всех информация одной строки (многострочная или H-прокрутка) на другой.

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

РЕДАКТИРОВАТЬ: ответы на комментарии

Также я не понимаю, почему удовлетворение пользователей клавиатуры полностью отличается от пользователей клавиатуры + мыши: я думал, что одно решение может / должно поддерживать одно и / или и то, и другое.

Это не совсем другое. Думайте об этом как о разнице между «оптимизацией» и «поддержкой» основной части ваших пользователей. Несколько примеров: редакторы кода оптимизированы для пользователей клавиатуры. Между горячими клавишами, сочетаниями клавиш и клавиатурой пользователю редко требуется использовать мышь. Большинство RTS-игр работают с использованием «одной руки на клавиатуре». Обычно они поддерживают исключительно использование мыши, но она не оптимизирована для этого. ITunes находится на другой крайности - он полагается почти исключительно на мышь (как и большинство пользовательских интерфейсов с преобладанием перетаскивания), а использование только клавиатуры практически невозможно.

Вы разрешаете ввод и отображаете ошибку; или запретить запись и вывести ошибку? Что вы имеете в виду, показывая его «встроенным», когда это сетка (ячейка где-то внутри таблицы)?

Я не уверен, на какой платформе вы строите, но да, я имею в виду где-то внутри таблицы, предпочтительно в строке данных, о которой вы говорите. В ASP.NET GridView позволяет использовать TemplateFields, которые позволяют встраивать несколько элементов управления в одну и ту же «ячейку». В мире полнофункциональных клиентов большинство сторонних компонентов обеспечивают поддержку подобных вещей OOTB (например, IDataErrorInfo), которые выдают ошибки в контексте.

Если альтернативой является размещение всех ошибок выше или ниже вашей сетки, вашим пользователям будет сложно определить, в какой из десятков строк данных есть ошибка. В качестве примера неоптимального решения этой проблемы попробуйте добавить 10 товаров в корзину Amazon, затем измените все суммы на 2, кроме 1 элемента, который вы измените на -1. Нажмите «Обновить» и посмотрите, сможете ли вы легко перейти к строке с ошибками.

Кроме того, стиль проверки «in» позволяет пользователям вводить данные и отправлять им сообщения, если они неверны, без предотвращения ввода и / или удаления введенных ими данных. StackOverflow делает это во многих местах, о чем проще всего свидетельствует добавление комментария. Проверка уведомляет вас, что вам нужно как минимум 15 символов, но не удаляет ваш комментарий при уведомлении вас. Второй вариант - дать пользователю понять прямо и сразу, что введенные им данные неверны. Примером этого может быть попытка переименовать файл с обратной косой чертой в Windows. Вы сразу увидите воздушный шар с точными инструкциями.

Что ж, Intellisense или автозаполнение - это своего рода всплывающее окно, но им можно управлять с помощью клавиатуры (не снимая фокуса).

Если вы можете поддерживать всплывающие окна так же чисто, как Intellisense в Visual Studio, я бы посоветовал сделать это. Мой опыт работы со всплывающими окнами без использования VS сводится к тому, что большинство из них терпят неудачу (некоторые, довольно ужасно, требуя от меня поднять мою мышь и перефокусироваться на правильное место). Еще одна вещь, о которой следует помнить с Intellisense, - это то, что она имеет блестящую обработку конца оператора (под этим я подразумеваю взаимодействие с вашими напечатанными словами + опережающий взгляд + орфографию / прощение регистра + табуляция / обработка ввода). Поскольку я предполагаю, что вы используете вкладку для перехода между полями (обратите внимание, что VS не имеет полей), вам придется придумать другой способ сообщить вашему приложению: «Я закончил, иди автоматически. -complete / Intellisense, что я только что набрал "

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

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

В любом случае удачи в дизайне.

person micahtan    schedule 16.06.2009
comment
Я отредактировал свой OP, чтобы добавить дополнительную информацию в конце, чтобы ответить на ваш вопрос, о приложении, данных и пользователях. - person ChrisW; 17.06.2009
comment
Я полагаю, что спиннер хорош тем, что он поддерживает ввод или редактирование числа с помощью мыши (для пользователей с мышью); и это неявная реклама того, что синтаксис поля является числовым. - person ChrisW; 17.06.2009
comment
вам лучше показать ошибку в строке и сразу. Разрешите ли вы ввод и отобразите ошибку; или запретить запись и вывести ошибку? Что вы имеете в виду, показывая его встроенным, когда это сетка (ячейка где-то внутри таблицы)? - person ChrisW; 17.06.2009
comment
Избегайте всплывающих окон / контекстных меню, как чумы. Они требуют, чтобы пользователь использовал мышь и отвлекал внимание от текущей задачи, буквально, когда вы открываете новое окно. - Ну, Intellisense или автозаполнение - это своего рода всплывающее окно, но им можно управлять с помощью клавиатуры (не снимая фокуса). - person ChrisW; 17.06.2009
comment
стрелка падения затрудняет чтение текста - я думал, что рамка поля со списком вокруг текста затрудняет чтение текста; возможно, какое-то минимальное поле со списком со стрелкой вниз, но без рамки вокруг поля со списком (только границы ячеек таблицы) было бы лучше для ячеек, которые не имеют фокуса: хотя мне интересно, почему даже стрелка вниз может быть полезным для ячеек, на которых нет фокуса. - person ChrisW; 17.06.2009

ExtJS

Редактируемая сетка: http://extjs.com/deploy/ext-3.0-rc2/examples/grid/edit-grid.html

Сетка редактора строк: http://extjs.com/deploy/ext-3.0-rc2/examples/grid/row-editor.html

Я лично еще не использовал версии 3.0x, но 2.0 - это здорово. Фреймворк Ext требует некоторого обучения, но он в значительной степени делает все: проверку, ограничение ввода, привязку данных и т. Д.

person Chris    schedule 18.06.2009
comment
ссылка мертвая :( или временно? - person Sreenikethan I; 30.04.2021
comment
Это сообщение было около 12 лет назад, но с тех пор оно переместилось на sencha.com/products/extjs - person Chris; 02.05.2021

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

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

Для табуляции я бы позволил им переходить в другое поле выбора. Некоторые люди быстрее вводят большой объем данных.

person AaronS    schedule 16.06.2009
comment
Так что даже гудка: просто мертвое нажатие клавиши? И нет всплывающей подсказки или чего-то еще, чтобы сказать, что вы ожидаете числовой ввод? Вы делаете это так, потому что это лучший или наименее плохой способ для конечного пользователя, или потому, что для программиста это наименее трудоемко? - person ChrisW; 17.06.2009
comment
На самом деле это не самый простой путь для программиста. Я использовал эту технику в нескольких приложениях для ввода данных и обнаружил, что пользователи в порядке с экраном, просто не принимая недопустимые вводы, вместо звуковых сигналов или раздражающих сообщений об ошибках, а затем им приходится удалять (или перезаписывать) свой предыдущий ввод. Конечно, это отчасти проблема обучения, поскольку она может сбить людей с толку при первом столкновении с ней. Однако, учитывая, что это, вероятно, внутреннее приложение, это не должно быть проблемой. - person AaronS; 17.06.2009

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

Цифровые цифры:

  • Не ограничивайте длину поля - это действительно раздражает, если вы добавили символ разделения (или слишком много) только для того, чтобы понять, что теперь вы не можете заполнить поле. Затем нужно вернуться назад, убрать «обидный» символ, пройти до конца и продолжить заполнение. Хорошая система должна обрезать и удалять любые символы, не относящиеся к данным, при выходе из поля. Если значение по-прежнему не подходит, немедленно сообщите об этом пользователю.
  • Чтобы избежать нечисловых значений, просто игнорируйте ключи, которые могут заполнить нечисловую строку. Остерегайтесь разделителей тысяч / десятичных знаков, пробелов и управляющих символов (CTRL-x). Вы должны иметь возможность вставлять значения практически из любого доступного формата, включая символы валюты (которые необходимо удалить).
  • Элементы управления вращением еще не повсеместны, поэтому их следует использовать только для экспертных интерфейсов. У них также есть много недостатков полос прокрутки: достаточно ли места для стрелок конечных точек, если шкала шкалы, мм, если шкала линейная, какова минимальная / максимальная длина полосы, что легко щелкать и дает адекватную точность, можно ли точно и быстро увеличивать его даже с помощью клавиатуры?
  • После того, как пользователь выйдет из поля, значение должно быть округлено до максимально разрешенных цифр и предпочтительно отформатировано в соответствии с настройками ОС для удобочитаемости.

Значения перечисления:

  • Изменение виджета поля при входе может сбить с толку новых пользователей, поэтому его следует использовать только для экспертных интерфейсов.
  • Интерфейсы, подобные Google Suggest, полезны, когда список большой, но знакомый пользователю, поскольку навигация по длинному списку может быть уменьшена до более управляемой части за несколько щелчков мышью. Возможно, должен быть доступен выпадающий селектор на случай, если пользователь действительно хочет увидеть все существующие параметры. Если поле не допускает новых записей и содержимое поля не соответствует ни одному из параметров, ему следует попытаться найти наиболее близкое совпадение, когда пользователь уйдет от него. Например, полезно ввести только первый символ, если вы знаете, что есть варианты «Высокий», «Средний» и «Низкий», а все остальное сделает система.
  • Когда поле приобретает фокус с помощью мыши или клавиатуры, оно должно немедленно показать доступные параметры, если их не так много. Это хороший совет для пользователей. Одна из ловушек заключается в том, что если он слишком настойчив, он закрывает другие части экрана, когда пользователь пытается уйти.
person l0b0    schedule 19.06.2009

Взгляните на http://www.peterblum.com

Мы используем этот продукт во многих наших приложениях в течение последних 4+ лет. Это определенно улучшает пользовательский интерфейс веб-форм и решает многие проблемы проверки. В частности, он хорошо работает с сеткой управления.

Удачи

person Prabhu    schedule 23.12.2009

jQuery имеет несколько интересных плагинов которые помогают в общих идиомах ввода данных.

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

У Исаака из Evolt также есть хорошая статья о используемых формах

person John Weldon    schedule 19.06.2009