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

测试页面：新浪微博注册页面 http://login.sina.com.cn/hd/reg.php?entry=miniblog 测试内容：注册页面的用户体验分析

一、页面宽高测试

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

\\

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

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

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

三、注册页面整体分析

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

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

纵观上述页面，表单

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

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

另外，从

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

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

四、注册页面细节分析

1、注册提示语区域

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

这个区域，用一段简洁的提示语句告诉用户在什么情况下可以跳过注册流程直接登录，对于

已有上述帐号的用户来说无疑体验是非常好的。而对于没有上述帐号的用户来说，由于提示语句很简短且简洁也不会造成不好的体验。 2、电子邮箱输入验证区域

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

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

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

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

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

另外，提示信息的动态弹出，使页面跳动，吸引人的视觉注意力，而把最需要去填写的操作变成为了其次的选项，这样的体验也是不够好的。建议要么采用现有的上下结构静态显示提示文本，要么就利用页面宽度，把提示信息放在输入框右侧区域，减少页面的跳跃。 关于“我没有邮箱”，这个描述也应该算作是提示性的文本，因而可以考虑用类似“没有邮箱？点击注册”类似的文案作为提示信息的一部分，这样较之前面的展现方式而言应该体验要好一些。

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

这个

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

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

这个提示，

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

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

这样做的目的是方便用户在下拉列表

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

输入框跟

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