重新定义、示例及其他资源
用户体验有一长串的术语和可交付内容。当查看看似完整的用户体验术语表中的引用说明时,列表更加明显。由于这些内容的不断演变和许多术语重叠的因素,我认为是时候去重新审视它了。
打破它
任务流的分析和用户流是多年来常听到的术语。我决定找出它们的“官方”定义。但谷歌搜索显示现有的UX术语表并没有定义这些术语。
在任一情况下,流程描绘移动。设计人员需要考虑用户如何浏览网站或应用程序。创建的这些流程将有助于设计人员考虑用户在访问特定页面之前和之后会发生什么情况,并关注重要的内容。除了创建工作原型的第一步之外,流程可以帮助开发人员了解如何在交替状态下工作。
流程图
流程图是包括了复杂系统或活动中的人员或事物的移动或动作的顺序的图示。
任务流程与用户流程
任务流程和用户流程没有什么不同。两者的目标都是以最少量的摩擦来优化用户完成任务的能力。在功能开发之前,它们都可以帮助您对设计的思考。如果想要区分它们,可以将它们定义为:
任务流程
任务流程是由所有用户针对特定操作完成的单一流程。例如注册。任务流有一个突出的流程,它们不分支出来。
用户流程
用户流程是用户遵循应用程序的路径。我喜欢把它们当成迷你的用户旅程。流程不一定是线性的,它也可以在非线性的路径中分支。通过确定此路径,你可以看到路线可能会有转弯,并可优化用户体验。
用户流程开始可以是简单的,并帮助确定“red routes”——用户旅程的关键。当有许多条件和要求时,就很容易地演变成复杂的流程。用户流程在构建产品之前有助于消除复杂的流程。
设计用户流程可为用户和企业带来更好的效果- 摩根布朗(Morgan Brown)
用户界面的流程
37个标志具有用户流程的shorthand。他们理解的用户流程有以下问题:
1. 设计过程中较难沟通。
2. 绘制出每个流程的状态非常耗时。
3. 或许你可能想用在用户界面的流程中。这是快速入门的方式,在一段时间内可能会满足你的需求。
线框图
多年来,我创建流程图来交流互动。为了给出更多的情境,我的流程图变形包括线框。NNgroup最近创造了“Wireflows”一词来捕获这个新的用户体验的可交付产品。
Definition:Wireflows是一种设计规范格式,它将线框式页面的布局设计与简化的流程图方式相结合。— NNgroup
单独的线框是不够的。线框图的交流布局和静态内容不是交互作用。流程图确实涵盖了详细的交互,但是它们忽略了用户情境。Wireflows帮助记录正在更改的页面上的内容或布局的复杂交互。
线流的元素
1. 外部和出口
2. 步骤例如:用户操作,系统操作,交替路径
3. 连接:指示所需的路径和有可能的不同流程
4. 决定点:用户必须从2个或更多选项中进行选择
对用户场景允许一个更好的设计经验的理解。所描述的这些方法都有助于交流想法并提供有效协作的方案。以下是帮助您开始使用的一些资源。
资源
这里有一些资源可以帮助加快用户体验的工作流程。
用户界面套件
流程图工具byGreg Dlubacz
这是一个用于Sketch的精心制作的用户流程套件,可以真正快速和容易地帮助创建简单的站点地图。
包括箭头在内的所有元素都是可扩展的,完全可定制的。
流程图工具byArthur Guillermin Hazan
这是一个用于显示网站项目的页面之间交互的流程图。你可以添加箭头,图标,自定义你自己的页面,甚至可以使用此套件构建精确的站点地图。
用户流程图模版byJarosław Ceborski
Sketch的用户流程图模板将帮助您轻松制作漂亮的图表!所有的方块和箭头都是便于使用的草图符号。
13+ Productive UX Flowchart Templatesfrom Template.net
Sketch插件
AE流程图byMarko Tadic
Sketch有几个用于创建流程图的插件。快速浏览后,我发现AEFlowcharts是最容易使用的。
可以在在Vimeo.上看它的的行动。
感谢您的观看!
原文作者:Naema Baskanderi(UX Designer)
译者:SKYUI