首页->

UE设计中用户界面何时帮助和何时伤害用户

UE视界网    (1)  (1)

2019-11-21 12:02:13


在模式界面中,根据系统状态,相同的用户操作可能会有不同的结果。信号差的模式很容易触发用户错误,带来灾难性的后果。


模式是一个经常被误解的UI概念:它们经常与相同数据的不同视觉表示或位于应用程序不同部分的功能混淆。即使是了解什么模式的UX从业者,也都在争论他们的正确使用方式,许多著名的UX者都提倡使用无模式接口。但是,如果仔细周到地实施,这些模式将是有益而有益的。


定义

定义:模式是系统对用户输入的不同解释,具体取决于活动状态。相同的输入,不同的结果。


模式的最典型的例子是使用的大写锁定一个典型的键在键盘上:随着大写锁定键关机,按第一个字母键一个在文本编辑器将显示小写一个。与Caps Lock键上,同样的动作会导致一个大写一个。因此,大写 锁定键是模式切换器。

1574308627061_3.png

具有全部大写文本的文本编辑器窗口

模式的一个示例:在Mac TextEdit中,  Caps Lock  键将相同的用户输入转换为不同的输出。

如果相同的用户输入将始终具有相同的结果,则无论系统状态如何,系统都是无模式的。


为什么模式有用

当我们要提供给用户太多不同的选项,并且没有足够的可用输入类型来容纳所有输入时(以可用,可发现和明智的方式),模式将变得有用。 


例如,在像Photoshop这样的图像编辑应用程序中,标准的鼠标单击具有许多不同的功能很有用,因为能够指向图像的特定部分对于这些功能至关重要-其他输入类型(例如键盘命令)不会明智的。因此,模式切换工具(例如选取框,钢笔,魔术棒,橡皮擦和所有其他工具栏图标)用于更改鼠标左键的结果。

1574308711264_1.png

两个photoshop窗口,显示在选择不同工具模式时光标外观的差异

在Photoshop中,“ 画笔”  工具(顶部)和“ 快速选择”  工具(底部)是不同的模式:如果   选择了“画笔”,则单击鼠标左键可在屏幕上添加彩色补丁;如果“ 快速选择”  处于活动状态,则系统会选择它在照片中视为对象的任何内容(例如,此屏幕快照中的天空)。Photoshop通过几种方式指示哪个模式处于活动状态:光标图标发生变化,工具栏中与该活动模式相对应的图标变暗,并且窗口顶部的上下文面板显示与该活动模式相关的选项。

 


共模错误和可用性问题

模式可能会引起一系列可用性问题,包括模式滑移(在用户不了解当前活动模式时发生)和模式特定功能的可发现性较低。


之所以会发生模式滑移,是因为系统没有向用户清楚地指示其状态,这违反了10种可用性启发式方法中的第一种。模式错误一直是我们学科中长期存在的问题,尤其是在复杂的系统中,可能会造成致命的后果。著名的是,在1991年,一架飞机由于模式错误坠入山上—在不同的模式下,可以对下降的程度或速度使用相同的控件,但是尚不清楚当前处于哪个模式。可悲的是,系统将飞行员意图下降3.3度的角度解释为每分钟3,300英尺的负垂直下降-所有这些都是因为使用了相同的控件来输入这些数字并且仪表板没有清晰的模式指示器。 


另外,更为常见模式的错误涉及到电子邮件,并且是可惜还是出现在我一生中遇到的每一封电子邮件应用程序:可怕的全部答复,而不是回复给发件人。自从电子邮件发明以来,这种模式单据就已经存在,尽管它使世界各地的用户感到尴尬(并启发了有关如何处理这种灾难性单据的建议文章),但至今仍未解决。如果您想做真正有影响力的UX工作,请提出一种可以一劳永逸地解决“ 全部答复”错误的设计。您将节省数十亿小时的人类寿命。


可以通过一些关键的设计注意事项来减少模式滑移:


  • 清晰可见当前活动模式。使用强烈的视觉信号,例如不同的背景,强调活动模式指示符(例如高对比度突出显示或边框)或更改光标以指示哪个模式处于活动状态。指示器中的冗余是一个明智的主意:强烈建议至少使用两个处于活动状态的可视指示器(例如,将模式选择器控件上的突出显示与光标更改结合使用),以确保用户知道当前处于活动状态模式,即使他们没有全神贯注。

  • 指示模式的效果。明确命名的模式,模式选择器图标的文本标签以及有助于确定在该模式处于活动状态时会发生什么的工具提示可帮助用户了解该模式的作用。

  • 当模式滑移时完全避免使用模式可能会导致不安全的结果(例如意外的工作丢失,数据删除,尴尬或人身安全后果)。即使两个功能在概念上是相似的(例如上述飞机的下降控件),如果不慎将它们混合使用会造成真正的伤害,请寻求其他设计替代方案,例如两个单独的控件。

  • 当您可以推断出某个用户操作最有可能打算用于不同于当前活动模式的模式时,出现构造性错误消息。一个典型的例子是在大写锁定处于活动状态时输入密码:用户可以使用全大写字母键入密码,而无需在屏蔽密码输入的系统中意识到这一点。但是,系统知道在输入文本时交换了大写和小写字符,并且可以警告用户停用 Caps Lock并重试(甚至通过显示一个表示 Caps Lock键在输入时处于活动状态的符号来防止错误))。

  • 确认对话框清楚地说明了计算机将要执行的操作,同时可能提到了当前模式。像往常一样,应谨慎使用确认,否则它们将无济于事,因为如果您要求他们多次确认,用户将无意中回答“是”。但是,在可用性测试,分析或其他数据表明人们可能会忘记自己所处的模式的情况下,确认对话框可能是挽救用户的最后机会。

