实际可用性

深入了解

Dr.Charlie Kreitzberg 和 Ambrose Little

Dr。Charles B。 Kreitzberg

Ambrose Little

样式出售。’s 为真有关软件原样有关其他产品。简洁的可视化设计可以吸引购买者和提供建议一个产品是很酷、 well thought 出和有效。课程漂亮包 doesn’t 作为 well-worn proverbs 像 “ 美容是唯一的外观深 ” 和 “ 由其封面判断 don’t 书 ” 提醒我们保证该内容的质量。

但是，可视化设计无关紧要。虽然简洁的可视化设计是没有替代的质量构造，它 ’s 可消除作为只市场营销 fluff 的可视化设计错误。至少它应该是专业的、 有吸引力。如果您正在为客户或公众产生一个产品，您可能需要考虑聘用可视化设计器开发独特的外观。并且，如果产品的套件常见的外观是非常重要。

可视化设计多个装饰性 ； 它具有对用户已经体验强效果。将精力集中在某些区域是：

• 外观和行为  
• 可读性
• 发现的 affordances
• 支持通信
• 图释和信任

外观和感觉

外观是产品的用来描述您的总体印象 (个性） 术语。它不 ’s 一个特别定义完善的术语，但它不会提醒我们可视化设计极大地对产品已经字符。

术语 查找 通常包括颜色、 字体、 图形、 徽标和商标。感觉 是更 amorphous 并试图捕获与产品交互中的用户已经体验的质量。通过交互的可视化设计和其他设计元素 （如信息体系结构被创建感觉。感觉受到元素 （如动画、 过渡和界面中使用的语言。感觉经常所述使用形容词和环境：正式、 随意、 友好、 生动、 主动的 laid 的背面。尽管它 ’s 可能分别讨论外观和感觉，它们应在练习单元中形成一个连贯一致的整体。

若要帮助您考虑外观和感觉，可能需要访问 的 CSS Zen 花园。由 Dave Shea 温哥华，从一个 Web 设计人员创建 CSS Zen 花园是协作工作位置的可视化设计器开发的标准的 HTML 网站的外观和风格。他们可以修改 CSS 样式规则是工作表并添加图形，但可能不能进行更改为 HTML 或内容。因此在感觉的某些设置中该意义 — can’t 更改文字的语言，但您可以更改可视的语言。

要在该站点时，可翻转该设计方案进行。它们是所有相当不错，但在外观和感觉非常不同。当您切换到设计方法来获得一个不错的主意的多少差从设计使可视化设计。

您肯定会给其他人喜欢 CSS Zen 花园中的一些设计。选择外观和感觉就感受和产品的用途的 appropriateness。与用户体验的其他方面，一样，它 ’s 感受和应尝试以满足您的观众的期望值。

您可能决定设计 CSS Zen 花园参与人员的一些更了关注他们自我表达式上 — 画 — 比有关站点已经内容。这是一个真正的问题。许多可视化设计器会因此致力于它们是不太成功地增强可读性、 邮件、 affordances 或品牌，他们画是重要的。在 take-away，则是不是每个良好的艺术家是很好的软件可视化设计器。

您可能有兴趣演示文稿视觉框架中的模式 （ 的 Quince UX 图案资源管理器。那里可以学习如何可视化设计用于建立框架或 “ 可视化设计语言 ” 可用于整个解决方案中 （以及超出其到其他资产），以便一致和适当设计框架。

可读性

可读性强受可视化设计。可读性，广泛，是用户已经能够理解和处理内容的能力。我们重点主要是文本的可读性，但您应该考虑所有类型的您支持的内容。谈到可读性，可视化设计工作手动在手动方式与您的产品已经信息体系结构。撤回信息体系结构关注如何可视的层次结构在语义上组织信息。可视化设计器将确定如何呈现的各种类型的信息。

(无意中） 演示可读性的问题的几个 Web 站点是 先生瓶装Bella DeSoto ， HavenWorks 。这些网站是从 网页的 Suck ，其中 isn’t 总是可靠的来源，但若要查看网站的某些人认为有问题的一种方法。您查看这些站点时，请考虑什么创建可读性问题和如何可能解决它们。

在 的 可读性，可以找到感兴趣的可读性工具。此工具使您可以浏览不同的字号和列宽，并通过一个 bookmarklet 应用任意网页所需的外观。

字体和版式可以有一个功能强大的效果，产品已经外观上。我们经常往往将视为静态和 utilitarian 字体，但它们可以执行大量种影响。’s 访问 webdesigner depot 您将在其中找到的视频中用来传达功能强大的消息的版式 18 示例值得。而您不可能有许多机会使用这种版式中运动，您将得到一种方式强大也可以是一个工具。

类型大小为可读性更重要的因素之一。通常是开发人员 （和设计人员） 是年轻和 don’t 考虑较旧的用户具有较少音符构想事实。鍥犳太小字体大小是公共的。选择较小的字体大小可以是网页没有问题，只要在设计支持通过浏览器 （假定的 ’s 可用） 或通过更直接的选项，就像在很多新闻和信息的其他站点上看到的放大。

字体和背景之间对比度也是可读性的一个非常重要的元素。没有在某些设计器为普通文本使用灰色而不是黑色的类型之间趋势。它看上去优雅，但可能很难阅读。的 图 1 中的比较灰色文本 （10pt，#AAAAAA) 与黑色版本 (10pt，# 000000）。使用灰色可以有效地为少量要降低的文字。在这种方式中使用，灰色可以帮助 unclutter 页。但对于主要内容使用灰色使内容难以阅读。

图 1 文本颜色和背景对比

在 的 图 1，我们将使用其可能知道使用可视化设计器来浏览而不使用实际的内容的版式和布局的 “ lorem ipsum ” 文本。它 ’s 可以有时方便审阅过程，它鼓励可视外观，而不是特定内容发表评论的人为您一个有用的工具。您将在 Lorem Ipsum 查找有用 lorem ipsum 生成器。尽管 lorem ipsum 设计阶段可能很有用的阅读占位符文本 isn’t 阅读有意义的文本相同。出于此原因如果您有权访问该内容您应该试一下之前正在最后完成可视化设计。

’s 可能在 HTML 中，创建一些真正起来的文本/背景颜色和有真正坏设计从 Web 上的示例。W3C 具有 建议的一种算法 用于确定是否两种颜色具有足够的对比度来很好地协同工作。

我们创建在 的 图 1 中两个示例，以及可怕的示例中使用不错小开源工具名为 设计器 Plaything图 2 。

图 2 的 差对比度损害赔偿责任可读性

您应该考虑其他可读性因素包括：

• 放置行之间的空间量。空间太少创建一个 cramped 的外观，而太多的空间将销毁段落的凝聚力。在 1.5 间距可能开始的一种很好的方法。
• 使该线的时间长短。硬扫描是非常长的行。如果您正在使用液体布局其中各行可能变得很长，一些监视器上，您可能需要考虑限制行长度不超过 80 到 100 个字符根据使用的字号。鍦 ㄨ 澶氭儏鍐典笅较短的行宽度是更好和 （如长理解报纸） 有多列的设计方案可以真正增强可读性大量文本时。

有用的排版资源是在 eBook 中的 的元素排字样式应用到 Web 。

发现的 Affordances

第三个区域中，您应该考虑在可视化设计使其便于用户发现 affordances。affordances 提示让您知道您可以执行一些操作类似于上一个链接加下划线的事情，以便用户知道该文本是可点击，或一个按钮的外观凸起，像可以被按下。

一般情况下，设计良好的 UI 对象应在其工作原理明显。三维和用于创建深度的假象的阴影是在指示用户可以按对象有效的原因是它们充分利用从现实世界比喻。我们十月列中撤回的 (” 获得内部您用户 ’ 打印头 的 ”)，我们谈心理模型。这是一个示例。用户了解如何按在现实世界中的按钮，以便他们将该了解转移到一个设计良好的图形表示形式一个按钮。

是可点击的屏幕元素上使用手形光标是另一种方法来发现一个 affordance。使用好它可以帮助 unclutter 一个屏幕，但使用 affordances 只是很明显，鼠标悬停时可以创建可用性问题。它可以是一个坏的主意，以使人们上移动鼠标来发现他们可以执行与一个接口，尤其是当它 ’s 主要行动。

与您使用该控件中的大部分，don’t 需要过于担心在 affordances 的 presented–a 滚动条通常是非常明确，因为它例如 ’s 一个已建立的约定的方式。但是，如果创建图形的热点来控制导航或其他操作，’s 重要以便用户知道单击的位置。如果用户 aren’t 熟悉 （有 ’s 的心理模型再次） 某些控件，您需要设计中非常清楚及其工作方法。最近可用性测试中我们找到大量用户 didn’t 理解如何使用 accordion 的控件。重新设计该控件来解决该问题。

以短可视化设计应传达用户可以交互的元素。该设计应使其明显什么操作有可能，并且结果将是。

支持通信

许多可视化设计器通过定义可视语言接近一种产品的设计。可视语言是一组帮助交流想法的设计原则。有几个方面来创建一个可视的语言。

认识和关联

可视语言的一个元素利用的感觉。视觉处理 isn’t 被动 — 只需观察您的眼睛的前面对象 — 但涉及选择性和判断某个活动进程。我们讨论了一些在十月列中的这些问题。感觉该专业称为 的 Gestalt 心理学 并且 ’s 值得熟悉某些如闭包、 相似性、 延续标记、 邻近，和图和地面的了持久度原则的研究 — 请参阅 的 Gestalt 原则。

可视语言的其他元素都建立在常见的心理关联，如以建议性质使用 organic 感觉曲线、 建议机器使用硬角度和行、 使用故意 disjointedness 创建某种意义上的 disturbance，和使用对称创建某种意义上的余额和 harmony。

可以被利用的其他关联包括诸如使用红色错误/停止和确定 / 进入的绿色的区域性 conditioned 的元素。但是，应注意这类关联可能有不同的 cross-cultural 或上下文元素。渚嬪红色具有正关联和汽车或包装的上下文中中国红色建议 sexy。

给定的方式常见红色/绿色 = 确定问题/连接是 ’s 令人惊讶的是公共查找非直观的方式使用的颜色。渚嬪我们遇到了在 论坛程序中的 图 3 条消息。我们特意进行文本 indistinct，以便您可以得到一个初始的印象，基于使用的颜色。

图 3 红色表示存在问题

虽然使用的颜色会建议问题， 的 图 4 显示了它实际上说。

图 4 的颜色与该消息冲突

此外请注意标题是一种较浅的颜色比文本中其标签。的 Figure5 中所示，通过更改消息框和标头的颜色来修改该邮件产生多一个更清楚通信。

图 5 绿色建议肯定消息

更改颜色为绿色是更好的可视化设计用于此用途和上下文。

信息体系结构

可视化设计还可用于加固尤其是可视的层次结构上的信息体系结构。渚嬪较大以及它们的标签的内容比粗我们几乎总是让标题。然后我们创建帮助阐明结构的内容的标题的层次结构。在文本内我们使用这类技术作为 的 加粗、 下划线italicizing ，从而能够 bigger 和较小强调或降低元素和定位有关它们的角色读取器。

颜色是另一个区域，可以被利用非常好的效果尤其是当谨慎使用。quince 的 一些色调图案 处理限制为只需两个或这样色调调色板，然后改变强度 （饱和度） 和要强调可视的通信的那些颜色的亮度。如果接口 isn’t 真正绘制出如调用操作的重要元素的颜色与已达到饱和，颜色可以还用来非常好的效果。

颜色还可用于拉入前景的更重要的项通过简单地 de-emphasizing 不太重要的元素。这是其中使用灰色文本，渚嬪可以将不太重要的资料推入背景，使什么左正面和中心的情况。

图 6 的 可视化设计 Supports 信息体系结构

情感和信任

可视化设计影响图释，并可影响应用程序或站点的可信度和信任 （或 mistrust） 的用户开发这个意义。渚嬪考虑 图 7图 8 ，每一个都具有相同的内容，但不同可视化设计中两个站点。

图 7 您是否信任此供应商吗？

您购买从一个位置，如下所示的电视吗？  您是否 innately 信任它吗？  我们的大多数具有会遇到什么似乎联机，shady 公司和我们不并向信任它们。考虑此备选设计：

图 8 相同的内容、 不同设计 Engenders 其他信任

这种设计是更专业、 可靠、 可靠和可靠。您是得多，得更有可能通过您的信用卡信息以这种站点交付。和在事实的方式数据表发生了特定信息检索到的 的 Stanford Web 信誉信息检索项目 的可视化设计这一方面。我们建议您阅读并按照他们的准则。不要命名具有名为 种设计 进一步探讨的美感产品接受程度上影响此区域中编写一本书。

重大的影响

可视化设计是深度外观比多得多。外观和感觉、 可读性和清晰度的各种控件可以使大量中产品已经可用性和用户体验差 ； 只需假象或个人的喜好不 ’s。

好的可视化设计有助于用户确定哪个屏幕元素是 affordances，所以它直接影响与产品交互的易用性。可视化设计还支持使更轻松的用户可以处理所传达信息的信息结构。可视化设计可以 evoke 中用户包括通过照片和插图，和更悄悄通过整体外观的图释。除了图释，创建或破坏的信任某种意义上，可以帮助可视化设计。以短时某些开发人员消除可视化设计为不重要，假象或红唇，它可以有重大影响。

因为它 ’s 如此强大工具，’s 开发人员可视化设计的看法和本身教育其多职能的方面，如我们有涉及此处的重要。我们中的少数具有创建高质量的可视化设计技能和 ’s 通常最佳提早一专业人员。但是，无论您自己或与其他人的工作，您可以执行可视化设计，’s 务必了解基础知识。好的入门知识是 Alex 白已经 的元素的图形设计：空间、 一致、 页面结构和类型 (Allworth 出版社，2002年），关键原则进行布局的内置大约七种设计组件。

除了有关设计，查找在读取许多已建立示例良好设计 （尝试搜索获奖入选网站） 的设计以及与您会遇到和思考是很好。分析它们算出为什么良好设计的。如果您发现不太引人注目的设计，考虑一下为什么应该得到提高，以及如何。好的设计以获得更多的暴露程度，越您将无法识别它甚至执行它更好地自己。您可能永远不会成为专业可视化设计器，但您将与它们更好地工作。和不可避免地时有进行工作，您将执行更好的作业。

可视化设计真的可以帮助您通过创建对您的用户和风险承担者最可见的元素中的卓越制作好的产品。

**Dr。**Charles Kreitzberg 是首席执行官的 Cognetics 公司，提供可用性咨询了和用户体验设计服务。他热情正在创建的直观接口，吸引并 delight 同时支持产品已经业务目标的用户。Charles 居住在中央他 moonlights 作为执行音乐家的新建 Jersey 中。

Ambrose Little* 与妻子和四个孩子也居住在新泽西中部。他从事软件设计与开发已经十多年了，是受人尊敬的 INETA 发言人和 Microsoft MVP。最近，他的技术设计从切换到设计人员和现在是 Infragistics 一个用户体验设计器。*