赞助商
立即赞助

实战案例!腾讯文档在线收集表设计复盘总结

产品经验3年前 (2021)发布 流光
2.5K 0 0

我们在设计产品的时候,有时不知道如何提升产品使用路径的体验,如何设计适应不同设备不同场景的统一性。此篇文章会通过设计腾讯文档在线收集表,介绍我们通过「角色体验地图」提升产品体验路径,并且如何搭建多设备多场景的响应式框架的方法。期待给大家带来启发帮助。

腾讯文档收集表作为腾讯文档的重要品类,为用户提供基础收集、打卡、接龙、试卷等多样的信息收集模式,可收集百万份信息。并且在疫情期间发挥了信息收集的作用,培养了一批忠实用户。

如何优化产品体验路径

学校老师使用收集表统计学生信息, 公司秘书使用收集表统计员工健康情况、个人信息。他们究竟是如何使用收集表,在使用过程中又遇到了哪些问题是我们急需了解的。此阶段我们分别使用远程田野调查法了解用户诉求,划分用户角色法拆解核心体验路径,绘制分角色体验地图归纳用户痛点。

1. 远程田野调查探索用户诉求

在疫情期间,虽然不能和用户见面,我们自研了特殊的调研方法「远程田野调查」来探索用户的诉求。我们建立了很多用户反馈群和典型用户一对一交流,通过聊天的即时性第一时间掌握用户反馈。虽然不如面对面交流生动,但是也提升了访谈的效率。

实战案例!腾讯文档在线收集表设计复盘总结

我们通过多个渠道收集到了大量的体验问题,并将这些体验问题初步汇总如下。这使得我们对收集表的基础体验问题有了全局性感知。我们汇总的时候会把用户行为、用户问题和诉求区分开来,为进一步的整理做准备。

实战案例!腾讯文档在线收集表设计复盘总结

2. 划分用户角色,拆解用户核心体验路径

用户在使用产品时都有一定的使用路径和习惯,了解用户的使用行为对提升体验至关重要。在一些产品中,还要注意不同的身份角色在使用产品时的不同表现。因此我们需要先划分用户角色,再根据不同角色拆解用户核心体验路径,分析关键节点下的用户行为以及他们可能遇到的问题。

在收集表中,根据身份角色,使用收集表的用户可以划分为创建人和填写人两类。因此我们以身份角色为划分维度,用户的核心体验路径可以分为创建收集表和填写收集表。这种粗略的行为无法定位问题,因此我们将创建收集表和填写收集表的环节进一步拆解如下:

  • 创建收集表细化为:新建收集表-创建/编辑题目-收集表设置-发布并分享-查看详情和结果。
  • 填写收集表细化为:打开分享的收集表-填写收集表-提交收集表-查看上次填写内容-再次填写。

实战案例!腾讯文档在线收集表设计复盘总结

3. 绘制「角色体验地图」归纳用户痛点

根据身拆验径,将收问题归纳身相应节,晰户遇问题。

在收集表中,我们分别从创建人和填写人的角度绘制角色体验地图,更方便我们清晰地了解不同身份角色的用户在使用产品时遇到的问题。通过归纳角色体验地图我们发现:

创建人:创建发布时操作路径冗余、界面信息复杂。我们给用户设计的操作路径并不是用户期望的,用户在使用时会有“复杂感”和“迷茫感”,影响创建效率。

实战案例!腾讯文档在线收集表设计复盘总结

填写人:填写提交时交互细节缺失、透传信息过多。我们为用户展现的内容用户可能并不需要,用户在使用时会有“冗余感”,影响填写效率。

实战案例!腾讯文档在线收集表设计复盘总结

4. 设计实现

缩短径速添问题

析创径户,收表户使模,使模改。户改问题需半屏页繁琐,屏幕,频繁切换页,易迷失。

实战案例!腾讯文档在线收集表设计复盘总结

探索决案,问题编辑需跳转,页编辑,即即编,减跳转,减输。编辑题目升效率2倍,升户。

实战案例!腾讯文档在线收集表设计复盘总结

直接触达填写

我们分析填写路径上的用户行为和问题,发现创建者创建收集表后,无法直接进行填写,需要点击填写收集表进入新页面进行填写,流程繁琐。

实战案例!腾讯文档在线收集表设计复盘总结

新的解决方案,创建者创建后可以直接填写,提升了填写效率。

实战案例!腾讯文档在线收集表设计复盘总结

