it-swarm.cn

何时使用图标与带有文本的图标还是仅使用文本链接?

关于何时在Web应用程序中使用图标,带有文本的图标以及仅带有文本链接的规则?

例如:

disk icon

vs.

disk icon 保存

vs.

保存


额外的问题:是 disk icon 保存-或-保存 disk icon 更可取?

172
jmb

众所周知,图标作为标签是无效的,没有培训或没有经验就很难正确解释。在大多数情况下,与单独使用图标相比,单独使用文本更好地学习正确的解释。 参见:Wiedenbeck,S(1999)。最终用户应用程序中图标和标签的使用:对学习和保留的实证研究。行为与信息技术,18(2),p68-82。

图标对于任何抽象的东西(例如发票或投标)尤其不利,因为抽象的东西通常没有任何强烈的视觉图像(发票和投标都可以表示为纸质文档,但是您如何区分它们?)。同样,图标对于操作(例如保存,发布)尤其不利;很难清楚地显示带有图片的过程。是的,图标始终在工具栏中用于操作,但工具栏是为专家而设计的,尽管如此,用户经常被它们所迷惑(平均而言, 用户仅知道六个Word工具栏项两年)。

图标可以节省文本上的空间,但要付出代价。对于小图标(例如16x16像素),用户甚至都很难认出应该是什么图片,更不用说图片代表什么了。我认识的一个用户以为要保存的“磁盘”图标是电视的图片。 (她已经足够大了,知道什么是软盘。)我个人使用Word多年以来一直认为Track Changes图标是某种风格的Rosetta Stone。专家用户发现 依靠记忆的物理位置 更容易使用工具栏控件,而不是使用图标标签来选择控件。较大的图标(例如,至少32 x 32像素)可以帮助识别,但是占用了太多空间,最好使用空格来显示清晰的文本标签。如果空间有限,通常最好使用缩写文本而不是图标。

正确设置图标非常困难。未经用户测试的广泛迭代,请勿尝试开发新图标。即使那样,您也可能失败。微软的设计人员在按键控件上 放弃并带有文本标签 之前,尽一切努力为Outlook工具栏制作可解释的图标。

图标标签也使技术支持变得困难(例如,“单击带有蓝色复选标记的黄页,而不是单击”接受”)。

根据经验,只有在以下三个条件中至少有两个条件适用时,才应允许单独使用图标:

  1. 空间非常有限(即,太小而无法单独显示文字)。

  2. 图标已标准化(例如,用于保存的软盘映像)

  3. 该图标表示具有强烈物理模拟或视觉属性的对象(例如,用于访问打印机属性的打印机图标,或用于将页面背景设置为红色的红色矩形)。

单独使用图标时,工具提示是必需的,但是它们不能替代文本标签。您的用户不必无所事事地使用您的应用。文本标签永远不需要图形工具提示这一事实很好地暗示了文本比图标要好。

如果空间允许,则最好将图标与文本结合使用。 (我认为有研究表明,这可以追溯到1980年代后期,但我找不到它。)选择性地在文本中使用图标可以使某些项目更加突出或增加视觉吸引力。它还可以提高项目的可扫描性,但是好的文本标签也可以做到这一点。众所周知,用户主观上认为即使带有图标的应用程序也更容易使用,即使实际上并没有真正提高性能(请参见上面引述的Wiedenbeck,1999年),因此,这是将图标和文字结合在一起的另一个原因。

我通常会在文本标签的上方或左侧看到该图标。我认为这不一定比其他方法要好,但是如果控件彼此相邻,则也应遵循惯例,以便用户可以凭经验判断哪个文本标签带有哪个图标。

232
Michael Zuschlag

图标上的Neilson/Norman组

摘要:用户对图标的理解基于先前的经验。由于大多数图标都没有标准用法,因此文本标签对于传达含义和减少歧义是必不可少的。

图标需要文本标签

为了帮助克服几乎所有图标都面临的歧义,文本标签必须在图标旁边出现来阐明其在特定上下文中的含义。 (即使您使用的是标准图标,通常也更安全地添加标签,尤其是对图标进行了稍微改动以符合您的审美偏好或约束条件时。)

图标标签应始终可见,而无需用户进行任何交互。对于导航图标,标签尤为重要。不要依靠鼠标悬停来显示文本标签:它不仅增加了 互动成本 ,而且在触摸设备上的翻译效果也很差。

