新浪微博注册页面的用户体验分析报告（转载）

原文链接：http://www.megong.com/2011/0304/1649.html

一、页面宽高测试

页面的内容区域宽度为800px居中显示，高度大于900px，右侧有滚动条出现，从而使用户注册过程中需要拉动右侧滚动条翻看下面的内容，造成视觉中心的偏移，造成体验下降。

问题所在：顶部内容占用了过大的页面高度空间，如下图：

\
二、页面基本要素分析提取

新浪微博注册页面的基本要素有：

    1、注册提示语区域；
    2、电子邮箱输入验证区域；
    3、创建密码区域；
    4、密码确认区域；
    5、昵称填写区域；
    6、所在地选择区域；
    7、性别选择区域；
    8、验证码区域；
    9、注册按钮区域；
    10、使用协议区域；

三、注册页面整体分析

通过用Web工具查看页面相应代码，得出注册表单的实际尺寸为520×452px。中间通过点划线分割为四个功能区域，分别为注册提示功能区、基本账户信息注册功能区、账户补充信息功能区和验证提交功能区。

具体的尺寸信息及功能区域划分见下面的图片。

    \
    注册表单实际大小示意图
    \
    注册表单尺寸图
    \
    功能区域划分示意图

纵观上述页面，表单宽度为520px，而据统计最优的阅读体验宽度在500–650px之间，现有的页面宽度使得用户在注册流程中能够有一个较好的阅读体验，而不用通过转动脑袋移动视线来进行左右扫描阅读。

表单内容通过点划线区分为四个功能区域，使内容分组，用以区分不同区域的不同功能需求和细节差异，这也是可取的。不足之处在于，点划线颜色有点过浅，同时对于区域的划分也不是特别规范，另外就是各个区域的垂直间距各不相同，细节处理不够，容易让人产生粗糙的感觉。如下图所示：

\

另外，从整体上看，注册表单相当简单，这个初衷是好的。但是用户看到这些表单如何区分哪些必填，哪些可以忽略不去填写呢？还有，对于菜鸟级的用户来说，这种没有任何提示的页面是否友好呢？可能在设计过程中为了节省页面高度而采用提示语句点击触发显示的方式，但是节省高度只有这一种方法吗？在最佳阅读体验范围之内适当增加表单宽度也不失为一种好的解决方案的。

接下来，我们深入细节，从每一个区域入手，去全方位地分析一下每一个功能细节的用户体验状况。
四、注册页面细节分析

1、注册提示语区域

“提示：如果你有“新浪邮箱”、“新浪会员帐号”或“新浪UC号”，可以直接登录”

这个区域，用一段简洁的提示语句告诉用户在什么情况下可以跳过注册流程直接登录，对于已有上述帐号的用户来说无疑体验是非常好的。而对于没有上述帐号的用户来说，由于提示语句很简短且简洁也不会造成不好的体验。

2、电子邮箱输入验证区域

\

上图是这一区域的默认设计。但从这一设计上看，“我没有邮箱”几个文字用一种特殊的颜色放置在输入框的后面显得很突兀，而当点击的时候直接在本窗口中跳转到了新浪邮箱的注册页面。用户来这个页面本来是注册的，而不经意之间竟然跳转到了一个相关度不高的页面，如果用户再顺手把这个页面关掉，那么注册流程直接就终止了，因而这个细节设计的体验很不好。

当点击触发输入框的时候这一区域变为下面的形式：

\

对比可以看到，在触发输入框的时候，电子邮箱的标签名因为输入框下面提示文字的出现而出现了向下的跳跃。这无疑会吸引用户的注意力，而这个操作真正需要用户去注意的却是弹出的提示文字，这个体验是不好的。

同时，新弹出的提示文字在文字颜色上面跟标签没有什么大的区别，再加上标签文字的下移，两者就混淆在了一起，使得用户不容易分清哪是提示哪是标签，或者说主次混淆在了一起。这一点的体验也是不够好的。

