其它名称:引导、安装向导(Setup Wizard)。

一、问题总结

用户想完成某一单一的目标或任务,且它可分解为多个存在依赖关系的子任务

二、截图示例

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png image.png

image.png

image.png image.png

image.png

image.png

image.png

image.png image.png

image.png image.png

image.png

image.png

image.png

image.png

image.png

image.png image.png

image.png image.png

image.png

image.png image.png

image.png

image.png image.png

image.png image.png

image.png

image.png

三、参考用法

  • 用于用户完成的目标或任务存在多个操作步骤时。
    • 例如向网站中添加图片,该任务有两个步骤:上传图片和裁剪图片,只有将图片上传到网站的服务器上之后才能裁剪图片(PS:第二个步骤依赖于第一个步骤)。
  • 用于当用户需要完成比较复杂的任务,该任务包含多个存在依赖关系的子任务时。
  • 用于当用户需要向应用系统中输入复杂数据,而该任务可以被拆分为一系列小巧简单的步骤,从而让用户更容易的完成目标。
  • 当给用户提供指导:用户想要完成某一目标,但只知道该目标的总体情况,不清楚达到该目标所需要的步骤
  • 用于前期阶段中的决策不同,导致后续的完成任务所需的步骤发生变化的情况
  • 用于当用户缺乏必要的领域知识时。
  • 用于当用户必须以特定的顺序完成目标的每个步骤时。

四、解决方案

将某一单一的目标分解为多个存在依赖关系的子任务。

将数据输入到应用系统,这个操作可以拆分为多个步骤,把每个步骤一一展现给用户。

用户应该能够了解完成目标总共有多少步骤、当前的进度、完成了哪些步骤。

本模式与步骤条(Steps Left)模式类似,两者之间的差别是侧重点不同。步骤条(Steps Left)仅仅是解释一个过程中包含哪些步骤,而本模式是将完成一个复杂目标所需的具有关联性的子任务集合拆分为一个个单独的步骤。

本模式与步骤条(Steps Left)的不同之处还在于,完成目标所需的步骤取决于前期阶段中输入的信息,因此本模式对于用户来说不仅仅是可视化辅助方式。

4.1 按钮

总的来说,应用系统中的向导是一组窗口或者对话框,它能让用户从头至尾地完成某一目标。用户以选择或者填写字段的方式在向导中的每个窗口中输入信息,信息输入完毕后,在窗口中点击「上一步」或者「下一步」选项进行导航,在目标的最后一个步骤中,用户点击「完成」选项(而不是「下一步」),表明目标完成,向导功能结束。

在向导中的所有窗口中都增加一个「取消」按钮,是一个很好的做法,这样就可以让用户退回到使用向导功能之前的界面。通常,将「取消」按钮放在其它导航按钮附近,但需要与「上一步」和「下一步」按钮有明确的距离,防止用户误操作。此外,如果点击「取消」按钮会造成用户输入的数据丢失,点击「取消」按钮时弹出警告信息也是个不错的做法。重新使用向导时,用户可能希望能从上一次退出的步骤处开始,这种期望也是合理的,为了不给用户造成不必要的误解,应用系统应该提示用户退出向导可能会造成的后果

向导应该是便捷地,因此在向导窗口中显示当前步骤的内容,同时在窗口上方显示导航信息,这种方式挺不错

4.2 明确目的/意图:说明/解释

给向导的每个窗口都加上一个简单明确的说明性标签,保持向导的意图明确。有时在向导的第一个窗口的标签附件还有一则简介,该简介用来说明本向导的意图,这样做会让用户了解他们为什么要用该向导以及向导结束后能获取什么好处。

4.3 使用简洁/直白的语言

使用向导的用户不一定是行业专家,因此尽量避免使用技术术语与用户交流,向导中使用的语言应该贴近用户的知识范围

4.4 总结用户的操作/选择

将用户在向导的各个步骤中进行的操作进行总结归纳,并在向导终点处展示给用户,这种好的做法会让用户在点击「完成」按钮之前三思而后行。万一之前输入的数据有问题,用户可以点击导航按钮退回到数据所在窗口进行修改,如果向导中的步骤数量超过8-10个,最好能够提供直通数据所在窗口的链接。

4.5 默认值的选择

向导功能是使用良好的默认值(Good Defaults)的最佳场所,因为大部分用户对他们正在完成任务不是很熟悉,因此对向导中需要他们进行的操作也不了解。

五、基本原理

将复杂任务分解为一组子任务,每个子任务都可看做一个单独的模块,每次完成一个子任务要比一次性完成整个任务容易得多,这可以有效的简化任务。比起步骤条(Steps Left)模式,本模式中完成目标所需的步骤取决于前期阶段中输入的信息。

通过将复杂任务分解为一组子任务,可以把向应用系统中输入数据这一过程根据输入内容分为多种方式。

类似于向应用系统中输入大量可靠数据这种复杂任务,可以通过向导根据用户的意图进行调整和精简,在向导的每一个步骤中,根据用户的意图,分析上下文信息,然后自动去掉后续的不必要的步骤,只保留与当前任务相关的重要步骤

