七牛portal可用性测试记
引言:2013年年底应七牛公司朋友的邀请,给他们的Portal进行可用性测试。七牛(http://www.qiniu.com/)一直专注于云存储基础服务,在业内颇有声誉。七牛云存储的后台选用并不常用的Go语言,据说公司高层至今都会参与编写核心代码,这些让我感受到团队中浓重的工程师气质。
在这次可用性测试中,七牛的产品经理与前端工程师深度参与其中。除了邀请用户,还协助我进行测试数据记录,可用性问题记录。最终汇总了39项观察所得。其中包括术语选用、导航设计、交互设计、美工设计等问题。有几项给我的印象很深。
由于“所有空间”与“单个空间”展现的内容、用户能进行的操作是不同的,所以七牛portal的主导航项是会变的。我可以想象网站设计者在设计该导航时,经过很多思考。容纳所有操作,同时从美观与一致出发,让用户无论选择“所用空间”还是“单个空间”导航项都是4项,仅仅是导航按钮上的图标与文字发生变化。
这一导航是可用的,但却不是让用户使用起来最顺畅的,有些地方容易让人疑惑。以下两张图都会让用户疑惑与出乎意外。
图1 页面中有两处能进行空间选择
图2 在picshare空间中,点击“查看详细使用情况”按钮后,页面将把用户导航至报表中心。当前选择的空间,以及导航栏内容都发生变化。
对于七牛的导航项来说,可以分为两类:
- 所用空间导航项,包括:使用概况、充值、发票、消费/充值记录等
- 某一空间导航项,包括:使用概况、内容管理、媒体处理、空间设置
这两类导航部分项的名称是一致的,如:使用概况。但其他项名称不同,且数量也不同。
新画了一张导航草图,如图3所示。希望能达到如下目标:
- 页面中只有一个选择空间的地方,并引导用户先进行选择
- 让导航项的归属清晰
- 可以容纳“所有空间”、“单个空间”不同数量的导航项
- 通过面包屑导航让用户知道自己在现在在哪里
图3 新七牛导航草图
七牛为用户提供了强大的图片处理功能,但在可用性测试中,多位用户无法成功的应用图片样式。
后期进行分析思考中发现这是因为没有把用户要的东西放到用户希望看到的地方。
图4 七牛数据处理页面
在可用性测试过程中,用户能成功创建图片样式(上图中的1)。创建图片样式成功后,页面中将出现新创建的样式描述(上图中的2)。此时用户的视线注意点都会落在新出现的样式区域,用户试图在这个区域中寻找应用样式的方法,但却无法找到。
用户通过一番寻找后才能发现应用图片样式的说明在页面中的黄框区域。但接着又遇到第二个困难,用户无法理解样例。
- 当前的样式分隔符是“-”,但样例中用的分隔符是“/”
- 样例也没交代样式名是什么,用户不能一下知道“style.com.jpg”是一个样式名
比较好的做法是,把示例放在新出现的样式区域,并根据用户创建的样式名和当前选择的分隔符,给一个示例。
在测试中,多位用户在完成“了解空间使用情况”任务中吐槽。
图5 日期时间段在各项查询中被重置为“近30天”
任务中用户需要查询上个自然月流量、存储空间、GET请求数、PUT请求数的统计值,每次都要重新设置时间段让用户觉得很麻烦,而且还容易疏忽。
网站只要记住用户设置的时间段,并带入到另一个查询页面中,就能很好的解决这一问题。
用户在进行“充值并申请发票”操作中,有两项发现值得思考。
第一、用户完成充值后,会回到“确认充值页面”等待页面反馈(希望看到充值成功信息),但页面没有预期的反馈。
要完全满足用户的预期技术上是有困难的,因为支付成功后,网站页面无法实时获得该信息。
这个时候很多其他网站已经有成熟的解决方案了,即让用户自己点选支付成功或失败(如图6所示),这一解决方案既不复杂,又满足了用户的预期(用户回到支付确认页查看反馈)。
图6 支付完成情况
第二、用户成功充值后,试图在“发票”页面寻找之前充值的记录来申请发票。
但该页面显示的记录仅仅为已申请发票记录,只有用户点击页面最下发的“申请发票”按钮,才能看到未申请发票的充值记录。在测试中,多位用户在这个页面中寻找,甚至跳出该页面去其他页面寻找。
图7 发票页面
按照用户的预期设计,提出一些新的设计方案。
- 方案一、列表中显示充值记录,在列表中提供申请发票按钮。该方案可以去除列表下方单独的“申请发票”按钮,对用户来说简单、直观,但无法合并多次充值为一张发票。
- 方案二、若希望多次充值合并开具发票。首先列表中显示充值记录,这是用户的预期。其次在列表中加入一列多选框,用户勾选完后,再点击列表下的“申请发票”按钮。
七牛portal可用性测试记的更多相关文章
- Teambition可用性测试记
引言:最开始知道Teambition是几个月前,当时是想找一个团队协作工具.Teambition是候选之一,它的界面设计给我留下了印象.后来得知其背后年轻的创始团队还是让我有些小惊讶的.这次通过朋友介 ...
- 阿里云 ECS 迁移到七牛 QVM 记
操作 下载脚本 curl -O http://p70nwjoid.bkt.clouddn.com/go2qvm_client1.5_linux_x86_64.zip 解压填写配置 unzip go2q ...
- 定时备份 MySQL 并上传到七牛
多数应用场景下,我们需要对重要数据进行备份.并放置到一个安全的地方,以备不时之需. 常见的 MySQL 数据备份方式有,直接打包复制对应的数据库或表文件(物理备份).mysqldump 全量逻辑备份. ...
- yii2上传七牛图片(超详细)
前期准备 1.在七牛注册账号https://portal.qiniu.com/signup/choice 2.创建空间https://portal.qiniu.com/bucket(记住存储空间名称和 ...
- node+express上传图片到七牛
本人微信公众号:前端修炼之路,欢迎关注 最近做项目的时候有一个上传图片的需求,由于没有后端的配合,所以决定自己来搭个服务器,实现上传图片功能.以后如果需要修改成java或者php为后端,直接使用即可, ...
- 七牛整合PHP上传文件
七牛支持抓取远程图片 API,用 access_key + secret_key + url 生成 access_token, 把 access_token 加在 header 里,然后向 post ...
- nodejs+phantomjs+七牛 实现截屏操作并上传七牛存储
近来研究了下phantomjs,只是初涉,还谈不上深入研究,首先介绍下什么是phantomjs. 官网上的介绍是:”PhantomJS is a headless WebKit scriptable ...
- 自建存储与使用微软Azure、七牛等第三方云存储综合考察分析
http://www.cnblogs.com/sennly/p/4136734.html 各种云服务这两年炒的火热,加之可以降低成本,公司想先在部分业务上尝试使用下,刚好最近有个项目有大量小文件需要存 ...
- 七牛整合 ueditor (拦住那头牛,七牛又如何)
最近遇到个项目,要求所有图片都必须整合到七牛上,看了把你谈文档踩在前辈们的基础上终于把他完成了,恰巧本屌丝最近刚好有时间,本着天下屌丝是一家的原则,和小朋友们一同学习 闲话少说入正题. 第一 :下载编 ...
随机推荐
- php中的邮件技术
前言:程序员不谈恋爱就是对物质世界太贪恋 一.通过smtp服务来发送邮件 使用php中的mail()实现邮件的发送; bool mail ( string $to , string $subject ...
- Leetcode 118 Pascal's Triangle 数论递推
杨辉三角,即组合数 递推 class Solution { vector<vector<int>> v; public: Solution() { ; i < ; ++i ...
- 使用VSTS/TFS搭建iOS持续集成环境
TFS 自2015版开始支持跨平台的持续集成环境,通过提供开源的build agent为 Windows / linux / macOS 提供了统一的持续集成环境管理能力.这篇文章给大家介绍一下如何使 ...
- HTML解析组件HtmlAgilityPack使用
HtmlAgilityPack是一个开源的解析HTML元素的类库,最大的特点是可以通过XPath来解析HMTL,如果您以前用C#操作过XML,那么使用起HtmlAgilityPack也会得心应手.目前 ...
- 实现微信公众号自动登陆自己的Web App
测试: 基本的思路是通过公众号OAuth API获取用户微信的openid.第一次使用的时候让用户登录,然后在数据库里把openid和自己应用的userid对应起来.以后获得用户的openid之后就可 ...
- Sqlte数据库
1. 收缩数据库. 指令:VACUUM
- RPC 135端口
- 【Android开发坑系列】之事件
总结一下: 1.Touch事件分发中只有两个主角:ViewGroup和View.ViewGroup包含onInterceptTouchEvent.dispatchTouchEvent.onTouchE ...
- 高级屏幕空间反射: Screen Space Reflection (SSSR)
SSSR进一步调优,对标寒霜级技术水平,实现方式为Direct3D 11+自主实现实时渲染引擎,方法为对比测试.实现已经有段时间了,还是简要更新下吧.以下画面中的SSSR效果全部采用1:4 resol ...
- webService调用
1.wsimport 生成客户端 2.axis2 3.通过HttpClient调用webservice 4.使用xfire