1574308773100_4.png

Telerik使用此表中的几个清除模式指示符来冗余地显示处于“ 编辑”  模式的行:行的背景具有不同的颜色,数据表示为表单字段,操作按钮更改了位置和颜色。 

模式的替代方法是弹簧加载模式(也称为准模式)。此类模式仅在使用修饰符时才有效。例如,按住键盘上的Shift键等效于Caps Lock键的弹簧加载-准模式仅在按下Shift键时才处于活动状态。准模式可以防止模式滑移,但可以减少用户发现与这些模式关联的功能的可能性。(当然,在用户希望保留在扩展操作模式下的情况下,弹簧加载模式的效率也会降低。这就是说,您真的很想输入全部大写文本的意思吗? ,大写锁定时的主要情况比加载弹簧的移位键更有效。)


可发现性问题和模式

模式还使新用户很难找到并记住某些功能或命令的位置。如果某个功能或命令仅在一种模式下对用户可用,则用户自然会遇到该功能或命令(称为可发现性)或以后能够找到它(称为可发现性)的可能性比该功能或始终可用的可能性低得多。 。 


例如,我有一副蓝牙耳机,当我佩戴它们时,它们可以阻挡大多数外界声音。它们具有有用的拨动开关,可让我在需要时(例如,在繁忙的街道上行走时)有选择地通过一些外部声音来感知情况。在听音乐时,我通过双击耳机上的按钮来切换此模式,然后将其关闭或打开,并发出短暂的哔哔声作为听觉反馈。


拨打电话时,此环境感知功能也很方便,因为它可以减少说话时的奇怪感觉,但听不清自己的声音。但是,当我在通话时周围有很大的声音时(我住在纽约,那里周围经常有很大的声音),我经常想关闭此功能。不幸的是,当您处于通话模式时,双击控件不起作用–在这种情况下,双击按钮不会执行任何操作,只能发出可听见的提示音。正如我通常在分散注意力时发生的那样(通过将注意力集中在对话而不是耳机的UI上),花了我一辈子的时间去了解正在发生的事情–我遇到了与耳机相关的主要可发现性问题模式。


模态:模式的特例

模态窗口是一种特定类型的模式。它们以弹出窗口或滑盖面板的形式出现,并且限制了用户与模式后面的内容进行交互的能力,即使该内容仍然可见(并且通常是变暗的)。模态窗口或对话框要求用户与他们进行交互,然后才能返回之前的工作状态。模态将用户输入限制为其窗口,直到将其关闭为止。如果用户点击或单击模式后面的背景(试图与内容进行交互),则可以取消模式或不进行任何操作。因此,模态窗口会将界面移至特殊模式,根据模态是否激活,相同的输入(单击背景中的链接)会产生不同的结果。

1574308813429_5.png

一个带有模式弹出窗口的网站,其中包含其后的内容

Wired.com显示了一个经典的模式窗口-用户仍然可以看到,但不能与弹出窗口下方的内容进行交互。单击变暗的背景区域无效(并且不会关闭模态窗口)。  

重要的是,并非所有弹出窗口都是模态的—如果用户仍然可以与它下面的内容进行交互,则该窗口不是模态的(许多符合GDPR的弹出窗口都是非模态的,这至少使它们的烦恼程度有所降低)。模式是一种重量级的设计选择,仅当用户真正必须与他们交互才能继续其当前任务时才适用。

1574308849560_3.png

网站上的非模式弹出窗口

TheNextWeb.com具有符合GDPR规范的弹出窗口(“具有cookie”),该弹出窗口是非模式的,因为在该弹出窗口保持可见的状态下,用户仍可以与背景内容进行交互。

什么模式都不是

数据空间的不同观点

模式不是查看相同数据的不同方式。例如,在Mac Finder中,列表视图和图标视图采用相同的数据(存储在计算机上的文件和文件夹),并以不同的方式显示它们,列表视图显示在图标视图中缺少其他元数据。但是,相同的用户输入在两种情况下具有相同的效果:单击对象将其高亮显示,双击该对象将其打开。相同的输入在两种情况下具有相同的效果,因此不应将图标视图和列表视图视为不同的模式,而应将其视为数据空间的不同视图。

1574308885992_3.png

两个Mac Finder窗口在两个不同的视图(不是模式)中显示相同的文件夹结构

 尽管图标视图(顶部)未显示列表视图(底部)中可见的所有元数据,但Mac Finder中相同数据的这两个视图  不是不同的模式。相同的用户输入(单击其中一项)在两个视图中产生相同的效果:选择并突出显示该项目。 

但是,即使这个简单的界面也包括对模式的访问。通常,在任何一个视图中键入字母都会根据其他项目的名称突出显示其他项目。但是,如果单击一次文本标签,则在该项目已被选中并突出显示后,该项目的名称便会进入编辑模式。此时,键入将更改项目的名称。因此,即使图标视图和列表视图本身不是模式(只是数据的不同视图),它们都包含对其他模式的访问(分别为导航和编辑)。 


摘要

模式对于管理大量使用相同的输入控件都会受益的功能很有用。如果输入控件的总数受到限制(例如,在具有有限数量的按钮的物理设备上),或者如果同一输入最好地发出多个动作的信号(例如,通过在屏幕上拖动手指来很好地表示滚动和绘画)触摸屏),使用模式将是适当的设计选择。但是,必须清楚地指示当前活动的模式,并具有强烈的视觉差异,并且不应在模式错误可能会造成灾难性后果的关键情况下使用模式。  


责任编辑:网络UESJ网:   UE视界网,未经授权不得转载
关键词 >> UE设计,交互设计

还可以输入0个字

(审核后展示)
打开目录