菜单

向导:定义和设计建议

通过 Raluca Budiu2017年6月25日

摘要:用于输入信息的常见应用程序 - manbetx官方网站手机版模式,向导适用于仅偶尔执行的过程。


在输入数据时,Web和应用程序中使用的两种最常见的模式是表单和向导电子表单是纸质表单的直接后代:用户需要填写的空白字段页面该向导是一个minapplication,它引导用户完成一系列表单。

定义:向导是一个循序渐进的过程,允许用户输入信息订明的订单并在其中后续步骤可能取决于先前输入的信息。

向导通常涉及多个页面,并且通常(但不是强制性地)显示在中模态窗口一个向导页面通常对应于多步骤过程中的单个步骤。

当用户输入信息时,系统计算该用户的适当路径并相应地路由她Wizards thus often have some branching logic behind the scenes, but the perceived user experience is that of a linear flow: one screen after another, and all the user has to do is to click “next.” (Or “back,” or “cancel,” but mainly the user keeps moving forward.)

用户界面manbetx官方网站手机版的一个经典困境是是否将控制分配给用户或计算机通常,人们在掌控时会感觉更好,但是拥有太多的自由可能会让用户陷入困境并经常导致他们浪费时间向导允许计算机控制对话的流程,但是在人们不关心他们的选择或者不知道做出决定的情况下,这种用户自由的限制可以解放。

Turbotax:表格(左)是纸质税表的近似复制品,但可以数字化填写,而向导(右)则逐步引导用户填写税款。

动态表单还是向导?

随着AJAX技术的普及,表单和向导之间的区别变得更加模糊例如,下面的Fidelity页面询问用户他们是否是当前的Fidelity客户,并根据他们的答案显示在同一页上登录字段或姓名和电子邮件信息Is this a form or a wizard? According to our definition, it’s a wizard.

Fidelity.com:打开罗斯IRA账户(顶部)的页面动态地向表单添加不同的字段,具体取决于用户是否是现有Fidelity客户(中间)(不是)(底部)这种分支使页面更接近向导而不是表单。

当用户输入信息时,下面的Microsoft页面也会更改屏幕上显示的信息 - 但是,在此示例中,字段保持不变,而在用户进展时显示内联错误消息或说明从技术上讲,此页面是一个表单而不是向导 - 用户采取的操作不会修改该过程的步骤,尽管表单在填写不同表单字段时会向用户提供动态反馈。

Live.com:创建帐户表单动态显示内联错误消息和字段说明。

向导在页面上显示较少的信息

由于向导将复杂的过程分为多个步骤,因此向导页面通常更简单 - 它们包含的字段更少,信息总体更少页面简洁性有几个重要的好处:

  • Users end up being less overwhelmed by the process长形式通常是令人生畏的,用户可能会高估填写它所涉及的工作量。
  • 在完成该过程中花费的认知努力较少表单中的大部分信息可能最终变得无关紧要,但人们将不得不花费注意力资源来扫描它并最终将其过滤掉使用向导,显示的字段取决于用户以前的输入,并且更有可能实际重要,而不仅仅是分心。
  • 用户犯的错误更少使用过于复杂的表单,用户可能会忽略某些部分,并且更有可能导致表单提交错误或者,他们可能会错过与他们相关的内容。
  • 每个步骤都有更多的屏幕空间当复杂的过程分成更简单的步骤并且每个步骤都有一个单独的页面时,步骤中的每个控件都有更多的空间目标可以更大且更少拥挤,信息可以放在单个屏幕上(因此不需要滚动),并且可以在字段旁边显示解释。

每个用户的最短路径

对于某些人来说,通过这个过程的路径可能是快速而简单的,而对于其他人来说,这可能是错综复杂和乏味的如果根据用户的输入分叉进程并且分叉对用户是透明的,那么他们不需要打扰不适用于他们的路径因此,在一个好的manbetx官方网站手机版向导中,人们只会看到与他们的情况相关的步骤和信息。