网站 sability.gov 在网站内每个页面的方法,模板和文档以及指南中均使用导航图标[ 带有文本的示例w/o文字 ]。如果我要求每个阅读本文的人给我发送一个表示“方法”的图标,那么我肯定会收到各种各样的设计。正如我们几年前在 (关于首页可用性的设计准则 给用户。”尽管该网站的移动版本意识到文本标签需要伴随图标才能赋予某些含义,但桌面版本会隐藏这些标签,直到好奇的用户决定将它们悬停在它们上面。将这些导航项目固定在页面的左侧,以便用户在滚动时仍可使用,这表明组织认为它们非常重要和有用。但是,删除文本标签的这些图标会使它们完全没有意义,并且与提供易于访问内容的目标相反。

18
KyleMit

根据Don Norman引用的研究,仅图标效果最差。独奏文本比图标更好。文字和图标效果最佳。

8
Hisham

除了上述答案外,我还有一点要说。

这是什么网站?

如果不经常使用该网站,则需要标记图标。否则,新用户可能会觉得UI繁琐。

如果要使用该网站经常,例如Gmail,带有良好工具提示的好图标要比使用纯文本或纯图标方法。我敢肯定Google已经解决了这个问题,因为过去他们曾经使用纯文本按钮,但是现在他们在Gmail中使用图标+工具提示。这种新方法可以在不牺牲可用性的情况下提供干净的界面。甚至Photoshop和Notepad ++也使用类似的方法。

7
jackandjill

让用户选择,默认为“两者”。

文字+图标可帮助初学者学习图标;但是随着他更多地使用该应用程序,用户将习惯了该图标,并且不再需要文本。一旦了解了图标的含义,他将更喜欢一个更大的工作空间,而不是多余的Text。

5
Lie Ryan

首先,当您要设计用户界面时,必须考虑可用性的原则(一致性,可负担性等)。负担是主要概念之一,它意味着您的界面应该直观。例如,您的图标应与以下操作的含义相关联,例如上面引用的Michael的保存图标示例。一些图标也已标准化,您可以重复使用其含义。关键是,如果仅在工具栏等上使用图标,则在图标不能很好地表达含义的情况下必须使用工具提示,但是如果图标足够宽容,则它们不需要标签,并且工具提示可能就足够了。

无论如何,特别是当您的系统是针对特定系统的,而您必须设计图标时,很难设计图标。在这种情况下,您可以提出一些设计并与用户进行评估。了解用户对您的系统,可视界面和图标的看法可能会有所帮助。另外,您可以在进行真实测试后的第二天进行一次难忘的测试,以评估用户是否可以记住您的图标,含义或图标,或者他们可以找到您要的操作的可能区域。如果您有多个图标设计,那么问卷调查也可能会有所帮助。

另一方面,如果您需要放置标签,我认为最好在图标下方放置标签:[icon] [label]

请记住,“可负担性是对象的一个​​方面,它使对象的使用方式变得显而易见。在用户界面显示中,创建能力的功能通常是可视的。 ..” Rosson,M. B.&Carroll,J. M.(2002)可用性工程,Morgan Kaufmann。

或者,如果您有时间……您可以阅读以下内容:www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf

如果在设计过程中您已经考虑了承受能力,也许标签不是必需的,而只是使用工具提示,否则您可以考虑图标下方的标签,然后评估或建议更多设计供用户评估(不多)从一开始就是同事,直到可以供最终用户测试的版本为止。

5
user1982

在当前趋势下,系统应使用用户熟悉的单词,短语和概念来讲用户的语言,而不是面向系统的术语。遵循现实世界的惯例,使信息以自然和逻辑的顺序出现。当您使用英语时,请始终将字母放在右侧。因为显然图标将是主要吸引力。因此,用户可能会忽略前面的字母。

例如,iTunes-被组织为一个包含您的媒体库的库:音乐,电影,节目,听众簿。图书馆下面是商店,您可以在其中购买更多媒体以放入图书馆。

enter image description here

以及 Google托盘设计 之类的最新趋势,并且Windows 2D磁贴会显示图标。但最好带有一个带有 快速鼠标悬停工具提示。祝好运。

4
Miller

在阅读完所有问题并同意我的观点之后,我想补充一点看法。

在决定显示图标之前,不要显示图标,在文本周围添加文本,不要添加任何文本,您应该回答一些问题:

  • 您打算在哪里添加图标?
  • 为什么需要图标?
  • 谁将使用这些图标?
  • 用户对图标/内容/动作有什么了解?
  • 使用图标常见吗?
  • 您将使用户交互变得容易吗?

要回答这些问题,您必须考虑以下几点:

  • 人们每天都在使用智能手机,Facebook,Youtube,Google,What's App,Instagram等最著名的图标都需要显示标签,以确保人们会知道。

enter image description here

  • Word/Google文档已成功使用没有文本的图标,因为多年来它们一直相同,并且每个人都已经知道了什么,但即使如此,它们也会在鼠标上方显示文本来解释图标。

enter image description here

  • 不同的地理区域可能对您的图标有不同的理解。例如,在英国,在电子商务上使用购物篮更为普遍,而在美国,购物车则使用购物篮。这是由于地区语言的影响而发生的。

  • 复杂的图标可能会由于误解而停止转换。

enter image description here

您可以看一下我从 Smashing Magazine 借来的一个很好的比较。

enter image description here

考虑到所有答案,我将在90%的情况下使用带有图标的文本,并且文本的位置取决于您的设计概念以及用户是否易于连接它们。

就像我经常在评论中说的那样,这里绝对不是绝对的真理,您应该进行测试,并在您的网站/应用程序上为您的用户进行比较。

2
Rafael Perozin

这将取决于用户。从可用性的角度来看,同时具有图标和文本可以提供更好的结果,因为在合理的人群接受的前提下,识别和回忆之间的关系要远胜于召回。仅具有图标适用于符号字形-全局可理解的符号字形。仅当项目是任意的并且没有可识别的字形来表示它们时,才最适合使用文本。对于此类项目,最好仅显示文字。但是,应对所使用的术语进行适当使用的测试。

2
Kernan Kobaya