新浪微博注册页面

《新浪微博注册页面》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、测试页面：新浪微博注册页面http://login.sina.com.cn/hd/reg.php?entry=miniblog测试内容：注册页面的用户体验分析一、页面宽高测试页面的内容区域宽度为800px居中显示，高度大于900px，右侧有滚动条出现，从而使用户注册过程中需要拉动右侧滚动条翻看下面的内容，造成视觉中心的偏移，造成体验下降。问题所在：顶部内容占用了过大的页面高度空间，如下图：二、页面基本要素分析提取新浪微博注册页面的基本要素有：1、注册提示语区域；2、电子邮箱输入验证区域；3、创建密码区域；4、密码确认区域；5

2、、昵称填写区域；6、所在地选择区域；7、性别选择区域；8、验证码区域；9、注册按钮区域；10、使用协议区域；三、注册页面整体分析通过用Web工具查看页面相应代码，得出注册表单的实际尺寸为520×452px。中间通过点划线分割为四个功能区域，分别为注册提示功能区、基本账户信息注册功能区、账户补充信息功能区和验证提交功能区。具体的尺寸信息及功能区域划分见下面的图片。注册表单实际大小示意图注册表单尺寸图功能区域划分示意图纵观上述页面，表单宽度为520px，而据统计最优的阅读体验宽度在500–650px之间，现有的页面宽度使得

3、用户在注册流程中能够有一个较好的阅读体验，而不用通过转动脑袋移动视线来进行左右扫描阅读。表单内容通过点划线区分为四个功能区域，使内容分组，用以区分不同区域的不同功能需求和细节差异，这也是可取的。不足之处在于，点划线颜色有点过浅，同时对于区域的划分也不是特别规范，另外就是各个区域的垂直间距各不相同，细节处理不够，容易让人产生粗糙的感觉。如下图所示：另外，从整体上看，注册表单相当简单，这个初衷是好的。但是用户看到这些表单如何区分哪些必填，哪些可以忽略不去填写呢？还有，对于菜鸟级的用户来说，这种没有任何提示的页面是否友好呢？可能在设计过程中

4、为了节省页面高度而采用提示语句点击触发显示的方式，但是节省高度只有这一种方法吗？在最佳阅读体验范围之内适当增加表单宽度也不失为一种好的解决方案的。接下来，我们深入细节，从每一个区域入手，去全方位地分析一下每一个功能细节的用户体验状况。四、注册页面细节分析1、注册提示语区域“提示：如果你有“新浪邮箱”、“新浪会员帐号”或“新浪UC号”，可以直接登录”这个区域，用一段简洁的提示语句告诉用户在什么情况下可以跳过注册流程直接登录，对于已有上述帐号的用户来说无疑体验是非常好的。而对于没有上述帐号的用户来说，由于提示语句很简短且简洁也不会造成不好

5、的体验。2、电子邮箱输入验证区域上图是这一区域的默认设计。但从这一设计上看，“我没有邮箱”几个文字用一种特殊的颜色放置在输入框的后面显得很突兀，而当点击的时候直接在本窗口中跳转到了新浪邮箱的注册页面。用户来这个页面本来是注册的，而不经意之间竟然跳转到了一个相关度不高的页面，如果用户再顺手把这个页面关掉，那么注册流程直接就终止了，因而这个细节设计的体验很不好。当点击触发输入框的时候这一区域变为下面的形式：对比可以看到，在触发输入框的时候，电子邮箱的标签名因为输入框下面提示文字的出现而出现了向下的跳跃。这无疑会吸引用户的注意力，而这个操作

6、真正需要用户去注意的却是弹出的提示文字，这个体验是不好的。同时，新弹出的提示文字在文字颜色上面跟标签没有什么大的区别，再加上标签文字的下移，两者就混淆在了一起，使得用户不容易分清哪是提示哪是标签，或者说主次混淆在了一起。这一点的体验也是不够好的。与提示信息相关的还有就是原本就不是很长的文本却出现了折行，这就会强迫用户要移动视觉进行阅读。因而这个地方可以充分利用良好体验的阅读宽度进行一行显示，或者更改文案使文字显示在一行之中。另外，提示信息的动态弹出，使页面跳动，吸引人的视觉注意力，而把最需要去填写的操作变成为了其次的选项，这样的体验也

7、是不够好的。建议要么采用现有的上下结构静态显示提示文本，要么就利用页面宽度，把提示信息放在输入框右侧区域，减少页面的跳跃。关于“我没有邮箱”，这个描述也应该算作是提示性的文本，因而可以考虑用类似“没有邮箱？点击注册”类似的文案作为提示信息的一部分，这样较之前面的展现方式而言应该体验要好一些。当在输入框中输入错误内容并点击空白区域的时候会触发校验程序并出现如下的提示：这个提示，首先输入框底色标红，同时右侧用耀眼的红色提示用户错误所在，这样就能及时提醒用户，刚刚输入的内容是有问题的，以便于及时更改。这样的提示警告信息在体验设计上是比较好的

8、，很好地起到了警告和提醒的作用。而当在输入框中输入正确的邮件格式，并触发校验程序之后会出现下面的提示：这个提示，输入框底色变为灰色，右侧出现可以使用的字样。但是这个设计给人的感觉并不好，不是仔细查看的话可能还看不到相应的