在最近与客户的WebEx会面中,我惊慌失措地认为我无法转过我的麦克风。我应该给一个6小时的演讲 - 如果我甚至无法突破自己,我将如何做到这一点?我一直点击跨越麦克风图标,但麦克风留下来横渡了我所做的一切。

这是一个屏幕截图:

用于桌面的WebEx应用程序的控制栏:(顶)unm州;(底部)静音

在我的恐慌中,我完全忘记了图标颜色的变化!最终,我发现了,即使麦克风在两个状态中交叉,图标的红色也是为了发出按钮处于活动状态并且我被静音。

我已经看到了用户多次堕落了这个问题。该静音按钮用于在两个系统状态之间切换(静音unm)但问题是,用户不能轻易讲述当前状态是什么以及它们正在切换的内容。(也是相反的图标设计中的最佳实践在WebEx实现中,没有文本标签静音按钮。)

两条信息,两个控制

在用户可以在2个可能的状态之间移动的情况(让我们打电话给他们关闭为简单起见),有两位信息与用户相关,而在相关的同时不相同:

  1. 系统的当前状态(要么关闭;在麦克风示例中,静音要么unm
  2. 如果用户按下按钮会发生什么 - 这是下一个状态,这可能是关闭要么,取决于当前状态(在麦克风示例中,取消静音要么静音

实现它们的显而易见的方法是具有两个不同的UI元素:状态指示符和变更状态按钮。例如,在Tesla应用程序中,控制屏幕采用此方法:您有一个国家指示器向您展示汽车被锁定和一个开锁按钮。点击状态指示器没有,但敲击控制器解锁汽车。

Tesla for iPhone :(左)上面的图标解锁按钮 作为国家指标;按钮开锁是一个状态开关按钮,如果用户按下它会发生什么。(右)状态和按钮标签一旦用户解锁一旦用户解锁汽车。

两条信息,一个控制

但是,如果您有2状态系统,则当前状态和接下来会发生什么是互补的。换句话说,可以假设可以通过单个控制来传送两条信息(状态和接下来发生的事情) - 切换状态按钮。那是因为,如果用户知道一个,(理论至少)他们可以推断另一个(如果你知道你的下一个州是关闭然后你可以推断目前的是;或者,如果您知道当前的状态是,你可以推断你的下一个是关闭)。

但是,请记住任何类型的推理都需要时间和认知努力,往往人们在时间压力下迅速回应。如果我试图取消扫描自己,每个人都在等待我或忽略我并逐步移动对话,所以我没有时间暂停和考虑界面或做出推论。

然而,有时,可以基于其他信号容易地确定状态。例如,在视频播放器中,只有一个控制(按钮),它表示未来的状态。有足够的信号虽然弄清楚视频正在播放 - 用户可以听到视频或在屏幕上看到图像的更改。

Youtube:图标被替换为暂停当视频正在播放时。该图标表示系统将移动到的状态,如果按下按钮。

如果您决定使用单个控件来指示两个状态以及接下来会发生什么,那么该控件应该如何标记?

在这种情况下有两种替代方案可以考虑:

  1. 按钮标签传达系统将移动到的状态,如果按下该按钮 - 也就是说,它告诉用户接下来会发生什么。

    这是按钮设计的标准推荐。具体来说,将调用站点注册按钮寄存器将调用电子商务结账表单的提交按钮采购要么地点订购

    如果用于在两个状态之间切换一个按钮,则遵循此建议,它也应该更改标签,如上面或在下面的OB的图像示例中。

    OBS工作室:按钮开始录制遵循经典的命名推荐和交换标签停止录音录音开始后。

    如果没有文本标签(大概是因为图标足够清晰),那么图标应根据它移动系统的状态而改变。一个经典的例子是之间的相互作用暂停在youtube示例中看到的图标在大多数视频玩家中。

    2.按钮使用阴影传达活动状态。这是用于在现实生活中发生的东西,打开/关闭按钮:当你按下它们时,他们没有改变标签,但“沉没”。在UI设计中,要捕获那个隐喻,设计人员通常会添加一个阴影,以指示按下该按钮,现在它是活动的。

    在Word,图标B.对于粗体(左)选择(右)表示您以粗体显示的影子模式 (不正常)。在此实现中,按钮不会将标签更改为当用户按下它。

    了解此设计清楚地取决于被识别的阴影,作为活动状态的说明仪。这个设计不应该依赖用户记住两种状态中按钮的颜色并且了解哪种颜色适用于主动 - 为了它来工作,它应该绝对明显,活动状态是一个按下的按钮,一个有时难以实现的壮举平面设计世界。

让我们回到WebEx示例。回想起来,我们可以看到WebEx使用单个控件来指示当前状态,并将发生的内容发生并实现第二种设计解决方案 - 信令活动状态。不幸的是,红色作为活动状态的指示剂的红色颜色是一个差的设计选择,原因如下:

  1. 红色在接口中任意使用红色 - 例如X离开)按钮也是红色的,它不能意味着它是活动的。(如果红色代表了活动状态,那将是什么红色X意思?我已经离开了会议?)
  2. 不同颜色(蓝色)用于表示其他按钮的活动状态视频(即,视频正在开启的蓝色视频图标信号)。

在没有活动状态的清晰指标的情况下,留下用户依靠按钮标签来决定发生的事情,并将图标标签不变,这将只是引起混淆。

顺便说一下,iPhone上的手机应用程序使用相同的实现 - 唯一的区别是它比WebEx更符合,并部署白填充以指示活动状态。即使使用这些调整,它也很难推断一个按钮的活动状态。

iPhone的手机应用程序:静音按钮不会更改图标,但使用白色填充(左)发出主动状态。尽管白色可能是阴影的更好的渲染而不是任意颜色,但它不是活跃状态的强大指示

建议书

那么,双重作为州指示符的状态切换按钮的总体建议是什么?最安全的解决方案是使用2个UI元素,一个用于当前状态,另一个用于交换状态动作,就像在TESLA示例中一样。

如果需要,您可以将两个单独的控件中的两个组合在一起。它的静音控件有两个单独的组件:

  1. 一个文本标签,指示如果用户将点击该控件,则会发生什么
  2. 指示当前系统状态的图标

单击任何一个都会更改状态。

在缩放的设计中,图标意味着指示当前状态,标签指示如果用户单击该按钮会发生什么。单击图标或标签更改状态。

较新版本的WebEx已移动到相同的设计。

更新版本的WebEx使用与交换机状态控件相同的设计。

请记住,您使用开关控制的目标是确保用户快速了解:

  • 当前的状态,和
  • 如果按下该控件会发生什么

评估系统将通过的两种状态。

  1. 两个对面状态是明显的吗?
    • 如果不是,那么这说到了两个控制设计:一个用于当前状态,一个动作移动到另一个状态。
    • 如果是(也许是因为有很强的约定和标准化设计),您可以考虑一个单一的设计元素,简单地说明命令将是什么。
  2. 是否有外部线索(例如,噪音,环境中的视觉变化),可以帮助用户确定当前状态?
    • 如果否,则使用2-Control设计,使用状态指示器(清楚地传送电流状态)和按钮到切换状态。
    • 如果是,则可以考虑单个设计元素 - 一个状态开关按钮。
  3. 用户是否需要快速确定状态并更改它(就像在的情况一样静音按钮)?
    • 如果是,则只需指示要更改它的状态和按钮的图标。
    • 如果否,则可以考虑一个状态开关按钮。