如何制作“绿屏”网络应用程序？

Question

在与我们的客户服务部门的非正式交谈中，他们对我们基于 Web 的 CSA（客户服务应用程序）表示了不满。在呼叫中心，每小时的呼叫至关重要，大量时间被浪费在鼠标、单击按钮、在下拉列表中选择值等上。客户服务总监迫切要求的是回到键盘的美好时光驱动的应用程序，视觉细节很少，只是将数据呈现给 CSR 和处理调用所必需的。

我不禁想起了我们曾经使用过的绿屏应用程序（以及我们过去制作的经验更丰富的应用程序）。这样的应用程序不仅效率更高，而且对销售代表的使用更健康，因为他们必须冒着整天通过网络应用程序输入数据的风险。

我想保持基于浏览器部署的便利性并保留我们在 Microsoft 堆栈中的现有投资，但是如何将这个键盘驱动的 ultra-simple greenscreen concept 交付到网络上？

好的答案将链接到库、具有类似风格的其他 Web 应用程序、组织和优先处理键盘快捷键数据的最佳实践（不是如何添加它们，而是如何存储和维护快捷键以及自动解决冲突等。

编辑：接受的答案不会是关于如何在网络上进行 UI 的小型讲座。我不想点击任何链接、按钮或任何东西。

EDIT2：这个应用程序有 500 个用户，分布在北美各地的呼叫中心。我无法重新训练他们使用 TAB 键

Answer 1

我制作基于网络的 CSR 应用程序。您的经理忘记的是现在应用程序要复杂得多。与 15 年前相比，我们对销售代表提出的要求更多。我们收集的信息和记录的数据比以前更多。

您应该专注于让 Web 应用程序表现得更好，而不是“绿屏”应用程序。例如，当它可以是输入字段时，没有年份的下拉列表。确保 taborder 正确且合理，您甚至可以在每个字段分组旁边放置小数字以指示 tab 顺序。将不同的屏幕/选项卡分配给 F 键并在屏幕上表示它们。

如果操作正确，您应该可以在没有鼠标的情况下使用您的网络应用程序，而不会降低工作效率。

充分利用 AJAX，因此往返服务器不会改变光标的焦点。

在 CSR 应用中，您通常有多个默认值。您应该为每个默认值分配一个按钮，并允许 csr 按下 1 个按钮以获得他们想要的默认值。这将减少点击和鼠标移动的数量。

也很重要 您需要与 CSR 坐在一起，观察他们一段时间，以了解他们如何使用该应用程序。如果您还没有这样做，您可能会忽略将大大提高他们的生产力的简单更改。

Answer 2

body { background: #000; color: #0F0; }

更严重的是，完全可以将键盘快捷键绑定到网络应用程序中的操作。

您可能会考虑教您的用户只使用 Tab 键 - 这就是我填写大多数网络表单的方式。跳到一个选择列表，然后输入我要选择的选项的前几个字母。如果页面没有对结构和 tabindexes 做傻事，我通常可以只用键盘填写大多数 web 表单。

Answer 3

随着时间的推移，我不得不使用其中一些应用程序，作为用户，FWIW 会给出我的反馈，也许它可以帮助你帮助你的用户 :-) 抱歉，这有点长，但这个话题很接近我的心脏 - 因为我让自己为这样的系统设计了“改进”界面的原型（根据我们的计算，这可以节省非常非常多的钱并避免用户不满意），然后带领团队实现它。

我注意到很多 CRM 的一个常见问题：屏幕上有 20 多个字段，其中一个通常使用 4-5 个字段来执行 90% 的操作。但是无论如何都需要单击不必要的字段。

当然，我的这个假设可能是错误的（因为在我的例子中，有各种各样的用户使用不同的功能）。但是请尝试与用户坐下来看看他们是如何使用应用程序的，看看您是否可以优化 UI 方面的东西 - 或者，如果真的是不知道如何使用“TAB”的问题（他们 真的 每次都需要使用这 20 个字段中的每一个）- 您将能够指导其中的一些并检查这对他们来说是否足够 - 然后为整个组织推出培训。确保您有直观的热键支持，并且如果列表包含 2000 个项目，用户不必手动滚动以找到正确的项目，而是可以使用 FF 的功能通过键入其文本的开头来选择项目。

通过查看应用程序的使用模式，然后相应地优化 UI，您可能会学到很多东西。如果您有多个使用该系统的组织职能部门，那么每个职能部门的“理想 UI”可能会有所不同，因此实施哪个以及是否实施的问题就变成了业务决策。

还有其他一些对用户来说很重要的小细节——有时你认为他们的主要输入字段实际上并非如此——他们有一个空的 textarea 占据了屏幕的一半，而他们必须将真正重要的数据输入到角落某处的一个小文本字段中。或者，在他们的屏幕分辨率中，他们需要水平滚动（或根本滚动）。

再次，与用户坐下来观察应该会发现这一点。

