万书网 > 文学作品 > 腾讯产品法 > 第九节 交互与视觉

第九节 交互与视觉




用户体验的倡导者杰西·詹姆斯·加勒特(Jesse  James  Garrett)在2002年出版了他的著作《用户体验要素》。在这本书中,他将用户体验分为五个层级——战略层、范围层、结构层、框架层、表现层,并根据任务流和信息流划分了每个层级的工作内容。越往上的体验层级越具象,也越接近最终向用户交付的产品。

在上文中,我们已经谈了很多范围层的问题,现在沿着体验层级再往上一步,来看看位于上面的结构、框架以及表现层的设计。注意,这里谈到的结构和框架都是产品中具象的结构和框架,比如所有产品页面以什么样的方式组织在一起,它们之间如何连接,以及每个页面上要放置哪些内容和功能按钮,它们的位置、大小关系如何等等。

“用户体验要素”经典框架图

交互和视觉是无法分割开来的一个整体。交互依赖于视觉呈现效果,视觉又依赖于交互的指引。举个简单的例子,如果一个页面上所有按钮的位置、大小都设计得很合理,但某个重要按钮的颜色没选对,本该使用抢眼的颜色却用了不起眼颜色,那最终交付的设计方案还是失败的。所以我们看到实际工作中交互设计师(或承担交互设计任务的产品经理)和视觉设计师常常会密切合作,避免两者相互冲突、彼此消减,力求达到“本应如此”的协同状态。

这是一个既残酷又公平的竞技场。因为设计者的所有思量最终到达用户那里,他们只会用“用脚投票”,凭自己的直觉做出“好与坏”的判定,并且这个判断时间极短,或许只有短短几秒。



设计就是分类


交互设计工作首先要解决两个基本问题:

如何组织产品中的页面;

如何组织页面内的元素。

解决这两个问题的核心方法都是分类。

下面以腾讯CDC[16]分享的Web端泛娱乐支付方案[17]为例,一起来看看“分类”在交互设计中的运用。项目背景是计费平台部要为腾讯及其合作伙伴提供全新且通用的泛娱乐支付解决方案。后台以SDK包提供给业务,前端以支付弹窗形式适配所有业务场景。设计目标很明确,就是要优化页面,提升支付效率并统一适配所有业务。

拿到任务后,团队首先分析了改版前存在的主要问题:

改版前问题分析图

紧接着要解决“如何组织产品页面”的问题。这时需要确定的问题有:

采用不同的支付方式,完成任务分别需要哪几个关键步骤?

穷举所有步骤后,哪些步骤可以分类聚合到同一个页面?

通过进一步梳理,团队以表格形式列出了主要步骤和页面间的关系。其中,暂时没有考虑异常限制的问题。

分析支付方式步骤与页面的关系图

结合业务特点、弹窗尺寸的限制,进一步分类梳理后,结果如图:

结合限制,穷举所有步骤与页面的关系图

页面逻辑组织完成后,我们再看“如何组织页面内元素”。一样的方法,先穷举罗列出所有元素,然后将它们归纳、整理、分类聚合就能划分出几个重点功能区域。

元素分类,得到最佳聚合方案图

这些功能区域的排序必须符合用户习惯。比如在这个案例中,就需要符合用户的常规的视觉动线——由上至下进行排序。

功能区排序与用户视觉动线统一图

最后,细化所有异常限制性元素,完成页面的最终布局:

组织完成后的通用支付解决方案图

从这个案例我们可以看出,交互设计始终聚焦于组织元素的方式,思考它们如何分类、如何聚合。只不过这个组织过程并不是任意的,其中还要重点考虑用户的认知。

我们知道,形容交互做得好,最常见的说法是“别让用户思考”,这就意味着用户在页面与页面间的跳转必须是自然的、富有条理性的。

