When lightboxes and overlays first appeared a few years ago, they provided an elegant solution to a tricky interaction-design challenge: how to convey important information without losing the context of the current screen, while minimizing some of the problems created by pop-ups and dialog boxes. We even recognized the lightbox as the application-design今年的技术在2008。

定义:AN覆盖指显示在另一页顶部的内容框。覆盖框通常明显小于底层页面。通常,背景页的其余部分会被遮住,这就导致使用术语“lightbox”来描述这种将注意力集中在覆盖内容上的视觉效果。

由于这种技术首先出现,设计师已经采用了复仇者的灯箱。只有上周在我们的可用周会议,设计师接近我询问,“在灯箱内使用锚点链接是可以的?”有问题的叠加有很多内容,它需要一个滚动条,并将所有方式滚动到底滚动。为了最大限度地减少滚动的需要,该团队正在考虑添加锚链接 - 具有创建链接目标的侧面优势,以便其他页面可以将用户直接发送给叠加内容。如果您在可视化上时遇到问题,这是一个类似的设计的示例支持Apple.com的一部分。

Apple.com上的延迟电子邮件的支持覆盖窗口的屏幕截图

Apple的MobileMe支持部分用于在叠加窗口中呈现帮助内容,包括指向垃圾邮件和滚动条的另一个帮助文章的链接,以访问较低级内容。

滚动和锚点链接在非常长的网页上有意义。但如果你发现自己加入multiple navigation mechanisms within an overlay,是时候了停止并重新评估你的方法。Apple已修改其设计以完全消除叠加层,而是简单地将内容显示为(新)完整页面。因此,可视内容区域要大得多,并使用正常的浏览器滚动条,允许用户使用的所有标准控件。独立页面还允许用户轻松地保存和共享与此内容的链接 - 帮助内容的非常重要的使用情况。Apple甚至避免使用覆盖物进行调查邀请,而是将其显示在页面顶部的功能框中。

Apple.com电子邮件延迟支持页面的屏幕截图,没有叠加

Apple的电子邮件延迟支持内容的当前版本完全消除了叠加层,而是将支持信息作为新页面显示。

覆盖有时是合适的,但正如上面的例子所示,它们常常是合适的过度使用或滥用.有时这种情况发生在于最佳意图:设计师希望快速访问重要信息。在其他情况下,灯箱似乎纯粹用于设计者的便利性,作为提供更多功能或内容的方式,而无需创建新页面或修改导航。

使用套印格式时的注意事项

许多设计师熟悉几个标准使用叠加的指南, 如:

  • 提供可见“关闭”命令允许用户返回基础页面。
  • Ensure that the overlay box is visually不同于背景PAGE通过使其更小并使用半透明阴影来遮挡背景(表示底层内容目前不是交互式,并且还允许用户知道它们尚未导航到新页面)。
  • 生成覆盖内容无障碍to keyboard users (by allowing the逃逸key to close the overlay, and by providing keyboard access to content and fields within the overlay).

但是你可以遵循所有这些规则,仍然有一个令人沮丧的经历 - 有时候用户不只是恼火的那么糟糕,但实际上阻止了访问内容并完成任务。为避免这些情况,请使用系统过程来分析您的设计问题,并确保叠加是最合适的解决方案。只是因为你canuse an overlay doesn’t mean youshould.

在考虑叠加,灯箱或模态窗口时,请询问以下问题:

  • Who是目标受众吗?
  • 什么行动是用户采取的吗?
  • When会不会出现叠加,会不会中断?
  • 在哪里?叠加将出现在页面上吗?
  • Why这是否需要在叠加层而不是页面内?

谁是目标受众?

如果您的用户位于移动设备上,请向其显示专为大型桌面屏幕设计的覆盖物,以最佳迷失方向;更糟糕的是,它可以完全阻止用户访问您的内容。

  • 迷失化.ViaFoura.com网站说明了移动用户叠​​加转换表单的迷失方向效果;单击命名的按钮后请求免费试用,下一个屏幕可以仅显示形式的一小部分。用户必须立即缩小以了解所显示的内容。

    视频截图Viafoura.com免费试用覆盖

    :点击后,用户实际看到的内容是什么用户请求免费试用'打开viafoura.com;正确的:关闭键盘并缩小屏幕后可见的完整覆盖窗体。

  • 阻止访问内容.另一个全常见的 - 以及更严重的 - 在执行错误或错误时出现更严重的问题禁用滚动和缩放功能需要取消覆盖。您以前可能经历过这样的情况:您使用移动设备访问页面,却发现有一个覆盖阻止了页面内容,而消除覆盖的控件位于屏幕之外。在这种情况下,用户实际上无法访问底层页面内容。在某些情况下,页面呈现甚至可以防止收缩和缩放,或者使其变得非常困难,以至于几乎不可能将页面扩展到足以访问覆盖控件的程度。