还有一个问题：“开发者硬件太快”现象：很多网络开发者倾向于使用高分辨率的大显示器，显示非常强大的 PC 的输出。当结果以 1024x768 的分辨率显示在 CSR 的笔记本电脑屏幕上时，其布局看起来与预期完全不同，渲染性能也是如此。调，调，调。

最后，如果您的组织在地理位置上分散，始终使用最长延迟/最小带宽的链路等效项进行测试。这些问题在本地进行测试时看不到，但在通过 WAN 使用系统时会增加很多烦恼。简而言之-在对应用程序进行任何测试/开发时尝试使用最坏的情况-这会让您感到烦恼，您将优化它的使用-因此处于更好情况的用户会欣喜若狂应用程序性能。

如果您使用“绿屏应用程序” - 那么可能为高级用户提供一个长文本输入字段，他们可以在其中以 CLI 类型的方式输入所有信息，然后点击“提交”或 ENTER 键（虽然这个设计决定不能掉以轻心，因为它需要大量工作）。但是每个人都需要意识到“绿屏”应用的学习曲线相当陡峭——这是从业务角度考虑的另一个因素，还有流失率等。问问老板典型的代理会呆多久在同一个地方，如果他们需要 3 个月的期限才能全速运转，生产力会受到怎样的影响。 :) 平衡不是由程序员单独决定的，也不是由管理层单独决定的，而是需要共同努力的。

最后，如果您有“高级用户”，请注意：您可能想看看 conkeror 作为浏览器 - 虽然它本身相当慢，但它可以从键盘提供的功能看起来非常灵活- 仅控制视角。

Answer 4

当他们说重新设计的首要任务应该是与您的用户交谈/观察并查看他们的问题时，我完全同意其他人的看法。如果您找出最常见的任务和您的用户最常犯的错误，并在现有 UI 的范围内简化这些，我认为您会看到更多的投资回报率。我意识到这不是一件容易的事，但如果你能做到，你就会拥有更快乐的用户（因为你已经解决了他们的工作流程问题）和更快乐的老板（因为你通过没有在全新的 UI 上重新培训所有用户）。

在阅读了其他人的答案和 cmets 之后，我想解决一些其他问题：

编辑：接受的答案不会是关于如何在网络上进行 UI 的小型讲座。我不想点击任何链接、按钮或任何东西。

我并不是要争论，但这听起来就像您已经下定决心而没有考虑对用户的影响。我可以立即看到这种方法的几个缺陷：

• 绿屏风格的用户界面可能不是 为您的用户带来更高的生产力。为了 例如，平均年龄是多少 你的用户？大多数人 25 岁和 年轻人几乎没有 接触这些类型的 UI。 突然强加这种 它们上的接口可能会导致 来自您的用户的主要强烈反对。举个例子，看看发生了什么 当 Facebook 决定改变 “流”概念的 UI - 巨大 用户的愤怒！
• Web 设计时并没有考虑到这种界面。我的意思是人们在访问网站时不习惯使用类似命令行的界面。除了文本之外，他们还期望视觉媒体（图像、按钮、链接等）。对此进行过大的更改可能会使您的用户感到困惑。
• 对这种类型的接口进行编程会很困难。正如我的最后一点，Web 不能很好地与命令行或纯文本界面配合使用。功能键、键盘快捷键（如 ctrl- 和 alt-）都支持不佳且不一致，这意味着您必须想出自己的方式来访问标准的东西，如帮助（因为 F1 将映射到 Web 浏览器的帮助，而不是您的应用）。

EDIT2：这个应用程序有 500 个用户，分布在北美各地的呼叫中心。我无法重新训练他们使用 TAB 键

我认为这个论点真的只是一个稻草人。如果你要引入一个全新的 UI，你将不得不对你的用户进行培训。确实，应该假设任何对 UI 的更改都需要以一种或另一种形式进行培训。像在 UI 中添加标签导航这样简单的事情实际上在培训部门相对较小。如果你这样做了，发送一封“UI 中方便的新功能”电子邮件会很容易，或者更好的是，有某种“每日提示”（当然，用户可以关闭）告诉他们关于标签导航等很酷的省时功能。

我不能代表这里的其他海报，但我确实想说，我希望你不要认为我们在这里太争辩，因为那不是我们的（好吧，我的) 意图。相反，反应来自我们听到你的 UI 的想法，而不是相信它对你的用户来说一定是最好的东西。完全欢迎您说我错了，这是您的用户将从中受益最多的地方；但在此之前，请记住，归根结底，最重要的是您的用户，如果他们不接受您的新 UI，那么没有人会。

Answer 5

在开发时，它实际上更像是一种以键盘为中心的心态。我尽可能多地使用键盘，而我构建的应用程序往往会表明这一点（所以我可以快速浏览我的用例）。

让标签顺序正确这样简单的事情可能就是您的应用程序需要的所有东西（我想我不确定您是否可以在 ASP.NET 中设置它......）。其余的控件会自动完成。