服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

协同办公产品设计,看这一篇就够了|02实时协同产品的特性

日期: 来源:58UXD收集编辑:58UXD

在「协同」办公场景越来越丰富,功能越来越强大的今天,只要有网络,人们就能够实现多⼈、跨地域、多终端实时沟通协作。这其中,协同办公产品起到了关键性的作用。

除了易学性、效率、实用性、容错性等通用的设计原则之外,协同办公产品在设计上还有什么特别要关注的吗?

我们从多个协同办公产品的实战经验出发,发现并总结出两类典型协同办公产品的系列特性,并通过实际案例阐述了针对这些特性的设计思考。他们分别是: 以在线协同文档(美事文档)为代表的实时协同工具,和以项目协同(58云效)和任务协同EHR为代表的流程类协同工具。

由于他们既存在协同办公产品特有的共性,又在各自的场景中体现出明显的差异性,为了能讲述得更加详尽,我们的文章会分成上中下三篇。今天要分享的是第二篇——实时协同产品的特性。


实时协同,也就是在线协同,是指多人在同一工作界面达成同一目标或完成某一事件。常见的协同工具有协同文档、协同绘图软件等。作为协同工具,有复杂而繁多的功能,具有一定的学习成本,因此需要设计清晰简洁的协同编辑界面,帮助用户更好地理解和使用协同编辑功能。
实时协同工具的操作界面布局通常分为顶部或左右的导航或工具栏(图中1、2、4),根据协同工具的能力承载用户经常使用的功能操作;中间区域则是编辑工作界面(图中3),为用户提供协同编辑交互的主要区域。

本文通过设计经验针对实时协同工具的研究,为大家总结了以下四大设计特性,以此保证在设计过程中充分考虑到用户使用体验,提高协同编辑效率和质量,供大家参考。

01 成员状态可见性

与其他协作工具不同的是,实时协作需要用户在同一工作界面完成工作。当工作界面承载多人协作时,需要保证所有人操作时间、所在位置、操作状态、用户进出工作界面状态的可视性,以此来追踪和跟进所有用户的进度和内容,保证工作顺利推进,我们可以通过设计手段来保证状态的可见性。

参与协作的用户

我们可以设计一些视觉元素来关联用户,让用户了解工作界面中操作进行中的用户都分别对应哪些视觉元素,能简洁清晰帮助用户了解其他用户的状态。例如:在导航上通过头像、色块等关联关系动态展示当前工作界面内的用户,让协作用户掌握当前工作界面内“人”的基本情况,并承载所有协作用户的管理、操作时间、位置记录。

协作内容定位设计
对于协作人共同产出的内容,需要用户快速分辨出哪些部分是谁产出的,需要对协作人的操作位置、操作内容进行定位和查找,才能达成高效协作的目标。可以使用颜色标记或动态图标等方式,突出显示正在编辑的区域。同样,内容和位置的定位也可以通过设计进行可视化来帮助用户在工作界面内将“内容”与“人”进行关联,突出显示正在编辑、已完成编辑的区域。

02 互不干扰性
多人协作时,存在操作互相干扰的可能性。对比操作后内容的丢失,我们需要提前防止操作的干扰给用户带来损失,尽可能保证用户在工作界面操作的专注性和操作冲突的容错性。多个用户同时编辑同一个内容时,可能会出现操作的冲突,我们需要明确地给用户提示正在冲突操作,通过合理的布局提示、引导信息信息展示,甚至可以为用户提供冲突后的解决方案或者容错提示,帮助用户快速了解冲突的情况,做出正确的操作选择。
编辑提示
在编辑界面中,我们可以增加编辑状态的前置提示,例如,当在表格中明确提示哪个用户正在操作的单元格,设计清晰的状态提醒,让其他用户避免操作冲突。

冲突提醒
如果无法避免双方操作的冲突,要为用户提供损失最小的解决方案,并且告知用户后续如何操作,避免用户因干扰带来的损失。例如,操作后的弹窗提醒等。

03沟通及时性
协作状态下会产生多种形态的沟通方式,需要根据不同的协作场景选择,能利用文本、图片或是音视频等能力打造高效的协作生态,以此来减少用户频繁跳出工作界面沟通,保证合作中信息交换和消息触达。
工作界面内的即时沟通
当协作用户共创时,音视频功能和协同定位进行设计,可以帮助用户在界面内快速完成多人的沟通,减少内容输出后的反复沟通。

工作界面内的留言
当协作用户分别创作时,可以通过留言、批注、提醒等方式完成信息交换,便于协作用户更快地推进工作。

