WEB注册表单的设计 -- 用户研究 -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> 用户研究 --> WEB注册表单的设计

WEB注册表单的设计

浏览:4117次出处信息

注册流程的表单应该做到友好、清晰、合理和一致。在设计时应避免各种各样的分散因素，给用户提供一个清晰明确并且简单的web表单。注册表单的难易程度与用户的注册成功率和注册速度是成反比的。所以注册页面信息架构需要清晰简洁，注册表单作为信息主体，除了LOGO，帮助信息以及一些必要的返回链接，避免其他一切会干扰注册的信息，保障用户专心走完注册流程。在设计网站注册流程时应该考虑以下问题：

（一）表单数量

不要有注册门槛，一些信息可以再以后的应用中进一步挖掘。通常情况下，网站的用户希望填写的信息越少越好，而对于网站来讲，希望用户填写更多的信息，这样有利于网站收集更多的数据。如何在这两者之间寻找一个平衡点，网站的决策者需要考虑很多因素。我们需要把用户的体验放在第一位，尽量将表单数量降到最低，不要让用户填写那些没有用的信息。

现在有些网站使用快速注册的方式鼓励用户注册，快速注册的必填项包括：帐号（E-mail），密码，重复密码（如果用E-mail作为账号，可以省略），条款，要填写的信息非常少。一个网站如果能够真正吸引住用户，用户为了自己的需要会去主动完善自己的信息。况且，注册是用户体验该网站的开始，不要一开始就要给用户一种网站要掏用户隐私的感觉。

我们可以允许用户对网站有一定的了解之后再去完善个人信息。如果一个表单需要填写很多信息，且设计得很混乱，这样的表单会给用户一种压迫感，使用户过早的放弃注册，降低注册的成功率。

（二）表单标签设计

1.标签对齐方式

主要有三种对齐方式：垂直顶对齐、水平左对齐和水平右对齐。现在绝大数的网站注册表单的标签对齐方式是水平右对齐。

（1）垂直顶对齐。它主要适用于填写表单数量少的情况，因为垂直顶占用的空间是水平对齐的2倍。这种对齐方式的好处是用户可以在一列中向下进行扫视，而不用去左右扫视。

（2）水平右对齐。目前大多数网站都用的是水平右对齐方式，用户在使用右对齐时操作会比较快捷，用户填写表单时会更加快速方便。右对齐缩短了标签与输入框之间的距离，便于它们的一一对应；水平右对齐适用于那些表单排版不整齐的情况下。这种对齐方式特别适用于中文标签长度不一致时，这样会给人一种很舒服的感觉。

（3）水平左对齐。左对齐便于用户对输入标签的扫描，但从标签到输入区的路径较长，会影响到填写速度。水平左对齐适用于那些表格排版相对整齐（宽度/填写内容），并且用户可以很好理解所填写的内容。虽然标签左对齐被认为会使表单填写最慢，那是因为需要更多的眼部注视和更长距离的视线移动。标签左对齐的表单通常是更整齐、更清晰的布局，传达信息更清晰。它们能使用户快速的扫视每个标签，增加了标签的可读性。

2.视觉设计

表单标签设为粗体更能让标签在前景中突显出来，用户也会觉得使用粗体标签将使填写变得更容易。如果想让用户去看标签，那就使用带阴影或有颜色字体的标签。如果标签不重要，那就不用刻意去这样做。我们需要避免用户在填写信息时感到迷惑。

（三）提示信息设计

字段内容控制提示。尽可能描述清楚每个字段所支持的情况。通常情况下提示信息应不引人注目但清晰，与标签的字体颜色要有区别，应淡一些，通常会用灰色，做到不去干扰用户。提示信息应该做到言简意赅，不要整段整段的出现，这样会让用户感觉到有种压迫感。

1.提示信息表现形式

是静态的帮助提示，还是动态的帮助提示？静态的帮助提示只是之前假定好的一些和用户有关的提示信息，被放在输入框的旁边。动态的提示信息通常是在一些帮助图标被点击之后或者输入框获得焦点时才会出现的。如果提示信息比较多，可以用动态提示信息，动态提示给用户的感觉是比较简单和清晰。如果一开始就显示很多，会让用户感觉到这个网站规则太多，很不爽。当然这里需要更多的考虑用户心理。

2.提示信息的位置

提示信息需要被用户方便地发现和理解。

（1）在输入框下面。这样做的坏处是会拉长页面。而不需要用户左右摇头，提示信息与输入框有明确的从属关系。而且提示信息可以占据更宽的位置，这样会使文字显得更加精简。

