5

一个 UI 问题:对于将数据输入到网格中的最佳方式(定义为“最终用户最喜欢的方式”)或最不坏的方式是否有一些共识?

我有一个网格,有很多行。网格的列包含用户可以输入/编辑的各种类型的属性。属性的“类型”包括:

  • 自由文本
  • 数字(数字)
  • 枚举值(例如“高”、“中”和“低”之一)
  • 其他(例如日期、持续时间)

“自由文本”类型不难设计(所以我不会问这个),但是接下来的两种类型呢?

数字

  • 当使用键盘输入数字时,您是否允许自由文本输入,然后在 blur 上运行 validate 方法?或者,监控每个按键以将数据输入限制为仅数字?
  • 您如何告诉用户(在网格上,而不是在表单上)某些列中数据的语法仅限于数字?如果用户按下了错误的(非数字)键,你会怎么做?
  • 'spin' 或 'spinner' 控件是标准的 Windows 控件;尝试在基于 HTML 的网格上使用一个是否合适?

枚举值

对于使用鼠标输入或编辑枚举值,我想在鼠标单击时弹出一个小上下文菜单是要做的事情。

  • 另一种方法是使用<select>输入控件(即组合框)。我想虽然拥有一整列组合框并不像拥有一列文本值那样容易阅读(因为组合框添加了额外的非文本墨水)?您如何看待通常显示纯文本,但是当字段获得输入焦点时用组合框替换该文本(然后在模糊时删除组合框)?
  • 当焦点因键盘(即 [Tab] 键)而不是鼠标(即单击)而改变时,您是否还会在焦点上弹出相同的菜单?换句话说,是否应该跳到一个字段导致弹出菜单?顺便说一句,我见过的基于 CSS 的弹出菜单响应鼠标而不响应键盘(例如,响应 [Up] 和 [Down] 箭头键)。你知道任何可以在浏览器中运行的类似 Intellisense 的数据输入实现吗?

例如?

我也有兴趣看到任何你认为是典型例子的东西。我对桌面 UI 和/或浏览器内的答案感兴趣。


编辑:在另一个带有 [data-entry] 标签的问题之后(“有人使用过 Sigma Grid(基于 Javascript 的可编辑数据网格)吗? ”),我正在查看 Sigma Grid 示例。它在 IMO 上做了很多事情(对键盘和即时选择框的良好支持);但它对数字字段的支持可能不完善,例如,如果我在数字单元格中按“a”,那么有时它会弹出一个警告框告诉我我错了(工具提示可能不那么具有侵入性),和/或有时它使单元格为空(空白),擦除'a'并且什么都没有留下。


编辑以回复以下答案之一。

但是,再次确定表单的主要用途是什么,并为此进行优化。数据可视化或分析与批量录入的需求不同,满足键盘用户与键盘+鼠标用户完全不同。

我希望相同的显示(即表格/网格)能够很好地显示现有属性、创建新属性和编辑现有属性。我期望有几十个项目(即几十行数据),每个项目只有几列(例如,一列文本/项目描述,加上 1 个或更多列用于 1 个或多个相关项目属性)。

一些数据/属性可能是主观的和相对的(例如,每个项目的两个属性是每个项目的“优先级”或“难度”,只有与其他项目相比才特别有意义),这就是我想要的原因将所有数据一起显示在一个屏幕上:以便最终用户可以比较它们。

我的应用程序是针对相对专家(不是新手)的计算机用户,但不是数据输入专家:例如,用户是软件开发人员、项目经理、产品经理、QA 人员等,但在某种程度上也是他们的客户;它在 Intranet(不是公共 Internet)上运行,但易于使用且易于学习和/或直观学习都很重要。

此外,我不明白为什么满足键盘用户与键盘+鼠标用户完全不同:我认为单个解决方案可以/应该支持其中一个和/或两者。

4

6 回答 6

4

恕我直言,您需要问的一个大问题是您的页面的主要目的和用户的相对复杂性。您是否正在处理 Tab+10 键专家、鼠标单击 + 猎啄打字员,两者兼而有之?

您做出的选择需要考虑到这一点。我假设通过选择网格,您的用户是从底部向上的一步,并使用选项卡导航作为导航表单的主要方式,主要用途是批量数据输入。

