菜单

Wireflows: A 万博官网manbetx下载 Deliverable for Workflows and Apps

通过 Page Laubheimer2016年12月4日

摘要:Wireflows线框图和流程图当有少量页面动态变化时,他们可以记录工作流程和屏幕manbetx官方网站手机版。


介绍

In the 万博官网manbetx下载 field,线框是显示页面级布局思想的常见可交付成果,而流程图对于记录复杂内容非常有用工作流程和用户任务然而,尽管这两个可交付成果remain in common use among 万博官网manbetx下载 professionals,有些情况下,他们是沟通manbetx官方网站手机版想法的次优工具,特别是在记录移动设备时,桌面或网络应用程序没有许多独特的页面,而是几个核心功能页面更改内容根据用户交互动态(或布局)在过去的几年里,另一个可交付成果wireflow已经成为这些问题的解决方案,用于在常见的用户任务环境中展示manbetx官方网站手机版。

标准桌面线框
A wireframe of a web page conveys layout ideas, content, and page-level manbetx官方网站手机版 for websites and apps that have few, mostly static pages, but is not as useful in communicating heavily dynamic process flows. 
Simple 万博官网manbetx下载 workflow flowchart
Flowcharts are used describe both back-end processes and user task flows (as seen in this example).  However, for 万博官网manbetx下载 use, they lack the page context — an aspect which strongly impacts the user experience.

Wireflows作为工作流程的可交付成果

定义:Wireflows是manbetx官方网站手机版规范格式结合wireframe-style页面布局manbetx官方网站手机版 用简化的流程图表示交互方式

移动应用程序wireflow
低保真 wireflow shows a simple user task使用屏幕manbetx官方网站手机版,而不是抽象的流程图符号,一直关注用户将与之交互的产品虽然为了传达详细的manbetx官方网站手机版规范,可以高保真地创建线流,但它们与低保真文档一样有用,可以讨论和交流互动manbetx官方网站手机版和用户工作流程。

Wireflows成为团队中流行应用程序的常见做法,其中流程图中的每一步都用线框表示完整的移动屏幕manbetx官方网站手机版由于移动屏幕尺寸相对较小,实际页面可以轻松取代流程图中的抽象符号(即线框)。但是,有线电视不仅限于​​记录移动应用和网站 - 它们也可以用于桌面产品,通常通过显示根据用户交互而变化的屏幕或网页的一部分很多manbetx官方网站手机版的电子商务购物车和结帐页面适合指定为线流。

为什么我们需要新的东西:流程图和线框不能很好地记录复杂的应用程序

通常,引入新的规范格式是不好的,因为许多利益相关者不会知道如何解释它通常熟悉的是什么但是,我们确实喜欢线流,因为(1)它们很容易可学习那些曾经看过线框和流程图的人,以及(2)线流有足够的优势来克服惯性,否则它会有利于熟悉的格式。

线框图是展示布局的好方法,但它们并没有很好地描述交互,并且它们在记录具有大量动态内容的数字产品的布局方面特别差,例如移动应用程序或webapps线框图是最有用的,当记录网站与许多离散(或其他数码产品),相对静止页面或屏幕,通常会点击链接或按钮导航到一个完全不同的页面