（2）在输入框的右侧。这样做可以节约页面长度，现在很多网站将提示信息放在输入框的右侧。当然这样会使页面文字比较多且密集，会增加页面宽度，用户需要左右摇头。如果提示文字比较少，可以用此方式。

（3）其它位置，输入框的上方或左侧。

（四）反馈信息的设计

及时验证录入字段信息。提示用户填入的字段是否正确，避免整个表单提交后再提示给用户，给用户带来的挫折感以及不必要的返回操作。

1.信息正确的反馈设计

信息正确的反馈会鼓励用户填写剩下的信息，同时也要考虑反馈信息出现的位置。一般会出现信息正确的辅助图标，大数情况下是绿色对勾。

2. 警示信息的设计

（1）警示信息出现时间。

在填写表单后即时显示警示信息；还是在点击提交按钮之后显示警示信息。有的网站没有即时显示，用户提交表单后才告诉用户哪里错了，而且还要重新填写密码，对用户非常不友好。警示信息不要过于敏感，有的网站当用户什么也没有填写时，点击页面空白处就会触发警示信息。

（2）警示信息的视觉设计。

需要考虑是突出错误发生地，还是警示信息本身。大部分警示信息使用红色的字体，或者加上红色的底色。警示信息的辅助图标，有感叹号，X号和禁止通行图标。感叹号，在交通标志中表示危险，X号表示错误。红圈中心横向白线，在交通标志表示禁止通行。个人感觉用红圈中心横向白线比较好，毕竟用户并没有做错什么，也不会有什么危险。也需要考虑反馈信息出现的位置，同时尽量避免出现弹出框的警示提醒。

（五）文案设计

表单的方案要做到简单、明确。质量重于数量，一针见血地说出亮点，而非平铺罗列尽力避免有特殊含义的文案，如果有专属名词请一定要解释清楚，避免用户的困惑尽力思考文案表面的亮点，什么才最吸引用户，有时“最新”字样不一定是用户最感兴趣的在我们以往的项目中多项数据和实践强调证明文案真的很重要

（六）注册帐户的设计

1.网站账号一般为用户名或E-mail。

账号选择邮箱地址和手机号（使用手机号注册也可能会让用户产生扣除话费及个人隐私的担忧，使用时要谨慎。），便于记忆和找回密码，同时也方便用于以后的营销。

使用英文字母作为账号时容易出现“该用户名已被注册”的情况。很容易导致不记得账号。使用纯数字作为账号，很容易加大记忆难度。如果该账号汇频繁使用的，可以使用数字作为账号，比如QQ。使用数字账号还有一个好处是适合那些不懂英文或拼音的人群使用，如老人或小孩，扩大了人群范围。

当被提示“该用户名已被注册”时，系统是否有必要自动生成不重复的用户名供用户选择。是否需要提供给用户一个登录表单或者登录连接，有可能是用户忘记在网站注册过。

有些网站注册时需要输入两次账号，主要是防止用户不小心输入错误的账号而导致用户无法登陆。

2.账号的检测。

包括自动检测、手动检测和提交后检测。自动检测，当用户输入完账号后，点击下个输入框的时候自动默认输入用户名完成开始检测。手动检测，提供一个检测账号的按钮。最后一种是提交表单后，系统才告诉账号是否可用。其中自动检测用户体验最好。

（七）关于密码的设计

一些网站，在注册时是不需要输入密码的，而是系统把密码发送到用户注册的邮箱。个人并不赞成这种方法。因为用户为了改为自己熟悉的密码，不得不多两道流程：打开邮箱查看密码；更改密码。增加了用户的负担，不能给用户带来良好的体验。

1.密码安全程度。

有的网站会为用户实时显示密码安全程度，以此来提醒用户设置密码的安全性。密码的安全性验证。这个对于企业服务，金融等高安全要求的网站尤为重要。以twitter为例（http://twitter.com/signup），它将370个常用组合字母或词汇禁用，使用这些作为密码都会被提示为：“Too obvious”。

2.确认密码。

因为输入的密码以星号显示出来，所以绝大多数网站密码字段需要两次输入。这样做是否增加了用户负担。有数据显示， 72%的情况是有必要确认密码的，但是许多例如Facebook，Friendster，LinkedIn, Stumbleupon, Pownce 和Twitter的网站都不要求确认密码。减少这一步的前提是注册邮箱不能填写错误。初始输入密码的输入框应该不允许复制，重复输入密码的输入框应该不允许粘贴，要达到重复输入密码的设计目的，确保输入的密码是正确的一致的。

3.密码保护信息。

a.密码提示问题。网站会提供一些设定好的问题，并应该允许用户 “自定义”密码提示问题。提示问题不要含糊不清。问题的答案不要有多种可能，如格式不一样，可能缩写等。

