微信号:gh_ffb279ea1674

介绍:《奇舞周刊》是由奇舞团维护的前端技术周刊.每周五向大家推送前端技术文章.

假如你的用户是一群程序员

2017-09-03 18:00 弈晨 译

编者按:本文由弈晨在众成翻译平台上翻译。平时提到用户体验(UX)大家可能更多想到的是非开发者用户。而在提供面向开发者的工具时,也要好好研究如何使开发者们用起来更舒服~

(图片来自网络)

当人们谈及 UX (User Experience, 用户体验)的时候,通常都是在谈论他们习以为常的消费级产品:智能手机、聊天 App 或者是耳机。

其实用户体验也关注你为开发者们做点什么的时候。人们太容易忘记开发者也是用户,而且软件开发本质上是一个人类活动,它不仅取决于电脑怎么工作,也取决于程序怎么工作。不可否认的是,开发人员比用户少,但是开发工具越多,开发者就可以花更多的精力为用户提供更多的价值。因此,提供给开发者使用的产品的用户体验和提供给消费者使用的产品的用户体验一样重要。在这篇文章里,我将会介绍针对开发者的用户体验,阐述一种评价这类用户体验的方法,并分享一下我们在对 Flutter 框架(一个新的开发移动 App 的 SDK)进行深入学习时候的一些经验。

开发者用户体验这个想法说起来已经不算新鲜了。对开发者用户体验的研究可以追溯到计算时代,当时所有的用户都算是某种程度上的开发者。在1971年出版的计算机编程心理学是这个话题的一个地标。我们谈论到开发者用户体验的时候,特别是在谈论某个 SDK 或者库的条款的时候,我们通常会参考这个产品的三个方面:

  • API 的设计,包括类的命名、变量方法、API 的抽象层次、API 的组织架构,还有 API 的调用方式。

  • 文档,包括 API 的引用和其他学习资源,比如教程、用户指南,和开发者指南。

  • 工具,包括方便编辑、调试、测试代码的命令行接口(CLI)和 GUI 工具。比如这篇研究就有指出 IDE 的“自动补全”功能对编程中 API 的发现和使用有非常大的影响。

在开发者用户体验里,这三条箴言相辅相成,所以它们需要在设计和评估的时候一并考虑。

怎样观察开发者用户体验

我们在评估开发者用户体验时常用的一种研究方法就是观察一个真正的开发者是怎样使用我们的 SDK 和开发工具来开展实际的编程任务的。这种方法被称为用户测试法,被广泛用于用户体验研究中,而且我们调整了方法让它来评估面向开发者的产品。在针对Flutter的研究中,我们邀请了8位专业的开发者来实现上图中的模型。

这个过程中一个关键的技术是有声思维法。这是一种语言汇报方法,由 IBM 的 Clayton Lewis 开发,这对了解参与者行为背后的动机是非常有用的。

“当你在做编程练习的时候,请‘将脑中所想大声说出口’。这意味着在大脑思考的时候,口头表述出思考的过程,包括你脑中产生的各种疑问、你想到的解决方案以及你做决定的理由。”

我们再三保证评估的是 Flutter 而不是他们的编程技术:

“请记住我们测试的是 Flutter 对开发者的用户体验,而不是在测试你们。所以你们所有的疑惑才是我们想要解决的问题。”

我们与每一个参与者的会话都会从一个有关他们个人背景的暖场访谈开始,接着他们会有70分钟的时间来完成上面提到的任务,同时我们会询问参与者他们的体验。每一次的研究对话——包括参与者的电脑屏幕,都会在另一个会议室直播,几个产品团队的工程师会来观看。为了保护参与者的隐私,我们使用了诸如P1、P2、P3 这样的标识符,而不是他们的名字来在报告中标记他们。


所以我们从这个研究中到底学到了什么有关开发者用户体验的东西呢?

1. 提供很多例子并高效地展示它们

仅仅在非常少的用户测试会话后,我们就非常明显地看到开发者希望从例子中看到一个新的 SDK 是怎样工作的。问题倒不是在 Flutter 没有提供足够的例子,Flutter 在它的 Github 上有成吨的例子。真正的问题是那些真正对我们的研究人员有帮助的例子并没有被合理地组织和展示,有如下两点原因:

首先, Flutter 在 Github 仓库上的示例缺少截图。Flutter 的网站上提供了一个链接,在 Github 仓库中包含一个特别的插件类用来搜索所有的代码示例,但是对参与者来说,选择一个会输出自己想要的结果的示例太难了。

“链接到真实的代码确实很不错,但是选择那个真正想用的那段代码真的是太难了,只有在看到输出以后才知道。”

其次,参与者希望在 API 文档中就有示例代码,而不是在别的地方。试验和错误是学习 API 的一种常用方法,精简的 API 文档允许这种学习方法。

“我点击了‘文档’按钮,但却是 APIs,而不是示例。”(P4)

几个 Flutter 团队的工程师通过直播看到了这段学习会话,他们被参与者所经历的困难震惊到了。结果是,这个团队已经在往 Flutter 的 API 文档中陆续添加更多的示例了(例如ListViewCard)。

此外,Flutter 团队也开始为更大的代码示例建立一个精确的可视化的目录。虽然现在只有少数的示例,但是每一个示例都给出了截图和单独的代码,所以开发者能够很快地找出某个示例是不是有助于解决自己遇到的问题的。

2. 适应开发者的认知能力

编程是一个强认知的活动。在上面的测试中,我们发现,对于一些开发人员来说,纯粹用代码编写 UI 布局是很困难的。在 Flutter 应用中,构建一个布局包括在结构树中选择和嵌套插件。举个例子,建立一个咖啡馆中的信息卡的布局,你需要把每行每列的插件正确地组织起来。这个任务看起来并不难,但三名参与者在尝试创建这种布局时,却把行和列混乱地排在一起了。