例如,没有信用卡的用户无需在结账表单中看到信用卡字段,而只能关注相关的PayPal字段。

奇才的缺点

与向导一样有用,它们并不适合所有情况以下是与向导相关的一些常见问题:

例如,比较将数据键入具有多个列的电子表格的过程,以及在向导中按字段输入数据字段的过程与仅通过电子表格的不同列进行标签相比,鼠标和键盘之间的重复切换以及改变显示器所需的额外注意力可能很快变得令人厌烦。

Microsoft Word: Using a wizard such as Microsoft Word’s Source Manager(top) to enter each reference in a long bibliography list can be a lot more tedious than simply typing it in a table, spreadsheet, or even in text-based typesetting software such as Latex (bottom).
Mint.com:此向导用于确定用户阻止访问信用评分的最佳信用卡,该信用卡位于应用程序的其他区域幸运的是,我们的研究参与者可以在不退出向导的情况下记住她的分数(一个更好的manbetx官方网站手机版将完全跳过这一步,并将使用该应用程序已有的信用评分信息。)
  • 巫师可以要求更高互动成本(更多点击次数)比其他输入模式特别是如果需要重复调​​用向导,单击每个步骤的单调乏味可能会破坏将进程分成小部分的优势。
  • 向导可能不允许用户轻松传输或比较来自不同步骤的信息。当用户一次看到一个步骤时,可能很难跨步骤移动信息或参考在上一步骤中输入或显示的信息(并且,有时一次看到更多步骤可以为用户提供一些额外的上下文,以便更好地理解每个步骤中请求的信息。)
  • 向导不能优雅地中断如果用户中途退出该过程,他们可能不仅会失去工作,而且可能需要再次单击前面的步骤即使向导支持保存状态并在以后恢复进程,用户也很难记住他们正在做什么并恢复他们的上下文和进程的心智模型。

    (话虽如此,表格也不能优雅地中断 - 大部分时间,如果用户中途停止输入的信息将会丢失,即使在保存该信息的情况下,用户仍然需要恢复上下文。)

  • 奇才可能阻止访问应用程序的其他部分这是完成该过程所必需的当向导出现在模态窗口中时,它可能会阻碍可能与当前进程相关的后台信息大多数情况下,它还会阻止用户与网站的其他部分进行交互。
  • 奇才限制用户的控制和创造力虽然为业余摄影师提供向导以改善照片的色彩平衡是合适的,但对于专业图形manbetx官方网站手机版来说,使用向导来改善图像是非常有限的。

