京东技术

B端体验深耕-洞察用户诉求,打造心有灵犀的使用体验

Image
 前言 

我们常以“ 心有灵犀 ”来形容与合作伙伴的默契配合,若我们的产品能与用户达到同样的默契,将极大地提升用户在任务旅程中的流畅体验。

 一  探索顺滑、高效的交互模式 

通常来说一个顺滑的交互对产品的体验提升的是非常大的,它允许用户以直观的方式理解产品的操作含义,在不依赖帮助文档的情况下,也能轻松完成各项任务。这种设计理念不仅提升了用户体验,也确保了产品的高效率和便捷性,能够使用户迅速投入并快速完成工作,实现了真正的“即用即走”。

(1) 数字键盘,让数据录入更简单、更高效

相信很多产品设计人员都清楚选择录入的优势远大于手动录入。在此之前,我们的工时填报页面,由于可输入信息精确到小数点后两位,所以我们常用的计步器、选择器、滑动输入等组件都无法在这里使用。对用户而言,手动逐项录入数据的操作成本非常高。

Image

  • 作为数据录入的组件,数字键盘适用于简短且整数的特殊场景下,如:数字录入、百分比录入。备选的数据信息以宫格布局呈现,用户可以快速点击数字键盘中需要填入的数字。相比下拉菜单和上下箭头数字输入框相比,更直观,易用性更强。
  • 对于擅长键盘盲打的研发工程师类角色来说,仍然可以通过物理键盘录入数据;而对于不太熟练操作键盘的大多数用户来说,可以通过直观的数字键盘点选录入数据。数字键盘组件甚至还能帮助用户自动计算已填数据,实现一键补全。

Image
  • 数字键盘作为一种兼具选择录入便捷性和手动输入灵活性的数据录入组件,为不同类型的用户提供了高效、准确的数据录入体验,不仅提升了数据输入的便捷性和准确性,而且通过适应不同用户的操作习惯,增强了产品的普适性和用户满意度。继而我们也将数字键盘组件在其他使用场景进行了拓展,比如,其他场景下数字键盘上集成了手动录入的输入框,备选数据可以根据用户设置的起止日期进行自动计算,不仅帮助用户减轻了操作难度也极大节省了用户的时间成本。
数字键盘经过不断的拓展与优化,已经成为用户在多种场景下进行数据录入的利器。在未来,我们将持续关注并探索数据录入交互方式的优化与改进,致力于进一步优化信息录入的体验,如当下火爆的AI,来实现更加智能和自动化的输入解决方案,从而最大程度上让用户与产品交互默契、事半功倍。
(2) 在关键节点设置任务提示卡,给予用户即时指引
很多大型B端产品的详情页在成熟期后都会面临信息内容多、分类复杂的问题,这导致用户需要滚动多屏或者切换tab页签去查找信息,即便产品设计团队已经花了不少心血将信息布局做了优化和重组,但也难以避免有些用户查找关键信息费时费力,不清楚应该在页面哪一块进行哪些操作。虽然IM、邮件等工具可以一定程度上解决信息的触达,但用户从其他平台点击网址链接跳转到产品详情页后依然会面临缺少明确的指引问题。

Image

  • 针对以上用户使用中的痛点,我们在页面中关键区域设置了一系列操作指引性的任务提示卡片,并在卡片上设置明确的引导文案及操作按钮,以减少用户因不熟悉产品功能或者页面信息过多而找不到操作入口的问题;引导用户点击“去完成”、“去操作”等操作按钮直接跳转至应该操作内容模块或相应页面去完成应该完成的操作,这样就使得不同用户在不同环节完成相应的任务,保证流程顺畅的走下去。

Image
  • 任务提示卡作为一类高效的即时指引工具,已在多个用户使用场景下发挥了关键作用,不仅帮助用户提升了完成任务的效率,也在一定程度上缓解了用户的焦虑。该组件的设计初衷是为了解决当用户面对复杂或不熟悉的操作时,为了用户提供即时的指引。在不同系统平台的适配过程中,我们特别注重交互模式的灵活性和适应性,以适应不同的适用场景。例如,我们将传统的卡片视图优化为列表视图,并支持多个操作项,实现了用户所见即所得的直观体验。