new Card(

 child: new Container(

   child: new Row(

       children: [

         titleSection,

         new Container(

           child: new Row(

               children: [

                 phoneNumber,

                 new Container(

                   child: emailWidget

                 ),

                 ]

            )

          )

        ]

     )

   )

)

“能告诉我一下你期望的输出是什么样的吗?”(主持人)

[谈论他想做的事]“嗯,我应该用列而不是行”(P6)

我们用认知心理学来解释,结论是:在代码中构建布局需要有推理对象之间的空间关系的能力,认知心理学家称之为视觉空间能力。这种能力和影响一个人解释如何驾驶方向或转动魔方的能力是一样的。

这一发现改变了一些团队成员对可视化 UI 构建工具的需求。Flutter 团队非常兴奋地看到社区推动了这方面的探索,比如这个基于 Web 的 UI 构建工具Flutter Studio

3. 通过回想促进认知

用户界面应该避免强迫用户回想信息(例如:神秘的命令或参数),这是一个著名的用户体验原则。相反,用户界面应该允许用户识别可能的操作过程。

这个原则与软件开发有什么关系呢?我们观察到了一个问题,了解 Flutter 插件的默认布局行为并修改它们并不太直观 。例如,P3 不知道为什么 Card 在默认情况下会缩小到和它所包含的文本的大小一样。P3 弄不明白怎么让 Card 充满整个屏幕的宽度。

body: new Card(

  child: new Text(

    ‘1625 Charleston Road, Mountain View, CA 94043

  )

),

“我想要的是让它占据整个屏幕的宽度。”(P3)

当然,许多程序员最终都能理解这一点,但是他们在下一次需要同样的问题的时候需要回想出怎样解决它,在这个情景下面开发者们没有明显的线索来找到解决方案。

该团队正在探索几个方向用来减少构建布局时候的回想负担。

  • 总结插件的布局行为,使它们更容易被想到。

  • 提供包含代码和截图的布局示例,将一些回想任务转变为识别任务。

  • 提供一个 Chrome 样式检查器来显示插件属性的“计算值”。

4. 希望开发者对一些“近在眼前的东西”视而不见

热加载是 Flutter 团队非常骄傲的一个特性。开发者能在1秒钟内对运行中的应用程序进行更改,而不会丢失应用程序的状态。

然而,在这项研究的前几次会话中,研究小组对一些参与者在文件保存中触发热加载的预期感到困惑,尽管事实上,热加载按钮在入门指导的 GIF 动画中就显示了。

(编者注:请点击底部阅读原文查看原始的gif图)

结果表明,那些没看到热加载按钮并希望在保存时触发重载的参与者是 React Native 用户。他们告诉我们,React Native 里,在文件保存的时候是自动就会热加载。

开发者的潜意识会改变他们的感知,并对 UI 元素产生一定程度的“盲目性”。Flutter 团队增加了更多的明显的提示,帮助开发者们发现热加载按钮。此外,一些工程师一直在研究一种可靠的方法来为有需要的用户提供热加载。

5. 不要以为程序员在代码中出现英语单词的时候会如你所愿地理解它

在 Flutter 里面,一切皆插件。用户接口主要是通过嵌套插件组成的,有些插件只带一个孩子,而其他的则有多个孩子。这种区别是由小部件上的“child”属性或“children”属性的存在表示的。听起来非常简单是不是?

我们也是这么觉得的,但对于一些参与者来说却不是,单词的单数形式没有成功地表明只有一个插件可以嵌套在当前的插件中。

“我在想,‘child’可以是多个,也可以是一个,我可以传数组吗,还是只能有一个?”(P2)

“这个‘child’属性的值会包括四样东西,第一行信息,然后一条隔离的横线,之后再有两行信息。”(P2)

这种对属性名称语义的错误解释导致了这样的错误代码:

在本例中显示的错误提示,虽然准确,但却没有足够的操作性来促使参与者返回正确的路径:

初学者很容易在这里犯错误。然而,Flutter 团队并不希望看到一个专业的开发人员浪费了几分钟时间处理这个简单的问题。因此,在研究结果公布后的几天,就有了一个短期修复方案。它添加了一个非常有用的混合插件 Column,它是通过运行“flutter create”命令获得的应用模板。他们的目标是尽早将“child”和“children”之间的区别暴露给新手开发者,这样他们以后就不会浪费时间去解决这个问题了。此外,一些团队成员正在调查一个长期的解决方案,以提高在这种情况和上述情况下的错误信息的可操作性。

结论

我们可以从观察开发者使用 API 中学到很多,然后用聪明才智知识来提高开发者的用户体验。如果你编写了任何代码或构建了其他开发人员使用的任何工具,我们鼓励你观察开发者们如何使用它的。正如一个 Flutter 工程师所说,你总是从观察用户研究中学到一些新东西。随着软件继续推动世界变化,让我们保障开发者们尽可能的高产并快乐着吧!


奇舞周刊

——————————————————

领略前端技术 阅读奇舞周刊


长按二维码,关注奇舞周刊


 
奇舞周刊 更多文章 Stylelint: 我们日夜期盼的样式表Linter 奇舞周刊第 225 期:大前端的转变之路 使用 Flow 进行类型检查 何时使用立即执行函数表达式 使用 Paint Timing API 度量性能
猜您喜欢 如何成为一个成功的软件工程师 TCP/IP 之 大明王朝邮差 【2016-8-9】如何识别网络欺诈? 作为一名基层管理者如何利用情商管理自己和团队(一) 聊聊Node.js独立日漏洞