Web注册表单设计样式的研究（第一部分）

Web注册表单设计样式的研究（第一部分）
分类：交互设计 | 发布者：finger
作者：Smashing Editorial    译者：折折熊
原文链接：http://www.jojobox.cn/blog/article.asp?id=134
英文链接：http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
.
如果你想最大化你的服务所带来的效益，你就必须最大化你网站表单的成功率。仅仅简单的让用户在你网站上注册是不够的，除非你有能够让访问你网站的人一看就映像深刻的点子。为了让服务达到最大化的体现，我们设计师需要提供用户一个良好的用户体验。我们需要邀请用户，为他们描述服务产品有多少好，给他们解释为什么他们需要填那些表单并且暗示他们会因此得到利益的回报。当然，我们也应该做的非常方便让用户来参与。
但是设计有效的页面表单不是件容易的事情。有个不争的事实就是：没人喜欢填表单——无论是线上还是线下的。因此，作为设计师我们需要找出能够让表单百分百简单、直接甚至无痛苦的正确的设计决策。
但是怎么样才能准确地找出这些决策？布局上那些链接应该放在表单的什么位置？我们应该怎么设计它？我们应该怎么样高亮标签，应该怎么样排列他们？页面表单设计样式怎么样才符合现代化的网站？我们拿这些问题问我们自己，并且通过实施调查来得到这些结果。
下面我们介绍一下现在互联网web表单设计样式的调查结果。这些结果是分析了100个拥有和web表单相关流程的网站而得出的。我们决定从注册表单开始。
.
注册表单设计调查
调查的目的主要是提供给那些凭知觉来判断有效性的设计师和开发人员参考依据。我们也会介绍一些如何让web表单成为完美的友好用户界面的指导方针。
我们已经选择了100个和web表单有关的大型网站。这些网站是根据博客搜索和Alexa排名以及搜索引擎中的受欢迎程度等方面去考虑选择的。这些网站直接商业目标的影响普遍和他们的web表单相关，因此在流程中需要指定为高优先级进行设计。尤其注册表单是为解释为什么许多评论表单是来自于社会类型的网站的关键。
我们关注注册表单是想把更多关键表单单独开来（例如校验表单）。然后我们分别完成每个被选择网站的注册表单并且分析这些表单的设计方法。
我们在每个表单中利用一个特殊的Email账户和特殊的用户名，为了使调查尽可能地具有广泛性，我们指出29个在设计web表单时会碰到的不同的设计问题和疑问。
我们将它们分类并试图找出相似的设计方针和设计思路。我们试图从可用性观点上着手，不断关注两者的正面和反面的例子并将他们陈列在调查结果中。
请注意这个文章不是关于校验表单——那是另外一个讨论的话题，我们把它独立开来看待成一个即将要讨论的文章。我们要感谢Wufoo为我们提供构架来引导我们的调查。
.
1. 表单的安置
1.1  注册表单链接的标题是怎么样的？
当用户想要加入网站是，用户会寻找正确的短语，用户知道它们应该是“sign- up”，“register”，“join”，“join”，“become a member”或者“creat an account”等。显然，用户期望他们其中之一的链接可以链到注册表单。不幸的是，情况不一定是这样的。

从图表可见，最受欢迎的标题是“Sign up”（40%），接着是“Join”（18%），“Register”（18%）以及“Creat account”（17%），我们观察到极少数有类似于我们去年看到的按钮那样即大，又闪亮，并且写着“start here”的字样。显而易见，设计师与其设计并强调服务的功能性还不如试图去表达信息。
1.2  注册表单的链接放在哪儿？
当用户第一次访问一个站点，他们试图找出单独布局块是代表什么。他们的眼睛运动是跳跃的，并且用户试图了解哪个区域是更重要的，他们想要的内容可能被放在什么地方。为了满足用户体验，设计师需要帮助用户直观地知道哪些是在开始使用服务前所需要做的事。
如果用户找不到通往注册表单的链接，他可能就不会注册你的服务。因此让链接尽可能地显而易见是最关键的。那么设计师应该把“注册”的链接放在什么地方才会让用户感觉更可接近？
根据我们的调查，这个注册链接
59%的网站是放在网站的顶部（其中76%是被放在右上角） 21%的网站是放在首页的突出位置（链接或者表单自己被放在首页上） 有9%是被隐藏在顶部“登陆”链接之后（例如：Craigslist）
实际上注册链接很少被放在侧边栏上（7%-Propeller,Xing），但是4%的站点为用户直接提供服务，只有在用户需要保存设置的时候才需要用户进行注册。
2. 表单的设计
2.1  需要简化注册表单的样式吗？
当用户点击了注册链接之后，他很有可能想要注册你提供的服务。更重要的是，他并没有点击那些探索更深导航操作的链接或者具有吸引力的闪亮的广告链接。
因此，设计师尝试去掉所有没必要的详细资料以及不能帮助用户完成表单的描述。常常只是呈现一个logo和表单自身，没有任何的导航操作和附加信息。想法：用户必须尽可能地关注在他要去完成的任务上。任何会分散用户注意力的因素不得不被删除。

因此，设计师经常使用“最小化”的布局来构建注册表单。根据我们的调查，61%的web表单和普遍的页面相比更简单（例如：MovableType,Livejournal,Amazon,Yandex.ru）

