转载:关于web注册页的可用性分析

De Dream', Windy(http://www.DeDream.com),2006年8月

原文作者:DTE, 原出处:http://blog.sina.com.cn/u/48f239da010006cc


在Nielsen的可用性工程里提到可用性的其中一个原则是Errors,记得刚开博客的时候也穷举了一些关于可用性方面的文章,里面将这个errors翻译成了“少错”,实际上我个人觉得(也有不少版本这么翻译)“容错”更为贴切。无论是客户端软件还是web软件,用户毕竟不是专业人员,他的操作必然不能按照程序员所设定的路线来走,那么很有可能就会发生错误,“少错”是一个很含糊的概念,怎样做到少错,如何才是少错呢?真正需要做的应该是“容错”,当用户发生错误时,系统要能做到给予正确友好的提示,帮助他完成操作流程以及目的。

前阵子由于工作的需要,对于系统给予用户填写信息的反馈进行了一些肤浅的研究,主要以web注册页的操作体验为主,现整理出来与大家共同分享,也欢迎大家拍砖,以共同提高。第一次写所谓的“技术贴”,必然有很多不足,希望各位及时纠正,万分感谢smile

首先举一个失败的用户体验的例子,126邮箱注册,不过那是一个月以前了,今天本想截图贴上来的,结果登录发现已经改版了,不错,确实该改了,需要进步嘛!不过却不利于文章的描述了,看来我只能凭着自己的印象来写了,要是有什么偏差,见谅!

原有的126邮箱注册页并不象现在将用户名的填写单独做为一页进行强调,当时所有的信息填写都在一页中,而且没有检测用户名的按钮,这就意味着用户在进行填写时必须完成所有的输入框才能得知自己所键入的用户名是否合法或是否可用。而且整个页面没有一点提示信息,实在让人费解。更郁闷的事,对于错误的提示采用的是弹出对话框,以上所有都大大降低了用户操作的效率。我简要模拟一下当时的过程:

首先,我在用户名的输入框中键入一个特殊符号,为了节省时间更快的看到系统给予的反馈,我直接跳过了中间所有的信息填写,并点击注册,这时,系统弹出了一个对话框:

login username error

这里的文字实在太为模糊,怎么就不合法了呢?那怎么样的用户名才是合法的?实在让人伤透脑筋。

我重新输入了一个数字,系统又提示到:

can't begin as number

好,那我不用数字,我用字母总可以了吧,我输入“a”:

too short

不少于5对把?我满足你,我一口气输入n个“a”,系统又报错了:

too long

%¥◎……¥%#¥×……※%着实让人郁闷啊,我不禁想到大学自习曲里的一句歌词:有啥话你不能一气说完...虽然我是故意在找茬,但是126没有完全考虑如何去避免用户再次犯错,确实是不应该啊!

而现有改版过的页面考虑就周全得多了:

new version of 126

首先在将用户名得填写单独提出来作为一个页面,便于用户进行用户名的合法和可用的检测,其次在输入框下面加入了完整的提示信息,给用户十分明确的填写指导,再次当用户没有理会提示信息而出错的话,系统采用了在输入框下出现红色醒目字样进行提示,而非弹出对话框。这三点都使可用性大大的提高了。

把各大门户网站邮箱的注册页都试了一下,基本上都采取126的这种新的形式:单独页的存在,信息的提示,和当页高亮显示错误提示信息。实际上应该说126采用了各大门户网站邮箱注册页的模式:)象sina sohu yahoo等等,也简要做点分析:

yahoo的注册页如下:

yahoo's login


页面在提示信息重要的位置上标上了蓝色,减少了用户浏览提示信息的时间,也提高了效率,但是输入信息后,点击下一步页面进行刷新,出现的提示信息却出现在了上方,而且不因输入的内容变化,始终是那句“格式不对或含有非法字符”,不仅不够醒目而且引导性也不够。


sohu的注册页如下:

Sohu's login


