提醒、 校验与通知: 选择正确的传达方式(译文)标题文章

摘要:状态反馈对任何系统的成功至关重要。知道何时使用3种常见的传达方式是给用户提供支持的关键。

在交互设计中,不论是应用程序,网站还是硬件设备(小到智能手表,大到恒温器的任何设备),系统都应该通过适当的反馈让用户了解当前的状况。确保系统的状态始终可见是界面设计10个可用性原则之一。系统状态信息,如错误提示和系统活动通知等,可以让用户充分理解系统当前状况。

传达系统状态的最佳方式取决于以下几个关键因素:

* 需要被传达的信息的类型

* 信息的紧要性 — — 用户是否需要立即看到它

* 信息是否要求用户执行操作

三种常见的系统状态传达方式包括校验、通知和状态指示。在产品设计中这些术语有时可互换使用,但是他们代表在不同情境下使用的不同的传达方式。理解它们之间的差异将有助于提高反馈的可用性,帮助用户根据需要选择最佳的处理方式。

提醒

提醒是一种使页面元素 (不论是内容还是用户界面的一部分)用以告知用户是有一些特别的值得用户关注的信息存在。通常情况下,该指示将通过一些元素表达相应的项目存在一些变化。

尽管我们在下文中会论述到,指示很大程度上会频繁地运用于标志验证错误或通知中,但提醒也可以独立的运用。提醒是一种为了吸引用户注意力集中到一个特定内容或交互界面元素上的视觉提示,它本质上是动态的。(如果一个标识永远是一种状态,那无论它设计得如何华丽,它都不是提醒)。

指示至少有三种可能的途径来实现:

* 尽管不能一概而论,但大多数情况下,指示表现为图标的形式。易于识别的图标可以作为非常有效的传达工具。

* 排版的变化也可以作为指示,比如,用粗体字的公告来标识未读的电子邮件,或是在用不同的颜色来象征投资账户价格的涨跌,等等。

* 还有一种不常见的途径,就是通过放大尺寸或加入特效(如震动)来使某些项目显得更为突出,这也可作为一种指示。

美国最大的点评网站“Yelp”就在搜索结果中以绿色标记的提醒来表示“Tea Market”正在进行折扣优惠。这种指示就向用户传达了“Tea Market”的附加信息。

提醒的特性

* 提醒是有情境的。它们与交互元素或某些内容相关联,应该与其所要被指示的元素或内容紧密结合。

* 提醒是有条件的——它们不是一直存在的,而是根据特定的条件来设置或改变。以下图“American Centure Investments”网站为例,一个显示股票行情的指示会根据股票价格的涨跌而产生变化。此外,在上文点评网站“Yale”的例子中所示的标签提醒,只在该商品进行折扣优惠的时候才会出现。

* 提醒是被动的。它不需要用户去主动做什么,而是作为一种交互工具来提示用户其需要注意的地方。


“American Centure Investments”使用了一个条件性的指示来反映一支特定股票的行情。如果日行情是下跌的,其提醒是一个红色向下的箭头,如果日行情是上涨的,其提醒就是一个绿色向上的箭头。股市行情的状况将影响显示下一次股票价格时的提醒。

提醒也可能会造成整体界面的杂乱,甚至分散用户的注意力,所以重要的是要在你的设计中考虑到底使用多少个(如果必要的话)提醒。

判断一个提醒是否适当时,需要考虑以下几点:

* 这个提醒所反映的信息对用户来说有多重要?它值得占用页面上的空间来通知用户吗?

* 这个信息的使用频率如何?

* 用户希望看到这个信息吗?

* 如果不作提醒,这个信息会被遗漏吗?

* 这个提醒的设置对用户发现信息有多大的影响?

校验

校验消息是与用户输入相关的错误提示: 它们告知用户刚输入的数据不完整或不正确。例如,在电子商务系统中,校验信息往往涉及名称、 帐单地址和信用卡等信息。

Cobragolf.com

提供校验消息清楚表明哪些字段是存在错误的。不过信息复杂、令人困惑。更好的表达方式可能会是"请输入一个有效的电子邮件地址。”

校验的特性

用户需要进行操作才能消除校验消息。

校验消息中信息是与上下文情境以及用户存在问题的特定输入相关的。

根据不同的需求形式校验消息也应该有所不同。然而,在一般情况下,如果用户的输入不正确,系统应通过提供可识别的、明确的消息通知用户,帮助用户纠正错误。校验消息应遵循错误消息的准则 ,而不是简单地找出问题,应该告诉用户如何解决。例如,相比于"你没有输入信息",“请输入您的街道地址"更有礼貌,且指向解决方案。

由于校验是有情境的,同时使用图标指示以及校验消息有助于帮助传达哪些项目需要输入或需要纠正。

Bestbuy.com 提供有助于校验消息告诉用户如何解决这个问题,也用图标指示以及不同的颜色将用户的注意力吸引到需要更正的地方。

通知

通知是信息式的消息提醒用户系统内发生了常规事件。与校验不同,通知可能不直接与用户输入挂钩,甚至与用户当前在系统中的活动无关。但它们通常告知用户系统状态的变化或有用户可能感兴趣的事件发生。在电子邮件、 社交网络和移动电话应用程序中,即使用户离开应用程序,通知依然可以被推送。

通知可以根据情境应用到特定的用户界面中,或全局的应用到整个系统中。

