1995年5月补充说明:这个报告是为传统的印刷出版物而写的,因此不是超文本设计的典范。此外,这份报告中描述的设计显然是“去年的风格”,在主页上有大量的图标和选项。这种设计适合于它的预期用途(公司范围的内部信息系统),但不应被拟用于在Internet上展示公司形象的Web站点。
增加了2002年:有关Intranet设计和可用性的最新信息,请参阅Nielsen Norman Group的信息manbetx官方网站手机版Intranet和Intranet设计年鉴的可用性研究

背景

sunmicrosystems是计算机工作站和系统软件的领先供应商,在世界各地拥有大量分支机构。该公司拥有大量员工感兴趣的内部信息,但这些信息目前存在格式不一致的地方,新员工很难发现这些信息。Sun早前制作了一套包含外部信息的万维网网页,供通过Internet访问,该系统在公司内外都受到了好评,因此采用内部Web服务是一个自然的想法,尤其是考虑到所有Sun员工都使用联网的工作站。

出于安全目的,最好对内部和外部页面使用单独的视觉标识(当外部人员可以访问信息时,让用户和作者清楚地知道)。此外,通过内部网络获得的信息类型在本质上与外部信息不同,这意味着不同的设计将是合适的。因此,为了设计Sun的内部Web,启动了一个单独的SunWeb项目。

SunWeb是在1994年夏天设计的,当时互联网上的Web服务器数量以每年大约1000%的速度增长(每两个月翻一番)。我们猜测,在这段时间内,Sun防火墙内的内部Web服务器的增长速度甚至更快。在SunWeb项目开始之前,许多Sun员工就已经为团队和个人建立了主页,在项目进行期间,更多的员工已经上线。作为Sun内部网络发展的另一个标志,SunWeb服务器在尚未公布的34天测试期间被2649名不同的员工访问。因此,SunWeb的工作必须在几个月内完成,如果我们希望实现一致的用户界面,而不只是把一组完全不同的设计混杂在一起。

可用性计划

由于快速交付设计的需要,我们决定依靠“折扣可用性工程”【尼尔森1994】来确保设计的可用性。折扣方法是故意非正式的,不太依赖统计数据,而更多地依赖于界面工程师观察用户和解释结果的能力。这些方法的一个主要优点是速度快,而且由于我们没有开发,例如,飞机驾驶舱或其他与生命有关的接口,所以我们愿意冒着可能的缺点,即在我们的设计中找不到最后一个可用性问题。

我们在两周内进行了四次可用性研究,在此期间我们测试了界面设计的不同阶段。我们采用了以下研究序列:

  1. 卡片分类以发现类别(4个用户)
  2. 图标直观测试(4个用户)
  3. 向图标分发卡(4个用户)
  4. 大声思考页面模拟(3个用户)

最后两个测试中的参与者也被要求评分图标美学的评级。请注意,我们在四项研究中的每一个中使用了不同的用户,以避免任何学习效果。

卡片分类

卡片分类是一种常见的可用性技术,经常用于发现用户对信息空间的心理模型。典型的应用程序是通过要求用户使用命令名对卡片进行排序来了解菜单结构:被排序在一起的命令通常应该在同一个菜单中。这种方法的缺点是,用户可能并不总是拥有最佳模型,而卡片排序(或其他相似度度量)通常被用来评估新手和专家用户对系统的理解方式的差异。

在我们的卡排序研究之前,SunWeb开发组对系统提供了有关可能的信息服务的头脑风暴,导致51种信息类型的列表。我们在3×4英寸的Notecard上写下了每个服务的名称。在一些案例中,我们还在卡上写了一个单行解释。

在每个用户进入实验室之前,卡片被随机地分散在桌子上。用户被要求坐在一张桌子旁,根据卡片的相似性将卡片分类成堆。鼓励用户不要生产太小或太大的牌堆,但不要求他们在每一堆牌中放置任何特定数量的卡片。在用户将卡片分类成一堆堆相似的卡片后,用户被要求将这些卡片分成看起来属于一起的更大的组,并为每个组编一个名称。这些名字被写在便笺上,放在小组旁边的桌子上。用户通常在大约30分钟内完成整个过程,但有些用户需要大约40分钟。