但是,许多现代Web应用程序和移动应用程序的整体页面很少,但会动态更改内容和布局AJAX(或其他技术),基于用户与产品的交互它们可以从选择的电子商务产品中选择方面或过滤器改变页面上显示的产品,复杂的创意或技术应用,基于与工具,模式和其他控制参数的交互,存在的总体布局和信息可以大幅变化在这些情况下,线框图不捕捉各种布局可能性或内容如何变化的规则此外,典型的线框不记录重要内容反馈系统在与页面交互后向用户显示(向用户传达他们的行为已被系统识别的反馈对于良好的用户体验至关重要,并且是第一个10可用性启发式。

另一方面,流程图是一种工具详尽的记录复杂的工作流程以及与多个步骤或路径的交互,但通常会忽略交互的上下文及其对用户的影响使用流程图作为主要可交付文档(想象)的交互manbetx官方网站手机版和多步用户任务所涉及的步骤可以忽略上下文在页面上显示的信息,影响成功的互动。

Wireflows文档交互

The classic use-case for wireflows is to document the process of a user working through a common task on the product (e.g“消息直接发送到你的网络”社交媒体应用程序)在工作流程的每个步骤中,简单的线框或高保真屏幕模型显示用户可以使用的屏幕。

箭头用于指示用户采取操作的特定UI组件(例如点击按钮,单击链接等),并指向另一个线框图像,显示交互结果The second "node" of that interaction need not be a separate page or screen; rather, it can show the same page with the result of that interaction, such as content that has changed, or feedback that the interface shows as a result of the interaction (e.g., a confirmation popup, a color change, or an error message)重要的是箭头标明可点击“热点”(或目标),导致流中的下一个步骤,为了减少wireflow模棱两可明确地指示触发热点尤为重要,对于复杂的应用程序在一个页面有多个可行的目标 

移动应用程序wireflow
这个简单的线程流显示了一系列用于典型用户任务流的移动应用程序线框在这个例子中,每个线框对应相同的应用程序页面,而不是代表不同应用程序页面每个步骤都清楚地表明连接到任务流程中下一步的热点此外,线流显示在第二步中使用视觉反馈(其中点击的相册更改背景颜色以注册水龙头)。

尽管最常用于移动应用程序,但线程流也可用于记录桌面应用程序和Web应用程序中的复杂工作流程自显示全屏桌面线框为每个步骤过程中会浪费很多空间如果大多数屏幕manbetx官方网站手机版每一步保持不变,只显示屏幕的一部分,改变(如一个对话框、模态、过滤器或方面)在每一步可以足够的文档相关的,改变部分的界面,同时还能提供足够的上下文。

桌面线程
用于配置器webapp的简化高保真桌面线程表明,并非每个步骤都必须表示屏幕的所有部分。由于大尺寸的桌面屏幕manbetx官方网站手机版,显示整个页面为每个步骤是不必要的,如果大多数的信息可见不会改变使用战术方法显示相关的屏幕manbetx官方网站手机版,唯一可以想象由于用户输入的元素做改变(Screenshots from www.planar.com制成的wireflow NN / g)

虽然wireflows擅长在应用程序和动态网站上显示任务流,其中每个页面上的内容或布局根据用户交互而变化,但它们也适用于记录传统静态网站中的任务流但是,请谨慎使用wireflow来记录静态桌面网站,因为每个线框图像的大小可能足够大,从而失去了记录过程的上下文。

协作构思的线索

除了作为与项目利益相关者和开发人员的有用沟通形式之外,wireflow还可以作为团队成员之间协作的工具特别是在敏捷的环境中, being able to collaborate and communicate well among a crossfunctional team is critical. 
manbetx官方网站手机版-workshop sessionscan build buy-in and shared understanding among a crossfunctional team; in these平行manbetx官方网站手机版workshops, team members ideate and write down task flows, the group then discusses options, and the 万博官网manbetx下载 person sketches each step in a wireflow style to visualize potential options (and to document ideas that the team agrees on).

In a collaborative environment, wireflows need not be visually polished; these types of discussions are benefitted strongly by using sketching techniques with a whiteboard or paper and pencil to quickly document ideas and focus on the interactions.

可交付成果研讨会Wireflow Photo
几个团队成员万博官网manbetx下载 Deliverables seminar在一个NN/g 万博官网manbetx下载 Conference使用手机便签,标记,和纸合作在wireflow manbetx官方网站手机版车间这个过程可以很容易地在白板上工作,或者简单地使用纸和铅笔。

结论

Wireflows are an emerging 万博官网manbetx下载 deliverable for documenting user workflows and complex interactions for mobile and webapps他们非常适合表示动态变化在一个或几个页面在一个应用程序,和少工作捕捉流过大量的相对静态页面链接在一起Wireflow还可用作协作和构思技术,供团队思考用户工作流程和任务,并在流程的每个步骤中设计屏幕manbetx官方网站手机版。

在我们的全天了解有关线流的更多信息万博官网manbetx下载 Deliverables seminar