前言
随着产品不断迭代,产品功能会逐渐丰富全面,但对于用户来说,是不是齐全的功能就等同于好的体验呢?本文将以“ 腾讯会议 设置布局”交互优化为例,结合《设计心理学 2》的相关理论,分享关于简化复杂任务的设计心得。
腾讯往期案例:
如何构建科学有效的色彩系统?来看腾讯文档的实战案例! “色彩是我们感知世界的重要媒介,对于信息传达有着重要的作用,能使人们能够更有效的感知设计的意图和内涵,使传达更高效。
阅读文章 >
一、为何要“简化”任务 一款产品是不是功能越齐全多样就意味着越好的产品体验呢?
对于专家用户来说,当然是功能越全面越能满足自己的需求,但对于新手用户来说,全面的功能未必等同最佳的体验,过多操作挤在同一任务中,可能会让用户感到不知所措,难以上手。因此设计师应尽可能帮助用户简化任务,避免用户因为界面复杂而放弃任务。
专业类软件的核心用户通常是掌握某项技能的专家用户,他们在使用前,已经有预期需要先系统学习整个软件的操作,因此它们的复杂和全面是符合专家用户要求的。
即便如此,近年来,Figma 之类的软件也在持续打磨易用性,降低用户使用门槛。
专业图形建模类软件操作界面
作为一款面向普通大众、以高效协同为第一初衷的产品,腾讯会议更需要不断简化复杂操作,让大多数用户都能快速上手,流畅地主持或参与一场会议。下面我将结合腾讯会议设置布局的交互优化案例,来分享关于简化复杂任务的一点点心得。
会议场景矩阵
相比线下会议,线上开会不免缺乏临场感,因此在腾讯会议里,主持人常常需要通过设置布局来让成员关注重要的视频画面。在无特殊需求的普通会议中,官方提供的两种默认布局就能满足常见的会议场景:
腾讯会议默认布局
实际上,真实的会议场景需求多种多样。例如,企业汇报更关注发言人,而小组讨论则更侧重轻松的沟通,如何在同一个界面里满足不同的诉求成为难点。为此,腾讯会议在默认布局的基础上,推出了“自定义布局”和“会聚模式”功能,来提供更丰富的会议布局选择。
丰富的布局模式
因概念陌生,且需要设置成员顺序、位置以及画面比例,对于普通用户来说,这两个功能有一定的使用门槛。在该功能推出一段时间后,我们发现:用户普遍找不到设置布局的入口,在具体设置过程中也遇到较多困难,认为设置布局是“高阶”而“复杂”的功能而不愿尝试。要让用户能把布局能力真正用起来,简化布局的设置过程就显得尤为重要。
布局操作路径
为了探究具体是什么原因让用户觉得功能复杂,我们开展了易用性测试,得出以下几个交互层面的具体问题,包括:1)入口难找;2)操作难理解;3)流程任务多;4)效果无预期。
因此简化任务流程是当下急需解决的问题。
具体问题
二、复杂任务的“简化”原则 那么如何才能把任务变得简单呢?依照诺曼的《设计心理学 2—如何管理复杂》一书中所说,系统复杂性的总量是恒定的,想要用户操作变简单,那隐藏在幕后的复杂性就要增加,在管理复杂时,可以从以下角度出发:
良好的概念模型 易懂的语义符号 自动化、模块化的配置 鼓励和系统默认 组织结构 学习的辅助工具
如何管理复杂
“概念模型”存储在用户脑中,也被叫做心理模型,它能帮助我们快速理解事物运作的背后逻辑。若我们的界面没有准确地传达出概念模型,用户就需要通过不断地摸索和猜测来尝试,最终很有可能因为不理解其含义而失去耐心。设计师应当通过浅显易懂的语义符号,帮助用户构建合适的概念模型,以帮助他们更好地理解产品功能和操作逻辑。像 iphone 的”开锁“提示、微信的”漂流瓶“、深泽直人的 CD 机,都是通过用户生活中熟悉的物理模型,让用户快速联想到熟悉的事物,从而更好地理解接下来需要与产品互动的操作。
概念模型案例
“自动化”选项和默认配置,则能帮助用户摆脱繁琐的选项和步骤。我们可以基于对场景和用户习惯的了解,提供常见的选择或智能配置。例如在表单设置页内提供默认的模板和样式,能够让用户更轻松地理解产品功能和效果。相比起手动添加内容,可以大大减少理解成本,帮助用户更轻松地完成设置过程。
通过“自动化”简化用户操作
“组织结构”是指把集中在同一个页面的任务进行结构重组,拆分成易于操作的小步骤,并保证每个模块都简单易学,容易理解。用户在进入一个铺满选项和操作的页面时,通常会不知所措,不知道从哪一部分先开始。或许本身设置的难度并不大,但复杂的设置项也会在心理上给用户带来巨大的压力,从本能上抗拒和排斥。好比完成一场马拉松可以把每 5km 作为一个里程碑去逐个击破,倘若我们能将原本用户觉得困难的大目标拆解成一个个简单的小目标,明确每个步骤应该做什么,并在完成每个步骤后都给予充分的鼓励和反馈,用户就会有持续去完成设置的耐心和动力。
拆解关键步骤
“学习的辅助工具”是指在合适的时机给予用户有效的帮助指引和提示,对于 Saas 类产品来说,在用户需要的时候及时提供帮助和指导,能给用户充分的安全感,缓解用户操作时的不安和紧张。关于操作的提示,我们不能只是告知用户哪里出错了,更重要的是给出原因并提供解决方案。提前引导而非指责,将能大大提升用户持续操作和探索的信心。另外需要注意的是,用户很可能第一次遇到时未必能记住所有指引的内容,因此对于复杂的操作任务,还需要提供稳定常驻的帮助入口,便于用户二次查阅。
辅助学习
三、产品“简化”的设计策略 有了设计原则的指导,我们的设计目标也会更加清晰。在具体的方案设计层面,我们需要结合设计对象的特点,将理论指导转化成可落地的设计方案。
布局设置一般由主持人在会议中统一设置,因此在场景上,具有“设置时间紧张”、“自定义程度高”、“生效范围广”、“角色复杂”等特点。结合前文梳理的设计理论原则及业务场景特点,我们将设计理论转化成了具体可落地的设计策略。
设计策略
具体包括以下四点:
1. 简化入口,及时帮助
通过便捷的入口和及时的引导,让功能在合适的时机曝光,保证用户在需要时轻松地找到功能。针对“入口深”这个问题,我们将原本不稳定的入口改为常驻入口,待用户选择布局后再提示相应条件,及时引导用户在使用前先打开摄像头。同时在移动端和应用面板也都增加入口,降低用户寻找的门槛。
增加入口
另一方面,我们将原本需从客户端跳转到 Web 页面的操作,都简化至客户端内,减少用户跨端操作,避免因为过多的窗口跳转让用户感到迷惑。同时精简了高级功展示,在会议的客户端只保留核心操作,这样用户就不需要在多个页面之间来回跳转,完成设置项后,也可以在会议的客户端立即生效。
缩短路径,减少跳转
考虑到新手用户并不一定能理解“布局”、“轮询”等功能的作用,我们在页面顶部增加“新手指引”常驻入口,用户可以通过步骤引导图来详细了解每一步操作。对于用户比较陌生的高级功能,也在功能的启用选项旁提供 GIF 动图,帮助用户全面、直观地了解功能。
通过新手指引快速学习
2. 自动配置,提供模板
“系统默认”具体落地到设计方案,即可以根据用户的使用频率,自动设置常用选项,同时提供默认模板,减少用户的决策压力和理解成本。例如,用户在进入设置页时,可能不太理解“布局”、“视图”、“背景图”及“模式”等陌生的概念名词之间的区别,也不知道这些布局样式适用的场景,因此,我们通过提供默认模板和效果示意,帮助用户快速理解概念之间的区别和不同的效果。
常见模板及官方背景图
同时考虑到自主设置有一定操作门槛,我们把常用的样式增加到默认列表中,用户选中后就可以直接使用(左图,L 布局)。对于座位设置功能,我们也提供了“自动填充”的默认选项,新手用户可直接选择自动排序,快速使用布局功能,而专家用户若有特定的排座诉求,则可以切换到“手动模式”来进行更高级的设置(右图,设置座位)。
提供多种模式,满足不同诉求
3. 拆解任务,分解流程
“简化复杂页面”非常重要的一个方面是重组页面结构,把聚合在一个页面的任务根据先后顺序拆解成不同的步骤,让用户不再迷失于平铺了多个功能的庞大页面。
拆解步骤
拆解成小步骤后,可以通过增加步骤条导航和引导提示,让用户更明确每个子环节的“小目标”和当前所处的进度阶段。
通过导航降低用户心理门槛
除了将一个页面拆解成多个步骤,还可以通过收起/隐藏侧边栏目录,让用户更聚焦在某一具体的内容,免除其他元素的干扰,这样用户能更专注于布局画面本身的编辑。
4. 效果预览,建立联想
新手用户初次设置布局时,可能缺乏安全感,不知道应用范围是自己还是全部成员。为此,在设计客户端的设置流程时,我们提供了“场景示意图”和“效果预览区”,让用户在编辑的过程中也能快捷地联想到应用后的效果,实现所见即所得。
除了官方提供的场景图模板,用户还可以根据自己的诉求在编辑器内 DIY 创作自己的场景图。考虑到对于新手用户来说,场景图编辑器的功能有一定使用门槛,在进入编辑器时,我们都会提示用户,可以通过调整模板场景图来快速上手,理解创作后的效果。
通过效果图构建联想
对于设置了座位、但未开启摄像头的成员,我们通过“铭牌”的概念模型,让用户能够联想到线下会议室里的“座位牌”,从而更好地理解这个座位已被主持人提前预留给了重要的成员。
通过概念模型映射,帮助用户理解抽象概念
可以看到,无论是场景效果“示意图”还是“名牌”的概念模型,都是通过真实世界里的元素,唤起用户在真实世界的心智,从而帮助用户更快地理解软件界面的功能逻辑。
总结与回顾 经过持续半年的方案打磨和研发落地,上文提及的改版方案已全部上线,会聚模式和自定义布局的渗透率都有了非常大的提升。
通过该项目我们知道,在面对场景复杂多样的产品时,我们需要遵循一些通用的 简化设计 策略,综合考虑不同用户的认知门槛,尽可能降低上手难度。具体策略包括“简化功能入口”、“提供默认设置”、“拆解复杂流程”、“构建联想概念”等。
为用户打造更简易的使用流程,一步步简化用户设置任务的操作,才能从根本上提升用户使用产品的效率。
欢迎关注作者微信公众号:「腾讯设计族」