这项研究的数据是一组有名称的卡片,并有对应于原始卡片堆的子卡片组。基于这些信息,我们可以通过给一对概念一个相似点来计算不同概念的相似度等级,每两个概念出现在同一个更大的聚类中就给一个相似点,每两个概念出现在同一堆中就给两个相似点。然后,可以将这个相似度矩阵提供给用于聚类分析的许多标准统计包中的一个。还可以使用其他统计技术,如多维标度。

我们最初设计的统计数据并不是基于“统计数据”而设计的。考虑到我们只有四个用户的折扣可用性工程方法,统计方法无论如何都不那么可靠,但是,事实证明,统计聚类分析与我们手工构建的非常相似。对于我们的手动集群,我们采用自底向上的方法,并将大多数用户已经分类的概念进行了初步分组。然后,我们将这些小的组扩展成更大的集群,方法是添加一些用户已经将组中大多数概念排序的概念(如果分组对我们有意义的话)。如果想要客观的“真相”,那么这种对数据的主观解释是可疑的,但在我们的案例中,我们追求的是一个连贯的设计,因此我们觉得在用户数据太稀少,无法根据数字得出明确结论的情况下,我们的判断是合理的。一个人花了大约两个小时的时间来观察这些数据,得到了一个推荐的功能组列表以及组的初始名称。名字的灵感通常来自于用户提供的标签,但由于语言上的不一致现象[Furnas et al.1987],用户显然没有使用完全相同的术语,因此我们也必须运用我们的判断来选择合适的名称。

图标直觉

基于卡片分类研究的结果,我们在SunWeb中定义了15个一级信息分组,并为每个分组设计了用于主页的图标。图标将被显示为标签,以增强用户的理解能力。即便如此,我们还是想让图标本身尽可能的容易理解,为了达到这个目标,我们进行了一个图标直观性研究,让四个用户看到没有标签的图标,并要求他们告诉我们他们认为每个图标应该代表什么。

表1。 四个用户的图标直观研究结果(有些用户给出了一些图标的一个以上的解释)。
目的意义:公司地理景观(不同地点的分公司)。 测试用户的解释:世界,全球视野,行星,世界,地球。
钱袋图标 目的意义:的好处。 测试用户的解释:卫生领域,钱,卫生保健是昂贵的,克林顿的卫生计划,医院,不知道,福利。
电视图标 目的意义:公共关系(电视广告)。 测试用户的解释:电视机,视频,电视,电视,电视。
电脑和光盘图标 目的意义:产品目录。 测试用户的解释:面向系统,磁盘,CD,计算机,CD-ROM,CD-ROM。
公文包图标 目的意义:专用工具(工具箱)。 测试用户的解释:公文包,个人信息,公文包,工具箱,公文包。
公告板图标 目的意义:最新消息(公告栏)。 测试用户的解释:布告栏,布告栏,布告栏,洗衣房。
球形线覆盖图标 目的意义:万维网。 测试用户的解释:世界范围内的网络,地图,位置,行星的尺寸,世界范围内的网络,地理,全球。

表1显示了对一些初始图标进行图标直观性测试的结果。有些图标很容易通过测试,大多数用户要么猜出了其意图,要么至少猜出了一些非常接近的东西,在整个系统的上下文中不会产生误导。例如,只有一个用户明确地使用了“福利”这个词来描述我们的“员工福利”图标,但是像“医院”和“克林顿的健康计划”这样的描述实际上表明人们了解了大概的想法。在这种情况下,当图标与标签在整个系统中结合时,我们很满意用户能够理解它,因此我们觉得没有必要更改它,特别是考虑到我们已经计划了几个额外的用户测试来揭示任何隐藏的问题。为了减少对钱袋的重视,做了一个小的调整。

