前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >面对繁冗,拒绝“摆烂”|工具型产品如何简化设计

面对繁冗,拒绝“摆烂”|工具型产品如何简化设计

作者头像
腾讯ISUX
发布于 2022-08-26 08:19:26
发布于 2022-08-26 08:19:26
2630
举报

随着科技的发展,人们的工作方式打破了空间、时间的束缚,传统线下场景逐步迁移到线上,衍生出大量的工具型产品。由于实际业务场景灵活多变,为了尽可能覆盖场景需求,工具型产品往往功能庞大且逻辑复杂,经常会收到用户反馈产品「复杂、难以理解」。对于工具型产品的设计者,如何「简化设计」是他们必须要面对的重要难题之一。

本文将从用户感知层面尝试分析用户感觉复杂的原因,并根据以往项目经验给出一些工具型产品简化设计的方法。

提纲:

1、为什么用户感觉复杂

2、如何简化概念,降低认知成本

3、如何让流程简短高效

4、如何简化页面信息布局

5、如何让操作更轻松

6、结语        

你是否曾收到过类似的反馈:

“这文案是什么意思?”、“这能干什么?我需要干什么”、“那个功能在哪里?我找不到”、“要设置这么多项,好麻烦啊”、“这不能拖动吗?”...

这些都是用户感到复杂的反馈。从用户的感知层面分析,让用户感到复杂的原因可以划分为四大方面:概念、流程、界面、操作,以下将详细阐述原因。  

1.1 概念复杂

导致用户感觉产品复杂的其中一个主要原因是:用户难以理解产品的概念模型。概念模型指事物的基础定义及行为模式。(例如:汽车,一种在陆地上行驶的交通工具。通常需要司机驾驶,需要消耗汽油... )用户根据概念模型对事物的行为进行预测,构建出自身的心理模型。

因此,当产品没有清晰、准确地传达出概念模型,将导致用户产生错误的心理模型。用户需要在大量探索过程中,逐步纠正自己的想法,最终才能了解产品实际的概念模型。

另外,根据「雅各布定律」和「设计心理学2:与复杂共存」,用户基于以往积累经验去理解新事物,即在使用产品前已构建心理模型。而当产品的概念模型与用户的心理模型不匹配时,用户在使用产品的过程中将持续产生认知冲突,也将给用户带来巨大的认知成本。尤其对于传统工具型产品,颠覆型的概念模型,反而提高用户的认知成本,让用户感到复杂难懂。

1.2 流程复杂

工具型产品的流程主要分为两方面:单功能使用流程、多功能组合使用流程。

在单功能使用流程方面,难免会遇到一些功能在生效前,需要经过多个设置步骤的情况。虽然环环相扣的流程能够降低产品的出错概率,但却会给用户带来更多的成本。对于每个步骤,用户都需要经历「理解」-「操作」-「反馈」的环节。在一些情况下用户甚至不堪忍受,直接放弃使用功能。例如,在Airtable中创建甘特视图,需要经历3步才能完成配置,查看到效果。对于一些抱着尝试心态的新手用户来说,这是难以接受的体验:在还没理解功能的作用效果前,就要经历如此复杂的流程。

而多功能组合使用流程方面,工具型产品在产品功能设计层面,往往将功能的颗粒度设计得相当精细,以灵活满足各种场景需要。就Excel中的单元格而言,可设置单元格字体、单元格背景、单元格边框。但如此精细的功能设计将导致,若用户需要简单实现整体的目标效果时,其操作流程就变得十分的冗长。甚至在一些需要重复设置的场景下,工作量将几何级数地增长,让用户的工作流程将变得极其复杂。

1.3 界面复杂

大多数工具型产品都希望能在一个界面让用户完成所有任务,却忽略了用户在现实场景下的使用流程。通常一个任务完成的前提是,需要按照一定的步骤完成若干个细项任务。若无法聚焦于每一个个细项任务,而需要耗费大量的时间精力来排除其他信息的干扰,则会产生“注意力被分散”、“太复杂”等体验感受,导致最终任务完成难度增加。

