关注以用户为中央的体验设计

在软件产品设计过程中，用户体验的设计是一个不可忽略的课题。

对付互联网产品，用户是否喜好我们的产品，取决于他利用产品所得到的好处，也取决于他在产品中得到的体验。

而用户的体验每每会影响用户的口碑，口碑影响产品的成败，产品的成败也影响了产品经理的利益。

对付B端软件产品，由于业务特性让产品设计职员更加关注业务需求和多角色协同流程，每每忽略了终端用户的诉求和单一用户视图。

不好的体验每每会影响项目的交付和公司的形象，从而影响了公司的利益。

既然用户体验这么主要，那我们该当如何做好用户体验设计呢？

一、影响用户体验的三要素

体验以用户为中央，那么我们就以用户的视角不雅观察一下产品的体验。

假设某天由于用户体验设计的问题困扰你，你想通过”大家都是产品经理“找到干系的文章为你办理问题供应解帮助。

于是你打开网站，点击搜索，输入关键字，敲击回车后，浏览目标文章，通过简要解释找到可能让你关注的文章后，点击查看文章，如果知足你的哀求时，你还可能会收藏备用。

全体过程中，会涉及到以下三种体验要素：

1. 别让我等

用户的耐心是非常用限的，一方面是生命是有限的，另一个更紧张的方面是传统媒体教诲的结果。
我们打开图书、打开电视时得到的都是纵然的体验。

此外，像电脑浏览器可以同时找开多个页签，手机可以多窗口的切换等技能的支持也让用户习气了在有限的韶光内追求体验程度最大化。

许多研究表明，用户最满意的网页打开韶光是2秒以下，等待12秒以上绝大多数用户会关闭网页（通过进度条等手段可以延长至38秒），用户也更方向于认为打开速率较快的网站质量更高、更可信、也更有趣。

2. 别让我想

当用户触达你的网站时，创造网页一团糟，不知道里面是干什么的，也

这个绝对不是用户的错，他会开电脑，用鼠标和键盘，会打开浏览器进入到你的网站。

以是留给产品经理的问题是：怎么留住到来的用户？

3. 别让我烦

网站效率低，会令人烦躁，用户完成任务难度与所需步骤成平方正比。

一次又一次的重复操作绝对不是用户想要的，如何进行高效的设计缩短用户完成任务的路径是产品经理要面临的寻衅。

二、合理方案任务流程

从用户角度理解完用户体验之后，我们再从产品的角度方案产品功能。
设计之前，我们须要依据场景合理方案任务流程。

任务流程是”需求“到“设计”之间的连接线，用户利用你的产品时，一样平常都有特定的需求。

以是用户须要在合理的勾引下完成任务，知足自己的需求。
合理指要符合用户的心智即要符合用户的思维习气与行动习气。

这里先容C端产品设计中非常经典的一款用户体验剖析工具“用户故事舆图”：

1. 用户故事舆图

用户故事舆图可以帮助产品经理剖析用户在利用产品时为了达成某个目的的关键步骤和动线，并据此从场景的角度来拆解设计软件的功能点。

用户的操作动线在每个层面被拆解，以得到第一级别的场景，即Activity。

再从第一级场景进一步拆解出第二级场景，即Back Bone ,它就像阐述故事的骨架。

在二级场景下，可以进一步更加细致地列出所有干系的功能点，即用户任务User Task。

用户舆图中的最小颗粒度便是用户任务。

用户任务即敏捷开拓中的用户故事（User Story）,每个用户故事可以用“作为（谁），我想要（什么），这是为什么（为什么）”这样的构造进行描述。

以下为某购物平台用户下单购物的简化用户故事舆图如下：

2. 紧张任务和次要任务

按照优先级和迭代操持将用户任务进行分组就可以得到Release One、Release Two、Release Three…。

每个Release便是迭代中的一个冲刺（Sprint）。
按照任务与用户的目标期望达成度可以将任务分为紧张任务和次要任务。
紧张任务指完成用户目标必须须要的任务，次要任务是出于部分用户的分支需求，亦或是出于商业的需求。

Release One由紧张任务组成，要以理解为这套产品的第一个最小可实行版本（MVP)。

三、基于三要素的用户体验设计

清楚了任务流程和版本功能点后，我们须要考虑如何将必要的信息有效组织起来分门别类的呈现给用户，别让用户想，让用户快速找到自己想要的信息。

同时，我们还须要考虑对界面的信息进行排列和一系列的勾引，别让用户烦，帮助用户快速理解信息并完成任务。

末了，我们须要通过一定的技能实现办法办理用户等的问题。

下面我们逐一展开剖析：

