网站注册流程的分析与研究

本文旨在提高网站注册的成功率,让用户在注册时有一个良好的体验,用户可以方便的填完注册表单的各项内容,快速完成注册流程。在这里我并不希望告诉大家一个标准答案,也无法给出一个标准答案,因为每个网站有各自的情况,网站定位,用户人群,技术实力,重视程度都不同。我只是想归纳下,在做注册流程时应该注意哪些问题。

本文分为三部分,第一部分参考了众多前辈写的相关文章,并进行了系统的整理,并加上了自己的一些主观意识。由于参考的文章众多,在这里不一一列举了。第二部分,主要对国内外一些网站的注册流程进行了测试,提出了一些问题和建议。第三部分,从理论到实践,再到理论。归纳总结出在整个注册流程设计中应该注意的问题,使之更加系统和详细。

一、网站注册流程设计资料整理

注册流程的表单应该做到友好、清晰、合理和一致。在设计时应避免各种各样的分散因素,给用户提供一个清晰明确并且简单的web表单。注册表单的难易程度与用户的注册成功率和注册速度是成反比的。在设计网站注册流程时应该考虑以下问题:

(一)表单数量

通常情况下,网站的用户希望填写的信息越少越好,可以马上浏览整个网站。而对于网站来讲,希望用户填写更多的信息,这样有利于网站收集更多的数据。当然如何在这两者之间寻找一个平衡点是非常困难的,网站的决策者需要考虑很多因素。当然我们需要把用户的体验放在第一位,尽量将表单数量降到最低,不要让用户填写那些没有用的信息。

现在有些网站使用快速注册的方式鼓励用户注册,快速注册的必填项包括:帐号(E-mail),密码,重复密码(如果用E-mail作为账号,可以省略),条款,要填写的信息非常少,与登录网站时填写的信息一样多。一个网站如果能够真正吸引住用户,用户为了自己的需要会去主动完善自己的信息。

我们可以允许用户对网站有一定的了解之后,再去注册,或者有些功能的使用需要完善用户的个人信息。当然一些社交类网站希望用户提供更加详细的个人资料,这样可以更好的为用户提供服务,如填写教育背景,可以找到自己的校友,可能认识的人等。

如果一个表单需要填写很多的信息,且设计的很混乱,这样的表单会给用户一种压迫感,使用户过早的放弃注册,降低注册的成功率。

(二)表单标签设计

1.标签对齐方式

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

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

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

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

2.视觉设计

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

(三)提示信息设计

通常情况下提示信息应不引人注目但清晰,与标签的字体颜色要有区别,应淡一些,通常会用灰色,做到不去干扰用户。提示信息应该做到言简意赅,不要整段整段的出现,这样会让用户感觉到有种压迫感。

1.提示信息表现形式

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

2.提示信息的位置

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

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

(2)在输入框的右侧。

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

(3)其它位置, 输入框的上方或左侧。

(四)反馈信息的设计

1.信息正确的反馈设计

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

2. 警示信息的设计

(1)警示信息出现时间。

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

(2)警示信息的视觉设计。

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

也需要考虑反馈信息出现的位置,同时尽量避免出现弹出框的警示提醒。

(五)文案设计

表单的方案要做到简单、明确。

a. 质量重于数量,一针见血地说出亮点,而非平铺罗列

b. 尽力避免有特殊含义的文案,如果有专属名词请一定要解释清楚,避免用户的困惑

c. 尽力思考文案表面的亮点,什么才最吸引用户,有时“最新”字样不一定是用户最感兴趣的

d. 在我们以往的项目中多项数据和实践强调证明文案真的很重要

(六)注册帐户的设计

1.网站账号一般为用户名或E-mail,或者是两者兼有。

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

2.账号的检测。

包括自动检测、 手动检测和提交后检测。自动检测,当用户输入完账号后,点击下个输入框的时候自动默认输入用户名完成开始检测。手动检测,提供一个检测账号的按钮。最后一种是提交表单后,系统才告诉账号是否可用。个人感觉自动检测比较好,非常友好,技术实现上也不会太难。

(七)关于密码的设计

1.密码安全程度。

有的网站会为用户实时显示密码安全程度,以此来提醒用户设置密码的安全性。这种情况下,应该显示满分是多少,不要让用户去猜。当然这种设计有没有必要,用户是否会改变他们常用的密码,还需要考虑。

2.确认密码。

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

3.密码保护信息。

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

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

(八)校验码

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

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

(九)服务条款和注册后出口

1.服务条款和提交按钮

(1)服务条款表现形式。

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

(2)提交按钮的对齐方式:提交按钮左对齐,右对齐,中间。

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

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

(十)其它

1. 填写表单的好处

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

2.单页与多页表单

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

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

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

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

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

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

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

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

6.注册页面宽度

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

7.自动识别填写

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

8.新的页面的出现

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

————————————————————————————————————

第一次写这么长的文章,难免有错误,加之本人乃半路出家,水平有限,肯定有不足之处,欢迎指正(拍砖也是允许的)。

二、国内外各大网站注册流程分析情况与建议

(一)

搜狐通行证一共有六个必填项和三个选填项,但是属于必填项的验证码放在了选填项的下边,不知道验证码属于必填项还是选填项? 对表单进行了分类,分为帐户基本信息(均为必填项)和帐户其它信息(选填项),分类标题文字进行了加粗,输入框标签文字并未加粗。标签左对齐,在字数小于4的时候,字距间有一空格,这样可以对齐长度不一的标签。

1.提示信息