如果应用系统中存在很多参数,用户可以通过调整参数来完成不同的目标,这时可以使用本模式把参数根据目标进行分组。如此一来,就可以把一个包含很多不关联操作的复杂任务转化为连贯的向导过程。

当用户被强制执行一组预定义的步骤时,他们很难忽略操作过程中的重要事项,因而降低了犯错可能性。

5.1 最低的学习/培训成本

本模式常用于未经培训的用户,因此,需要确保未经培训的用户也可以使用向导完成目标。使用向导的本质是让用户不再为完成某些少见的或者让人望而生畏的任务而受训,而不是让用户学习相应的专业知识。

5.2 产出高效的向导

向导帮助用户完成复杂任务,但同时也影响任务的执行时间。

高效的向导将复杂任务分解为一组子任务,甚至更细级别的子任务。采用任务分析方法,将子任务按序排列,让用户在使用时能够感觉既熟悉又舒适。应用程序开发时,在窗口界面设计前就应该进行任务分析,最好是到用户工作现场观察用户实际工作时是如何执行任务,然后进行任务分析。任务分析方法的产出是向导的大纲和信息体系结构

5.3 维持较少的步骤数量

如果将任务包含的步骤分解过多,会让用户不知所措。完成向导中的所有步骤花费的时间太长,然让用户厌烦,很可能半途而废。

5.4 不要使每个步骤变得冗长

在一个向导中,步骤数量要受到限制,但也不能总将数量控制到最少。当一个步骤对应的窗口的内容太多,到了正常的计算机屏幕都放不下时,就会让用户厌烦,因为用户要不停地上下移动窗口输入数据,还要前后按钮导航按钮切换步骤,可以考虑将这种内容过多的步骤再进一步拆分

为了找出一个向导是否在「较少步骤数量」和「每步内容不冗长」之间找到了平衡点,对向导进行可用性测试,很难有其它方法来检测这两者之间的平衡性。

5.5 提供/允许使用备选方案

执行任务时,向导可以降低用户的学习曲线,使用它能够提高效率,相比不使用向导来说能节省很多时间。使用向导会「简化」任务,用户虽然在执行任务,但对任务了解得不全面,也不明白他们所做的操作的意义。这样的后果是如果没有向导用户就无法执行任务,他们也不能通过使用应用系统的其它功能模块来完成目标。

完成任务不能只靠向导这一种方法,还有其它更为复杂的方法也能完成同样的工作,向导只是种备选方案。使用向导,应该是既可以让未经培训的用户轻易上手,又能让那些有经验、不喜欢被向导束缚的用户选择更复杂的方法来完成任务。

附录

参考文献

  1. Wizard design pattern by Jenifer Tidwell.
  2. Wizard design pattern by Martijn van Welie.
  3. Crafting a wizard by Jodi Bollaert.
  4. 已被删除More Web-based wizard tips and tricks by Jodi Bollaert.
  5. 网站丢失Designing wizards by Saul Carliner
  6. 页面丢失Wizards and guides by Bob Baxley at Boxes and arrows.

分别如下:

链接&原文

[1] The user wants to achieve a single goal which can be broken down into dependable sub-tasks.
[2] Use when the user needs guidance: the user wants to achieve an overall goal, but may not be familiar in the steps needed to reach the goal.
[3] Use when the steps needed to reach a final goal may vary due to decisions made in previous stages.
[4] It is also good practice to include a 「Cancel」 button on all screens that will lead the user back to where he or she came from.
[5] It is fair for to assume that the user expects that he or she can return to the wizard later and start from where they left off. In order not to frustrate the user more than necessary, the consequences of exiting the wizard should be communicated.
[6] Wizards are meant to be fast and easy. For this reason, it is a good idea to keep the content of a screen as well as its navigation above the fold.
[7] The language used should fit in to the user’s frame of reference.
[8] By splitting up a complex task into a sequence of chunks, you can effectively simplify the task. Each chunk represents a separate mental space, easier to deal with alone than as a whole.
[9] The complex task of inputting large amounts of dependable data can be adjusted and streamlined to fit the decisions of a user throughout a process. In the context of decisions the user makes in each step, unnecessary steps can be cut out and important steps can enter into the focus.
[10] Sub-tasks are sequenced in a way that feels familiar and comfortable for the user using task analysis. Task analysis is conducted before screen design begins and is best done observing real users performing the task in their own work environment. The output of the task analysis is an outline and information architecture for the wizard.
[11] When a screen of a step in your wizard grows to a height that does not fit into a regular screen solution, there is a risk of annoying the user and making the wizard tiresome to finish as it forces the user to scroll to enter data and navigate back and forth. Consider breaking such steps up into two or more screens.(通常导航中一个步骤对应一个窗口界面,所以这里将 screen 按步骤来翻译的。)
[12] It however comes with the cost of 「dumbing down」 the task as users perform tasks without fully understanding them and being aware of the underlying decisions.
[13] 原文地址