设计可用向导的建议

  1. 使用向导用于新手用户或不常用的进程(例如,配置或设置)。

    通过简化流程和指导用户,向导可以帮助用户对域知之甚少然而,正如我们之前看到的,如果必须一遍又一遍地使用向导,或者如果用户对域及其他人有很多了解,那么向导很快就会变得烦人并过度控制心理模型该过程不同于app manbetx官方网站手机版er实施的心理模型。

    基本上,在用户可能不熟悉该过程的情况下使用向导 - 要么因为他们没有很多领域专业知识,要么因为他们很少经历这个过程如果您希望某些用户重复执行该操作,请考虑为他们提供另一种更快的输入数据的方法。

  2. 传达清晰的过程心理模型通过显示所涉及步骤的列表或图表并突出显示当前步骤。

    由于该过程一次只能呈现一步,因此存在用户错过上下文,感到困惑或未意识到进展将持续多长时间的危险最好设定正确的期望并向使用说明流程的外观以及涉及的步骤数。

    特别是对于复杂的过程,每个步骤的清晰标记以及当前步骤的清晰指示可以帮助保持用户的定向。

    Veeam:在这个备份和复制软件中,创建新备份作业的步骤显示在向导窗口一侧的列表中接下来的步骤显示为灰色,并突出显示当前步骤这些步骤包含简短的描述性标签。
  3. 强制执行明确的步骤顺序在完成前面的步骤之前,不允许用户选择步骤。

    虽然从逻辑上讲,如果用户从流程的最后一步开始,它可能没有任何区别,但是有明确的排序可以最大限度地减少决策(有时候内存负载同样,如果完成的步骤没有明确标记,用户必须记住他们已经访问过的步骤,从而简化了交互。

    (如果用户能够以任意顺序完成步骤对用户有实质性的好处,那么这表明此功能不适合作为向导提供。)

    Miniusa.com:此汽车配置过程中的步骤显示为屏幕顶部的选项卡用户可以随时选择任何选项卡,并且manbetx官方网站手机版没有显示哪些步骤已经完成,从而给用户带来了额外的内存负载和决策负担。
  4. 包括用于导航到下一步和上一步的按钮,并以描述性方式标记步骤按钮名称的一般准则也代表向导按钮:通用标签,如下一个以前信息气味很弱,不告诉用户任何有关这些步骤的信息最好在标签中指出用户下一步要做什么。

    在上面的Mini示例中,下一步的按钮清楚地标有该步骤的名称但是,没有明确的按钮可以返回上一步(用户仍然可以通过选择页面顶部的选项卡来完成此操作。)

  5. 允许用户中途退出向导并保存状态允许他们稍后恢复该过程。

    中断发生,用户应该能够保存他们的工作,然后继续他们离开的过程They will still incur the cognitive cost of recovering context and remembering their goals, but at least they will not have to reenter the same information.

    在上面的示例中,Veeam和Mint都不允许用户保存他们的工作人们可能会争辩说,Mint向导是如此简单和短暂,以至于保存状态只会使接口不必要地复杂化但是,在Veeam的情况下,该过程相当复杂且对应用程序至关重要,因此能够在以后完成新作业的设置非常重要。

    Mini的向导包括一个查看并保存允许用户随时停止工作并将其保存在以后可以检索的文件中的按钮遗憾的是,在页面顶部放置该按钮远非用户当前关注的焦点,因此很容易被忽略。

  6. 向导步骤应该是自给自足的and not require information available elsewhere in the app (or in a previous step)确保用户可以在使用向导时轻松访问所需的所有信息上面的Mint示例违反了此指南,要求用户从其他地方获取信用评分。
    Expensify.com:当用户尝试将收据添加到费用中时,向导会隐藏费用明细用户必须记住她输入的费用以及哪个供应商,以便能够识别该费用的收据。
  7. 帮助和说明应显示在向导旁边的窗口中,不应涵盖向导。应该可以在向导旁边查看向导中的术语或字段的任何描述,并且不应涵盖向导中的字段通过这种方式,用户将能够将说明窗口中的信息应用于向导上下文。
    Miniusa.com:可以添加的每个选项(参见上一个屏幕截图)都是可点击的,并打开一个灯箱有额外的信息不幸的是,灯箱还覆盖了背景中的内容,因此很难在上下文中看到该选项。
  8. 考虑重复使用以前使用的用户选择作为下次使用向导的默认值。对于许多任务,如果系统记住他们的选择并从一次使用向导到下一次使用输入值,则用户将受益用户第一次使用向导时,manbetx官方网站手机版应该选择适当的默认值,并且有些应用程序每次都应该默认这些标准值。

结论

向导是一个功能强大的manbetx官方网站手机版模式,可用于简化不经常执行的复杂过程或新手用户通过一次显示较少的信息,它们允许用户更好地关注与每个步骤相关的内容并减少错误的机会当它们包含基于用户输入的分支时,向导可确保人们只能看到适用于他们情况的步骤一些奇才的缺点可以通过周到的manbetx官方网站手机版来减轻,确保流程步骤清楚地传达给用户,并且他们是独立且自给自足的。

在我们的课程中了解有关向导的更多信息Web和桌面应用程序设计