七牛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请求数的统计值，每次都要重新设置时间段让用户觉得很麻烦，而且还容易疏忽。

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

 

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

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

要完全满足用户的预期技术上是有困难的，因为支付成功后，网站页面无法实时获得该信息。

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

图6  支付完成情况

 

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

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

图7  发票页面

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

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