对比之前方案,新的方案有更方便的创建路径,编辑题目效率提升2倍,分享流程效率提升2倍,填写效率提升2倍,查看结果更加流畅。

实战案例!腾讯文档在线收集表设计复盘总结

如何建立适应多场景多设备的统一框架

我们在设计一个产品框架的时候既需要有场景的扩展性,为未来更多能力打下基础,并且可以做到响应式设计,响应多个设备,响应式的设计不仅可以为用户建立统一的认知,也可以减少开发成本和未来的修改成本。

实战案例!腾讯文档在线收集表设计复盘总结

收集表场景的多样性决定了信息收集模式的丰富性。为满足不同场景下的收集诉求,早期我们快速上线了习题、打卡、接龙等轻量级收集模块,但这些模块与基础收集的框架不统一。不统一的框架导致收集表的体验性、扩展性较差,用户会有使用“多个产品”的错觉,同时也为后期扩展更多收集场景带来不便。

除了不具备多场景的统一性,收集表的多设备体验也不具备统一。疫情期间用户养成了移动端的使用习惯,移动端体验的重要性也随之增加。不具备统一性和通用性的多设备体验,大大增加了用户的认知负荷,同时也增加了收集表的维护成本。

此除优收表径验,立跨、跨备收系尤。基础框架需扩展,并响应备响应。

1. 立应框架

应框架,首先共,并抽象共共模。收表模:概述、、。立由模组框架,将框架收表。框架卡、习题、框架统,户统认,未奠扩展基础。

实战案例!腾讯文档在线收集表设计复盘总结

实战案例!腾讯文档在线收集表设计复盘总结

2. 建立适应多设备的框架

在《腾讯文档全平台系统设计》中,我们为大家详细介绍了布局动态响应的设计方法。收集表作为腾讯文档中的一个品类,同样将页面定义为宽松和紧凑两种布局,开发人员使用一套代码便可维护各平台产品,保证体验一致性的同时也大大降低了维护成本。为了建立适应多设备的框架,我们以640pt为界限,Phone适配紧凑布局,Pad、PC、Mac适配宽松布局,内容区域拉伸变化。

实战案例!腾讯文档在线收集表设计复盘总结

不仅适配多端也是适应多场景的框架,响应式的框架适配到打卡、习题、接龙等其他场景上。做到了多端和多场景的响应适配。

实战案例!腾讯文档在线收集表设计复盘总结

设计成果

改版后的收集表目前已全面上线,此次改版极大的提升了用户的使用效率,用户量有很大提升。在设计的过程中我们紧紧围绕“效率升级”,在提升收集表基础体验的同时,也着力于打造多场景多端统一的收集体系。体验设计没有终点,我们希望在未来岁月为用户提供更加卓越的收集服务,让腾讯文档收集表与用户更好相遇。

以下是腾讯文档APP和小程序二维码链接,欢迎大家扫码体验!

实战案例!腾讯文档在线收集表设计复盘总结

欢迎关注作者微信公众号:「腾讯ISUX」

实战案例!腾讯文档在线收集表设计复盘总结

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在 ACG 圈有着这样一种赛事:没有硝烟战火,没有(广义上的)明星参与,没有盛大线下比拼,却能引发广大粉丝疯狂参与,甚至爆...
二次元
每个公司都有着它的独特性,这种独特性是由它的发展历程和特有的服务细节所塑造的,也正是因为这种独特性的存在,设计师总能...
logo设计
作者将向你展示微云团队一路以来对文件图标设计的思考和沉淀,并着重介绍了当前这套图标的设计由来。 在过去的一年中腾讯...
图标设计
本文详细剖析11款字体设计的全过程。设计+解析+动效,以最简单易懂的方式,合成一篇字体设计分享文章,希望你会喜欢,并留言...
中文字体
最近回校园中进行分享时,常会被问到「到底用研在企业内要做些什么?」感觉用户研究员在企业内是个神秘的角色,因此我总结了...
用户研究
对于一款社交产品,面临最大的挑战也许不是来自竞争对手,而是随时间飞逝不断进化的互联网环境。作为已诞生 20 年的 QQ,历经...
QQ
概述 今天给大家分享海外浏览器视觉风格升级的案例。希望可以把整个产品改版过程中的沉淀以及总结经验分享给大家。整个项目从...
vivo设计
本系列文章旨在由浅入深、由理论到实践系统地介绍了本团队在近几年的设计工作中的一些经验总结和重点思考。本系列面向广大设...
UI