2009-06-14 131 views
3

我已经看到许多广告/网站通过与谷歌并排设置并且有像下面这样的标题来吸引凌乱的用户界面:这是您的网站/这是他们的。丑陋的用户界面

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

当你的页面是一个数据输入表单,比如说一个订单输入表单,或者一个新的员工输入表单时,怎么样?

我不能想办法建立需要大量的数据录入不文本框,dropdownlists,复选框的杂乱形式等

当然我可以用把只有一个文本每页,并有50页的数据输入表单或向导,但我认为这对最终用户来说不会有什么好结果。

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

回答

7

如果这类事情上的良好用户界面非常重要(通常并非如此),那么随着用户进展而变化的屏幕会根据需要显示字段,这往往是一个好方法。一些向上组合的向导屏幕也可能是合适的。

但正如我所说,它通常不是在商业应用程序中非常重要。这些信息必须是可以表现出来的,并且熟悉(这种屏幕绝对是熟悉的)。通常,企业用户在一个屏幕上需要更多的字段,因此他们可以一次性定义值,而不必转到不同的屏幕。

此外,大量的字段通常会被高级用户所欣赏,因为它们会进入很多地方,多个屏幕只会减慢速度。

这就是说,谷歌有一个复杂的屏幕。它是高级搜索链接。他们正在做的是保持简单的用例。如果你有一个由数十万人使用的应用程序,那么一个简单的用例绝对是值得的。如果您的商业应用有可能在其有生之年不超过几百人使用,但不一定。

3

而不是试图在超级杂乱和超级空白之间进行选择,为什么不尝试和倾向于一个很好的折衷?如果你可以把你的数据输入表单分成几个逻辑的“页面”,这些页面将许多类似的字段(名字信息,地址信息,以前的工作历史等等)组合在一起,那么你可以找到方法来隔离你拥有的东西每页更好,而不是让它看起来如此混乱。

0

您已回答了您自己的问题。如果你有很多问题,你需要很多空间。无论这个空间是由物理屏幕区域还是“时空”组成(即点击来改变窗体)是唯一的逻辑选项(除了不提问某些问题外)。

2

我不是一个美人(我是一名程序员,而不是一个设计师),但是,谈论谷歌的网页,看看advanced search page - 不是美的事情,但也不是一个眼神,即使它是一个允许输入大量数据的表单。分层对齐的文本输入字段,在其侧面清晰标记“提示”以便解释,“一个或多个”行上有多个字段,表单允许您准备查询的实时反馈,可选“可折叠”区域输入更少需要的数据。我认为这是一种合理的技术组合。

1

显然您至少需要N个输入控件来获得N个输入值的输入。但是,如果N足够大,则很可能会将事情弄糟,并由于缺乏或组织而使其无法使用。

例如,想象一下,如果您有大量订单,并且您的家庭地址邮政编码位于信用卡到期数据和运输方式之间,会有多混乱。

关于如何组织表单(在网络时代之前有许多好的表单;组织表单也是一门艺术)有很多资源。

在我看来,最重要的事情是: 1)组织成清晰可见的部分,所以读者立即知道去哪里或大概知道他将提供什么信息。 2)考虑希克法则 - 组织可以帮助搜索。您不会在编辑菜单下放置“打印”命令,也不会将所有命令放在一个长下拉菜单中。考虑你放置每个输入的位置。

3)可以很容易地看到什么是可选的,以及期望的格式是什么。不要等待验证显示用户他需要9位数的邮政编码。

4)在同一部分组织输入,以便您可以自动填充。例如,如果我输入5位数的邮政编码或州名,则会自动为我选择美国。尝试填写邮政编码等的详细信息。

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

6)在各种显示器上测试。

7)保存表单时,他们正在填充,以便用户可以继续如果会话崩溃。

0

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

1

现在,表格设计正变得更加科学。您可以嵌入JavaScript来观看鼠标动作和时间按键和鼠标点击。还有一些眼动追踪研究,看看哪些布局是人们最容易找到的。我最近读了Luke Wroblewski's Web Form Design,它演示了基于证据完成的表单重新设计示例。它甚至在样本表格上显示眼球追踪,因此您可以选择让人们减慢速度的元素。

这是一本很棒的书。显示工作的布局。告诉你什么时候应该给予帮助,什么时候不应该。如何短语说明。如何处理表单错误。等等。

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

随着转换率的提高,提高页面上的可用性可以使收入发生巨大变化。了解人们如何摆脱形式的问题至关重要。

2

确保:

  • TAB和SHIFT-TAB做用户会期待什么
  • 相关字段组合在一起
  • 你让用户在他们喜欢的格式输入数据(如果他们想例如使用“ - ”和“()”输入电话号码),然后将数据转换为您的内部首选格式。
  • 充分利用字体,颜色和分隔符等,要输入的字段本地整齐。

想想远程控制。一些遥控器是一组无差别的按钮,它们的形状,大小和颜色完全相同。某些遥控器具有明显的按钮分组组合,使用按钮大小,形状,颜色等等,可以让按钮一目了然。

您可以拥有两个遥控器,每个提供相同的功能,但一个看起来很杂乱,另一个看不到。一个混乱的外观不仅仅是有多少领域。

0

美在眼前。

  • 谷歌很可爱,因为它只有一个文本框,两个按钮和一些指向其他功能的链接。
  • 谷歌也是可爱的,因为高级搜索在那里,如果你想要它,而不是如果你不需要。
  • Google也很可爱,因为您可以将它嵌入到个人主页中,并且可以获得您自己选择的各种各样的neato小工具。

在所有情况下,Google都符合用户的要求,而不是要求用户遵守Google。

这是优秀设计的本质 - 适合用户。

我见过用户指向一些相当丑陋的屏幕甚至是纸质表单,并说 - “请像这样做,因为这有我需要的一切,我什么也不需要,我知道在哪里可以找到所有的”。对他们来说,可怕的杂乱的屏幕就是完美的。我讨厌它。

在许多情况下,可自定义的屏幕(如Google主页)是一个胜利,因为用户可以使其变得复杂或简单。但只有当你能找到一种优雅的方式来提供可定制性而不会分心主要任务。例如,与搜索区域(很容易1/3的屏幕空间)或小部件相比,谷歌主页定制链接是一个非常小的房地产。

谷歌从最简单的选项(www.google.com)开始,让用户挖掘,直到他们找到合适的复杂度级别。

你不可能取悦所有的人所有的时间上的第一次点击,但你可以取悦大多数人的第一个点击,和更多的人按第二下...

0

由于bethlakshmi说,你必须适合用户的界面。如果他们是您自己的人力资源部门,请将其制作成一个大表格,并附带大量相关表格链接,以便他们快速浏览并快速填写大量字段。如果他们是您的客户,请将任何有用但不重要的字段移至单独的可选页面(例如Flickr)。如果他们是临时的网络用户,那么修剪到对任何人都有用的绝对最小值,并添加一个简单的方法来获得更高级的功能(例如Google)。