如果移动设备上的用户是观众的重要组成部分,请在将重要内容放在叠加之前,思考长而难以思考。如果您使用叠加层,请为测试和QA的初始和持续投资做好准备,以确保设计在不同的屏幕分辨率和不同的设备方向上正常工作。

可访问性是评估谁将使用您的叠加时考虑的另一个因素。具有全尺寸监视器的低视觉用户通常采用屏幕放大镜,从而大大放大屏幕内容。放大后,用户只能看到页面的一小部分,因此覆盖可以为移动设备用户进行屏幕放大镜用户创建相同的迷失方向效果。

WHAT Action Is The User Supposed To Take?

为了创造一个良好的叠加层,你需要先清楚地清楚地表达目的:用户应该在响应内容中做什么?他们应该只浏览短信,还是应该浏览一大集的图像或读取冗长的文本?他们是否需要在不同的选择之间做出决定,或者只是确认收到信息?或者您需要人们通过LightBox实际输入内容 - 如果是的话,那么什么样的内容,以及多少?

通常对用户感到快速和简单的经验不是快速而简单的设计过程的结果。相反,创建一个感觉易于观众的设计意味着花时间清楚地清楚地清晰,旨在的目的,情况和所需的结果。

覆盖通常是为了让用户查看内容,填写形式, 或者做决定.

Read text or view images:如果模态窗口的唯一功能是呈现简短的状态消息,请简单地叠加与单个按钮用于用户确认和解雇通知可能很好地工作。但是任何一句或两句的东西都会产生复杂性:

  1. 如果内容太长,才能适合一个小灯箱,你会添加一个滚动条吗?如果是这样,请考虑禁用浏览器滚动条以防止用户错误地滚动后台页面而不是灯箱。(虽然禁用浏览器滚动条可能具有意外后果,尤其是对于移动用户,如果它们无法滚动足以查看覆盖控制。)
  2. Will users want to bookmark the overlay content or share it? When an overlay contains actual content rather than a simple status message, users are more likely to want to do things with that content – like bookmark it for future reference, or share the link with others. You may need to do extra design work, to create special分享functions.
  3. 如果您有更大的窗口(如全尺寸浏览器窗口),内容会更好地呈现内容吗?如果用户必须滚动更多才能读取内容只是因为它在叠加层中,你是浪费屏幕空间.

填写表格:Overlays that include form fields make it possible to provide access to the form from any screen, without needing to load a new page. This is a very attractive option for things like login and subscription forms. But keep in mind, any bugs can make it impossible for users to access these essential functions. Again, either plan for both initial and ongoing testing (across browsers, operating systems, and devices) or stick to the tried and true login screen. Some issues to look for:

  1. 要求用户提供输入的覆盖,即使只是一个字段,也需要一个显式“取消”选项.设计师经常假设用户会知道他们只能点击模态的外部以解雇它。事实上,许多用户都不知道;其他人(特别是那些使用触摸屏的人)可能会意外地忽略覆盖物。在下面的Bluebly示例中,即使单击屏幕的灰色区域也没有效果。解除此叠加层的唯一方法是点击“黑色商店”按钮,但此按钮的位置意味着它将提交表单 - 不忽视它。

    Bluefly.com订阅覆盖的屏幕截图

    消除蓝蝇覆盖的唯一方法是单击黑色的覆盖立即购买'按钮。

  2. 帮助用户从acci中恢复过来dentally closing the overlay, the field inputs应该保存覆盖层应该是易于重新激活.

做决定:Overlays are also commonly used to confirm user actions or to help users make simple selections. This is problematic because we’ve been trained by the manypop-ups不重要的叠加叠加我们在其他网站上遇到一旦出现时会忽略模态窗口。当我们实际遇到一个重要且有用的时候,我们可能会在甚至读取内容之前自动解雇。这种趋势通过带有通用标签的动作按钮加剧,如美国航空公司的付款确认按钮简单地标记为“好的'和 'Cancel’.

Usairways购买确认覆盖层的屏幕截图

US Airways uses an overlay to confirm before a credit card charge, but the action button labels don’t specifically state what action you are confirming.

要帮助用户避免在不了解其行为后果的情况下放弃lightbox,请使用an explicit button labelthat states exactly what will happen when the user clicks it, as LinkedIn does with their'是,删除它们'灯箱上的确认按钮确认删除联系人。

LinkedIn.com的屏幕截图删除联系人确认叠加

LinkedIn使用特定的按钮标签“是,删除它们”来确认删除联系人。

