本文转自:http://www.5istudy.cn/news/tech/web-form-5874.html
如果你想最大化你的服务所带来的效益,你就必须最大化你网站表单的成功率。仅仅简单的让用户在你网站上注册是不够的,除非你有能够让访问你网站的人一看就映像深刻的点子。为了让服务达到最大化的体现,我们设计师需要提供用户一个良好的用户体验。我们需要邀请用户,为他们描述服务产品有多少好,给他们解释为什么他们需要填那些表单并且暗示他们会因此得到利益的回报。当然,我们也应该做的非常方便让用户来参与。
但是设计有效的页面表单不是件容易的事情。有个不争的事实就是:没人喜欢填表单——无论是线上还是线下的。因此,作为设计师我们需要找出能够让表单百分百简单、直接甚至无痛苦的正确的设计决策。
但是怎么样才能准确地找出这些决策?布局上那些链接应该放在表单的什么位置?我们应该怎么设计它?我们应该怎么样高亮标签,应该怎么样排列他们?页面表单设计样式怎么样才符合现代化的网站?我们拿这些问题问我们自己,并且通过实施调查来得到这些结果。
下面我们介绍一下现在互联网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”等。显然,用户期望他们其中之一的链接可以链到注册表单。不幸的是,情况不一定是这样的。
因此,设计师经常使用“最小化”的布局来构建注册表单。根据我们的调查,61%的web表单和普遍的页面相比更简单(例如:
根据雅虎的注册表单可以看出,访问者仅仅需要填写账户信息即可,没有别的干扰因素去分散用户的注意力。注意表单中的语气和语义都是吸引人的对话式,这既简单又友好。
2.4输入框标附加信题需要突出吗?
62%的注册表单用加粗的方式去突出输入框的标题。为了引人注目而不止一个的使用斜体去达到同样的效果。为了让标签能够更加可见,20%的注册表单用色彩,18%的用纯文本。
Large version
2.5标签对齐
老实说,我们已经预料到可能对齐是一个很强的趋势 。但是在我们看来,标签对齐的趋势已经不再那么强烈了。
根据“Matteo Penzo的标签放置研究结果”(1996)和“Luke Wroblewski的发现”(PDF),标签顶端对齐能够戏剧性地减少完成时间因为它们几乎不需要眼睛的注视。如果你想要达到相同的目的但是只有一块受实际区域制约的垂直屏幕,右对齐则会更好一些。还有以防你的表格要求人们扫描标签去了解什么是必须的(不熟悉或者高级的数据),左对齐则是最好的。
2.6有多少必填区域?
当进行一个调查时,我们已经注意到表单中的必填项越来越少了。几年前,设计师要求访问者填写他们的姓名、地址、城市和个人兴趣,但现在仅仅只需要登录名、密码和确认密码。
我们发现54%的表单要求用户最多填写5个输入框(其中6%的网站在使用服务前根本不需要注册)。34%的表单使用6-8个输入框,然而有12%的网站顶着用户的忍耐度让他们完成超过9个的必填项。
2.7有多少可选项?
和上面发现的类似,我们注意到大多数网站避免可选项并且要求用户在完成注册流程之后补全可选项。其中62%的表单根本就没有可选项,还有98%的表单有少于5个的可选项。
Mint是一个横向布局的注册表单。当用户输入数据的时候,他们的眼睛需要跳来跳出。
更多的发现
调查结果中18%的注册表单旁边都会有登录表单或者登录连接。(例如, YouTube, Reddit, Digg, Lulu, Metacafe)
78%的注册表单没有用星号或者高光去表示必选框;大多数情况无论星号或者其他形式的高光都不会被使用。
9%的注册表单用流程指示来告诉用户他们进行到哪一步了,并且告诉他们哪些步骤是完成注册的必填项。
85%的站点更喜欢用尽可能简单的web表单。
区域通常都是用空白区来群组和拆分的,有时边框的用途也和空白区一样(22%),还有9%的情况是利用不同的背景色来区分。
概要
让我们来为这个web表单设计样式调查的第一部分做一个总结。请记住,我们只考虑注册表单。
注册链接的标题大多数是“sign up”(40%)并且被放在右上角。
注册表单为了避免分散用户的注意力而使用简单的样式。
93%的注册表单是单页表单。
41%的注册表单通过解释注册的优势来吸引用户注册。
62%的输入框标题是通过加粗高亮的。
标签不是都排成一条直线的。
设计师试图不用必填项和可选项。
86%的注册表单更喜欢用垂直布局的表单。