关于数字输入:

  • 如果您计划提供转换例程,则无需限制为数字。
  • 在用户输入无效输入的情况下(请注意,某些数字,而不仅仅是文本可能是无效的......例如,负年龄)你最好立即显示错误内联。
  • 避免使用微调器,尤其是在处理带小数的数字时。微调器将注意力从数据输入上移开,并提供最小的价值,除非您处理的是一组有限的离散数字。如果是这种情况,组合/选择可能会更好(我将在下一篇文章中详细说明原因)。

关于枚举值:

  • 避免像瘟疫一样的弹出窗口/上下文菜单。它们要求用户使用鼠标并将焦点从当前任务上移开,实际上是在您生成新窗口时。Combo/Select 允许用户在一定程度上预先输入,并允许通过箭头进行键盘选择。
  • 您提出的组合框问题(下拉箭头使文本更难阅读)是您可以通过您提供的焦点解决方案缓解的问题,但是,您通常可以通过在行和列之间进行更多填充来使您的网格更具可读性.

额外评论:

  • 如果可能的话,自由文本日期与转换。除非您计划培训您的用户,或者选择采用一些严格的掩蔽系统(并且在验证失败时同样令人恼火),否则应该允许他们随意输入日期。 请注意,如果您与国际人士打交道,他们会以不同的方式输入月份和日期。美国的 SOP 以 mm/dd/yyyy 为单位,而许多国家/地区更喜欢 dd/mm/yyyy。
  • 如果您有大量字段,您可能需要考虑将数据输入拆分为多行。> 10 列的平面网格很难在单个视图中理解。这样做的缺点是增加了垂直滚动,因此您必须在一方面使用数据上下文(例如上面的行和下面的行)解释当前编辑数据行的重要性和获取所有另一行(多行或 H 滚动)的信息。

但是,再次确定表单的主要用途是什么,并为此进行优化。数据可视化或分析与批量录入的需求不同,满足键盘用户与键盘+鼠标用户完全不同。

编辑:回复评论

此外,我不明白为什么满足键盘用户与键盘+鼠标用户完全不同:我认为单个解决方案可以/应该支持其中一个和/或两者。

这并不完全不同。将其视为“优化”和“支持”大部分用户之间的区别。举几个例子:代码编辑器针对键盘用户进行了优化。在热键、快捷键和键盘导航之间,用户很少需要使用鼠标。大多数 RTS 游戏使用单手鼠标和键盘操作。他们通常支持专门使用鼠标,但并未为此进行优化。iTunes 则处于另一个极端——它几乎完全依赖于鼠标(就像大多数以拖放为主的 UI 一样)并且只使用键盘几乎是不可能的。

是否允许输入并显示错误;还是阻止输入并显示错误?当它是一个网格(一个单元格,表格内的某处)时,将它显示为“内联”是什么意思?

我不确定您正在构建哪个平台,但是是的,我的意思是在表格内的某个地方,最好是在您正在谈论的数据行上。在 ASP.NET 的 GridView 中,允许您将多个控件嵌入到同一个“单元格”中的 TemplateFields。在富客户端世界中,大多数第 3 方组件都支持类似的 OOTB(例如 IDataErrorInfo),这会在上下文中给您带来错误。

如果替代方案是将所有错误放在网格上方或下方,那么您的用户将很难找出数十行数据中的哪一行有错误。有关此问题的次优处理示例,请尝试将 10 件商品添加到亚马逊购物车,然后将所有数量更改为 2,但 1 件商品除外,您将其更改为 -1。点击更新,看看您是否可以轻松导航到有错误的行。

此外,验证样式的“输入”风格是允许用户输入数据并在不正确时向他们发送消息,而不会阻止输入和/或删除他们的输入。StackOverflow 在很多地方都这样做了,最容易通过添加评论来证明。验证通知您至少需要 15 个字符,但在通知您时不会删除您的评论。紧随其后的是让用户明确地知道他们的输入是不正确的。这方面的一个例子是尝试在 Windows 中重命名带有反斜杠的文件。您会立即看到一个带有精确说明的气球。

好吧,智能感知或自动完成是一种弹出窗口,但它可以使用(不会将焦点从键盘上移开)进行操作。

