设计思维-提升B端产品的信息获取效率

在《Web表单设计:点石成金的艺术》这本书中,提到过两个概念「Inside Out 由内而外」和「Outside In 由外而内」,简单说就是两个看待事物的视角。「Inside Out」是从系统角度出发,向用户要求提供系统需要的信息;「Outside In」则是从用户角度出发,向系统要求高效获取信息和操作交互。

尤其是在B端产品设计中,「Outside In」用户视角适用范围更广。如何让信息本身直观、高效、优雅地传达给用户,提升用户获取信息的效率就变得格外重要。

 01 
为什么要提升信息获取效率

在我们设计B端产品的过程中,尤其是涉及到企业信息的收集和维护时,由于需要输入的信息种类和数量众多,总会遇到企业信息填写逻辑混乱、资料收集不全的情况,导致用户在浏览和编辑时的操作体验大打折扣。反映在日常界面设计中往往突出展现在以下几点:

1-用户浏览信息的顺序混乱,造成信息流的逻辑性不强

2-不同元素间的对齐方式有差异,使整体页面信息流缺失稳定感

3-大量信息集中于一块区域,信息之间的层次模糊,边界感缺失

4-所有信息都要展示,缺失重点,使得信息展现无法聚焦

 02 
如何提升信息获取效率

B端产品一般具有行业领域垂直、层级结构复杂、信息颗粒度细等特点。在最近的企业中心页面改版中,我们也面临了以上四个问题所带来的挑战,旧版本在排版、布局、间距等方面无法做到信息有效展现,用户的编辑效率、阅读效率都有待提升。

因此在对目标进行功能梳理和信息分析后,我们采用平铺直叙、始终对齐、层次明确、化繁为简等四个原则,对相关页面进行重构。目的是让用户快速、清晰地理解产品传递的信息,辅助用户快速决策。

· 平铺直叙

用户在进行浏览、输入等行为时,应该当尽量减少阻断,信息尽量平铺展示,如果没有特殊需求,不要做大量隐藏、折叠等操作。

企业中心界面的信息具有一定的顺序性和结构性,因此根据企业的名称、领域、logo、介绍等顺序,对板块进行了垂直化信息梳理,用户视线移动路径从原本的Z字形简化为1字形,从而实现效率提升。

同时也对信息回显≠进行了结构性平铺,用户输入的信息会实时在右侧手机Demo显示出来,和线上实际效果保持一致,提高信息触达成功率。

界面示例图

· 始终对齐

在界面设计中,始终将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。

尤其是在面对大量信息汇总在一个页面区域的情况下,对齐是一种最基本也是最经济适用的设计手段。

在项目中,我们为不同类型的元素信息设定了统一的左右对齐方式及边距,让不同板块的信息能够更加标准、规律地显示,从而提高用户填写效率。

界面示例图

· 层次分明

任何时候都需要对信息进行层级划分,尤其是在处理大量数据的场景中,靠的越近的元素更容易被看成一个整体,这就是我们经常所说的设计邻近性原则。 邻近性是格式塔原则中的一个部分,是简洁法则的一种具体的表现场景。

在《写给大家看的设计书》中,作者Robin Williams 将邻近性原则称为「亲密性」,虽然称呼不一样,但表达的是同一个意思。

亲密性原则是这样定义的:如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元。要求对信息进行分层、分组展示,降低单个页面内信息复杂度。 因此我们将各个模块之间通过字体大小、颜色、间距、图标等设计手段使得信息层级能够拉开。

同时以8px为基础间距,通过加减“基础间距”的倍数,拉开层次关系,让用户可以从复杂的数据展现中快速区分每个板块的信息,进而提高操作效率。

界面示例图

· 化繁为简

减少复杂层级,尽量使用相似结构和模块,降低结构差异对用户的干扰,让用户更聚焦于信息本身。用更简洁的文字表述则为:如无必要,勿增实体。 这就是奥卡姆剃刀原理,其本身是一种哲学思想,由十三到十四世纪英国学者、逻辑学家 William of Ockham 提出,如他在《箴言书注》中所写:「切勿浪费较多的东西去做用较少的东西同样可以做好的事情」。

奥卡姆剃刀原理对现今的很多领域都具有广泛且深远的影响,正因为它是一种普适的哲学世界观和方法论,所以在设计领域也被大家经常拿来使用,能够有效地指导我们进行设计工作和决策。