不过,效率依然是衡量交互优劣的核心指标。在交互逻辑清晰的大前提下,能用三步完成的交互就是比四步完成的要更好。毕竟,用户转化=流量×步骤数×每个步骤的转化率。路径越短也就意味着用户最终的转化越高。通过观察每个步骤的转化率数据,我们往往能够找出设计在哪一个环节出了问题。重新设计转化率低的环节就能有效改善一个交互路径,提升最终转化。

效率与习惯的平衡,行为与心理的关系,甚至产品传递的心理基调都是交互需要思考的范畴。设计者还将遭遇的挑战包括但不限于这些问题:

极简的设计方案是怎么做到的?

如何运用交互体现产品氛围?

如何把产品做到用户“自然、下意识就能操作”的程度?



拆解任务才能实现极简


选择太多易引发挫败感。

美国斯沃斯莫尔学院社会心理学教授巴里·施瓦茨(Barry  Schwartz)将这种现象称为“选择的悖论”。他提出:更多自由和选择不能带来更大幸福,相反,选择越多,幸福越少。

为证实这点,施瓦茨做了果酱试吃的科学实验。在实验中,他分别摆出6款和24款果酱给顾客随意试吃和购买。结果发现:两种状况下顾客品尝果酱的数量差不多,但提供6款果酱时,购买比例有30%,而提供24款果酱时,购买比例降到了3%。

在产品设计领域,多选对用户来说同样意味着灾难。同一页面内有多个入口,同一功能有多种实现方式,同一界面有多种展示形态,所有这些都是产品设计中常犯的错误。

当然,很多设计者已经能够意识到“减少选项”的必要。可仅仅意识到是不够的,我们还要进一步去看藏在“选择”行为背后的东西是什么,“选择”行为对产品而言意味着什么。

答案其实很简单:时间和行动成本。更高的时间和行动成本会拉低用户对产品的需求。所以很多时候,已经不是选项多或少的问题,而是这个选项是否有必要存在的问题。

PayPal早期多余的流程选项图

上图是一个PayPal最初添加信用卡的流程截图,是用户按照流程发生付款行为的一个体验。可为什么要用户自己选择信用卡的类型呢?Visa卡是以4开头,MaterCard是51或者55开头的,在系统设置一个自动识别的功能就能消除这个选项,它完全没有存在的必要。

比这个例子更复杂的问题是这样的:产品某功能确实包含多种类型,这时候怎么做到“不给用户选择”?比如,一个音乐播放器总要选择存哪些歌在里面吧?一个内容发布按钮总得选择发布的类型吧?

碰到这类问题,试着不要下“不可能”的结论。办法总是有的,比如换一种方式去拆解任务。

乔布斯在设计iPod时决定“不提供歌曲管理功能”,和其他音乐播放器不同,iPod只负责播放音乐。但“iPod没有这个功能”不等于抛弃用户需求。iPod只是把这个功能从内部拆解出来,转交给电脑上的iTunes去承担。通过这种拆解和转移,iPod最大程度简化了自身的交互方式,实现了产品极简。

同样的,微信团队也运用拆解的思路设计了微信朋友圈的发布按钮——一个不必选择类型的发布按钮。用户轻触“相机”按钮,只触发唯一的操作:发照片(视频)。朋友圈文字、链接、音乐的发布方式则被拆解和转移了。

如何拆解?还是老办法,多问几个为什么。

Q1:自然的状态下,我们为什么会想要分享一首歌或一篇文章?

A1:被歌曲或文字触动,产生分享的念头。

Q2:那是先有“分享的念头”还是先有“被音乐和文字触动的感觉”?

A2:先有被触动的感觉。

Q3:一般什么时候会产生这种触动的感觉?

A3:正在听歌或正在看文章的过程中。

通过一番追问,我们可以看到,音乐和文章都是“被分享”的目标物。主动在社交媒体中“搜索”再“分享”出来的设计,不符合人们自然的分享逻辑,鼓励真实情感的产品不会允许这种刻意却不自然的设计。

这样就还剩下一种类型:纯文字内容。微信把它转移给“长按”操作去承担,用不同的行为模式将图片与文字类型区分开来。