首页->

UE设计中取消还是关闭:区分差异的设计

UE视界网    (1)  (1)

2019-11-16 23:28:57

区分这两个动作对于避免丢失用户的工作至关重要。关闭视图之前保存更改,使用文本标签而不是X图标,并在执行破坏性操作之前提供确认对话框。


很久以前,符号X表示“这是埋藏宝藏的地方。”在当今的数字接口中,X不再标记该地点,而是用作用户取消过程或取消临时屏幕的一种方式。如何确定X表示取消还是关闭?有时候,不幸的是,你做不到。


主要的问题在于与普通缺乏文本标签的X图标。当图标跨不同界面在相似上下文中表示多种含义时,图标可用性会受到影响,因为用户无法依赖任何单一解释。


避免失去用户的工作

当用户打算通过单击X按钮来消除模态或视图时,而系统却完全取消了该过程并清除了所有工作,这充其量会让您感到沮丧,而让他们感到沮丧。是的,用户通常会认识到X图标意味着取消或关闭,但是区分两种可能性对于交互成功至关重要。


在某些情况下,取消和关闭之间的区别并不重要。当弹出窗口占据了屏幕的大部分时,按下X按钮(以最快的速度)既可以关闭该模式,也可以取消它可能触发的任何过程。但是,如果屏幕上包含一个正在运行的计时器,正在播放音频,拥有几个选定的过滤器选项或包含其他未保存的工作类型,那么正确解释X图标所代表的含义就变得更加重要-您可能打算离开该计时器或音频运行中,应用这些选定的过滤器,或保存正在进行的工作,同时希望关闭该视图以继续进行其他一些相关活动。


例如,丝芙兰结帐流程使用模式窗口显示用户可以添加到购物车中的免费样本。在下面的示例中,刚刚通过单击项目下方的“ 添加”按钮选择了该项目;该操作导致“ 添加”按钮被“ 删除”链接替换,从而使该外观看起来好像样品已被添加到购物车中。但是,当用户通过单击X图标而不是“完成”链接来关闭模式时,她发现该商品不在购物车中,因此需要再次添加它。

1573917927039_2.jpg

丝芙兰网站:选择试用产品模态窗口的屏幕截图

丝芙兰(Sephora):尽管看起来好像已经将样品添加到购物车(因为现在可以将其删除)了,但关闭模态(通过单击右上角的 X )取消了选择试验项目的过程。要将物品添加到购物车中,用户必须首先单击“添加” ,然后通过单击“完成” 链接来应用该操作。

为了避免丢失用户的工作,系统需要确定用户的意图(取消或关闭)并提供明确的选项。


可以通过以下一项或多项措施来实现此目标:


  1. 要求用户确认其意图

  2. 使用显式文本标签而不是含糊不清的图标

  3. 呈现两个不同的按钮:X用于关闭视图(具有节省中间工作的副作用)和Cancel用于放弃该过程

1.要求确认

如果用户在已执行动作的模态或中间视图上按下X图标,则UI可以通过在关闭视图之前直接询问是否应用该动作来确认其意图。该解决方案非常适合于破坏性的取消操作,这些操作会丢失用户的工作。在这里,一句老话:乞求宽恕胜过征求许可绝对是不正确的-始终在进行破坏性行动之前要求确认。


例如,过滤器视图经常被意外关闭,并且该操作导致用户失去工作。这个问题在移动界面上尤其普遍,因为滤镜屏幕通常会占用可用屏幕空间的大部分(如果不是全部),这使得很难或不可能判断选择是否已经应用。


为防止潜在的错误,请询问关闭过滤器视图的用户是否打算应用过滤器并关闭视图或清除其选择。例如,当用户尝试在应用选择之前关闭过滤器屏幕时,Lowes移动应用程序显示一个确认对话框。

1573917985262_5.png

Lowes移动应用程序:过滤器屏幕和确认对话框的2个屏幕截图

Lowes移动应用程序:轻按 X 按钮或“后退” 箭头可能会重置所有选择,并使用户返回上一个结果集。右:点击 X后,出现确认对话框,以检查用户是否要应用或取消过滤器细化,然后返回结果列表。

同样,当用户尝试关闭正在进行的课程时,语言学习应用程序Duolingo会显示一个确认对话框-不能部分完成课程,而必须结束或取消课程。至少,该应用程序将此限制传达给用户,并为他们提供了返回课程以保持进度的选项。

