丑陋的用户界面

Question

我看到很多广告/网站通过与谷歌并排设置，并且标题如下：这是您的网站/这是他们的网站，从而惹恼了混乱的用户界面。

这一切都非常有趣，但实际上，Google只需要一个文本框和一个提交按钮。

当您的页面是数据输入表单，例如订单输入表单或新员工输入表单时，该怎么办？

我想不出一种方法来构建一个需要大量数据输入的表单，而不会出现文本框，下拉列表，复选框等杂乱的内容。

当然，我可以使用每页只放一个文本框，并且有一个50页的数据输入表单或向导，但我认为这不会与最终用户相关。

任何人都找到了一种方法来创建一个收集大量数据但看起来不丑的数据输入表单？

Answer 1

如果这种事情的良好用户界面非常重要（通常，实际上并非如此），那么随着用户的进展而改变的屏幕，根据需要显示字段，通常是一个很好的方法。一些精简的向导屏幕也可能是合适的。

但正如我所说，它在商业应用程序中通常不是很重要。信息必须易于理解，而且熟悉（这种屏幕绝对是熟悉的）。业务用户通常希望在一个屏幕上显示更多字段，以便他们可以一次性定义值，而不必转到不同的屏幕。

此外，大量的字段通常会受到高级用户的欢迎，他们会进入很多区域，其中多个屏幕只会减慢速度。

话虽如此，谷歌有一个复杂的屏幕。这是高级搜索链接。他们正在做的是为简单的用例保持简单。如果您有数十万人使用的应用程序，那么一个简单的用例绝对值得拥有自己的屏幕。如果您的商业应用在其生命周期中可能被不超过几百人使用，则不一定。

Answer 2

不要试图在Super-Cluttered和Super-Empty之间做出选择，为什么不尝试并倾向于一个很好的妥协呢？如果您可以将数据输入表单分成一些逻辑“页面”，这些页面将大部分相似字段（名称信息，地址信息，以前的作业历史记录等）组合在一起，那么您可以找到方法来确定您拥有的内容每页更好，而不是让它看起来如此混乱。

Answer 3

我不是美学家（我是程序员，不是设计师），但是，谈论Google页面，看看advanced search page - 不是美丽的东西，也不是眼睛，即使它是允许输入大量数据的形式。权利对齐的文本输入字段，在其旁边清楚标记“提示”以进行说明，“一个或多个”行上的多个字段，对表单的查询的实时反馈让您准备，“可折叠”区域为可选输入更少需要的数据。我认为这是一种合理的技术组合。

Answer 4

确保：

• TAB和SHIFT-TAB执行用户期望的操作
• 相关字段组合在一起
• 您让用户以首选格式输入数据（如果他们想使用“ - ”和“（）”输入电话号码，例如，让他们），然后将数据转换为您的内部首选格式
• 充分利用字体，颜色，分隔符等，以便输入的每组字段都是局部整洁的。

想想遥控器。一些遥控器是一组无差别的按钮，所有按钮的形状，大小和颜色都相同。有些遥控器有明显划分的按钮组，使用按钮大小，形状，颜色等，一目了然地显示按钮用于各种目的。

您可以拥有两个遥控器，每个遥控器都提供相同的功能，但其中一个看起来很混乱而另一个则没有。杂乱的外观不仅仅是有多少个字段。

Answer 5

显然，您需要至少N个输入控件才能获得N个输入值的输入。但是，如果N足够大，很可能会因为缺乏或组织而使事情变得混乱。

例如，想象一下，如果您有一个大订单，并且您的家庭邮政地址邮政编码介于信用卡到期数据和送货方式之间，会有多么混乱。

关于如何组织表格有很多资源（在网络发布之前很多好的表格;组织印刷表格也是一种艺术）。

在我看来，最重要的是： 1）组织成清晰可见的部分，以便读者立即知道去哪里或大致了解他必须提供哪些信息。

2）考虑希克的法律 - 组织可以帮助搜索。您不会将“print”命令放在编辑菜单下，也不会将所有命令放在一个长下拉菜单中。想想你放置每个输入的位置。

3）轻松查看哪些内容是可选的以及预期的格式是什么。不要等待验证向用户显示他需要9位数的邮政编码。

4）在同一部分组织输入，以便您可以进行自动填充。例如，如果我输入5位数的邮政编码或州，请自动为我选择US。尝试填写邮政编码等的详细信息。

5）使用正确的输入小部件。如果有四个选项，请不要让用户输入，放一个清除框。

6）在各种显示器上进行测试。

7）在表单填写时保存表单，以便在会话崩溃时用户可以继续。

Answer 6

现在，表单设计正变得越来越科学。您可以嵌入JavaScript来观看鼠标动作以及时间按键和鼠标点击。还有一些眼动追踪研究，以确定哪些布局最容易让人们弄明白。我最近阅读了Luke Wroblewski's Web Form Design，并介绍了基于证据进行的表单重新设计的示例。它甚至可以显示样本表格上的eyetracking，这样你就可以找到减慢人们速度的因素。

这是一本好书。显示有效的布局。告诉你何时应该给予帮助，何时不应该给予帮助。如何短语说明。如何处理表单错误。等等。

亚马逊上有大约6个半星级的设计和可用性书籍。如果您使用表单制作网站，您应该跟上最先进的技术，就像您在编码，部署和测试最佳实践方面的创新一样。

随着转化率的提高，提高网页的可用性会带来巨大的收入差异。了解案件人员摆脱表格的问题至关重要。

Answer 7

你已经回答了自己的问题。如果你有很多问题，你需要很多空间。该空间是否包含物理屏幕区域或“时空”（即点击以更改表单）是唯一合乎逻辑的选择（除了不询问某些问题）。

Answer 8

使用标签页和手风琴也是减少混乱的好方法。

Answer 9

美丽在旁观者的眼中。

• 谷歌很可爱，因为它只有一个文本框，两个按钮和一些指向其他功能的链接。
• 谷歌也很可爱，因为如果你需要高级搜索就可以了，如果没有，那就不行了。
• 谷歌也很可爱，因为你可以把它嵌入个人主页 得到你自己选择的各种neato小部件。

在所有情况下，Google都会与用户保持一致，而不是要求用户遵守Google。

这是良好设计的本质 - 适合用户。

我看到用户指出一些非常丑陋的屏幕，甚至纸质表格，并说 - “请像这样做，因为这有我需要的一切，没有我不知道，我知道在哪里找到所有它的“。对他们来说，令人恐惧的杂乱屏幕是完美的。我讨厌它。

在许多情况下，可自定义的屏幕（如Google主页）是一个胜利，因为用户可以根据自己的喜好使其变得复杂或简单。但只有你能找到一种优雅的方式来提供可定制性而不会分散主要任务的注意力。例如，与搜索区域（屏幕空间的1/3）或小部件相比，谷歌主页自定义链接是一个非常小的空间。

谷歌从最简单的选项（www.google.com）开始，让用户挖掘，直到找到合适的复杂程度。

第一次点击不能让所有人满意，但是你可以在第一次点击时取悦大多数人，下次点击就可以了解更多...

Answer 10

正如bethlakshmi所说，你必须让界面适合用户。如果他们是您自己的人力资源部门，请将其设置为一个包含大量相关表单链接的大型表单，以便他们快速了解并快速填写许多字段。如果他们是您的客户，请将任何有用但非关键字段移至单独的可选页面（例如，Flickr）。如果他们是临时网络用户，则修剪对任何人都有用的绝对最低限度，并添加一种简单的方法来获取更高级的功能（例如Google）。