七牛portal可用性测试记

引言：2013年年末应七牛公司朋友的邀请，给他们的Portal进行可用性测试。七牛（http://www.qiniu.com/）一直专一于云存储基础服务，在业内很有声誉。七牛云存储的后台选用并不经常使用的Go语言，听说公司高层至今都会参与编写核心代码，这些让我感觉到团队中浓重的工程师气质。

在此次可用性测试中，七牛的产品经理与前端工程师深度参与其中。除了邀请用户，还协助我进行测试数据记录，可用性问题记录。最终汇总了39项观察所得。其中包括术语选用、导航设计、交互设计、美工设计等问题。有几项给个人印象很深。

 

因为“全部空间”与“单个空间”展示的内容、用户能进行的操做是不一样的，因此七牛portal的主导航项是会变的。我能够想象网站设计者在设计该导航时，通过不少思考。容纳全部操做，同时从美观与一致出发，让用户不管选择“所用空间”仍是“单个空间”导航项都是4项，仅仅是导航按钮上的图标与文字发生变化。

这一导航是可用的，但却不是让用户使用起来最顺畅的，有些地方容易让人疑惑。如下两张图都会让用户疑惑与出乎意外。

图1  页面中有两处能进行空间选择

图2  在picshare空间中，点击“查看详细使用状况”按钮后，页面将把用户导航至报表中心。当前选择的空间，以及导航栏内容都发生变化。

对于七牛的导航项来讲，能够分为两类：

• 所用空间导航项，包括：使用概况、充值、发票、消费/充值记录等
• 某一空间导航项，包括：使用概况、内容管理、媒体处理、空间设置

这两类导航部分项的名称是一致的，如：使用概况。但其余项名称不一样，且数量也不一样。

新画了一张导航草图，如图3所示。但愿能达到以下目标：

1. 页面中只有一个选择空间的地方，并引导用户先进行选择
2. 让导航项的归属清晰
3. 能够容纳“全部空间”、“单个空间”不一样数量的导航项
4. 经过面包屑导航让用户知道本身在如今在哪里

图3  新七牛导航草图

 

七牛为用户提供了强大的图片处理功能，但在可用性测试中，多位用户没法成功的应用图片样式。

后期进行分析思考中发现这是由于没有把用户要的东西放到用户但愿看到的地方。

图4  七牛数据处理页面

在可用性测试过程当中，用户能成功建立图片样式（上图中的1）。建立图片样式成功后，页面中将出现新建立的样式描述（上图中的2）。此时用户的视线注意点都会落在新出现的样式区域，用户试图在这个区域中寻找应用样式的方法，但却没法找到。

用户经过一番寻找后才能发现应用图片样式的说明在页面中的黄框区域。但接着又遇到第二个困难，用户没法理解样例。

• 当前的样式分隔符是“-”，但样例中用的分隔符是“/”
• 样例也没交代样式名是什么，用户不能一下知道“style.com.jpg”是一个样式名

比较好的作法是，把示例放在新出现的样式区域，并根据用户建立的样式名和当前选择的分隔符，给一个示例。

 

在测试中，多位用户在完成“了解空间使用状况”任务中吐槽。

图5  日期时间段在各项查询中被重置为“近30天”

任务中用户须要查询上个天然月流量、存储空间、GET请求数、PUT请求数的统计值，每次都要从新设置时间段让用户以为很麻烦，并且还容易疏忽。

网站只要记住用户设置的时间段，并带入到另外一个查询页面中，就能很好的解决这一问题。

 

用户在进行“充值并申请发票”操做中，有两项发现值得思考。

第1、用户完成充值后，会回到“确认充值页面”等待页面反馈（但愿看到充值成功信息），但页面没有预期的反馈。

要彻底知足用户的预期技术上是有困难的，由于支付成功后，网站页面没法实时得到该信息。

这个时候不少其余网站已经有成熟的解决方案了，即让用户本身点选支付成功或失败（如图6所示），这一解决方案既不复杂，又知足了用户的预期（用户回到支付确认页查看反馈）。

图6  支付完成状况

 

第2、用户成功充值后，试图在“发票”页面寻找以前充值的记录来申请发票。

但该页面显示的记录仅仅为已申请发票记录，只有用户点击页面最下发的“申请发票”按钮，才能看到未申请发票的充值记录。在测试中，多位用户在这个页面中寻找，甚至跳出该页面去其余页面寻找。

图7  发票页面

按照用户的预期设计，提出一些新的设计方案。

• 方案1、列表中显示充值记录，在列表中提供申请发票按钮。该方案能够去除列表下方单独的“申请发票”按钮，对用户来讲简单、直观，但没法合并屡次充值为一张发票。
• 方案2、若但愿屡次充值合并开具发票。首先列表中显示充值记录，这是用户的预期。其次在列表中加入一列多选框，用户勾选完后，再点击列表下的“申请发票”按钮。