盘一盘B端优化方案 : 用户体验 + 交互设计

756 阅读7分钟

如果说应用是一条路,技术就是在铺路

那么良好的用户体验则是一条宽阔平坦、风景优美的路

让我们在行路时欣赏美丽风景

用户体验 = 用户需求 + 交互设计 + 视觉设计 + 符合用户习惯 + 便捷

1. 提升用户体验的意义

  1. 吸引和留住用户
  2. 提高用户效率 , 提高转化率
  3. 减少用户认知负担 , 减少错误操作 , 降低培训成本和学习曲线
  4. 提升用户满意度
  5. 提高用户忠诚度 , 赢得用户的信任和忠诚,并愿达成长期合作关系
  6. 降低服务成本 , 减少用户对客服支持的需求
  7. 竞争力提升 , 吸引更多的用户和潜在客户
  8. 塑造品牌形象

2. 用户体验五要素

五要素定义影响
战略层产品的定位,用户的定位,经营者和用户的目标能解决用户的需求和问题
范围层产品包含功能与模块让用户“找得到” “用得顺”
结构层结构层用来设计用户的任务流程、类目区分功能和业务流程越短 , 评判标准越清晰,效率越高
框架层界面中按钮、控件、照片和文本等信息的排列位置基于用户共有的习惯以及主次内容展示 , 使用户更直观的了解到各个功能的使用
表现层规范文字、颜色、图标、图片等一些可视化的图形或文字提升页面的操作感受、视觉美观程度等

3. B端产品特征

1. B端产品形态较为固化

核心页面 : 查询列表页面、表单页面、信息展示页面、业务流程页面

2. B端体验核心关注点非常聚焦

核心 : 准确高效的完成任务

3. B端产品面向的是群体需求,C端产品面向的是单体需求

B端产品通常面对的是一个企业中各种员工类型 : 决策层、管理层、执行层等

他们的喜好与需求各不相同,但都要满足他们的需求、偏好、使用习惯

  • 执行层关注重点尽快完成工作,所以操作效率就显得尤其重要
  • 管理层关注重点工作质量和成本,设计上就需要更多类似统计报表、趋势分析的功能
  • 决策层关注重点数据,所以在设计上就需要更多的数据可视化功能

4. 用户体验优化

4.1. 战略层

1. 个性化

提供个性化的功能定制和智能化的推荐,以满足不同用户角色的需求

2. 信息架构优化

优化网页的信息架构,合理的分类、标签、清晰的导航和搜索功能

提供用户友好的信息结构,减少用户的认知负荷和操作步骤

3. 可用性和可访问性

确保网页具有良好的可用性和可访问性,使用户都能够方便的使用

4. 加载速度

快速加载的网页可以提供更好的用户体验 , 提高满意度

5. 反馈机制

引入用户反馈机制和数据分析,不断改进和优化产品,以实现更好的用户体验

4.2. 范围层

1. 工作台

工作台是一个为用户提供便利的交通枢纽

呈现用户当前需要关注的信息,缩短获取关键信息的路径

用户可在工作台直接操作高频任务、最近使用、待办清单等

2. 搜索功能

使用户能够快速搜索到所需的内容和功能,减少浏览和点击的步骤

3. 清晰的导航

设计清晰的导航菜单,使用户能够轻松地浏览不同页面和功能模块

4.URL参数传递

页面中的筛选条件、分页信息保存在URL上,便于直接复制给他人使用

4.3. 结构层

1. 面向结果设计

明确目标,及时给予反馈和提示,减少用户的困惑和错误操作

2. 足不出户

能在这个页面解决的问题,就不要去其它页面解决

任何页面刷新和跳转都会引起变化盲视,导致用户心流被打断

3. 提供邀请

邀请就是引导用户进入下一个交互层次的提醒和暗示

在内容为空时,邀请用户进行其他操作

4. 登录后页面重定向

当用户登录后,页面会自动重定向到之前的页面。

5. 列表页面

列表页面是展示数据并操作数据的重要页面

需要确保用户直观的在页面中获得所需的信息

  • 数据加载动画
  • 搜索和筛选功能
  • 分页 / 加载更多
  • 突出关键信息
  • 尽量保证不换行 , 形成完整的视觉流
  • 固定操作栏

6. 表单页面

表单页面是信息添加、编辑的页面类型

需要确保用户按照要求录入信息或引导用户完成

  • 基础表单:当需要完成一个简单快速的任务,例如输入少量信息即可完成创建。
  • 分步表单:适用于具有明确的线性逻辑的任务
  • 分组表单:单次任务的表单页中需要填写内容众多,且不同内容之中存在一定可分类归纳性

4.4. 框架层

1. 响应式设计

考虑不同设备和屏幕尺寸的适配,采用响应式设计

确保用户在不同平台和设备上都能提供良好的用户体验

2. 组织性

信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元

反之,则它们的距离就应该越远,也越像多个视觉单元

使页面结构和信息层次一目了然

3. 突出与弱化

突出重要的信息,弱化不重要信息

4. 对比

  • 主次关系对比:为了让用户能在快速做出判断, 来突出其中一项相对更重要或者更高频的操作
  • 总分关系对比:通过调整排版、字体、大小等方式来突出层次感,使得页面更具张力和节奏感
  • 状态关系对比:通过改变颜色、增加辅助形状等方法实现对比,以便用户更好的区分信息

5. 对齐

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

  • 表单 label 对齐:冒号对齐能让内容锁定在一定范围内,顺着冒号的视觉流,找到所有填写项,从而提高填写效率
  • 文案对齐:如果页面的字段或段落较短、较散时,需要一个统一的视觉起点。将文案的首行对齐,更容易找到信息的起点
  • 数字对齐:为了快速对比数值大小,建议数值取相同有效位数,并且右对齐 , 便于视觉比较

4.5. 表现层

1. 图标

  • 图标构造风格一致性 , 色彩协调
  • 用图标替代文字

2. 文案

精准、清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感 , 如以下几点:

  • 从用户角度出发
  • 表述、风格一致
  • 重要的信息放在显著位置
  • 专业、精简、友好、正面
  • 标点符号、英文名词大小写规范、统计数据使用阿拉伯数字

3. 颜色

  • 色彩风格统一
  • 色温和背景接近
  • 使用有限的颜色,以保持整体的统一性和清晰度

4. 过渡

  • 加载动画
  • 进度条
  • 骨架屏
  • 按钮提交动画

5. 细节

满足用户对细节的体验

  • 图片缩放预览
  • 一键复制
  • 收藏关注
  • 员工账号水印

6. 好奇心

满足用户对好奇心的设计

  • 主题选择
  • 可配置首页
  • 隐藏不重要的内容

5. 总结

我们应高度重视用户体验,用户体验的优劣决定了产品的长期发展

在设计过程中,应以用户为中心,站在整体规划的角度出发

同时,需要意识到用户体验没有标准答案,只有最优解

因此,应该集合团队的智慧、共同探索、协力共建

从而达到更高的用户体验目标

PS : 欢迎指正修改