1573918006216_1.png

Duolingo移动应用程序:上课之前的确认对话框

Duolingo:单击 X 按钮将结束当前课程并放弃任何进度。为防止错误,该应用程序包含一个确认对话框。

确认对话框可以有效地消除X图标的含义,但它们会增加额外的步骤;此外,用户在按下X之前不知道X会做什么,因此,他们可能会担心其动作的后果。


2.使用显式标签

您可以依靠明确的带有文本标签的按钮来消除模棱两可的X图标,而不是依靠确认对话框在用户无意间失去所有选择之前捕获用户。文本可以减少不确定性和沟通清楚会发生什么样的行动:取消对关闭。


Yelp的移动应用程序的过滤器屏幕在屏幕顶部提供了标记为“ 取消”和“ 重置”的按钮,在底部提供了单个大的“ 应用”按钮。同样,Etsy移动应用程序中的过滤器视图提供了分别标记为Clear和Done的单独按钮。(注意:Etsy使用Done而不是Apply,因为选择过滤器后即立即应用过滤器,这在拨动开关中是推荐的。)

1573918051428_0.png

Yelp移动应用程序和Etsy移动应用程序过滤器屏幕的屏幕截图

(左)Yelp移动应用程序:“取消” ,“重置”和“应用”的文本标签是直接且清晰的,从而使用户不太可能无意中关闭了视图并丢失了过滤器选择。(右)Etsy移动应用程序:文本标签 Clear 提供了一种明确的方法(请双关语),以便用户取消选择。在完成返回到产品清单页面链接,与已经选择了应用。

3.支持关闭并保存

如果必须使用X图标而不是文本(以节省空间,或者因为您正在遵循组织的风格指南),请谨慎行事,并保存已完成的所有中间工作。另外,提供一个单独的“ 取消”按钮,使用户可以紧急退出过程,并消除X的两种可能含义(关闭和取消)。


例如,Gmail自动在其非模式窗口中保存了邮件草稿。这种做法允许用户在需要时折叠或关闭窗口,同时仍保存其进度。将鼠标悬停在消息窗口右上角的X图标上会显示一个工具提示,确认将保存并关闭草稿。取消仍然可用(使用消息窗口底部的“ 删除垃圾箱”图标-远离顶部的“ 保存并关闭”选项以防止错误)。

1573918086115_2.jpg

Gmail网站:屏幕快照显示撰写非模式窗口中X图标的工具提示

Gmail:悬停显示 X 图标用于关闭窗口,而不用于删除草稿,允许用户保存并关闭邮件窗口而不会丢失正在进行的工作。

对于较长的进程或倾向于在后台运行的进程(例如计时器),默认情况下保存也是一个不错的解决方案。例如,Glow Baby移动应用程序允许用户在后台运行喂养或睡眠定时器的同时浏览应用程序的其他区域。因为这些计时器可以长时间运行(希望睡眠计时器的时间很长!),所以此功能使用户可以完成应用程序中的其他任务,例如记录过去的尿布更换或浏览文章和论坛。在计时器视图中点击X图标,只需取消该窗口即可,而无需取消正在运行的计时器。

1573918112446_1.png

Glow Baby移动应用程序:自动保存或显示确认对话框的3个护理计时器屏幕截图

Glow Baby :(左)在运行计时器视图中点击 X 图标可关闭视图而无需取消计时器,因此,允许用户继续使用该应用程序记录其他类型的事件,参与社区讨论,阅读文章, 等等。(中间)正在运行的计时器的状态显示在屏幕顶部的横幅中。(右)在计时器暂停时按 X 会弹出“放弃” 或“取消” 按钮,以检测用户的意图。

请注意,在关闭前保存中间工作或保持正在进行的过程是很主动的,但有时可能与用户的意图背道而驰:如果用户打算通过单击X按钮取消选择,则自动应用这些选择可能会造成混乱和沮丧。这就是为什么还必须包括一个单独的“ 取消”按钮,以使用户离开而不是强迫他们仅保存和关闭视图的原因,这一点至关重要。


结论

尽管X图标含糊不清,通常会导致可用性问题,但它不太可能很快在所有界面上消失。设计人员应意识到X图标的多种含义,并在“ 关闭”和“ 取消”之间进行歧义消除,并提供诸如确认对话框或自动保存之类的保护措施,以避免丢失任何用户的工作。


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

还可以输入0个字

(审核后展示)
打开目录