原文作者:Facebook设计师 Geoff Teehan
原文链接:Reactions: Not everything in life is Likable
我来到Facebook和我在意的人分享各种各样的事情,从庆祝连续练习瑜伽60天,到哀悼父母的离世。这些与我分享故事的人,也有他们自己的故事来分享。有时候我们想很简单的表达出我们喜欢他们的故事,或是当生活不如意时表达同情。
在2009年,Facebook推出了一个按钮,允许人们给他们朋友的文章给予反馈。我们把它叫做“点赞”,人们非常喜欢它。轻松简单地滑动你的News Feed,然后摁一下小小的“大拇指”去答谢你朋友的文章。有时候会不知道该说些什么,或者你真的不想说什么,只是想让某人知道你关注着他们。这就是“点赞”的作用,简单平滑。
但是,生活中不是事事都可赞。
是时候超越“点赞”了
用户曾告诉我们,他们想要在Facebook上更多样地去表达他们,大约一年前,Mark组建了一个团队,开始认真思考怎样让“点赞”按钮更有表现力。我们十分兴奋地开始了这个项目-你不是每天都有机会为关于公司产品的重要部分工作。
一开始我们就知道,这个项目将会是个挑战。这些明显的挑战像是应对多平台,多设备和新旧机型的兼容适配。然后找出更多挑战的方面。例如,我们花费了大量的时间优化“点赞”、“评论”、“分享”三个按钮,以便他们能够很容易地被使用和理解。会有很多的互动在这上面,所以任何改变都会影响到是否易于理解和易用性,这个行为关乎着数百万人。我们需要沉着地去策划每一个改变,让它看起来像是自然地演变,避免让我们平台上的每一位用户感到生硬或者割裂感。
这里同样有许多其它的问题需要得到答案:
什么是反应?
全球的用户是怎么理解它的?
用户怎么才能充分的使用它?
人们怎么才能方便地离开Reaction?
这些事很复杂的问题需要去解决,同时保证“点赞”的机制很简单。
像所有好的设计一样,得到一个简约的解决方案是繁复的。
与用户共情在这里非常重要,这也是为什么我们反复迭代,并且花费大量时间。扩展Reactions的重点是,如何寻找到一个能够被普遍理解的词汇,来让用户更好更丰富地表达他们。
我们把问题拆分成两个部分,同时开展工作:
在“点赞”之外,我们需要哪些其它的reactions。
人们需要如何表达和使用这些reactions。
从这两条方向上,我们提出了关键的原则-使用我们构建的场景剧本。这些原则指导着我们的团队,通过整个项目周期帮助我们作出明确的决定。用户不会直白地告诉我们最终的解决方案是什么,但是会暗示我们它不是什么,然后给我们提供一个方向。
原则,结合经验研究和数据的见解,凭借着直觉,同时包括Facebook行业精英的知识收集,让我们解决了这个问题。我们创造的团队包括研究员、内容战略家,工程师,以及我们的核心设计团队:Andy Chung,Brandon Walkin and Brian Frick.
Reactions
这里有一些原则指导我们延续至今做着决定:
Reactions应该能被普遍理解,,Reactions应该适应全球化,能让更多的人一起联系交流。
Reactions应该能被广泛地使用和表达,Reactions应该允许人们通过更多的表达方式给予反馈,更好地结合我们在真实生活中的反应。
我们首先需要考虑的是应该包含多少不同的Reactions。这看起来可能是个简单的任务:只要在“点赞”之后接着放下一个“朝下拇指”的按钮然后推出来。可没这么简单,人们需要它足够复杂和丰富来满足交流过程中的各种场景。简单的“喜欢”和“不喜欢”不能够满足描述日常生活中的大量事情。
尽管这里不会像是二进制一样的是非选择,那么这里会像emoji一样,让人们有好几百个可选吗?可能不会。综合其它原因,有数百个Reactions去选择意味着每篇文章后会有有大量类型的Reactions留在那里,这在News Feed里面会很困难去使用。此外,我们提供的reactions越多,普遍理解性就越差。
一年多来,我们一直在进行国际研究哪一类reactions最能够吸引人。这是一些我们考虑的事情:
Top Stickers
我们总是在观察top stickers和emojis,来发现哪一类的“reactions”已经被人们用在了Facebook上。
最常用的搜索条件stickers
尽管不常用,我们仍想知道用户使用stickers时会用哪些搜索条件。
顶部的简短评论
我们也采取了常用的匿名全球短评论样本。从中得到了一些人们用于表达自己的特定语言,帮助我们充分了解人们使用这些类型评论时的上下语境。这里是一些我们在美国采取到的短评论例子。
除了分析样本,我们进行了国际性调查,和人们交流,与我们的国际团队一起共事。从这些当中,我们逐步缩小范围确定了一个精致的表单:
你可能已经注意到了,这里有两个reactions没有出现在我们上周发布的版本当中:“Confused”和“Yay”。在测试当中,“Confused”被使用的很少,因为它给带来了更多的认知负荷,每一个reaction需要给大多数用户一个明确的含义,“Confused”并不能做到这一点。同样“Yay”也是,它并不能做到易于理解和国际化,它很容易和“Haha” 或者“Like”重复。现在没有这两个的体系更好一些。
插图
另一个关键的部分是这些reactions应该看起来是什么样子。我们希望给Facebook带来独一无二的插图,但是我们又希望它在整个生态里又优雅地存在,能够简单普遍地被理解,这是一个我们最初的方向:
我们最初的插图没有在沟通,当范围逐渐缩小之后才开始着手。最初的插图作为我们设计这一套体系的占位符存在。现在是时候开始迭代它们了。
这里的挑战包括了怎么选取一套合适的风格来适应这一组reactions,然后又能将每一个reaction都清晰单独地表现出来。这些reactions表意重叠了也是我们遇到过的问题。每一个微小的设计改动都可能会让它看起来像另外一个reaction,或者根本不能表达出正确的含义。有时改动微笑的曲线或是眼睛的倾角,可能会让“Wow”看起来像“Yay”,或是“Yay”看起来像是“Haha”。
我们同样探索了有没有标签的体系。给reactions加上标签能够帮助我们辨别这些reactions同时也能让它更国际化。他们需要能够被普遍的理解,所以如果有一个日本人回复了你的文章,你需要有一致的认知。为了深入的了解这一点,我门和国际团队以及非语言交流方面的专家密切合作,我们进行了各种研究,并在不同的国家测试早期版本。
早期版本是静态的,并且我们知道动画是让它们更有表现力的关键,我们和动画师一起工作,让静态的reactions生动起来。然后设计师和工程师找出一种高性能的表达方式。设计师通过伪代码来表现每一个reaction。他们的工作会被工厂师接手,然后高精度还原平滑流畅的动画。
当我门开始合并动画的时候,我们认为同时动画可能会对眼睛造成负担,所以在最初的时候,我们一次只会有一个reaction动画(你手指触碰着的那一个),然后其它都是静态的。我们拿到Zuck审查(你去见Mark然后展示一些像reactions这样大型项目的),尽管这不是必要的工作。如果你快速的将手指划过每一个reacion,他们会一起动起来。Mark建议我们那就让他们同一时间露出来吧。我们原先也更喜欢这个。谢谢,Zuck。
体系
没有在一个预定的原则语境之下,很快我们会发现我们建立了一个比我们需要的更复杂的体系。这里是一些知道我们的原则:
reactions应该是“点赞”按钮的拓展。“点赞”、“评论”、和“分享”在Facebook是普遍存在的,如果添加第四个按钮将会增加更多的复杂性。
reactions不应该让现有的行为变得更困难。非常认真的去介绍这个新特性十分重要。用一种不会破坏十亿人产品使用习惯的方式。换句话说,我们想要保证“点赞”的简单和易用性。当你tap“点赞”时,你是表达你喜欢这篇文章。
留下一个reaction
当我门开始探索输入机制时我们不是到是什么,或者这里该有多少reactions。一些早期研究表明,这里可能会有5~10个。压力测试时,我们开始设计一个包含15个不同的reactions。因为这样收纳起来比扩展更简单。
(这里的视频被墙了?)
这个原型的目的是理解让不同reactions存在于一个体系的方式。牢记在心,我们不知道真实的reactions是什么,所以视频中只是一个虚拟的例子。
像这样的前期概念和初步尝试都是教育-教会我该做些什么,更重要的是,告诉我们不要做什么。他们揭露空白,未知和更多。
我们觉得上面的方法干得不错,快速的带来了广泛的反馈,它暴露出了一些问题。换句话说,它教会了我们解决方案应该包括哪些:
UI可以在屏幕顶部被切断;
尽管可操作的区域很小,人们还是经常会滑动他们的指头到上面的标签;
解析文本标签会感到费力,这让国际化变得困难;
线性风格的插图在大尺寸的屏幕上看起来很棒,但是在小尺寸时就很难理解-一些我们需要思考人们如何使用它们在New Feed上;
一些用户调用设备,然后举起他们的手指以便他们能够tap到一个reaction,这可能会取忽略输入面板;
大量的reactions会带来冗余的设置。
我们继续迭代,第一版的原型包括了一个简单的插图以便我们能够根据手指的位置来调整解释词,这个引导了用户在下决定之前预览每一个reaction,而不仅仅是能看到每一个选项,那样太繁琐和费时了。
最后,我们为了支持dock model去除了单插图的方式,这个方法允许人们快速的浏览全部的reactions。因为面部表情比阅读文本建立了一种更友好和国际化的认知体系。我们也要去解决一些早先时候存在的问题。举个例子,这个新的体系适应了它在屏幕上的位置,不再会丢失定位,我们调整了标签和reactions的位置,这样你的手指不再会覆盖它们了。最后,只要reactions dock被启用,不需要通过滑动或者点击reactions去选择了。
使用Reactions
在一个只需要用点赞解决的世界,你用起它们来十分简单。我们只是要通过“17次点赞”来告诉你它有多少,它是一连串的字母在“点赞”、“评论”和“分享”按钮上面,这一串字符在内部我们叫做:Bling String。这可能需要一个完整的反思,因为陈述“十个reactions”不能够表达出我们设计提供的多样情绪-人们通常会觉得这文章有趣,悲伤或者惊喜吗?这个解决方案需要让特殊的reactions被单独的记录下。我们仍然想给出一个完整的反馈,就像我们对“点赞数”做的那样。
我们的第一种方法非常简单,我们设计了bing string来展示每个被使用的reaction以及它们的使用次数。它在个人文章那里表现的不错,因为那里通常就只会有两种类型的reaction。但是当有大量信息时就会显得乏力,特别是那些公共内容。也很难去理解完整的反馈。旧的bling string很简单,因为它只是传达出一个信息。因此,它也很容易被浏览和理解,忽略或者滑掉。
最终的解决方案是排列前三的reaction和一个总数。这样的方法,能让你了解到大多数人对你文章的反馈同时也能知道文章的总反馈。此外,我们还会通知你最亲密的朋友来回复你的文章,直到引入reaction之前都是动态的。你也可以看所有的reaction内容,通过tap这个bling string。
最终的产品
经过了一年的工作和数月的测试,我们真的很兴奋地上线Reaction并进一步了解它在世界上怎样被使用,我们希望每个人都能喜欢Reactions,并且人数会越来越多。
和所有的软件设计一样,没有什么是会了结,结束或者完成的。Reactions也不例外。我们将会继续跟进,迭代改善它,但是我们希望这是一步,让Facebook的体验更贴近用户。
(作者先从需求开始谈起,人们希望得到“点赞”之外更多的表达方式,于是作者和他的团队开始了丰富reactions的工作,对简洁明快的短语收集整理,分析出用户最常用的一些表达需求,再把这些短语形象化,又对插图的风格,静动态,以及适应性提出筛选,在reactions哪里一共展现出了12种方案,体现出团队优质的设计水准以及对自身的不断否定的能力,在最后bling string的展示上也是细心推敲,通过对测试用户的观察,不断来改进,得出了最终的版本,作者和他的团队依然在继续追踪项目的进展,不断优化细节。这动态的表情看起来很棒,不是吗)