如果您可以像 Visual Studio 中的 Intellisense 一样干净地支持弹出窗口,我会说去吧。我对弹出窗口的非 VS 经验是大多数尝试和失败(有些非常可怕,需要我拿起鼠标并重新聚焦到正确的位置)。使用 Intellisense 要记住的另一件事是它具有出色的语句结束处理(我的意思是与您输入的单词的交互 + 前瞻 + 拼写/大小写宽恕 + 制表符/输入处理)。由于我假设您使用选项卡在字段之间导航(请注意 VS 没有字段),您将不得不想出另一种方法让您的应用程序知道“我现在完成了,自动-完成/智能感知我刚刚输入的内容”

我在想文本周围的组合框框架使文本更难快速阅读;也许一些最小的组合框,有一个向下箭头,但组合框周围没有框架(只是表格单元格的边框)对于没有焦点的单元格会更好:虽然我想知道为什么即使是向下箭头也可能在没有焦点的单元格上很有用。

如果您担心 ComboBox 的框架,我完全同意——将框架颜色更改为对比度较低的颜色。当控件“chrome”没有聚焦时,您为最小化控件“chrome”而采取的任何解决方案显然都会使其更像文本,并且(可能?)更具可读性。

无论如何,祝你的设计好运。

于 2009-06-16T21:29:14.660 回答
2

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 框架有一点学习曲线,但它几乎可以做所有事情:验证、输入限制、数据绑定等。

于 2009-06-18T02:18:17.110 回答
1

对于数值,我通常只使用 JavaScript 来限制输入除您希望它们输入的值之外的任何值。在这种情况下,数字。不需要给他们警报或其他任何东西,只是不允许它。

对于枚举值,我真的会使用某种选择或下拉框。这就是人们对网站的习惯。您可以喜欢它并将其隐藏,直到鼠标悬停,或单击该框。

对于标签,我会允许他们进入另一个选择框。这对于某些人来说输入大量数据会更快。

于 2009-06-16T21:10:57.350 回答
1

这是多年来使用输入表格的观察结果的混乱列表。

数字:

  • 不要限制字段长度 - 如果您添加了一个分隔字符(或一个太多)只是为了弄清楚您现在无法填写该字段,这真的很烦人。然后你要回去,去掉“冒犯”的字符,走到最后,继续填。一个好的系统应该在退出该字段时修剪并删除任何非数据字符。如果该值仍然不合适,请立即让用户知道。
  • 为了避免非数字,只需忽略将填充非数字字符串的键。注意千位/小数分隔符、空格和控制字符 (CTRL-x)。您应该能够粘贴几乎任何可用格式的值,包括货币符号(将被删除)。
  • 自旋控件还没有普及,所以它们应该只用于专家界面。他们还分享了滚动条的许多陷阱:是否有足够的空间来放置端点箭头,条是否应按比例缩放,比例是否为线性,最简单的最小/最大条长度是多少点击并提供足够的准确性,即使使用键盘也可以准确快速地递增吗?
  • 用户退出该字段后,该值应四舍五入到允许的最大位数,并且最好根据操作系统设置进行格式化以确保易读性。

枚举值:

  • 在输入时更改字段小部件会使新用户感到困惑,因此它应该仅用于专家界面。
  • 当列表很大但用户熟悉时,类似 Google Suggest 的界面很有用,因为只需单击几下,长列表的导航就可以减少到更易于管理的部分。如果用户真的想查看所有现有选项,也许应该提供一个下拉选择器。如果该字段不允许新条目,并且该字段内容与任何选项都不匹配,则它应该在用户导航离开它时尝试找到最接近的匹配项。例如,如果您知道选项是“High”、“Medium”和“Low”,则只输入第一个字符会很有用,然后让系统完成其余的工作。
  • 当该字段通过鼠标或键盘获得焦点时,如果可用选项不是很多,它应该立即显示可用选项。这对用户来说是一个很好的提示。一个陷阱是如果它太坚持,当用户试图导航离开时会遮挡屏幕的其他部分。
于 2009-06-19T15:53:58.953 回答
1

看看http://www.peterblum.com

在过去 4 年多的时间里,我们在许多应用中都使用了这个产品。它绝对增强了 Web 表单的 UI 并解决了许多验证问题。特别是,它与网格控制配合得很好。

祝你好运

于 2009-12-23T21:03:26.980 回答
0

jQuery 有一些很酷的插件可以帮助常见的数据输入习惯用法。

jQuery 和其中一些插件的高使用率以及美学因素向我表明,这些插件代表了一些处理用户输入的最佳方式......

艾萨克在 evolt 上也有一篇关于可用表单的好文章

于 2009-06-19T06:17:49.180 回答