与提示信息相关的还有就是原本就不是很长的文本却出现了折行，这就会强迫用户要移动视觉进行阅读。因而这个地方可以充分利用良好体验的阅读宽度进行一行显示，或者更改文案使文字显示在一行之中。

另外，提示信息的动态弹出，使页面跳动，吸引人的视觉注意力，而把最需要去填写的操作变成为了其次的选项，这样的体验也是不够好的。建议要么采用现有的上下结构静态显示提示文本，要么就利用页面宽度，把提示信息放在输入框右侧区域，减少页面的跳跃。

关于“我没有邮箱”，这个描述也应该算作是提示性的文本，因而可以考虑用类似“没有邮箱？点击注册”类似的文案作为提示信息的一部分，这样较之前面的展现方式而言应该体验要好一些。

当在输入框中输入错误内容并点击空白区域的时候会触发校验程序并出现如下的提示：

\

这个提示，首先输入框底色标红，同时右侧用耀眼的红色提示用户错误所在，这样就能及时提醒用户，刚刚输入的内容是有问题的，以便于及时更改。这样的提示警告信息在体验设计上是比较好的，很好地起到了警告和提醒的作用。

而当在输入框中输入正确的邮件格式，并触发校验程序之后会出现下面的提示：

\

这个提示，输入框底色变为灰色，右侧出现可以使用的字样。但是这个设计给人的感觉并不好，不是仔细查看的话可能还看不到相应的提示和变化。既然想给用户正确的反馈，就应该使反馈的展现能够一目了然，易于辨认。通常而言，文本颜色应该是绿色的。而输入框底色变灰给人的感觉就像是这个区域锁定了一样，也没能很好地展现所要表达的信息，也算是设计和体验的一个失误。

在用户输入的时候，文本框下方还会出现一个可供选择的邮箱地址列表，如下图：

\

这样做的目的是方便用户在下拉列表中选择邮箱后缀，快速完成输入。但是把这种交互方式用在用户注册流程之中给人的感觉还是比较诧异的，毕竟邮箱后缀有成千上万种，这样做容易让用户在下面挑选自己的后缀，而一旦没有的话还可能会产生挫败感，当然挑选过程中浪费时间也是肯定的，还不如直接放任用户自己输入来得快捷。不过把这种交互方式用在登录页面体验应该要比在这里好一些。

当我用一个邮件成功注册过帐号之后，再用同样的邮箱去注册的时候会出现如下提示：

\

输入框跟上面的输入正确的时候一样显示背景灰色，同时用灰色文字提示“该用户名已被占用”。而被占用的情况下应该是警示类的提醒信息的，至少也要能够让用户能够看清楚问题所在，免得在后面出现不能注册的问题。个人建议这个地方用红色文字警示比较好。当然，既然邮箱已经被注册，而邮箱一般而言具有唯一性，别人不可能用你的邮箱地址。这个时候用户一般会尝试用邮箱进行登录以验证自己是否忘记之前曾经注册过这个网站的用户。所以，在提示后面给出登录入口引导用户进行登录尝试应该是一个比较好的体验设计。

而在没有输入任何信息的时候，当鼠标从输入框移出点击空白区域，也会触发验证程序出现下面的情形：

\

这个提示跟前面的错误提示一样，设计和表现上还是可以的。但是这个触发时机就没那么好了，我还没有填写任何内容，自然不会去提交注册，而这样的验证就显得不那么友好了，试想，谁会出现一个下面这样的注册页面呢？真正好的验证时机应该是在有用户输入并触发下一个输入选项的时候再去验证。

\

3、创建密码区域

点击创建密码，会出来如下的状态：

\

提示密码是6-16位，我们进行输入测试，在输入不足6位的时候会出现下面的结果：

\

如上面在分析邮箱输入区一样，错误的不合规则的，给出警示，同时颜色各方面也够突出，体验良好。

既然长度为6-16位，那么我们能不能输入16位以上的密码，会出现什么样的提示呢？请看下图：

\