经过在多种场景下的实践验证,任务提示卡已成为缓解用户焦虑的一种手段。我们也认识到,用户焦虑直接影响到产品的可用性和用户满意度。因此,我们会持续关注用户焦虑产生的根源,不断调整和优化我们的设计策略,有目的有效率的降低用户焦虑水平。
(3) 巧用浮层卡片,减少非必要的页面跳转
提到「链路」,相信很设计师都能想到缩短流程、简化操作步骤等手段。然而,随着业务的复杂度提升,我们的很多使用流程变得越来越长,用户仅仅查看或者编辑一个简单的信息也需要打开新页面,这无疑增加了用户的操作成本。
在诸多项目实践中,我们发现浮层卡片是一个非常灵活的组件,它可以在用户需要时通过鼠标悬停即可展开,用户可以不用跳转或打开新页面就可以在浮层卡片中完成一些关键信息的查看或者编辑。这种交互模式不仅可以减少用户的操作步骤,还减少了产品链路和开发成本,在提升体验的同时也更好的效能业务。

Image

在我们的平台上,一些用户虽然可以将自己经常使用的应用常驻到菜单栏上,但是受限于屏幕尺寸左侧的菜单栏不能显示太多常驻应用。
  • 当用户在切换一个常驻但因为屏幕尺寸而没有展示在菜单栏上的应用时,需要先点击更多【应用图标】进入更多页面。
  • 再定位到需要切换的应用图标上进行点击才能完成整个【切换】的流程。
  • 当我们洞察到用户使用菜单栏的痛点后,在后续的迭代优化时。在更多应用的图标上增加一个悬浮事件。

  • 鼠标悬浮时,它就像一个传送门一样将用户需要切换的应用呈现在浮层卡片上,用户点击所需的应用即可完成应用的切换。

 二  创新业务组件设计,提升复杂场景下的数据可视化体验 

随着业务的不断下钻,不免会遇到一些复杂的使用场景,基础的交互和组件已不能有效的解决用户在使用中的问题。在一些既需要关注结构化的概览数据又要方便查看详细数据的场景中,以及在一些数据关联、任务串联等场景中,设计侧通过可视化、结构化等设计手段探索出了一些新的业务组件,解决了数据概览、数据关联不清晰等问题,为用户构建了直观、易懂的使用体验。

(1) 信息概览与Tab标签页相遇,概览&详情均可兼得

在一些管理场景下会涉及到既需要查看各阶段下不同状态的概览数据,又需要查看详细数据的场景。按照以往的交互,用户可以用筛选器筛选出各阶段下不同状态数据再进行查看对比,虽然筛选器可以筛选出这些多阶段、多状态的数据,但存在着筛选步骤繁琐、多阶段&多状态的数据呈现都是棘手问题。

 三  制定可持续的体验改进策略 

 四  写在最后 

落地简单、顺滑、激发的产品设计理念,我们不求一蹴而就,而是有意识的去关注用户的问题,持续不断的优化和改进,用心对待每次微小的改进,积少成多,最终会实现产品与用户之间的“心有灵犀”。希望以上分享能给从事在B端体验设计伙伴们带来一些新思路、新思考。优化、改进的途径有很多种,我们愿意将此次分享称为抛砖引玉,更多还是需要我们深入到业务中,与产研同学协作一起产出更优秀的解决方案。
Image
Tech

推荐阅读

黄金三年,京东校招新星破茧之路

Java方法设计原则与实践:从Effective Java到团队案例

鸿蒙跨端实践-揭秘视图渲染流程

AI对话魔法|Prompt Engineering 探索指南

🤝关注「京东技术」公众号后台回复【加入京东】获取专属社招/校招内推码,后台回复【技术交流】加群与更多技术伙伴畅聊!

关注我们

👇了解更多京东行云请戳【阅读原文】