b.密码保护邮箱（安全邮箱）。主要可以通过该邮箱找回密码。因为很少使用此功能，所以用户很可能会忘记哪个邮箱是密码保护邮箱。如何提醒用户呢？是否可以直接告诉用户密码保护邮箱，或者只告诉用户，邮箱所属的网站，尽量让用户可以方便记起。可以在验证通过页面提供到安全邮箱的链接，省去了用户输入邮箱地址，减轻用户的负担。

（八）验证码

验证码的主要作用是防止恶意注册，常见的有图片验证码和问答型验证码。（推荐个强大第三方验证码服务提供商http://recaptcha.net/）

对于网站来说，验证码越复杂越安全，从用户的角度来看，越简单越好。有的网站是不能在不刷新页面的情况下实时刷新校验码的，这个在可用性上是非常糟糕的一件事。网站使用校验码，应该是易读的，或者在不可读的情况用户可以实时刷新校验码。一定要简单，不要让用户去猜。国内有的用中文进行校验，个人感觉这样会增加用户的负担，中间还要切换输入法。

最好是全英文或者全数字，这样可以减轻用户的负担。全英文应该告知是否区分大小写。当然全数字，可能是最简单的。还有字符要单独占位，不要相互叠加，背景色不要对字符形成干扰，不要让用户在注册时花很长时间。

验证码的图片或者问题在验证码字段输入框被鼠标触发后再显示，避免之前录入信息消耗了太多时间而引起的验证码过期。（如果之前需要录入的信息很少或很简单，则可以省掉这一步。）

（九）服务条款和注册后出口

1.服务条款和提交按钮

（1）服务条款表现形式。

出于法律规定，服务条款每个网站都会有的，但是被用户阅读的概率几乎为零。这个服务条款的存在形式主要有两种，一句话的链接和浏览框形式，勾选该项后方可注册（或默认是勾选的），还有就是无需勾选，直接把“同意”写到提交按钮上。

a.用一句话做链接，放在提交按钮的下边，以新窗口打开，不影响用户的注册流程，提交按钮含有同意条款的表述。b.勾选该项后方可注册，或已默认勾选。c.浏览框的形式。注册时到底会有多少用户阅读服务条款呢?

（2）提交按钮的对齐方式：提交按钮左对齐，右对齐，中间。

2.注册后出口：感谢信息

注册完后，用户将去哪里？大多数网站在成功注册之后会提供一个简单的感谢信息（通常还带有一个登录的链接），并提供网站主要功能的入口，还鼓励用户使用网站的其它功能。还有的只提供了一个基础的“谢谢你”的消息，或直接跳转到首页，或去验证邮箱。

（十）其它

1. 填写表单的好处

注册前需要告诉用户注册网站的好处，很多用户是在吃到闭门羹时才去注册网站的。

2.单页与多页表单

表单数量过多，可以考虑设计成多页表单，但是一定要告诉用户，一共有几步，现在在哪里，将要去哪里。注册步骤引导可以是文字，也可以是图片。

如果单页表单过长，可以进行逻辑分组，并将相关的控件放在一起。这样在填写表单时，用户会感到比较有条理。

3. 表单的必填项和选填项

表单的必填项和选填项的关系要清晰，包括哪些是必填项，哪些是选填项，以及它们之间的逻辑关系、显示关系。这些可以通过视觉设计和布局来区分。有的将可选项设计为斜体并用其它弱色表明。有的是将必填项和选填项进行分组。常用的是在必填项加*号，用来区分必填项与选填项。现在需要考虑是否有必要在必填项的标签前加*号（全为必填项除外）。

所有必填项均符合要求后，“提交”按钮方可点击，否则为置灰不可选。

4.有必要确认E-mail吗？

只有小部分的网站需要确认E-mail。我们没有任何理由让用户重复输入E-mail地址，毕竟用户能够看到他们输的是什么，因为E-mail地址的区域不像是密码区域那样是以星状显示的。

5.需要使用取消按钮和重置按钮吗？

当然不需要，用户不想注册了，可以直接关闭网页，结束注册流程。这些情况中的一些取消按钮正好出现在“条款和协议”的下面。所以如果用户不同意服务条款，他们会退出这个流程。

6.注册页面宽度

页面宽度为800px时，用户会聚集在屏幕的中心位置，不用左看右看。

7.自动识别填写

有的输入值可以默认为系统识别的值，不必用户填写，当然用户可以根据自己的实际情况修改，如填写地址。

8.新的页面的出现

尽量不要设置跳出页面的链接，注册是单线流程，如果提示的内容很多，可以使用层弹出的展现方式。