Teambition可用性测试记

引言：最开始知道Teambition是几个月前，当时是想找一个团队协做工具。Teambition是候选之一，它的界面设计给我留下了印象。后来得知其背后年轻的创始团队仍是让我有些小惊讶的。此次经过朋友介绍给Teambition作可用性测试也有些兴奋。

从会面到测试设计，再到实施与总结，前先后后持续了3周。在这个过程当中我一直在观察、思考，发现了闪光点，同时也捕获了许多细节问题，可谓收获颇丰。

 

我认为Teambition网站在可用性（体验）方面是通过思考的，网站的设计含蓄优雅，力图经过技术让Web页面给用户相似桌面应用的实时体验。大量使用隐藏、扩展面板，避免使人厌烦又毫无用处的弹出对话框，让用户更容易进入沉浸（"流"）工做状态。这都是做为企业应用的优秀特质。

 

在测试过程当中，我发现用户在建立任务的过程当中都遇到了困难。新用户把“建立任务列表”看成建立任务进行操做。从表面上看是用户不理解或不注意“任务列表”与“任务”的区别。但我认为深层的缘由与用户概念模型与产品实现模型不一致有关。

Teambition产品的思惟模式是这样的，建立任务前，先要建立任务组（如图1），以后在组内建立相应任务。这个模式明显是产品的实现模式，程序逻辑、数据库结构清晰。

（图1 建立任务从建立任务列表开始）

但这却不是用户的思惟模式。用户的思惟模式是这样的，他有一个或几个零散的任务，当前只想把任务建好，分配出去。他还不清楚（可能都尚未想）项目以后会发展到多大，会有多少个模块，总体结构会是怎样的。当之后任务多了，他可能才会想要分组。用一个表概括以下：

模型	行为方式	理由
产品实现模型	建立任务结构（列表），建立任务	逻辑清晰，方便开发实现
用户概念模型	先建立任务，整理、归类之后再说	关注当前目标

设计产品时，须要更多的使用用户概念模型去思考。例如，提供默认任务列表，用户上来能够直接建立任务（步骤也节省了，操做效率更高），后期用户能够在须要时对列表进行进一步的修改、整理。

 

Teambition界面的对齐与风格统一作得较好，但对比不足。

页面中首先想让用户看到的指引提示信息使用灰底、灰字，如图2所示。

（图2 用户指引信息）

对比不足，就不能凸显当前元素的首要性，没法很好的抓住用户的眼睛，默默的淹没在其余元素中。当想清楚“你想让用户往哪看？”这一问题，大胆的使用对比。

测试中发现的另外一个让用户遇到困难的操做是建立任务，如图3所示。

（图3 建立任务页面）

形成这一困难的缘由有多个，后面还会再次提到。用户建立页面从图3中红色圈处开始，但这里的对比也是不足够的。

 

在“任务板”页面（如图4）中，你以为一、二、三、4红圈中的图标，哪些是能够点击的？你以为五、6两个六边形框中的时钟是控件吗？橙色框七、8中的灰色文字是否都是标注？

（图4 任务板页面中的图标与文字）

外表相同的图标，有些是控件，有些仅仅是图标，用户又怎么知道呢？输入框与标注文字一个模样，一样让用户疑惑，仅靠文字说明不是最优的方案。

Teambition中设计了一些拖拽操做，在某些场景下使用很方便。但若是可拖拽图标和其余图标如出一辙，用户又如何去发现呢？用户拖拽起图标，又该放置到哪儿呢？拖拽的接收方是否是也应该在合适的时机告诉用户“我这能接收”呢？

还有对于必填项与选填项若是能经过可视化进行区分，也能方便用户。

 

在测试中有用户在任务建立过程当中，未填写任务内容，屡次点击“建立”未果，如图5所示。

（图5 建立任务界面）

出现这一情况是一连串的误解形成，该用户首先把建立任务列表看成建立任务，其次没有意识到任务内容输入框是能够输入的，最后点击“建立”按钮页面没有任何反馈。这里点击“建立”按钮是最后一个指引用户的机会，但没有报错、没有提示，毫无反馈，用户屡次点击后放弃，内心除了疑惑还有抱怨。若在这里应用能发现用户没输入任务内容，不唐突的给出一个提示（如：几秒钟的浮动提示），同时高亮输入区域，可能还能亡羊补牢。我认为任何失败操做都应给用户有用的反馈。

对于成功操做是否也须要反馈（也称正面反馈）？这就涉及到Teambition的一项产品哲学，打造相似桌面应用的实时体验，即用户在页面上进行修改、添加、删除操做，页面上的数据直接发生变化，无刷新。对于Teambition来讲这就是成功反馈，但这是否足够？我认为在某些状况下可能不够。第1、有些数据变化很微小，容易被忽视，有时还会被遮蔽。譬如，任务列表中已经有不少任务，再添加一条新任务，新任务会出如今列表尾部，彻底可能在用户的可视范围外。第2、Web没法保证彻底实时的页面更新。在测试中能够发现上传文件或进行任务操做后实时更新并非每次都能很及时，有时还须要手动点击。这就让用户怀疑本身的操做成功了吗？给予正面反馈，消除用户的疑惑。

至于反馈的方式，抛弃弹出式对话框，选择不打断用户的提示，现今各大网站的最佳实践已有不少。

 

从Teambition中右侧按钮（如图6所示）提及，新用户容易忽略右侧按钮，寻找一个功能也很困难。

（图6 Teambition中的右侧按钮）