对用户来说,界面内的信息越多负担就越大。工具型产品通常伴随数量众多的功能和选项,一味的平铺功能,只为了展示自身的功能多样性,缺乏合理的组织布局,导致用户需要在几十甚至上百个选项中进行选择,则会大大降低用户使用效率。

1.4 操作复杂

设计者在不考虑具体操作场景的前提下,不同功能均使用同一种交互方式,名义上为了让用户降低学习成本,但实际上却是不负责任地将复杂的理解过程转移给了用户。对于用户而言,复杂的操作可以分为两种:一种是「步骤复杂」,例如需要多次点击、页面跳转、设备切换等;另外一种则是「认知复杂」,例如交互方式与心理预期不匹配,需用户自行转换。无论是哪种,对于工具型产品而言都是灾难的。

除此之外,缺乏及时的反馈也会给用户带来不必要的麻烦。用户需要反复操作比操作中的冗余更可怕,就像高速公路的减速带,不断降低用户的效率。

2.1 隐喻、类比已有事物

当产品的概念模型越趋近于用户的心理模型时,用户就越感觉产品容易理解和使用,所要求的使用能力和学习成本就越低。而用户心理模型是根据用户的目标,以及其过往的经验构成的。因此在设计产品的概念模型时,应尽量使用隐喻、类比的方式,让产品的文案概念及交互行为模式)与用户所熟知事物相近。从而让用户建立联想,激活行为记忆,降低认知探索成本。

HyperCard,苹果的早期时间的一款脚本系统。它以「Card」对产品进行命名,同时在产品交互形态上以一叠卡片的形态呈现。这让用户很容易就联想到现实生活中的卡片小册子,进而快速地了解到产品的大致行为模式。

需要注意的是,传统工具型产品的用户往往已被已有产品教育,积累了一定的使用经验、习惯。对于此类产品的概念模型简化应慎重考虑,因为用户所建立的心理模型是较难改变的,颠覆性的变化会让用户之前付出的学习成本付诸东流。此时可尝试用户的其他感知层面切入(流程、原型、操作),以探索简化的可能。

2.2 巧用大白话

在实际业务场景中,难免会遇到概念新颖、逻辑复杂的产品功能。由于用户从未曾接触过类似的事物,未建立起相应的心理模型。在设计产品概念时也就难以使用隐喻、类比的方式来降低产品的复杂度。此时可采用「目标导向」的设计方法,帮助用户快速理解产品功能。因为用户除了基于过往经验建立心理模型,还可根据目标而对产品的行为模式做预测。

与其生搬硬套地创造概念,不如在合适的使用场景下,使用目标导向的大白话,清晰的传达出功能的目标效果。让用户快速了解产品功能的目标效果,减少全新概念的理解成本。

例如,在交互原型设计中,按钮往往存在多个状态(默认态、悬停态、点击态、禁用态)。Figma对其赋予概念“变体(Variants)”,用户难以对此概念产生目标效果的联想,无法建立起对应的心理模型。而在MasterGo中,亦存在相同的功能,但使用的是更加符合目标效果的大白话“组件状态”。

3.1 快速、直观呈现效果

对于工具型产品来说,效果直观是非常必要的。一来能让用户的探索快速获得反馈,降低用户的理解成本。二来能带来更加轻量的操作体验,鼓励用户探索,给予用户充分的掌控感。工具型产品的设计者应以此作为设计理念之一。但难免会遇到产品功能的逻辑流程较为复杂,需要经历多个环环相扣步骤的情况。而研发者往往更关注与代码的逻辑及可维护性,更加推荐逻辑严谨但流程冗长的设计。这时设计者应坚守设计理念,不断在用户体验与功能逻辑中寻找平衡,贯彻落实设计理念。

对于冗长的流程,设计者可通过以下方式解决:

(1)根据场景自动化配置

良好的产品应该是聪明、高情商的,能够根据用户的实际情况进行自动化的配置,以减少用户操作。在进行自动化配置时,应谨慎梳理清楚用户的所有场景,以及每种场景意图,避免过度聪明,导致画蛇添足。

