从帮助系统和按钮两方面,聊聊B端产品的设计思考 收藏

UI交互2023-04-29

作为 B 端产品,我们需要为用户提供优质的帮助设计,以帮助他们快速了解和掌握产品的操作和功能。下面是一些设计建议:

1. 通用帮助文档的设计

为了方便用户在使用过程中随时获取帮助,我们应该将常规的帮助文档放置在易于访问的入口,如产品页面的右上角或客服帮助中心等位置。帮助文档需要涵盖全部产品的功能和操作说明。

截图来源于神策

截图来源于百度智能云

截图来源于飞书

2. 复杂场景页面的案例说明设计

当用户遇到复杂的场景或页面时,学习成本和操作成本会很高,所以我们应该提供当前场景的操作说明或数据解释,帮助用户快速掌握,并提升其使用效率。

例如,在神策事件偏好属性设置中,用户对复杂标签偏好场景一头蒙,我们可以增加一个案例说明,显示当前筛选规则的逻辑和最终生成结果的信息,以帮助用户理解此场景的操作。

截图来源于神策

3. 如何更好的使用帮助文档

虽然有帮助文档,但用户可能并不会主动去查看它。因此,我们需要采取以下措施来鼓励和促进用户使用帮助文档:

①帮助文档放入产品显眼位置,方便用户第一时间去发现。

截图来源于百度智能云

②人工或者智能客服遇到用户咨询时候,带入帮助文档信息,这样不仅能提升用户操作体验,而且提升客服操作效率。

截图来源于百度智能云

③产品出现卡顿问题,帮助文档能及时展示当前问题的说明信息,对用户是友好的。

④产品更新信息,在引导文档、帮助文档中提示用户查看,选择合适的推送渠道给用户。

截图来源于网络

4. 制作操作演示视频

借助视频制作工具为用户创造出一些动态的操作演示教程,并将其嵌入在产品介绍页面、帮助文档中,能够让用户直观感受到产品的操作流程及注意事项,增加学习的趣味性和可玩性。

如文心一言的应用场景演示以及 MapReduce 服务 MRS 的视频讲解都是帮助用户更好的理解产品

截图来源于文心一言

截图来源于网络

5. 设计交互式操作流程引导图

对于复杂的功能,可以采用 插画 、流程图等方式进行交互式操作引导,将整个过程可视化展示出来,使得用户能够快速理解并掌握如何进行操作。

截图来源于网络

截图来源于网络

6. 设计问答交互界面

在帮助文档页面中设置一个人机交互或者社区讨论板块,在这里展示一些常见问题解答、优质反馈信息,这种问答交互界面能够在传统帮助文档无法回答用户耐心的疑惑和可能遗漏的问题。

截图来源于网络

截图来源于网络

7. 提供在线培训和课程

对于需要深入了解产品使用的高端用户,可以组织在线培训或者提供教程,如网站分析、数据可视化以及其他复杂功能的基础和进阶使用技巧等等,助力用户在最短时间内掌握完整的产品操作体系。

截图来源于 unsplash

二、B 端按钮的减法设计 按钮的设计是跟随物理世界有着对应的映射关系,因此我们在设计过程中需要考虑现实生活用户的心理状态。

常规展示一个主要按钮是大家的共识,但是出现多个次级按钮时候如果进行展示,需要我们进行深入的探究其根本,因为按钮只要多了就会干扰用户操作。

做减法的设计,可以要可以不要的按钮,统统不要,还原最本质的功能,带给用户极致的体验。

一般我们通过了解用户需求、去除次要操作、合并同类操作、去除不必要的文字来进行 B 端按钮的减法设计。

1. 了解用户需求

①用户需求

在进行 B 端按钮的减法设计时,首先需要深入了解用户需求、操作习惯和使用场景。

例如,在电商平台的商品管理系统中,卖家最关心的是库存、价格和订单处理等功能。因此,在主界面上需要突出这些部分,并提供明显的入口,以便卖家快速找到所需功能。而其他较少使用的功能,如关联品牌或收藏夹等,则可考虑放在次要位置或使用隐藏展示的方式,以减轻主界面负担。

截图来源于网络

京东商家后台:将商品管理、订单管理等主要按钮放在页面顶部,方便卖家快速找到;将其他较少使用的功能,如营销工具等放在左侧次要位置。

截图来源于网络

财务管理软件:将核心功能分为“账务处理”、“财务报表”、“应收与应付”等模块并放入主界面以便用户快速使用。其他次要功能则采用悬浮式展示。

截图来源于网络

②具体衡量

具体怎么衡量那,比如用户比例、频次在 40-50%以下时候,我们衡量它是否悬浮出现或者...展示,跳出该功能,去全局看该功能。

看是否高频操作,如果用户在当前功能频繁使用当前操作,那我们就展示出来,如果用户使用频次低,那我们就考虑隐藏悬浮等设计,提升高频操作。

如在日程设计中,我们发现日程详情展示,用户关注最多的是日程本身,编辑和其他操作用的比较少,且关闭重复,那我们就可以把编辑操作放置在弱化位置,其他操作可以悬浮展示。