我分析下来有两个缘由：

1. 用户视线跳跃。以建立任务为例（操做顺序如图7所示），用户进打开页面后的注意区域在左上侧，“建立任务列表”在右侧，用户视线注意力要横跨屏幕。

（图7 建立任务操做顺序）

再如要修改任务执行者（操做顺序如图8所示），用户的视线注意力须要跨越中间的任务详情区域，太难找了。

（图8 修改任务执行者操做顺序）

2. 不断变化的按钮列表，用户不容易熟悉。对于不一样页面、点击对象，右侧按钮的数量、按钮功能都不相同。我揣测网站设计师想让右侧按钮根据当前上下文显示数量最少，但这会带来问题。右侧的这些按钮能够想象成大多数软件的工具栏按钮或菜单按钮。若是你使用软件的这些按钮不断的变多、变少，你会有什么感受？并且这样的设计也很难让用户记住这些功能的位置，从初学者变为中级用户。

个人建议是：

1. 固定右侧按钮，根据上下文disable部分按钮。

2. 减小右侧按钮的数量，尽量把功能放入到跟合适的上下文中。提供可见便可改的操做，直接修改任务列表名称，直接在任务详情中修改执行人，任务列表旁边直接提供删除操做等，如图9蓝色框处直接可修改。

（图9 支持可见便可改）

在任何显示信息的区域，都去思考是否能直接提供修改的功能，这对用户最方便。

 

不一样程度用户的需求是不一样的，初学者须要易上手，中、高级用户但愿高效率，对于工具应用特别是这样。

在Teambition网站的任何文本框中输入后回车，直接完成录入。这个功能对于中、高级用户很高效，但这也形成了初学者的困惑。测试中用户输入完成后很困惑，“肯定按钮在哪里？这样算录入成功了吗？”如图10所示。

（图10 用户输入后不知所措）

在提供回车录入的同时，若能给初学者留一个肯定按钮，就能兼顾不一样程度的用户。咱们要让初学者很容易上手，同时渐渐让他们学会更高效的方法，把他们变为中级用户，这样他们就会爱上咱们的应用。

 

猜猜看图11中点击右上角的“×”，页面会发生什么？

（图11 页面右上角的叉）

测试中被问到这个问题的用户，都认为这样会离开当前页面。很难想象这个“×”是用于关闭图中出于中间扩展区域（任务详情区域）的。关闭按钮放在对应模块右上角是习惯用法，问起为何不这样作，听到的回答说是当时怎么放都不美观，就放在整个页面的右上角。又据说下一版本这个按钮要改了，但并非放回相关区域右上角，而是彻底去除。关闭扩展区域的方法是在扩展区域外进行任何点击，设计师说这是一个创新。我认为创新思惟很是棒，但须要注意的是创新不是为了知足设计师的创新欲，而是为了提供更好的用户体验。打破习惯用法不是不能够，但要证实新的用法能带来足够大的好处，这须要充足的实验与思考。

 

测试中有位用户先是选中了一个任务，并在页面上进行探索性尝试，她无心间点击了“由我执行”，发现任务的执行者变了，但这并非她想要的，但又忘了以前任务的执行者是谁。她说的话给我印象很深，“为何没有撤销按钮，一点安全感都没有”。她但愿任何操做都能撤销，回到上一个状态，这样她能更大胆的尝试各类功能。不少用户使用科技产品会有心理负担，担忧本身的无心操做把系统搞乱了、搞坏了。这使他们在尝试时缩手缩脚，阻碍了学习过程。

对于独立的桌面应用我会建议提供撤销与回退功能，相似Office软件中的撤销功能或相似回收箱功能。但多人协做Web应用，提供撤销并不容易。Teambition提供了操做日志，能看到对任务的每个操做，这样用户能知道本身当前操做前的状态，如图12中所示。

（图12 任务操做日志）

惋惜这一功能用户没能发现。一方面日志的添加太不显眼，另外一方面新的日志条目添加在列表尾部，列表长了就没法看到。这也是缺少反馈与对比的问题，若是把日志按时间倒序排列，每次新添加的条目先有一个几秒钟的高亮，再恢复正常显示，对用户可能就贴心不少。

 

测试中暴露出的另外一个明显问题是用户找本身的任务很困难。有把任务板中整个项目的任务都看成是本身的，也有点击每个任务费力寻找的。从用户的这些行为来看，任务板的设计是有问题的。现有任务板首先按照任务列表分组，组内可选择“按时间分组”或“按执行人分组”。这样的设计没有从大多数用户的目标出发。

我认为大多数用户但愿看到的任务列表以下：

首先、哪些任务是我要作的。这是我立刻要着手的活。

其次、我发布的任务。我关心这些任务的进度。

最后才是其余任务。

关心用户的目标为重，总体结构的完整、条理次之。

 

温故知新

1. 创造沉浸的工做状态

2. 采用用户概念模型思考

3. 用对比引导用户的眼球

4. 让用户身未动，心已知

5. 提供正面反馈与负面反馈

6. 可见便可改

7. 为不一样程度的用户设计

8. 创新从了解用户习惯开始

9. 让用户很容易的回到前一状态

10. 从用户的目标出发

参考资料

1. About Face 3: The Essentials of Interaction Design , Third Edition, by Alan Cooper, Robert Reimann, David Cronin

2. You Already Know How To Use It，

http://uxdesign.smashingmagazine.com/2012/09/25/you-already-know-how-to-use-it/