例如,在Notion中可一键创建Timeline视图,无需用户进行任何配置。因为其做了场景自动化配置处理:自动配置所需要的字段。

(2)清晰的修改配置入口

在进行自动化配置后,不可避免可能存在场景理解错误的情况,导致自动配置的结果不符合用户实际情况。此时应提供清晰的修改配置入口,例如在用户可发现错误的地方中提供入口,允许用户在发现错误后即可发起修改。

(3)异常后置处理,先让用户用起来

不应要求用户在功能生效前处理完所有异常。因为对于每一个步骤,用户都要付出理解及操作成本。尤其在处理异常情况时,用户需要耗费巨大的成本,极有可能因阻碍过大,从而放弃使用功能。设计者应将异常后置,确保用户能都快速查看功能效果并使用起来。对于异常的问题,应允许用户后续持续处理,不阻断功能的使用。

例如,在Figma中导入sketch文件会遇到,多种格式适配问题。但不影响导入流程以及FIigma的正常使用,用户可以在倒入后在对异常进行处理。

3.2 基于目标组合功能,一键快速设置

一般来说,工具型产品服务的用户群体较广,需要满足丰富的个性化需求。在产品功能设计上,功能的颗粒度较小,能支持精细化的配置。这样导致用户需要实现组合的目标效果时,需要执行多个功能配置,整体的配置流程较为冗长、复杂。设计者在设计工具型产品时,除了要考虑单个功能的使用体验,也要从用户目标出发,全局考虑用户使用产品的整体流程体验。

如何既能保持产品的「灵活度」以满足丰富的场景,又能减少整体操作流程,提升用户效率。「一键操作」及「自定义脚本」是较为有效的方法。

(1)一键操作

基于用户的目标,可以对一些列相关的功能进行组合,允许用户一键设置,快速达到目标效果。同时应存在更多配置的入口,允许进阶用户进行更加详细的配置。例如,Keynote中可对文本框进行快速样式设置,设置内容包含字体颜色、文本框背景颜色。当用户需求较为简单时,只需设置一次即可达到目标效果,而无需设置多次。

(2)自定义脚本

自定义脚本,指允许用户将一系列操作/设置组合为一个操作组的能力。在一些进阶场景,用户往往存在个性化的需求,对产品功能有着相对固定的使用习惯。自定义脚本,能够极大帮助用户减少重复性的操作,提高整体效率。

在Figma中,充满了类似概念的设计,如:组件、样式(文字、颜色、效果)。用户可自定义保存相关的配置参数,以方便多次复用或一键修改。

4.1 围绕行为组织功能,走一步看一步

在设计界面原型时,需要先了解用户的任务目标,用户想做什么,先做什么后做什么。充分掌握用户心理模型的行为路径,基于用户的行为路径进行组织功能,以确保用户在每个环节中所看到的信息都是必要且准确的。工具型产品通常拥有多个可选设置项,拆分任务步骤可减少用户被非必选项的干扰。

除此之外,不同的用户角色的行为路径也会有所不同,例如:创建者,协作者,以及是否有编辑权限等等。不同的用户场景对于功能的诉求也是不一样的,而这就需要设计师从产品的定位,主流用户以及使用习惯综合考量。在优先满足主流用户场景的基础功能上,再进行其他场景的功能增减。

4.2 功能层级分区,巧妙地藏起来

(1)功能分区

George A. Miller在《神奇的数字7加减2:我们加工信息能力的某些限制》中表明,人的大脑最多同时处理7±2个信息块(即5-9个),若超过则出错的概率将会大大提高。对于无法避免复杂信息的情况下,可以将烦琐的信息分块,组织成清晰的层级结构,例如:微软Office 中顶部工具栏包含上百个功能选项,为了便于用户能快速找到想要的功能,他们将所有功能进行分块,包括:字体、对齐方式等模块。每个模块下再细分具体设置项,具体设置项又包含了其它功能。基于清晰的层级结构,用户可快速通过「字体模块」-「字体设置项」- 「微软雅黑」三个层级中快速找到想要的选项。

