编译：四眼天兔工作室 资料来源：SMASHING MAGAZINE
如果你想最大化你的服务收入，你需要加强你的网站表单的完整填写率。除非你有一些创新的理念吸引你的访问者，否则，要想让用户注册你的网站 并不是一件容易的事情。为了实现最大化，作为网站的设计人员，需要提供良好的用户体验。我们要想办法邀请用户，向他们描述我们提供的服务流程，解释为什么 需要填写这些表单以及他们将为此获得的回报是什么。当然，我们必须让所有这些都变得简单，易于上手。
然而，设计一个有效的网页表单并不容易。理由很简单：没人愿意去填写一个表单，无论是线上还是线下。因此，作为一个设计人员，我们需要策划一个好的设计样式让表单填写变得简单、具有直观性及趣味性。
但是，我们应该如何策划呢。什么地方放链接？如何设计？如何突出标签以及对齐他们？如何让表单看着更现代化？这些也都是我们在问自己的。而答案就在下面的这个调查研究里面。
下面就是我们对全球100个流行网站分析的结果。我们先从登陆表单开始。第二部分会在下次的文章中发表。感谢Wufoo为我们提供了调查表单。
注册表单样式调查报告
该份调查报告的目的是提供给网页开发人员和设计人员一些如何有效设计网页表单的直观建议。我们也会提供一些对于设计用户友好界面的网页表单的思路。
我们选择了带有表单设计的全球范围的100个大型网站。这些网站在Alexa以及搜索排名上都很靠前，代表了不同类型的网站。我们通过这些 调查告诉读者为什么网页表单对企业发展目标具有重要性以及为什么它们在网页设计过程中具有高优先级。特别需要指出的是，为什么登陆表单对于很多社交型网站 如此重要。
我们通过使用专门的e-mail账号和用户名对这些网站进行了注册。为了使调查研究更为全面，我们设计了29个不同的问题和答案，希望这些对你的网页表单设计有所帮助。
请注意，该份报告不包含审核表单——这将是另一个话题，我们将在下次的文章中重点讨论。
1. 表单位置
1.1. 如何设计注册标题？
用户知道，网站提供登陆、注册、加入等标签按钮使它们成为网站的会员，并拥有只属于自己的账户。很明显，用户希望能够直接在网页上看到这样的链接字样引导他们进入登陆链接。不过很不幸的是，事实并非如此。
最常使用的名称是“Sign up 注册”（40％），然后是“Join 加入”（18％），“Register 注册”（18％），“Create account 创建账户”（17％）。我们发现现在已经很少有网站在使用过去非常流行的“从这里开始 start here”的按钮。很明显，设计师们都在试图传递信息，而不是设计或者强调服务的功能性。
1.2. 登陆表单应该放在什么位置？
当用户第一次访问一个站点的时候，他们首先会对整个网页的布局进行初步认识。他们的眼睛会快速的从一个板块跳转到另外一个板块，从而确认哪个板块是最重要的以及哪些内容是他们正在寻找的。为了满足用户的需要，设计师应该设计更直观的界面帮助用户开始使用网站服务。
如果用户找不到登陆窗口，那么他们就会放弃注册你的网站服务。因此，登陆窗口链接的位置非常重要。设计师应该将登陆窗口链接放在最明显的位置。
根据调查研究显示，登陆窗口链接
▪ 59％置于网站开头位置（其中76％放在了右上角）
▪ 21％置于首页最显著的位置（首页直接显示登陆表单）
▪ 9％隐藏在了页面开头“注册”链接后(例如:Craigslist)
将登陆表单放在侧栏也并不希奇（7％，例如Propeller, Xing）。但是，也有4％的网站无须注册即可使用网站服务，只有当用户需要储存一些设定的时候才需要进行登陆注册。
2. 表单设计
2.1. 登陆表单布局是否简化？
既然用户点击了登陆链接，那么标明他决定注册你的网站服务。重要的是，用户并不会点击更多的链接或者极具吸引力的广告。
因此，设计师应该移除不必要的细节和分散注意力的内容，这些将影响用户填写表单。通常，只需要一个LOGO和表单就可以了，不需要任何的导航选项和多余的信息。
由于用户想要的是登陆以后的服务，因此填写表单的过程应该尽可能的简单。设计师通常使用最小化的布局设计登陆表单样式。基于我们的调查显示，61％的网页表单相对于整个网页布局来说都是相当简单的（例如MovableType, Livejournal, Amazon, Yandex.ru）。
下面我们来看看Yahoo的登陆表单。提供给用户的只有创建账户用的表单，其它什么都没有。注意，页面的语调和语言都十分口语化，且极具吸引力。这是一个简单的，易于上手以及用户友好的表单。
Flixster 可能是最好的一个负面例子。注册页面上汇集了所有可能的导航选项，而且还在注册表单右侧堆满了广告。这就不是一个用户友好界面。第二个我们看到的最忙碌的页面应该是Photobucket了。
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. 单页面表单和多页面表单
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, StudiVZ).
根据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%的表单没有选填项，38％的表单有少于5个选填项。
2.8. 垂直还是水平放置表单选项？
调查标明现在表单的布局趋势是使用垂直方向安排表单选项。86％的网站采用垂直表单。其中15％强调了漂亮，吸引人的视觉设计来吸引用户并让用户能够舒适的填写表单。
Box.net 提供了一个简单的垂直输入表单。当用户填写资料的时候眼睛会处在垂直方向，而不用左右移动。
Mint 提供了一个水平方向的注册表单。当用户输入信息的时候眼睛需要从一个区域跳转到另外一个区域。
其它发现：
▪ 18%的网站会在注册窗口或链接后再放一个登陆窗口。(例如YouTube, Reddit, Digg, Lulu, Metacafe)。
▪ 78%没有使用星号来突出显示需要填写的项目；大多数网站既没有使用星号也没有使用其它形式来修饰突出项。
▪ 9%的网站使用了步骤提示向用户标明当前位置，需要填写的步骤等。
▪ 85%的网站都倾向于使用简单的网页表单设计以及尽可能少的填写项。
▪ 填写区域通常使用不同的形式按组隔开，69％使用空白边，22％使用线条，9％使用不同的颜色背景。
总结
让我们总结一下第一部份的调查研究结果。请切记，这些都是针对登陆／注册表单的。
▪ 40％的注册链接使用的名称是“注册 sign up”，并且都放置在网页的右上角；
▪ 61％的注册表单布局都十分简单，避免分散用户的注意力；
▪ 93％的网站都使用单页注册表单；
▪ 41％的网站通过解释注册权益来吸引用户注册；
▪ 62％的网站使用黑体字来突出显示输入区的标题；
▪ 标签对齐方式没有明显的设计趋势；
▪ 设计师都试图使用较少的必填选项；
▪ 设计师都试图减少可选项；
▪ 86％的网站使用垂直表单布局来代替水平表单布局。
下周，我们将发布本次调查研究的第二部分。
博文
没有评论:
发表评论