根据雅虎的注册表单可以看出，访问者仅仅需要填写账户信息即可，没有别的干扰因素去分散用户的注意力。注意表单中的语气和语义都是吸引人的对话式，这既简单又友好。

Flixster是个典型的反面例子，它把表单塞得很满，一点也不尊重它的访问者。注册页面上一下子提供了每种可能的操作导航，并且登陆页面上右边的广告比登陆表单还要突出。这样一点也不友好，Photobucket应该是我们见过的第二拥挤的web表单。
2.2  需要提供任何附加信息吗？
许多设计师试图通过类似于帮助、信息内容要求甚至是版权申明的附加信息来鼓励访问者主动填写表格。但是它不同于点对点，在大部分例子中注册的好处依然是通过表单来体现。
41%的表单告诉用户注册的好处 (MySpace,Del.icio.us,Last.fm,LinkedIn,Digg,Mister Wong,Break.com) 28%仅仅是单纯的注册页面，没有任何附加信息 (Pownce,DeviantArt,Dailymotion) 11%告诉用户需要多久时间来填写 (Threadless,Newsvine,Wordpress)
只有很少一部分（6%）网站正面提及在注册过程中所需要填写的信息。一些步骤中会提供一些警告（8%）和示意（6%，例如37signals,Bloglines）
2.3  单页表单 Vs 多页表单
调查结果中，93%的表单是单页表单。显然地，设计师试图帮助用户尽可能快速和无痛苦地完成注册流程。只有一些网站利用多页表单试图把探索用户参数选择结合在注册过程中。
比如，Meebo把一个完整的注册过程整合在一张注册表单中，并且通过一个弹出框的形式为用户提供注册向导。这个表单由6个页面组成，用户通过一些附加信息的选择从而进行他们账户的设置。

2.4  输入框标附加信题需要突出吗？
62%的注册表单用加粗的方式去突出输入框的标题。为了引人注目而不止一个的使用斜体去达到同样的效果。为了让标签能够更加可见，20%的注册表单用色彩，18%的用纯文本。

2.5  标签对齐
老实说，我们已经预料到可能对齐是一个很强的趋势 。但是在我们看来，标签对齐的趋势已经不再那么强烈了。
在调查中41%的网站使用标签右对齐 (YouTube,Facebook,Metacafe) 30%的注册表单使用顶端对齐　(Behance.net,Wufoo,Tickspot,DZone) 29%使用的是左对齐 (Digg,Ning,Wykop.pl,43things,StupZ).

根据“Matteo Penzo’s label placement research”（1996）和“Luke Wroblewski’s findings”（pdf），右对齐能够戏剧性地减少完成时间因为它们几乎不需要眼睛的注视。如果你想要达到相同的目的但是只有一块受实际区 域制约的垂直屏幕，标签顶端对齐则会更好一些。还有以防你的表格要求人们扫描标签去了解什么是必须的（不熟悉或者高级的数据），左对齐则是最好的。
2.6  有多少必填区域？
当进行一个调查时，我们已经注意到表单中的必填项越来越少了。几年前，设计师要求访问者填写他们的姓名、地址、城市和个人兴趣，但现在仅仅只需要登录名、密码和确认密码。

我们发现54%的表单要求用户最多填写5个输入框（其中6%的网站在使用服务前根本不需要注册）。34%的表单使用6-8个输入框，然而有12%的网站顶着用户的忍耐度让他们完成超过9个的必填项。
2.7  有多少可选项？
和上面发现的类似，我们注意到大多数网站避免可选项并且要求用户在完成注册流程之后补全可选项。其中62%的表单根本就没有可选项，还有98%的表单有少于5个的可选项。

2.8  垂直或者水平的安排区域
在这个方面，垂直无阻碍延伸的垂直布局区域是注册表单表现出强大趋势。86%的网站把输入框垂直布局。除此以外，15%的布局更强调利用漂亮且吸引人的视觉设计来让访问者在填写表单时感到更舒适。

Box.net提供了一个简单的垂直布局的输入区域。当用户输入数据的时候，他们的眼睛固定在纵轴输入框左侧的交叉点上。

Mint 是一个横向布局的注册表单。当用户输入数据的时候，他们的眼睛需要跳来跳出。
更多的发现
调查结果中18%的注册表单旁边都会有登录表单或者登录连接。（例如, YouTube, Reddit, Digg, Lulu, Metacafe） 78%的注册表单没有用星号或者高光去表示必选框；大多数情况无论星号或者其他形式的高光都不会被使用。 9%的注册表单用流程指示来告诉用户他们进行到哪一步了，并且告诉他们哪些步骤是完成注册的必填项。 85%的站点更喜欢用尽可能简单的web表单。 区域通常都是用空白区来群组和拆分的，有时边框的用途也和空白区一样（22%），还有9%的情况是利用不同的背景色来区分。
概要
让我们来为这个web表单设计样式调查的第一部分做一个总结。请记住，我们只考虑注册表单。
注册链接的标题大多数是“sign up”（40%）并且被放在右上角。 注册表单为了避免分散用户的注意力而使用简单的样式。 93%的注册表单是单页表单。 41%的注册表单通过解释注册的优势来吸引用户注册。 62%的输入框标题是通过加粗高亮的。 标签不是都排成一条直线的。 设计师试图不用必填项和可选项。 86%的注册表单更喜欢用垂直布局的表单。