2. 去除次要操作

在设计产品时,如果发现一些按键用得很少或已经过时,就应该将其去掉。这可以节约页面空间、提高视觉效果和使用户使用更加流畅。以下是一些具体的去除不必要按键的方法

①用户反馈

通过用户调查、反馈等方式了解哪些按键最少被用户使用,如有可能,彻底去掉不需要的按键,比如一些冷门功能。这里跟上面用户需求重复了,在日常操作时候可以合并去做。

截图来源于腾讯云

②根据数据统计去除无用功能

通过使用数据分析工具统计每个按键的使用频率,以识别没有实际贡献到用户使用中的按钮,并可以考虑删减。

截图来源于网络

③审查历史版本的操作流程

如果在新版本中删除了某些按键,但在历史版本中使用率仍然很高,那么需要仔细评估和处理相关影响,以确保操作链的准确性和完整性。

④定期产品审查

针对项目周期而言,派出一位高级 UI/UX 设计师定期审查产品,将过时、相重复、重复选项等问题找出来并建议严肃删除。

截图来源于 unsplash

总之,在设计中,需要谨慎地考虑每一个按键是否真正有实际价值,如果某个操作按钮过时或用得很少,就应该及时抛弃它,从而实现 B 端“减法设计”的目标,让设计更加流畅,提高用户满意度。

3. 合并同类操作

合并相似功能按钮是减法设计的一个有效手段,可以简化页面元素数量,增强页面整体清晰度和美观度,提高用户的工作效率。以下是一些具体的合并相似功能按钮的方法

①采用下拉式菜单

把类似的功能放到同一个下拉菜单中,这样可以节约页面空间,同时也能方便用户查看和使用。

截图来源于网络

②采用选项卡切换

将一些功能分属于不同的选项卡中,当用户点击某个选项卡时,页面中对应的操作就会呈现出来。

截图来源于网络

③采用可拖动板块

这种方式可以让用户自由拖动相关的功能块,以满足他们的特定需求,同时也能够减轻产品 UI 冗长的负担,使得用户界面更加紧凑。

例如 mac 文件夹摆放,一千个人有一千个哈姆雷特,所以自定义自由拖动能满足用户特定需求。

截图来源于 mac

④采用固定的上下文菜单

在不改变原有逻辑的前提下,在页面的顶部、底部或边角设置快捷菜单,供用户进行常见操作等操作。

如常规个人信息右上角,导航左侧放置等。

截图来源于网络

⑤通过标记组合等引导

使用醒目的图标、不同颜色的指引标记及清晰生动的字体与文案组合,直接告诉用户该功能的特点其所代表的含义,加深印象,并让相关操作按钮的视觉表现在界面之间具有更强的内在关联。

例如下面的 b 端产品在功能卡片和导航功能图标文字色块组合,生动的引导用户操作

截图来源于网络

截图来源于网络

总之,在设计过程中,应该尽可能地合并相似功能按钮,将其作为减法设计的一个重要手段,从而提高页面效率和用户体验。采用上述方法,可以让用户能够快速找到需要的功能,减轻他们的工作负担。

4. 减少文字描述

减少文字描述是减法设计的一个重要手段,可以提高产品的视觉效果、易用性和用户体验。以下是简化文字描述的几种方法

①使用图标取代文字

将常见操作通过简洁的图片表示出来,比如放大镜图标代表搜索功能,购物车图标代表购物车功能等。使用图标可以极大地缩短文字长度,同时也使操作更加直观。

②采用缩写语言

对于一些领域专业术语或经常用到的单词,采用缩写语言(如图形用户界面缩写为 GUI)可以有效节约页面空间,并且读者也能够轻松理解。

截图来源于网络

③简化文本描述

产品中的文字可能有许多概括性词语、修饰性词汇和哲学式的话语等,这些语言会影响读者的阅读速度和阅读理解力。因此,减少不必要的信息并简化语言可以提升阅读体验。描述信息通俗易懂,直白,让用户可以无脑操作。

假设一个 B 端系统中有一个按钮,用于提交订单。如果按钮上写着“提交订单”,用户在使用时需要先读取按钮上的文字,然后再点击才能完成操作。但如果按钮只是一个简单的“提交”或“下单”图标,用户只需要直接点击即可完成操作,操作效率更高。

截图来源于网络

比如标题和子标题,对于较长的文本描述,在界面顶部设置简明扼要的标题,并在必要时添加子标题,这样用户可以更好地理解文本的内容。同时,还可以考虑使用符号或数字来分层次地展示信息,以帮助用户更好地理解。

④整合相似或相关的内容

如果两个或多个操作具有共性或紧密相关,则可以将它们组合在一起,以得到一个整合而清晰的指令。

截图来源于网络

总之,B 端按钮减法设计中文字描述是需要注意的重要环节,易用性和可读性都可以通过合理的使用而得到提高。

欢迎关注作者微信公众号:「阿韩设计」


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通