您还应考虑如果用户决定不完成任何目标操作,则应考虑会发生什么。当然,您应该包含一个明确的方式来解除灯箱,但另一个常见的用户策略是点击浏览器的后退button in an attempt to revert to the underlying screen. By default, web browsers don’t treat overlays like separate pages, so the后退按钮将用户带到底层屏幕,但到任何页面之前的屏幕。如果您的分析显示用户点击后退达到叠加后,考虑调整后退按钮以便显示叠加时,后退按钮关闭灯箱,而不是在浏览器历史记录中导航到上一页。

覆盖什么时候会出现,它会中断一个重要的任务吗?

叠加层之一是他们在覆盖出现之前中断用户在他们正在做的任何事情中。如何避免这种中断?

一个策略是在次数期间呈现叠加,当用户不太可能被浸入任务时。例如,许多应用程序使用叠加介绍性指示or tips for using an interface. Users may have a specific task in mind when launching an application, but this intrusion at least comes at the beginning the task, rather than right in the middle. The overlay format is especially helpful on small screens, where there is not enough room to show the tips anywhere but on top of the underlying screen.

Screenshot of Zappos iphone app help overlay

Zappos iPhone应用程序使用介绍性叠加来解释其图标的含义。

  1. 用户启动的叠加可以是实现的好方法逐步披露:在人们需要更多信息或选项的时候提供这些信息或选项。通常,这些类型的覆盖与用户的当前任务密切相关,而当前任务利用了覆盖的主要优点:能够维护当前屏幕的上下文同时提供一些额外的内容或功能。例如,Facebook iPhone应用程序使用叠加处理来显示共享内容的各种选项。这实际上只是一个下拉菜单的修改的视觉治疗,这增加了在维护任务上下文的同时增加了视觉强调活动工作流程。在决定如何分享内容时,有助于在后台上可见的那段内容的标题 - 特别是如果您刚刚在中断后返回到屏幕。

    Facebook共享选项覆盖的屏幕截图

    Facebook将“分享”选项显示为文章顶部的覆盖图;如果在分享过程中被打断,能够看到覆盖图后面的文章标题可以帮助用户记住他们将要分享的内容。

  2. 非用户启动的覆盖但是,是一个完全不同的故事。当网站意外地掩盖某人正在观看的页面时,体验范围分散令人讨厌。有时,这些通知包含实际证明中断的关键信息,但更频繁地,这些类型的叠加层是故意诱使用户采取一些效益组织的动作的尝试(例如订阅时事通讯)的尝试。(Many web marketers seem to operate under the ‘ends justify the means’ principle, and believe that the benefit of increasing your subscriber base outweighs the negative consequences of annoying your users. If you attempt this strategy, make sure to follow up and measure whether those extra subscribers are actually qualified leads. Do they really end up buying your products? If not, you may be aggravating your true audience for no reason at all.)

    有时,不是用户发起的叠加似乎更加良好,但由于不恰当的定时最终可能与咄咄逼人的订阅音乐一样烦恼。随机定时帮助聊天窗口是这一类的惯犯。在下图所示的西岸屏幕上在线聊天支持覆盖不分青红皂白地出现在每一页上,甚至在用户实际上正在填写表格开户的表单上。在这种情况下,覆盖实际上是使它更加困难对于用户转换,通过要求它们在进行下一个表单字段之前单击叠加层。

    西部聊天覆盖银行的Scentenshot

    West网站的银行中断试图填写表格以打开一个覆盖账户的用户,提供聊天支持。

    最安全的策略是仅限叠加到仅用户启动的操作,或真正紧急的消息,并在Apple.com示例中使用替代手段(如在Apple.com中的内部功能框)以获取不太关键的内容。如果您确实决定使用灯箱中断用户,则在最重的实验中有时间和目标页面,以确保最小化中断 - 例如,仅当用户准备离开该网站时才呈现叠加,就像DigitalMarketer.com一样with their ‘free gift’ offer.

    数字营销退出覆盖图截图

    DigitalMarketer.com网站上的此叠加覆盖避免在显示此叠加前等待将远离网站导航到远离网站的访客。

叠加在哪里出现在页面上?

Too often, overlays appear too low on the page. This is especially prevalent on mobile devices, but also happens on full-size screens. When planning your design, remember that many users have browser toolbars installed, and the available browser viewing area may be much shorter than what you preview in a browser with no toolbars. TheLightbox内容应直接出现在用户的视线中,或在页面上更高的差点。在Verizon的移动宽带页面下面,大多数灯箱内容都不可见。

Verizon移动宽带覆盖层的屏幕截图

Verizon移动宽带站点上的叠加在页面上居中,但由于用户的浏览器工具栏,灯箱的下部不可见。