在其他情况下,用户没有完全正确的含义图标,但我们决定保持其。产品目录是一个这样的示例,因为图标的CD-ROM组件如此视觉上强大,大多数用户都集中在其中,而不是在系统组件组上。潜在的问题是软件是一种难以想象的抽象概念。在另一个图标中,我们尝试通过代码列表显示“软件”,但也证明了用户难以识别。我们的最终决定是保留产品目录图标,因为用户确实识别其组件。在最终设计中(参见图4),我们通过使其更饱和的颜色使工作站屏幕更加突出。

关于“什么是新的”公告栏,一个用户声称它看起来像洗衣房。尽管如此,四个用户中的三个还是立刻认出了这个图标,我们决定保留它。在对少数用户进行用户测试时,重要的是不要让来自个别用户的结果过度影响一个人的决定。从一个角度来看,我们的样本中有25%的人对图标有问题,但从另一个(更恰当的)角度来看,我们碰巧问了一个不认识图标的人。当基于测试用户的小样本进行设计时,一个人必须根据一般的可用性原则和交互原则的经验进行判断,因为数据本身太稀疏了,不能在没有解释的情况下使用。

工具箱图标被大多数用户视为公文包。因为公文包有完全不同的含义,这个图标可能会误导用户,我们决定重新设计它,增加一个活动扳手来强调“工具”方面。最后,万维网图标是合理的:一些用户通过猜测“世界范围内的网络”或类似的东西,几乎完全正确,但许多解释都与地理或全球有关。因为我们已经有了一个表示地理位置的地球图标,这些对WWW图标的错误解释是有问题的,我们决定重新设计,更加强调网络。我们还用平面地图代替了地球仪,以进一步区分WWW图标和地理图标。

卡片分配到图标(闭卡片排序的一种变体)

在直接测试中重新设计的那些测试中测试不良的图标后,我们继续测试用户是否会将正确的概念与我们定义的每个组相关联。对于此测试,我们将可用性实验室映像为最终主页设计的大规模版本,如图1所示。我们在彩色打印机上打印出大放大图标并将其放在上面桌子在布局的近似我们已计划为SunWeb主页策划。即使桌面比典型的工作站窗口大几倍,我们只会在200%的放大率上打印图标,因为这种尺寸(屏幕图标区域的四倍)从一段距离看到足够大,而较大的图标似乎很奇怪。我们在没有标签的情况下测试了这两个图标,但我们会建议在未来的测试中包括标签,因为我们没有学习比删除标签,而不是我们在图标直觉研究中学到的标签。

可用性实验室的照片

图1所示。可用性实验室中的卡片分配图标。在准备测试时,图标在彩色打印机上以200%的放大率打印出来,并使用便利贴胶带为每个图标划分表格区域。在测试中,用户会得到一堆卡片,并被要求将每一张卡片放在带有最合适图标的区域中。观察者与用户一起在房间中给出指示并做笔记。其他观察员可以通过单面镜观看,会议也被录像,以防以后需要进一步的分析。
备注添加2013为什么这张照片看起来这么差?因为它是在1994年数字化的,我们需要把它保持在50种颜色的“安全”颜色空间内,以避免在当时低端的Sun工作站出现闪烁。

我们使用Post-It(TM)磁带将桌面划分为每个图标的区域,然后然后要求每个测试用户分发这些区域之间的卡片,每张卡将与其上最适合的(标记)图标中的每张卡片。在卡片分发测试结束时,要求用户对图标的美学发表评论,并列出他们最喜欢的图标,最不喜欢。图1显示了卡分发测试期间的实验室设置。卡分配测试每用户大约需要大约十五分钟。

自言自语页演练

对于我们的最终可用性测试,我们打印了我们为SunWeb主页的设计的放大彩色扫描仪。我们想测试一个纸质版本而不是一个屏幕版本,以避免用户点击按钮的问题,在当时没有效果。测试用户被要求指着每个按钮,大声说出他们认为该按钮将会访问哪些信息。在浏览的最后,用户被要求评论图标的美学,并列出他们最喜欢和最不喜欢的图标。

卡片分发和页面漫游研究揭示了几个可用性问题在我们的修订设计,导致额外的设计变化之前,我们可以发布SunWeb用户界面。下面的部分将对其中一个新的可用性问题进行更详细的讨论。回想起来,我们觉得我们从前两项研究,卡片排序和图标直觉研究中学到了最多。一般来说,我们总是推荐出声思维研究与完整的用户界面,用户执行任务,但在特殊情况下命令结构和交互技术是由万维网浏览器是更重要的学习我们可以影响的信息结构。