Facebook APP在新鲜事页面使用了一个基于情境的通知,用于告诉用户有新的事件。此通知不需要用户进行任何操作。

通知的特点

* 通知没有引导的用户立即进行操作。

* 通知告知用户发生了特定的事件。

通知有两种主要类型,他们的区别在于是否要求用户根据通知进行操作。

1. 需要进行操作的通知;用于通知需要用户进行操作的事件。在这个层面上,它们是类似于校验,但由于它们不是由用户自己操作而引发的,在设计中需要被区别。

需要进行操作通知往往紧急的,应该是直接显示在用户界面上;例如,它们可以以弹窗的形式出现在用户界面上,迫使用户立即进行操作。它们需要用户操作才会消失。

Mac 操作系统使用了这种通知用于通知用户有可用的系统更新。用户必须选择安装此更新程序或晚些时候再次提醒才能让其从屏幕上消失。这种是侵入式的通知,需要用户进行操作。

2. 被动式通知是信息式的; 他们通知用户系统中发生的不需要进行任何操作的事件。移动应用程序中的许多通知是被动式的:通常用于通知用户可能感兴趣的事件。

被动的通知通常不紧急,应该是较少的干扰。实现中典型的被动的通知是标记或出现在屏幕的角落上的气泡提示。被动式的通知可以轻易消除,因为他们不需要用户进行操作。当通知所提供的信息是理解系统状态的关键时,使用容易被忽略的被动式通知是有会问题的。

Adobe Creative Cloud 用非侵入式的被动式通知来通知用户有可用的应用程序更新。此通知在屏幕上出现了几秒钟后就会消失。用户不需要采取任何操作。

Uniqlo.com 用于非侵入式的被动式通知作为添加到购物车的反馈。必要让用户操作来消除通知。这类通知有时会导致网购物者因没有注意到简讯而引发问题。用户错过提示消息可能会导致他们将一个东西多次添加到购物车中,或者需要检查到底什么东西被添加到了购物车中,打乱他们购物流程。

通知的设计难点在于它们不是针对用户特定的操作产生的即时的、明显的反馈。相反,用户很可能正在做一些不想关的事情和也没有思考通知提出的问题。这就需要建立更多的上下文情境以及为用户提供足够的背景信息,以促进用户理解该通知的内容是什么。

(相比之下,对于校验,用户刚刚做完那个需要纠正的事项。因此,校验消息不需要让指导用户理解当前的任务。例如,如果网购结账过程中信用卡到期日期未填,校验消息不需要说"请输入你为正在购买的Uniqlo.com的蓝色无袖连衣裙支付$29.90的信用卡的到期日期”。然而,第二天,这件衣服从仓库发货时,通知需要比"你的包裹已经发出"更加详细。)

如果通知是有关联情境的,并涉及界面中的特定元素,在元素上的提醒标记可以传达通知发生的位置并吸引用户的注意力。例如,一个在移动应用程序图标上的提醒标记显示用户从相应的APP收到的通知。

IPhone 的消息应为收到新的消息发送通知。同时,在消息应用图标上出现一个提醒标记用于传达通知来自于何处。若要清除该标记,用户必须查看该讯息。

Mint.com 同时使用通知和提醒标记用于传达的有一个账单需要注意。警示提醒(1)出现在紧挨着用户需要注意的账户摘要位置,同时通知(2)和其他重要的信息出现在页面的中央区域。(通知消息中的文字需要更有帮助。)

选择正确的传达方式是至关重要的

使用错误的传达方式可会对用户体验产生负面影响。在前面提到Yelp在搜索结果中使用绿色标记以指示茶叶市场有特殊交易方式。此信息是有关联情境的,对明确的想要寻找喝茶的地方的用户非常重要。

你可能会想到可以另一方式,即当促销来临时发送通知给潜在的茶消费用户。错!不考虑用户当前的目标随意发送通知,可能会被忽略,甚至可能干扰用户,因为通知会打断用户当前的任务,而且可能与用户当前的需要无关。

(一般情况下,任何与用户的目标和倾向无关的广告都会被忽略.)

另外,“toast”——Android系统中一种消息框类型 (会几秒钟后消失的非弹出式小提示,如 Facebook APP中使用的新事件提示),这种被动式通知并不适用于错误消息提示。使用校验,或其他方式。事实上,我们移动端用户之所以要花5分钟等待一些内容加载仅仅是因为她没有注意到在屏幕底部出现并在在5秒后迅速消失的小小的错误提示。

Allmodern.com 针对对商品收藏采用了需要用户操作的通知方式。对于正在将大量的商品加入收藏夹的用户,这可能是麻烦的且会干扰操作的反馈方式。更好地传达方式应该是在屏幕的角落显示可见的但不需要用户进行操作来清除的被动式通知。

结论

三个传达方式的主要区别是:

* 指示提供有关动态内容或UI元素的补充信息。它们的出现是有条件, 即它们可能会在特定条件下出现或被改变。

* 校验是与用户执行的操作或输入相关联的。

* 通知适用于与系统相关的事件。

下表中简要的列出了它们的差异:

了解何时以及如何使用这些反馈方式有助于建立向用户传达信息的合理机制。通过评估需要传达的信息的类型,我们可以确定使用何种正确的途径。

原文地址:http://www.nngroup.com/articles/indicators-validations-notifications/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容