测试页面：豆瓣注册页面 http://www.douban.com/accounts/register

测试内容：注册页面的用户体验分析

一、页面宽高测试

页面的内容区域宽度为950px靠左显示，高度大于785px，未出现滚动条，让内容尽收眼底，避免用户拖拉滚动条，造成视觉中心偏移，提供良好的用户体验。

如下图:

用户体验

 

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

豆瓣注册页面的基本要素有：

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

三、注册页面整体分析

通过用Dreamweaver查看页面相应代码，得出注册表单的实际尺寸为590×385px。

用户体验

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

表单内容并没有通过任何提示以便使内容分组，但由于需要填写的内容比较精简，这样的方式也可以的。另外就是各个区域的垂直间距都相同，细节处理上处理得很好，容易让人产生精致的感觉。如下图所示：

用户体验

另外，从整体上看，注册表单相当简单，并且在鼠标定位到输入框时出现提示。如果输入不规范将出现提示。可能在设计过程中为了节省页面高度而采用提示语句点击触发显示的方式，但是节省高度只有这一种方法吗？对于菜鸟级的用户来说，这种没有任何提示的页面是否友好呢？在最佳阅读体验范围之内适当增加表单宽度也不失为一种好的解决方案的。

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

 

四、注册页面细节分析

 

1、注册提示语区域

“提示> 已经拥有豆瓣账号？直接登录”

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

2、电子邮箱输入区域

用户体验

上图是这一区域的默认设计。

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

用户体验

对比可以看到，在触发输入框的时候，在右侧将出现“用户登录豆瓣，接收到激活邮件才能完成注册”提示语。让用户明白邮箱的作用，清楚明了，用户体验效果很好。

 

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

这个提示，根据你输入的信息，随机的让你选择注册邮箱，虽然这样能及时的提示用户，但是如果用户不仔细的阅读提示可能不明白为什么会出现该提示，也许应该在右侧提示，邮箱地址格式不正确，以便及时更改。因为这样的提示能警告的作用，而不仅仅是提示让用户选择。

 

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

输入框并没有提示该邮箱已经占用，也许这是设计上的一个失误，这时应该使用警示类的语言和红色标记，免得在后面出现不能注册的问题。这个时候用户一般会尝试用邮箱进行登录以验证自己是否忘记之前曾经注册过这个网站的用户。

 

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

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

 

3、所在地选择区域

当用户打开注册页面时，豆瓣根据用户IP地址显示所在地区，减少了用户的输入，给用户带来了很好的体验，并且提示如果没猜对，可以手动选择

总结：

豆瓣用户注册界面整体来说对带给用户的体验还是很好的，页面很简洁。当然还是存在一些不如意的地方如：当用户不按顺序填写资料时，给用户的感觉就不太好了。我直接填写的名号，然后输入验证码，“注册”按钮被激活，然后当我点击“注册时”，将提示邮箱，密码项 不能为空如图：

 

 

本文固定链接: http://www.hed236.com/1514.html | 分享互联网