要求用户对图标的美学进行主观评价被证明是有用的。尽管人们的品味不同,喜欢和不喜欢的图标也不同,但有两个图标还是被大多数用户选出来批评的:黑板我们用来表示教育和电视图标用来代表销售,营销和公关,用户没有麻烦认识到电视(见表1),大多数用户容易理解,它代表了宣传材料(尽管只有少数人承认它是显示“太阳电视广告,”这是一个可用的服务,我们计划通过SunWeb的多媒体特性)。用户就是不喜欢它。

对于像SunWeb这样的系统来说,主观满意度至少和任务执行同等重要,我们希望鼓励人们浏览并更多地了解他们的公司,因此我们删除了这些最令人讨厌的图标,并用更有吸引力的图标取而代之。黑板被换成了毕业帽和文凭来代表教育,电视机被换成了聚光灯来代表宣传材料。尽管美式毕业帽是有问题从国际化的角度(并非所有国家使用这些帽子),我们决定使用这个系统,因为它是用于在太阳是公司内部使用,大多数员工懂英语和美国文化的基本方面。

迭代设计

SunWeb的用户界面是通过迭代设计开发的,这意味着每当我们发现其可用性上的弱点时,就会设计出新的界面版本。我们经常不得不进行大量的修订,因为我们对用户界面的“修复”有时不能工作。图2显示了一个示例。实际上,图2只显示了与用户一起测试的五个主要迭代。我们总共设计了20个版本的图标:7个工具隐喻图标,9个购物隐喻图标(包括购物车和一个杂货店货架),以及4个衣柜图标。为了生产我们的许多不同的设计,想法是从一个同义词典,一个视觉字典,国际标志和符号的目录收集。

公文包图标带扳手图标的工具箱店面图标替代店面图标胸部图标

图2。图标的五个迭代,代表一组专用应用。前两个代表工具箱隐喻,接下来的两个是“应用程序存储”,最后是“应用程序胸部”。

如前所述,最初的工具箱图标被大多数用户解释为公文包,因此我们打开它并添加了一个活动扳手。这个重新设计起作用了,用户在我们的卡片分发研究和页面漫游中没有问题,用户将大量卡片分类到这个图标上,并评论说“哦,这是一个工具。”基本上,几乎任何代表可执行程序的概念被认为是一个工具。一个例子是应与旅行图标分组的费用报告应用程序,但通常被放置在工具箱中。

为了在特殊用途的应用程序中使用较弱的隐喻,我们接下来尝试使用一个显示店面的图标(图2中中间的图标)来进行购物隐喻。当我们进行图标直觉性研究并将这个图标展示给用户时,他立即说道“这是电路板。”这个用户碰巧是一名工程师,但由于SunWeb的用户中确实有很多工程师,所以我们决定认真对待这条评论,重新设计图标。在这个例子中,作为用户界面专家,我们的判断依赖于一个用户的结果,因为我们觉得这个用户的问题在系统的实际使用中会很频繁。

我们尝试了几个备选的店面和其他购物图标(见图2中的第四个图标),然后意识到一个成功的购物图标会干扰我们的另一个界面元素:“产品目录”图标。因此,我们删除了应用程序存储作为比喻,并最终确定了“application chest”图标,如图2中所示。

统一的设计

为了使SUNWEB既可用和美观,令人愉悦,基本的视觉设计技术都应用于图形元素。一致的视觉设计还提供了用户批判性所需的方向提示和导航控制。应用相同的技术一致地为用户提供了可预测的位置,以便在SunWeb的每个页面上提供信息和控制。这在整个SunWeb系统中加强了用户期望,从而提高了满足和可用性。

两个级别的导航栏的截图

图3。Sunweb主要主页Masthead(顶部)和二级Masthead(下)。