在输入到16位的时候自动不允许再输入过多的字符，跟提示6-16位的长度相吻合，体验良好。而上图同样也是在填写正确时候的显示状态，这次系统不再给出验证的提示语句，会给人一种挫败感。既然前面我输入正确你会给出正确的提示，这里又什么提示信息都没有，我到底有没有正确输入了呢？因而这里应该用明快的色调给出输入正确的提示。

4、密码确认区域

创建密码成功之后，我们去进行密码确认。当输入6位以下的不匹配密码时，反馈如下：

\

有点搞笑的是，竟然也提示“长度必须6-16位”，这个输入框本来就是验证跟之前密码是否匹配的，现在竟然也要验证一个字符串长度，真的有点搞笑了。那么输入6-16位之间的不匹配密码又会怎样呢？请看下图：

\

对了，这才是正确的验证和提示信息。用鲜艳的颜色进行警告，给出提示，体验设计良好。前面的密码创建区域在合理的时候是没有提示的，而密码确认应该给出明确的匹配成功的提示吧。下面我们一起看一下：

\

没想到，跟创建密码的时候一样，还是没有给出任何提示，这体验就有点糟糕了。

5、昵称填写区域

\

点击触发输入框，提示文字是“可输入4-20位，包含英文、数字和中文”，字面的意思好像是这4-20位中需要同时包含英文、数字和中文，而经测试，只包含英文、中文或者包含任意两种或者包含三种都是可以的，而全数字则是不允许的，具体结果见下面的图片。

\

因而这里的描述是非常容易误导用户的，这里的“和”应该用“或”更妥当一些。

\

\

昵称输入过程，不足4位的会提示上面的警示信息，这个体验良好。输入到20位的时候也不再允许再输入，也符合规则。只是我所起的昵称是否可用（当然昵称不怕重复），这个依然没有明确的信息反馈。

6、所在地选择区域

\

所在地的第一个选项框默认是北京，没有明确标注是否必填，这容易让用户在这个位置产生徘徊的心理。经实际验证，这个地方不选择也是可以进行注册的。但是就体验而言就很是不够友好了。

7、性别选择区域

\

跟地区选择一样，这个经验证也是非必选的，但是也没有任何的操作提示，容易让用户在这里产生犹豫，体验设计不好。

8、验证码区域

\

验证码方面，新浪微博采用的是中文验证码。采用中文验证码，首先会因为切换输入法的问题增加用户的操作流程，造成注册效率下降。另外一点是使用中文注册的时候，易读性和可辩认性方面也会有所下降，如上图中的生僻字就可能会迫使用户去点击“换一张”进行验证码图片更换，效率降低是肯定的。

\

在不填写验证码的时候，点击空白区域会显示上面的提示信息，这个验证时机把握的不是很好，同时提示信息的显示位置在输入框和验证码图片之前，就像硬塞进去一样，体验效果感觉一般。

而当我在输入框输入验证码，但是故意填写错误的时候又会怎样呢？请看下图：

\

是的，没看错，没有任何的验证，只有当你在点击注册提交按钮之后才会判断并给出相应的错误提示信息。而这个信息的，不论是显示位置还是文字颜色在体验上也是很差的，具体请看下面的截图：

\

9、注册按钮区域

这个页面的注册按钮很简单，就一个按钮，上面“立即注册”四个文字，也算是足够简洁明快了。只是注册按钮在大小和颜色上面都不是很突出，没有那种挥之欲出和让人产生点击欲望的感觉。这个在设计细节上还应多下点功夫。

10、使用协议区域

默认已经勾选的我以看过并同意协议的文本，协议是新窗口打开的，点击的时候有窗口弹出，看完关掉即可，对注册过程有影响但不大。再者说，基本也没人去看这个。

不过就流程来说，应该是先同样协议再进行注册，这个应该放置在注册按钮的前面。毕竟在注册按钮上没人提及使用协议的任何内容。而如果保持这个顺序则应该在注册按钮上添加类似同意下方协议的描述。
五、偶然发现的乌龙事件

注册过程中，显示邮箱“可以使用”，而到真正提交的时候显示的错误信息则是“邮箱无效”。具体请看下面的截图：

\