值得注意的是在信息分块时,需制定出清晰的划分界限,可通过询问不同的用户来判断界限是否清晰。

与此同时,布局效果是否清晰,对于简化界面设计而言同样重要。合理运用「格式塔原理」中的「接近性原则」,将同类元素放在一起让用户在视觉上感觉是一组,再根据同组元素中的重要性不同,大小上也应有所差异。做到让用户只看一眼便可快速找到想要的功能。

(2)隐藏高级功能

「帕累托法则(二八法则)」同样适用于工具型产品设计,即20%的功能影响80%的用户体验结果。换句话说,大部分普通用户经常使用的基础功能仅占20%,但影响程度却远超于剩下的80%。所以需将功能划分为基础功能和高级功能,在优先展示基础功能的前提下,再考虑高级功能或自定义功能的展示,必要时可将高级功能或自定义功能进行隐藏,但前提需是可见的。例如:更多设置,更多选项等,即对专家用户始终保持可见,但又不打扰普通用户。

5.1 减少不必要的操作,使用更自然的交互

简化操作的过程中,针对不同的操作赋予最自然的交互形式能减少用户操作过程中的精力消耗。自然的交互应该是用户无意识的操作,是基于过往生活经验,阅历,学识等的一种本能,几乎不需要过多的学习成本即可完成。例如:用户旋转一张图片。相对于在输入框中输入旋转角度参数而言,将光标直接操控在图片上旋转显得更自然。输入需要至少三步(点击文本框-敲击键盘数字-点击确认),而直接旋转只需要两步(点击-旋转)。因为对于用户而言,点击图片进行旋转更接近现实生活中的操作,不管是交互步骤还是心理认知上,都会降低用户的操作难度,让用户觉得产品更简单更自然。   

5.2 提供及时的反馈与帮助,避免重复操作

在操作过程中得不到反馈,出错后再重新填写,同样会增加操作的复杂性。在尼尔森十大可用性原则中,第一原则就是系统状态的可见性。系统需要让用户知道自己在做什么,需要让用户知道系统做了什么。例如:在表单填写时及时反馈是否出错,在格式设置时及时反馈是否生效,可以让用户少走弯路。必要时给用户提供帮助也能简化用户操作的复杂性,提高操作的成功率。

引用《简约至上》中的所说:创造简单用户体验的秘诀就在于把复杂性转移到正确的地方。任何产品都具有一定的复杂性,设计的目的不是为了消除所有复杂性,而是将它们放到最合适的位置。简化产品的复杂性替用户排除不必要的干扰,通过设计师的努力给每一个用户带来简单、愉悦的使用体验,让复杂的工作更简单。

参考文献:

[1]Bill Moggridge.Designing Interactions[M].MIT Press,2006

[2][美]Alan Cooper,Robert Reimann,David Cronin,Christopher Noessel,Jason Csizamdi,Doug LeMoine.About Face 4 交互设计精髓[M].倪卫国,刘松涛,薛菲,杭敏译.北京:电子工业出版社,2015

[3][英]科尔伯恩(Colborne.G).简约至上:交互式设计四策[M].李松峰,秦绪文译.北京:人民邮电出版社,2011

[4]刘津,李月.破茧成蝶:用户体验设计师的成长之路[M].北京:人民邮电出版社,2014

[5][美]唐纳德•A•诺曼.设计心理学2:与复杂共处[M].张磊译.北京:中信出版社,2015


PS: ISUX 开通微信粉丝群啦!

欢迎扫码加入一起聊设计

(入群暗号:ISUX)

以下ISUX文章,你可能也感兴趣

设计策略|源源不断的创新思路(激进篇)

ISUX「六月」行业设计趋势速递

设计策略|源源不断的创新思路(渐进篇)

探索用Figma做游戏UI设计

ISUX「五月」行业设计趋势速递


凝集腾讯设计优质内容