04 操作预判性
协同工具包含很多复杂功能,协作人要在繁多的功能找到需要的不是一件容易的事情。因此在设计中,需要预判协作人在工作界面中使用到的工具和场景,为协作人提供合适工具,缩减查找路径,以此提升协作的效率。
“懂你的”工具栏
协同工具的功能繁且多,不同内容的操作工具也不同,在设计中可以根据用户当前的任务,聚焦场景,预判用户目的,为用户提供便捷工具。例如:在文本中插入表格时,工具栏调整为表格操作工具。

手边的工具条
除了用户熟悉且固定位置的工具,还有需要很多轻量便捷的手边工具。手边工具不需要用户移动很远的位置进行工具的查找,即能为用户提供轻量便捷的操作。例如:在编辑状态下的选中文本,预判用户可能会进行文字、格式等编辑的操作。


实时协同工具在使用过程中因为目标不同,会有产生出很多场景如:编辑、管理、演示等。针对不同的目标场景我们设计的侧重点也不相同,需要设计师们根据目标导向来使用设计原则。
综上所述,在「实时协同」这一主题的设计上具有很多独有的特性,包括:
1.成员状态可见性;
2.互不干扰性;
3.沟通及时性;
4.操作预判性。
我们分享了协同产品的共性、实时协同产品的特性,在后面的章节中,会还分享流程类协同产品所具备的个性以及在设计过程中的一些心得,敬请期待。

第一篇分享指路

相关阅读

  • B端筛选设计指南

  • 引言筛选作为一个常用的功能,在产品设计中的应用面是非常广的。比如我们去购物,会选择销量高、价格实惠并且包邮的商品,筛选区的设计就便于用户进行数据的查询和定位,可以快速查
  • B端 |Web中的表单设计

  • 前言表单是我们生活中常见的信息添加、录入的方式之一,如何进行表单的设计也是B端设计师的必修课。身边别的部门的同事常常会说:表单不就是几个输入框,几个组件组成的东西么,挺
  • 如何进行B端工作台设计

  • 引言在这个流量见顶的时代,互联网竞争越来越惨烈,各公司业务的渗透难度变高,产品模式方面管理成本的越来越重,而运营效率越来越举足轻重,互联网的巨头们也开始布局2G/2B领域,来进
  • 一文读懂B端产品和用户

  • 设计师需要懂产品和用户吗?答案是肯定的,需要。理解产品、了解用户可以辅助我们更好地产出设计。在工作的过程中我们经常会听到“产品定位”“为目标用户设计”“站在用户的角
  • 如何设计文化遗产数字化领域的 C 端产品

  • 我将文化遗产数字化分为两大阶段、七个步骤。其中,信息分发和公众消费两个步骤有面向C端用户的产品(其余五个更多面向B端)。所以接下来我将结合项目经验,从6个方面介绍,这两个步
  • 用界面与用户对话

  • 近期 ChatGPT 的出现引起了人们的热议。它是专为对话而设计,可创建自然且吸引用户的聊天 AI,流畅地表达、清晰的应答思路、创造性的回答颠覆了人们过往对与 AI 对话的刻板印象
  • 如何通过设计降低认知负荷?

  • 01 信息层级02 信息结构03 阅读路径04 信息密度05 文案表述当你使用形形色色的APP时,是不是时常不由自主地感慨“这个APP的界面太丑了”、“这个APP太难用了,连入口
  • 谈谈徽章设计那些事

  • 本文复盘阅文海外网文平台 WebNovel 的徽章体系设计历程,通过设计与内容强相关、艺术化、体系化的徽章,承载用户对网文及平台的热情。网文出海有着巨大的商业及文化价值。阅文
  • 起点读书书架体验升级

  • 起点读书的用户数在今年迎来了5年来最大的增长。随着网文行业成熟,用户构成与行为模式也在迭代,下半年我们对起点的书架页进行了一次改版,探寻适合新阶段的最优解。—— Yanni

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

  • 让效率提升285%的运营设计平台

  • 随着互联网企业在线处理的数据和信息越来越多,对更高效、更经济的平台的需求越来越大。通过降本增效的优化资源利用,减少浪费,提高生产率。58uxd和HRG技术团队打造了智能运营创
  • B端筛选设计指南

  • 引言筛选作为一个常用的功能,在产品设计中的应用面是非常广的。比如我们去购物,会选择销量高、价格实惠并且包邮的商品,筛选区的设计就便于用户进行数据的查询和定位,可以快速查
  • B端 |Web中的表单设计

  • 前言表单是我们生活中常见的信息添加、录入的方式之一,如何进行表单的设计也是B端设计师的必修课。身边别的部门的同事常常会说:表单不就是几个输入框,几个组件组成的东西么,挺
  • 如何进行B端工作台设计

  • 引言在这个流量见顶的时代,互联网竞争越来越惨烈,各公司业务的渗透难度变高,产品模式方面管理成本的越来越重,而运营效率越来越举足轻重,互联网的巨头们也开始布局2G/2B领域,来进