需要一个系统化的设计解决方案来提供页面标识和对基本控件的访问,这是通过开发“横幅”来实现的(见图3)。在每个SunWeb页面的顶部,横幅提供了一类基本的全局控制,包括搜索、概述和帮助(C)。SunWeb包含的大量信息需要搜索引擎作为初始功能规范阶段的先决条件。还认为有必要以综合内容清单的形式进行概述。这些按钮被渲染成有点柔和的灰色,这样就不会与页面上的其他元素竞争或压倒。这种平淡无奇的统一性还将功能与主页上更丰富多彩的分类图标从视觉上区分开来。SunWeb标识符标记(A)始终位于横幅的左半部分。这个标识区域为SunWeb提供了与Suns外部公共服务器的“外观”必要的视觉区分。这个区域还可以作为链接机制从系统中的任何地方返回到SunWeb主页,并通过描述性标签加以加强。在二级横幅上,分页按钮(D)在可用时突出显示,允许用户通过一系列信息进行分页功能,例如,某个工程团队成员的主页,或产品目录中的页面。这样就避免了下一个选择周期,如果有很多种类的信息可用,对于用户来说这是一个乏味的例行程序。由图标表示的15种不同类别的SunWeb信息是完整的二级横幅组件(B)。这些嵌入在横幅中的图标作为直接链接返回到特定类别主页的功能。在SunWeb中,这15个类别可能被认为是主要的“枢纽”,正如在航线系统中发现的那样,它们提供了信息空间的主要动脉。用户快速返回这些中心主页的能力是一个关键的导航功能。通过点击图标,用户将立即链接到该类别主页,无论用户当前从第二级删除的程度如何。横幅图标也可以作为SunWeb中用户位置的位置提示。

为了促进SunWeb的贡献者之间的一致性,banner组件被放置在一个中央存储库中,开发团队鼓励使用。尽管没有强制要求采用横幅gif文件或遵循特定的设计,但许多内容贡献者认为有必要“融入”,并希望与其他顶级SunWeb环境保持一致。在这种情况下,一个合适的设计解决方案“被放弃”为广泛的曝光和采用提供了最初的动力。正确的旗帜和执行帮助明确了设计图纸。在开发阶段会议期间,这些图纸以硬拷贝形式分发给各个内容提供商。

与图标一样,SunWeb横幅依赖于最小的调色板,以减少彩色地图闪烁和不可预测结果的可能性。这也将为内容提供商保留更多颜色空间,他们可能会觉得必须将不确定数量的连续音量照片,彩色插图和图表等包含到其SunWeb页面中。为SunWeb的所有图形元素采用了来自64个颜色调色板的子集。这将确保组件的色调饱和度,强度和价值一致性。

1994年推出的最终内网主页截图

图4。SunWeb的最终主页设计。图标共享设计属性,如前朝向和调色板,确保在图像集合中的视觉连续性。每个图标占据按钮图形内相似的空间量,以均衡图像密度。在整个图标图像中使用预定义的颜色代表SunWeb提供的15个主要类别的信息。这提供了与SunWeb横幅中的全局图标控件的必要视觉对比,这在视觉上保持单色。页面上的类别的分组和放置基于相关主题和信息优先级的层次结构。较高的优先级信息放置在顶部,而对底部的重要性程度的重要性。值得注意的是,首次迭代的首页设计将每个图标作为单独的图形ismap呈现。但是,由于马赛克加载每个单独图像所需的时间长度,一次将主页重新设计为包含所有按钮类别的大型ISMAP。这大大减少了用户的访问时间。 Textual labels in the smallest font available was positioned below the ismap (not shown), in case users turn off the load picture functionality. A design should always take into account users who are concerned with speed of access, and therefore prefer not to load any of the graphic gif files.

参考文献

弗纳斯,g.w.,兰道尔,t.k.,戈麦斯,l.m.,杜梅,s.t.(1987)。人机交流中的词汇问题。ACM的通信30.,11(11月),964-971。

Mullet,Kevin和Sano,Darrell(1994)。设计可视化界面:面向通信的技术。太阳微系统出版社/普伦蒂斯霍尔,新泽西。

j·尼尔森(1994)。可用性工程,平装版。波士顿学术出版社。