网页注册表单设计原则

　如果你想最大化你的服务所带来的效益，你就必须最大化你网站表单的成功率。仅仅简单的让用户在你网站上注册是不够的，除非你有能够让访问你网站的人一看就映像深刻的点子。为了让服务达到最大化的体现，我们设计师需要提供用户一个良好的用户体验。我们需要邀请用户，为他们描述服务产品有多少好，给他们解释为什么他们需要填那些表单并且暗示他们会因此得到利益的回报。当然，我们也应该做的非常方便让用户来参与。
　　但是设计有效的页面表单不是件容易的事情。有个不争的事实就是：没人喜欢填表单——无论是线上还是线下的。因此，作为设计师我们需要找出能够让表单百分百简单、直接甚至无痛苦的正确的设计决策。

　　但是怎么样才能准确地找出这些决策？布局上那些链接应该放在表单的什么位置？我们应该怎么设计它？我们应该怎么样高亮标签，应该怎么样排列他们？页面表单设计样式怎么样才符合现代化的网站？我们拿这些问题问我们自己，并且通过实施调查来得到这些结果。

　　下面我们介绍一下现在互联网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%的用纯文本。

　　Large version

　　2.5标签对齐

　　老实说，我们已经预料到可能对齐是一个很强的趋势。但是在我们看来，标签对齐的趋势已经不再那么强烈了。

在调查中41%的网站使用标签右对齐 (YouTube, Facebook, Metacafe)
30%的注册表单使用顶端对齐　(Behance.net, Wufoo, Tickspot, DZone)
29%使用的是左对齐 (Digg, Ning, Wykop.pl, 43things, StupZ).

　　根据“Matteo Penzo的标签放置研究结果”（1996）和“Luke Wroblewski的发现”（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%的注册表单更喜欢用垂直布局的表单。

文章来自中国建站：http://www.jz123.cn/text/046222_3.html

网页注册表单设计原则相关推荐

html5漂亮的登录与注册界面设计,漂亮的网页登陆/注册表单设计
漂亮的网页登陆/注册表单设计 7月 4, 2012 评论 Sponsor 网页设计中登陆和注册表单是非常常用的,而且使用率也非常高,一个表单的设计其实也不是简单的事情,你要考虑很多用户体验,有的喜欢把 ...
UX设计秘诀之注册表单设计，细节决定成败
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...
13 迷人的注册表单设计
13 迷人的注册表单设计 Gist Gravatar Kontain MOJO-Themes Ning Ping Tumblr Vimeo WordPress Wufoo Better Blogger ...
30个非常时尚的网页联系表单设计优秀示例
联系表单是网站最重要的组成部分之一,访客通过联系表单和网站所有者取得联系,反馈信息.新颖的网页表单设计能吸引用户的注意力,让更多的用户填写反馈信息.今天这篇文章和大家分享30个很时尚的网页联系表单设计 ...
经典网页设计：20例与众不同的网页联系表单设计
网站是企业宣传和展示其产品的一个非常好的媒介,同时也是收集用户建议和评价的最佳途径.作为网站最重要的组成部分之一,联系表单是用户反馈信息的重要窗口.联系表单的设计应该具有创意性,能够吸引用户的注意力, ...
html注册表单用户体验,入口的用户体验！注册表单的设计技巧
网上挤满了各种各样的UI设计方案,事实上我们已经有一套套的方案可遵循.但!设计永无止境!哪怕是一个注册表单,也值得再细心研究.下面给出注册表单设计5个小技巧: 1.别让用户重复填写相同的内容几乎每个 ...
B端页面——详细表单设计流程
一.什么是表单? 表单设计是B端产品设计的基础页面,想要做好表单设计首先要搞清楚表单的应用场景. 表单是用户采集数据信息的核心场景,同时又通过表单向用户展示数据信息,简而言之表单是用户与数据库之间的桥 ...
免费 PSD 下载： 20个精美的登录和注册表单
注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...
ajax注册表单用户名实时验证,Ajax注册表单用户名实时验证..doc
Ajax注册表单用户名实时验证. Ajax注册表单用户名实时验证 1.1.1 摘要很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性:从而确保用户之间不拥有相同的用 ...

网页注册表单设计原则

网页注册表单设计原则相关推荐

最新文章

热门文章