1. 办理用户想的问题：让用户快速找到自己想要的信息；减少用户思考和学习的本钱

1）Logo

a）我们辨别一个人，并不须要记住他从头到脚的所有细节，最主要的是看他的脸；当我们辨别一个产品时，最主要的是通过Logo。
Logo能让用户轻松的知道产品是什么。

b）Logo的阁下或下面会有细化的规格或分类，供应更详细的信息见告用户当前模块/频道是什么。

c）Logo阁下或下面有时还会有一个简明扼要的Slogan，见告用户产品能够给客户供应什么样的做事，带来什么样代价。

比如下图所示：

2）关注用户任务，给予精确的指引

导航设计是信息组织与分类的根本，在产品设计中扮演着重要的角色。
虚拟的网络天下没有现实现天下中明显的方向感，不明确的导航和位置随意马虎导致用户迷失落，成功的导航设计可以自我阐明，让用户清楚的认识信息构造和自己所处的位置，能为用户清楚的阐明我从哪里来，我现在在哪里，我能到哪里去。

设计导航时，要把稳深广度平衡与导航形式选择：

a）导航层级的数目称为深度，每层级中包含的选项数称为广度。

导航深度建议不超过5层，过深的导航随意马虎流失落用户，一些眇小的信息隐蔽过深用户很难创造，而且过深的层级关系也随意马虎让用户迷失落方向。

与深度比较，广度导航更利于用户创造信息，但广度超过7个选项，用户就很难记住，一次性展示过多选项会让用户患上选择恐怖症，很难选出哪一项是自己要的。

如下图所示：

b）就移动端产品来说，紧张导航的形式包括底部的Tab导航、标签式导航、陀式导航、抽屉式导航、宫格式导航和列表式导航。

Tab导航比较常见，对付仅有3~5个常用功能的产品，直接将功能选项暴露在产品首页。

标签式导航一样平常位于界面顶部，比底部Tab导航更具有扩展性，常与Tab导航组合利用，Tab导航做为一级功能分类，标签导航做为二级扩展分类。

陀式导航与Tab导航类似，不同之处在于会有一个非常突出的选项，这个选项常日为紧张触发按扭。

抽屉式导航通过点击屏幕呼出侧边栏导航内容，觉得像拉抽屉一样拉出菜单，常用于紧张功能突出，次要功能利用频次较低的产品。

宫格式导航将产品紧张功能集中于首页，每个功能都是一个独立的入口，适用于体量大、功能多的产品。

列表导航常用于二级导航，构造清晰便于分组，适用于须要分组的功能或内容。

如下图所示：

导航是面向全体产品功能的，对付单一场景的用户须要完成目标任务，还须要做好任务勾引的设计。

利用引导控件完成超过多个界面的用户任务，是一种常用的方法，这种控件多用于web端，勾引用户完成多步操作。

在同一界面中对用户进行勾引，可以利用相似性勾引、方向性勾引和运动元素勾引这三种方法让用户自然顺畅的完成操作步骤。

相似性勾引便是如果大小、色彩、形态等成分相似，那么这些成分就可以牵引用户的视觉。

方向性引是对操作步骤较多的任务时，利用有指向性的箭头进行方向性勾引（包括箭头和无形勾引）。

运动元素勾引便是利用元素的动态效果勾引用户视线，带领用户走到下一步。

如下图所示：

色彩、形态相似的勾引

方向性勾引

运动元素勾引（添加成后的动态效果）

要想让用户不用费很多精力阅读，而是通过扫描一下界面找出吸引其把稳力的内容，特殊对付信息量大的界面，就就哀求设计职员组织好这些信息，并进行精心的设计。

这里供应三个层面的参考帮助设计职员提高产品的用户体验：

a）让界面层次清晰：界面清晰实际上便是界面简洁易懂、有重点、有逻辑、有层次。

首先，我们须要将大段的信息分解成易于理解的信息模块，再将这些模块依据用户的浏览习气排列优先级并放置到相应的界面位置上。

其次，在视觉呈现上通过间距、分割线、卡片，让用户能够区分不同模块并突出模块之间的逻辑关系；模块的内容，存在主要程度不同和逻辑关系嵌套的，可以在视觉呈现上表示出差异。

末了，可以通过不同的样式帮助用户辨别不同层级的信息。

如下图所示：

b）突出重点信息：通过强化某些设计元素，如加大加粗、利用色彩比对、添加背景色、适度留白等办法强调界面的重点信息，然后让非重点的信息稍加弱化从而使界面的重点信息自然而然的跳出来。

如下图所示：