为触发时显示,出现在输入框的右侧,当焦点离开输入框后提示信息消失。标签的颜色与提示文字的颜色对比效果不明显,为同一颜色。建议将标签文字颜色加深,突出主要信息。

2.反馈信息

在填写表单后即时显示信息(验证码除外)。

(1)正确信息设计:图标为常用的图标,显示在标签的左侧。用户名成功后,在输入框右侧提示:恭喜您,此用户名可用。字体颜色与标签颜色一样,并不是很突出。其它只在标签的左侧显示图标。

(2)警示信息的设计:图标为感叹号,图标显示在标签的左边,而警示信息却在输入框的右边,造成了警示信息的“两地分居”,建议让信息不要再“两地分居”。

3.账号信息

当用户名已被占用时,系统会自动产生同样用户名的其它域名供用户选择。全部被占用时,会提示此用户名已被使用,请重新填写!未自动产生不重复的用户名供用户选择,没出现登陆的提示。

4.关于密码的设计

(1)输入密码后有密码安全强度提示,输入密码框不可以复制和粘贴。

密码提示信息为

密码区分大小字,是不是可是提示Caps Lock键是否开启。

密码最长长度有限制,但可惜密码长度可以填写到17位,结果还会出现密码不足6位!建议将密码长度限制为密码最长长度16位,警示语改为密码长度不能超过16位。

当第一次输入密码时,如果格式错了,还会允许并提示用户重新输入一遍密码,而且警示信息放在了“确认密码”输入框后边,而不是事发地。确认密码,是不是改成“再次输入密码”更好。

 

(2)通行证的注册有密码提示问题,允许用户自定义密码提示问题。当选择我父亲的生日或我母亲的生日会提示生日的填写格式,并且点击“选择”按钮会显示出一个日历供用户选择。

这样可以,数字属于英文?

是否应该把不同问题的提示信息分开,关于时间的问题只要有时间的格式标准就好了。感觉是不是规定的太多了,每个用户都有自己的时间填写格式,需要用户改变自己的习惯。生日日期的限制应该是多大?是不是给用户多一点自由。

5.验证码

验证码的验证不能即时显示结果,要提交后再提示。验证码后边的提示上有“两个汉字”可是图片中却有三个汉字,需要输入几个?前两个?后两个?验证码为中文,而且文字的颜色非常绚丽,非常醒目。中文真的很好吗?还要切换输入法。我试着填写了两个汉字,提示错误,让人不能接受的是,密码还要重新输入,要这样惩罚用户吗?(这个问题现已经在文章发布之前改过来了,改为

验证码放在了选填项分类的下边,是可以选填项吗?有灰色作为底色来区分,但是逻辑上不通,必填项分类也有用灰色作为底色来区分。当然只点击输入框,不填写验证码直接提交表单,表单头会出现:验证码不能为空(当不点击验证码的输入框,直接提交表单会弹出提示框)。如果验证码填写有误,警示信息会出现在表单头,验证码不正确,请重新输入!

6.选填项

(1)身份证号:有提示信息。提示一直出现在身份证号输入框的右边,是不是有必要突出。

(2)手机号码:没有任何提示信息。不告诉用户填写手机号码的好处。当然答案可以在注册后找到,将手机与通行证帐号绑定,可享受到手机找回密码、手机发表博文、手机发表社区文章等功能,提前标明是不是更好。

(3)备用邮箱:填写备用邮箱的好处是可以帮助用户找回密码,而且是免费绑定啊(难道还要收费不成)。是否可以将该项放在选填项的第一位,让用户填写。相比较来说,这三个选填项中,填写备用邮箱的概率要高于填写身份证号和手机号码的概率。

7.服务条款和提交按钮的对齐方式

服务条款出现在提交按钮的下边,以浏览框的形式显示出来。只用“点击提交,即表示你同意接受下面的《搜狐网络服务使用协议》”这样的提示语提示了下,很不显眼。还有个致命的问题,浏览框居然可以编辑。没想到搜狐给我们修改《搜狐网络服务使用协议》的权利。

如果有必填项没有填写,提交注册信息后,鼠标会自动聚焦到没有填写的必填项的输入框(按照必填项的上下顺序),但是不会自动聚集到验证码。

8.注册成功后去向

提示注册成功:

当我点击进入搜狐通行证后,又遇到了问题,

用户登入搜狐通行证后, 还会出现注册新用户和找回密码这两项链接。“注册新用户”链接,难倒暗示用户多多注册马甲,增加用户注册数,已经登入了还要注册吗?改成邀请注册是不是更靠谱。“找回密码”,用户登入了,还需要找回密码吗?修改密码是不是稍微合理点。

9.英文版本

(1)

不应该出现这样的问题吧,看来老外要学习下中文才可以填写注册吧。

(2)

是不是可以重新设计下,而不要在中文版本上直接改,毕竟中西有别。用英文注册对国际用户来说是件好事,可是一定要做好。否则……

最后,我在这里并不是为了挑搜狐的错,只是一个友情提醒,希望他们可以改进。我现在也会上搜狐,浏览新闻,而且在接触互联网时,就知道了搜狐,对搜狐也有一定的感情,非常喜欢他们的搜狗产品。总体来说,搜狐的注册流程喜忧参半,有些地方真的要赞一下,但是有的地方真的让人抓狂,还需要改善。当然可能还有问题,也希望大家指出。

来源:http://www.loveucd.com/

你可能还会喜欢以下内容

网站运营

为什么不留下您的观点?分享创造价值!您说呢?
想要有个性的头像, 到gravatar这里申请!

Google Reader Twitter Flickr Picasa Web Albums 豆瓣 校内网 Friendfeed Friendfeed 5G Feedsky