在化繁为简思想的指导下,我们将原先较为混乱的板块布局重新进行了功能梳理,减少了不同板块之间的比例、位置、顺序差异,让信息的展现更加有条理。

界面示例图

 03 
提升信息获取效率的意义

通过「Outside In」用户视角,我们为复杂的企业中心页面信息进行了深度梳理,让信息展示从结构上、样式上、逻辑上变得更加科学、合理。

· 对于用户

最直接地就是提升在对应页面场景下的信息获取效率,可以快速的找到需要填写和修改信息的操作途径,节约操作成本,更有利于简单便捷地管理账户。

· 对于产品

有效地提升了对用户和企业信息获取的效率,优化企业信息结构,提升企业主页信息丰富度,提升优质信息占比。同时也对研究用户操作喜欢和用户行为心理做了一个实践的奠基。

· 对于设计

我们能看出通过有效的设计方式,提升B端产品信息获取效率是非常有必要的,以上设计原则和验证方式同样也可以适用于类似的项目,在遵循简单设计原则的基础上,我们设计师还有无限探索不同方式的空间。

(0)

相关推荐

  • B端业务流程的梳理方法

    一.认识业务需求 B 端产品的需求,是由业务的需求衍化而来,是因为业务上有需要,所以才制定,而不是产品经理凭空想象,觉得这个功能很厉害,用户一定会喜欢就直接做上去. 那么对于商业一窍不通的产品设计师, ...

  • 信息整合提升设计思维学习能力-中国教育新闻网

    --访贵阳市南明区教育局局长邓文乾 发布时间:2020-12-19作者:本报记者 景应忠 黄蔚来源:中国教育新闻网-中国教育报 在南明区甲秀高级中学生物实验室内,教师们正在交流如何利用现代化手段提升实 ...

  • 分享:旅游度假IP产品的设计思维及打造方法【智美旅游策划 第1626期】

    人们需要IP,正如出游的决策总是需要一个理由,而在旅游供给越发庞大.同质倾向明显.竞争越发激烈的市场驱动下,对这个"理由"的要求越来越高. 一.追根溯源:也谈IP的产生与追捧 1. ...

  • 万字总结:B端产品设计基础思维与方法

    导语:本文作者从2015年开始进入B类产品的打造,前后几年时间进行了行业内容的探索,从概念产品的提出,到产品营收千万以上,从产品1.0的两三个功能到后续迭代二三十个功能的平台产品,沉淀了一些个人观点与 ...

  • 经验总结:B端产品的表格设计,怎么做?

    编辑导语:在B端产品设计中,越来越多的设计师需要和数据打交道.表格作为一种常见的信息组织整理手段以及web页面的基础设施之一,其重要性不容忽视.本文作者结合最近做的几个项目和相关设计经验并且参考了相关 ...

  • 掌握这三个关键,提升你的产品思维

    明天上线16小时前 其实,最难改变的是意识 本文来自微信公众号"明天上线"(ID:mingtianshangxian66),作者:明天上线,36氪经授权发布. 还记得刚开始做产品的 ...

  • B端产品如何系统化开展设计改版?这个案例很有针对性!

    项目背景 当公司的发展规模到一定程度时,考虑到信息安全.持续采购成本与相关风险,企业会采取自研的方式来实现部分协同工作软件的自产与自用,本文将以内部目标管理(OKR)系统为例,阐述我们是如何系统化的做 ...

  • 【高端访谈】设计思维——让企业看到员工的真正需求

    <人力资本管理>专访杰普(上海)企业管理咨询有限公司高级总监Keith Keating 撰文| 李硕 多年前,Keith Keating想要做一名舞台剧演员,但是台下有很多观众注视着他的场 ...

  • 提高B端产品用户效率设计的3个方法

    B端产品的核心价值是为企业降本增效,从宏观的战略层需要为企业赋能,带来管理上的高效协同或者降低各类成本.在微观的结构和表现层上则需要提高用户的操作效率,降低用户行为门槛. 最近经常翻看各种数据产品,发 ...

  • 10本书帮你提升视野和格局:商业模式、思维提升、创新设计、职场法则...

    <互联网思维独孤九剑>读书笔记.ppt 点击标题查看文档 互联网思维"独孤九剑"剑谱: 跨界思维--关于产业边界.创新 平台思维--关于商业模式.组织形态 大数据思维- ...