更多精彩分享请关注

 ▼

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-08-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 腾讯ISUX 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
8051指令集和汇编语言程序设计
MOV(Move):对内部数据寄存器RAM和特殊功能寄存器SFR的数据进行传送;(没有MOV Rn,Rn这样的寻址方式) MOVC(Move Code)读取程序存储器数据表格的数据传送;(只有两条:MOVC A,@A+DPTR和MOVC A,@A+PC) MOVX (Move External RAM)对外部RAM的数据传送; XCH (Exchange) 字节交换; XCHD (Exchange low-order Digit) 低半字节交换; PUSH (Push onto Stack) 入栈; POP (Pop from Stack) 出栈;
zy010101
2019/05/25
1.5K0
设计分享|基于51单片机的数字时钟(汇编)
上电后滚动显示年、月、日、时、分,最后进入秒计时,通过四个按键可对时间进行设置操作。
电子工程师成长日记
2022/07/27
1.5K0
设计分享|基于51单片机的数字时钟(汇编)
汇编语言程序设计:用vscode配置环境,简单命令
所以我想到了vscode,可以在vscode插件列表里找到相关的插件masm-tasm
姓王者
2025/03/24
1430
汇编语言程序设计:用vscode配置环境,简单命令
山东大学单片机原理与应用实验 3.1 基本并行I/O口实验
实现功能:要求当SW1按键被按下后,D1-D8轮流点亮,点亮时间为100ms,当按键停下后,停止轮换;再次按下后,继续轮换。
timerring
2022/07/20
9090
山东大学单片机原理与应用实验 3.1 基本并行I/O口实验
浅谈单片机中C语言与汇编语言的转换
一、单片机课设题目要求与软件环境介绍 做了一单片机设计,要用C语言与汇编语言同时实现,现将这次设计的感受和收获,还有遇到的问题写下,欢迎感兴趣的朋友交流想法,提出建议。 单片机设计:基于51单片机的99码表设计 软件环境:Proteus8.0 + Keil4 要求:1,开关按一下,数码管开始计时。2,按两下,数码管显示静止。3,按三下,数码管数值清零。 二、C语言程序 1 #include<reg51.h> 2 #define uint unsigned int 3 #define uchar uns
Zoctopus
2018/06/04
2.5K0
山东大学单片机原理与应用实验 3.3 静态LED显示实验
7SEG2 为十位显示数码管,7SEG1 为个位显示数码管,KEY_LOAD:倒计时初值按钮,KEY_START:倒计时启动按钮
timerring
2022/07/20
6640
山东大学单片机原理与应用实验 3.3 静态LED显示实验
山东大学单片机原理与应用实验 3.2 拓展并行I/O口实验
1. 在Proteus环境下建立原理图,如图1所示,并保存为expandIO.DSN文件。
timerring
2022/07/20
7450
山东大学单片机原理与应用实验 3.2 拓展并行I/O口实验
学习笔记 | 单片机指令系统
以通用寄存器的内容为操作数的寻址方式。通用寄存器包括 A, B, DPTR, R0~R7, 其中 B 仅在乘除法指令中为寄存器寻址,在其他指令为直接寻址;A 既可以寄存器寻址,又可以直接寻址(此时写作 ACC)。
悠风
2019/08/28
1.1K0
学习笔记 | 单片机指令系统
嵌入式:ARM汇编语言程序设计基础教程
② CPU寄存器数量有限,在程序中,大多数操作都要使用寄存器;并且有的操作使用特定的寄存器(如堆栈操作使用SP/R13等),程序中要合理分配各寄存器的用途。
timerring
2022/12/31
1.4K0
嵌入式:ARM汇编语言程序设计基础教程
山东大学单片机原理与应用实验 汇编程序实验2
片内RAM30H开始的32个单元中分布着随机的有符号8位二进制数,按从小到大的顺序进行排序,排序后的数据仍然保存到30H开始的32个单元中(低地址存放小数据)
timerring
2022/07/20
6040
山东大学单片机原理与应用实验 汇编程序实验2
设计分享|基于单片机的步进电机(汇编)
设置三个按键,第一个按键按下电机正转,第二个按键按下电机反转,第三个按键按下电机停止。
电子工程师成长日记
2022/07/27
7340
设计分享|基于单片机的步进电机(汇编)
​A51单片机开发计算器
5、输入加数和被加数时,显示器上显示的数字要像平时用的计算器输入一样,即:每输入一个数字,原来显示的数字要往左移。
炒香菇的书呆子
2022/01/07
4600
​A51单片机开发计算器
51单片机学习 并行口实验、流水灯、双闪灯
掌握 51 汇编语言设计和调试方法 掌握 protues 软件平台及实验箱的操作步骤
叶庭云
2021/12/01
1.3K0
51单片机学习   并行口实验、流水灯、双闪灯
设计分享|基于单片机电子密码锁(汇编)
(6)键入的3位开锁密码完全正确才能开锁,LED灯亮表示开锁,开锁时要有1秒的提示音。
电子工程师成长日记
2022/07/27
6290
设计分享|基于单片机电子密码锁(汇编)
设计分享|单片机交通灯仿真(汇编)
(1)东西红灯60S倒计时,南北绿灯40S倒计时,东西向人行道红灯,南北向人行道绿灯;
电子工程师成长日记
2022/07/27
8050
设计分享|单片机交通灯仿真(汇编)
设计分享|51单片机交通灯(汇编)
51单片是一种低功耗、高性能CMOS8位微控制器,具有 8K 在系统可编程Flash 存储器。在单芯片上,拥有灵巧的8 位CPU 和在系统可编程Flash,使得STC89C51为众多嵌入式控制应用系统提供高灵活、超有效的解决方案。具有以下标准功能:8k字节Flash,512字节RAM,32 位I/O 口线,看门狗定时器,内置4KB EEPROM,MAX810复位电路,三个16 位 定时器/计数器,一个6向量2级中断结构,全双工串行口。另外 STC89X51 可降至0Hz 静态逻辑操作,支持2种软件可选择节电模式。空闲模式下,CPU 停止工作,允许RAM、定时器/计数器、串口、中断继续工作。掉电保护方式下,RAM内容被保存,振荡器被冻结,单片机一切工作停止,直到下一个中断或硬件复位为止。最高运作频率35Mhz,6T/12T可选。
电子工程师成长日记
2022/07/27
9560
设计分享|51单片机交通灯(汇编)
极客DIY开源方案分享——智能家居你也可以做,何不DIY个自动窗帘升降控制系统?(纪念我的职业生涯处女作、曾获校赛一等奖作品、上古汇编语言编程)
整理资料时,发现了学生时代一些好的电子设计,这些设计在当时也是比较不错的,到现在看来已经年代久远了,不过放在今天自己DIY下给小朋友,培养兴趣爱好,也是很好的。
Winter_world
2022/04/30
1.1K0
极客DIY开源方案分享——智能家居你也可以做,何不DIY个自动窗帘升降控制系统?(纪念我的职业生涯处女作、曾获校赛一等奖作品、上古汇编语言编程)
设计分享|单片机抢答器(汇编)
主持人按下抢答按键后,进入抢答模式,8位选手开始抢答,数码管显示抢答成功的选手号码,主持人按键再次按下后复位。
电子工程师成长日记
2022/07/27
5190
设计分享|单片机抢答器(汇编)
设计分享|基于51单片机的万年历(汇编)
实现年、月、日、时、分、秒、农历的显示,例如:如图显示的是2001年1月1日,农历12月7日,00点01分23秒。
电子工程师成长日记
2022/07/27
9981
设计分享|基于51单片机的万年历(汇编)
基于单片机的交通信号灯控制系统设计论文_交通信号灯控制设计
本系统采用STC89C51单片机以及单片机最小系统和74HC245驱动电路以及外围的按键和数码管显示等部件,设计一个基于单片机的交通灯设计。设计通过两位一体共阴极数码管显示,并能通过按键对定时进行设置。
全栈程序员站长
2022/11/08
1.3K0
基于单片机的交通信号灯控制系统设计论文_交通信号灯控制设计
推荐阅读
相关推荐
8051指令集和汇编语言程序设计
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档