c）隐蔽次要信息：随着产品功能的增加，界面上的元素也越来越，为了不影响新手和中间用户，须要将次要的信息隐蔽起来，待用户须要时再次他们展示出来。

隐蔽次要信息不仅可以让界面重点信息更加突出，也会减少繁芜信息对用户的滋扰，帮助用户更便捷的操作。

如下图所示：

3）尽可能降落用户学习本钱

磋商界面交互体验设计问题时，我们可以遵照尼尔森的十大可用性原则，个中在办理用户想的问题上紧张包括如下六条：

a）隐喻原则：在提到隐喻原则之前，有必要提及一下拟归天的视觉。
最直接借鉴现实天下的办法便是拟归天，通过仿照现实中的物体，利用户产生熟习感，让信息与功能更加易于识别和理解。

随着大家对电子产品接管度越来越高，拟归天细节过于繁芜，会让用户觉得累，从而设计师抽象出物体中最有特色的部分，将繁杂的视觉元素进行简化处理，由拟归天转向扁平化。

而拟归天的界面设计有一定的局限性，并不是界面中的每个元素在现实天下中都可以找到对应的物品，设计师通过用户熟习的语句、短语、符号来表达意思，遵照真实现天下的认知、习气、让信息呈现更加自然，易于辨别和接管，这便是隐喻原则。

例如：播放器的功能按扭，如下图所示：

b）防错原则：避免缺点的发生要好过出错后再给提示。
设计时，要先考虑如何避免缺点的发生，其次再检讨校验非常。

例如：在填写表单时，可以通地提示笔墨避免用户填写缺点，填写完成后可以检讨用户填写信息是否准确。

c）同等性原则：同样的情景、环境下，用户进行相同操作，结果该当同等。
系统或平台的风格应保持同等。
当用户已经习气了固有的规范，我们设计时应遵照老例，不要盲目标新创新。

例如：下图的我的图标放第一个位置是不是有些别扭？

d）影象原则：让系统的干系信息在须要的时候显示出来，减轻用户的影象包袱。

例如：大部分APP搜索的时候，会保留用户最近利用过的搜索关键词。

e）简约设计：用户的信息交互内容不应该包含无关或没必要的信息；增加或强化一些信息意味着弱化另一些信息。

f）容错原则：缺点信息运用普通易懂的措辞解释，而不是只向用户提示缺点代码，提示信息应包含办理方案。
例如：访问网站报告404的缺点。

2. 办理用户烦的问题：让用户快速理解信息并完成任务，缩短完成路径帮助用户偷

1）灵巧易用：系统中每每中级用户较多，而初高等用户较少。
以是系统设计应为大多数人设计，同时兼顾少数人的需求，做到灵巧易用。

2）及时的反馈：系统该当在合理的韶光、用精确的办法向用用户提示或反馈目前系统在做什么、发生了什么。
与用户保持沟通和信息通报，不会让用户感到失落控和焦虑。

3）回退原则：用户因欠妥心误操作，须要有一个功能让程序规复到缺点发生之前的状态。
对付误操作概率高的用户，让他有反悔的机会，会让他感到有安全感。
比如，大部分商城下单后，可以在一定条件下取消订单。

4）减少功能性，视觉听觉的骚扰：减少广告、走马灯一类的效果吸引用户将视线移开，让用户分心并且烦躁。

5）减少用户产品利用过程中感想熏染到的压力：不要为了增加用户关注度而强制他们去做他们不关心的事。

3. 等：界面设计 & 技能方案

加载比较大的页面元素内容，繁芜的操作运算（涉及后台运算或数据的调用）、代码非最优方案导致加载页面或某个操作须要花费太多时长。
这时候我们办理方案有：

1）技能方案

a）减少Http要求数

b）利用内容分发网络（CDN)

c）压缩网页元素

d）把样式放在网页的Head部分

e）把脚本文件放在网页底部

f）把样式和脚本放在外部文件中

g）减少DNS查询次数

h）缓存Ajax

2）交互设计

对付某些分外的情形确实须要花费大量韶光时，可以通过进度条或加载动画手段将加载须要的韶光，处理的数据数量等信息展示给用户，让用户可以收到反馈，有预期，减少用户等待时产生的确定性。

四、结语

做好用户交互体验须要先理解全体用户产品利用的过程，再勾引用户完成任务，完成任务的过程不要让用户等、不要让用户学习和思考，缩短任务完成的路径帮助用户偷

作者：refurbish ； 公众号：Bruce林奋进频道

本文由 @refurbish 原创发布于大家都是产品经理，未经容许，禁止转载

题图来自Unsplash，基于CC0协议

该文不雅观点仅代表作者本人，大家都是产品经理平台仅供应信息存储空间做事。