将覆盖层放近页面顶部(而不是在确切的中心)最大限度地减少将其切断在底部切断的风险,并保持浏览器滚动条可用可确保即使在非常小的浏览器窗口中,用户仍然可以滚动以查看整个灯箱。

USPS覆盖图截图

在USPS上,覆盖层更靠近页面顶部,增加了完整内容立即可见的可能性。

另一个重要的考虑因素,特别是对于较大的灯箱控件和内容应放置在何处在覆盖层内。有时广告叠加将故意将控制在不寻常的位置(显然强迫用户花更多的时间与广告内容进行交互),就像折磨客户都是一种向品牌提供热烈感受的方式。但是,您还经常看到控制展示位置不太令人讨厌。如果使用单个标准化覆盖层设计以不同的尺寸呈现内容,则这可以特别具有挑战性。在下面的例子中,美国家具仓库介绍了灯箱顶部的内容(桌面照片),而关闭灯箱的按钮出现在底部,留下了用户必须滚动的大量空白空间为了解雇叠加层。

美国家具仓库覆盖层的屏幕截图

美国家具仓库有'关闭’ control at bottom and overlay is so big it might as well be a whole page.

为什么这个内容需要在叠加层中而不是在页面内?

最后但绝对不是最不重要的:不要使用覆盖,除非你有一个明确的,令人信服的理由,为什么这个内容不应该在一个普通的页面上显示。使用覆盖的好理由包括:

  • 用户即将采取一个动作严重后果并且很难反转。
  • 它的收集至关重要a small amount of information before letting users proceed to the next step in a process.
  • The content in the overlay is紧迫的而且用户更有可能在叠加中注意到它。

第一种情况——使用覆盖来确认用户的操作——应该有限制地使用,并且只有在确实很难逆转操作时才使用。即便如此,您也可能希望为用户提供不要再问我'选项,以防他们需要多次重复的操作。

以下Chase.com屏幕快速收集具有叠加层的基本信息。用户已要求自动贷款费率,但在不知道用户的位置,网站无法显示正确的速率。

Chase Zipcode覆盖层的屏幕截图

Chase.com适当地使用叠加层来收集完成用户请求的操作所需的关键信息,这需要向用户解释

最后一个条件 - 给予用户紧急信息 - 是最开放的解释。毕竟,“紧急”对不同的人来说意味着不同的东西。似乎迫切对促进新产品的营销人员可能看起来与只想进入搜索框寻找完全不同的产品的用户似乎完全无关紧要。

当组织的兴趣和用户的兴趣密切对齐时,最容易确定紧急(并将其传达给您的受众)。例如,在12月份,环保基金网站介绍了入境游客,举行举行招揽捐款,并解释即将持期截止日期前的捐款将由赞助商匹配。鉴于时机,这些信息可能被许多网站访问者的紧急,特别是那些有兴趣制作终止税收扣除礼物的人。但第二个例子怎么样?这叠加在4月份介绍,不引用任何特定的截止日期,并且似乎只是一个通用的销售音调。Collecting donations对于组织来说仍然是紧急的,但是被访问者认为是紧急的可能性要小得多。

环境防范基金覆盖的屏幕截图1

环境防御基金使用叠加来传达时间敏感信息。

截图无截止日期环境防御基金覆盖

当紧急令人信服的沟通时,环境防御基金的行动呼吁与用户无关。

请注意,我们使用叠加层的好理由列表不包括“所以我们不必设置新页面模板”。(如果设置一个新页面,您认为自己将内容粘在叠加中很困难,也许是时候重新考虑您的网站平台。)招聘用户研究参与者也不包括在内。与我们重视用户研究一样多,轰炸具有调查邀请的入境访客的网站数目正在达到近流行病。肯定存在较少的侵入方法来收集用户反馈。

结论

套印格式在某些情况下是有效的,但它们经常是在没有足够计划的情况下使用的,这是一种方便的插入额外内容的方法,这些内容可能不合适,也可能不合适。它们经常在手机或较小的浏览器窗口上出现故障,造成混乱和烦恼,导致人们为了完成相同的任务而更加努力工作,并且使内容在以后很难访问。换言之,叠加的好处往往被缺点压倒。

在许多情况下,呈现页面内的内容而不是覆盖物可以绕过这些问题。在考虑叠加之前,请仔细调查您的动机并思考五个WS。如果您仍然认为覆盖是您的正确设计解决方案,请继续进行。反复测试各种浏览器和设备,以确保您的设计不会破坏。

了解有关如何有效呈现内容和促进我们全天研讨会的内容和促进任务工作流程的更多信息顶级网络UX设计指南