sohu对于信息提示的内容描述相对来说比较完整比较到位,但是位置却处在上方,没有和用户名的输入框直接相连,影响了阅读,而且中间搜狐闪电邮件和搜狐手机邮件的广告更是位置十分的不得体,将页面生生的切成了两段,虽说起到广告宣传的作用,但是对于注册来说这是完全的垃圾信息,它的存在难免会降低用户的友好度。要知道用户对于影响自己行为的广告是极其厌恶的!

其实在页面提示信息的处理上,也并不是越全面越具体就越好,一切都得看情况来定,如下的页面就是一个很好的反面例子:

a bad example

满屏的信息看了头就疼,哪还想着去注册啊,直接关掉就好了~烦!!!!

我认为应该将引导性的信息放在注册项的后面给予用户进行操作的一个指引,而针对用户填写的有误信息应该出现相应的错误提示,高亮显示出现在原有提示的位置并覆盖原有提示信息。这种方式应该是最为合理的~以下就是一个非常好的例子,51.com的用户注册:

51.com's login

当前操作步骤以蓝色背景突出显示,让用户清晰的知道自己现在的位置和所作的操作,以后还需要哪些操作才能完成整个流程。

当输入的信息有误时,系统通过判断得出当前信息属于哪种错误,并在后面高亮显示进行提示,例如,我输入“ad”,错误提示信息为“用户名不能少于3位”

name should be longer than 3

若输入“1”,错误提示信息则为“只能用数字或英文,并且必须为英文字母开头!”

name should begin with char

但是这个过程中,错误提示信息在弹出窗口上重复出现是完全没有必要的!

针对这个注册页面,我想进行一点引申,如果在用户阅读完错误提示信息,并重新进行输入时,输入框后的字又重新刷新为原来的提示信息进行重新指引,就可以避免用户没有初次阅读提示而再犯错误的情况,例如,输入“ad”发现错误后输入“1111”...

(谢谢DTE写作这么认真的文章并同意De Dream转载。)

Windy 发表于2006年08月25日

评论

感谢windy的肯定~:)
怎么没有人来评论啊~伤心....

dte 发表于 August 28, 2006 10:59 AM

sina的注册页好差哦

iqst 发表于 August 28, 2006 01:01 PM

再补充一条,注册分步也不是通用的,对于门户或126这类,他们的注册量大,用户名很容易重复,第一步就很可能阻挡住用户,所以把第一步单拿出来,给予详细随时的提示,一些小的网站,我觉得就没必要分开了……

iqst 发表于 August 28, 2006 01:05 PM

好贴,很精辟,说出了我们用户的心里话.

游侠 发表于 August 28, 2006 02:42 PM

做一个好的注册流程或页面,首先是观念的转变,也依赖技术的实现。
最近一次印象深刻的体验是MacOS的首次登录,虽然有很多表单要填,但apple把这个过程做得很有趣。类似的还有winxp系统的用户信息初始化,那个圆形的问号代理是微软一贯的特色(代理的问题是仁者见仁),都是用简单的引导方式让用户填入信息。我觉得网站的注册信息,重要的表单最好不要超过三页,还可以让用户选择跳过不重要的信息,并提示用户将来需要时候可以在哪里修改,另外在今后将要用到的时候,再跳转回未填的信息注册页。同时告诉用户他的资料完整度是多少。

容器 发表于 August 29, 2006 11:46 AM

来学习了~~

阿兹猫 发表于 March 18, 2007 07:24 PM

不错,这博客的用户体验就很不错。做UE虽然需要技术的支持,但更重要的是观念。

海纳百川,有容乃大 发表于 April 9, 2007 10:20 AM

兄台麻烦先把图片显示出来!俺们啥也看不到

wljinxin 发表于 June 25, 2007 04:03 AM

部分图片显示有问题,请到原文地址:http://blog.sina.com.cn/u/48f239da010006cc

Windy 发表于 August 1, 2007 11:42 AM

发表评论:




记住您的信息?



    [页面提交需要一点点时间,请只按一次"发表"即可]