什么时候在 Web 应用程序中适合使用 UI 吸引眼球？ [关闭]答案

【问题标题】：When is UI eye candy appropriate in a web app? [closed]什么时候在 Web 应用程序中适合使用 UI 吸引眼球？ [关闭]
【发布时间】：2009-06-09 04:09:42
【问题描述】：

首先从一些上下文开始，每当我使用 Windows 计算机时，我非常恼火，它的设置被调整为“最佳外观”而不是“最佳性能”，以至于我本能地关闭了所有淡入淡出、过渡、动画等。立即地。在它改变之前，我几乎无法集中注意力。

但是，当涉及到我的网络应用程序时，我会非常偶尔添加一些“眼睛糖果” - 可能是轻微的过渡，因为即时过渡似乎会分散注意力或太突然了。

我觉得自己像个伪君子。我从不在台式机上选择较慢的 UI，当我为家人、朋友和客户更改桌面设置时，没有人要求切换回旧的、较慢的方式。

那么我是否有偏见，或者是否有一些合法的经验法则可以确定何时真正合适？

在我目前的困境中，我使用带有淡入的 Javascript 分页器在 0.75 秒内显示下一页的内容，因为如果我不这样做，更改会导致微小的闪烁（让我分心），但也许如果我坐在用户椅子上，我会尖叫，“把页面给我看！”

想法？有人读过这方面的好书吗？

编辑：我应该提到，在我当前的示例中，如果我愿意，下一页几乎总是可以立即显示。当用户在当前页面上时，我预取下一页。这就是使我喜欢这种“眼睛糖果”的原因之一。我可以做得更快，几乎对用户没有任何影响。

第二次编辑：感谢所有建议和考虑。有几本书我很期待阅读。我将 ui-patterns 网站标记为答案，因为它对这类问题最直接有用。也没有人提到YUI design pattern library，，但后来我遇到了。这是一个极好的资源，甚至地址this issue。另外，当我处于这个特定示例的那个阶段时，我绝对打算寻求用户输入。

最后，我知道我最初的推理没有考虑到我对 Windows 和我的应用程序的熟悉程度。由于我已经习惯了 Windows 桌面，所以我现在只想把事情做好。也许早在我第一次使用 xp 时，那些过渡对一两天都有帮助。（我不记得是这种情况，但也许是这样。）我的网络应用程序中的转换可能也是如此如果它经常使用。很快我（和我的用户）就会厌倦我添加的任何眼睛糖果，即使它非常简短。我去看看。

谢谢大家！

【问题讨论】：

了解您的受众。在我的工作中，我需要偶尔（谢天谢地）使用具有淡出/淡入的 Flex GUI。我在家工作并通过 VPN + RDP 访问应用程序，因此像淡出这样的东西需要将近一分钟才能呈现。很痛苦。
根据我的个人经验，0.2 秒足以减少闪烁，同时仍然美观且活泼。

标签： ajax optimization user-interface

【解决方案1】：

没有简单的答案The Design of Everyday Things 是开始研究简单设计的好地方。像 SO 这样具有“干净”外观并带有一点额外闪光（比喻而不是 adobe 类型）的网站似乎是最好的。

MSDN 并不是一个很好的起点……

更新 - 正如 John 在 cmets 中指出的那样，MSDN 的低带宽视图实际上相当不错。好电话John Weldon我以前从未看过它（可能永远不会看过）。谢谢！

【讨论】：

我通常同意MSDN，但作为一个严肃的资源，他们的低带宽视图实际上非常好。你看过低带宽视图吗？
根据亚马逊评论，这看起来是一本非常有趣的书。我期待着阅读它。谢谢！
+1 是的，是的，是的。这本书是人性化设计的最佳范例之一。现在就去买吧！

【解决方案2】：

我发现UI Patterns 在做出 UI 决策时非常有用。

【讨论】：

非常好的网站 - 我以前从未见过它，但我点击的第一个随机链接 (ui-patterns.com/pattern/InputFeedback) 提供了很多信息和洞察一个非常具体、非常常见的任务 -谢谢！
一个网站，对我来说，是 UI 反混乱模式的典范。讽刺。
我已经找到了 YUI 设计模式库 (developer.yahoo.com/ypatterns/index.php) 并在第二次编辑中提到了它。它类似于具有干净布局和更多信息的 ui 模式。

【解决方案3】：

您是否必须向某人展示您的产品才能进行销售？或者它是一个独立的站点。我认为，如果您正在演示要出售的产品，那么眼睛糖果可以帮助人们记住您在卖什么。

看起来圆滑会让人们认为你的产品更“专业”。

【讨论】：

【解决方案4】：

我真的很喜欢 MSDN 支持的新的“低带宽视图”。我想把它想象成网站上更常见的标准。

这样，我可以选择可能在不同时间发生变化的用户体验。

【讨论】：

Gmail 有一个基本的 html 模式。 dilbert.com 有一个 dilbert.com/fast 我认为 dilbert.com 上的“Unix/Linux”链接链接到它很有趣。

【解决方案5】：

但也许如果我坐在用户椅子上，我会尖叫，“给我看看页面已经存在了！”

我认为确定您的过渡是否有用的最简单方法是询问您的用户。对于您想用来改善体验的任何 UI 技术也是如此。

我认为经验法则会很困难，因为不同的应用（无论是否基于网络）有不同的受众、不同的使用期望等。

【讨论】：

【解决方案6】：

动画还有助于将用户的注意力吸引到屏幕的某个部分。仔细使用，它们可以使系统更易于使用。 Windows 中的一些眼睛糖果只是为了减慢速度并迫使用户等待。在 Windows 中滚动菜单的最大问题是我已经知道我在寻找什么以及在哪里可以找到它。菜单只是增加了延迟。这在您的网络应用中可能不是真的，因为用户正在探索您的系统。

如果系统具有吸引力且呈现良好，它会让用户心情更好，让他们更有信心解决问题。当问题出现时“我该如何做 xyz”，他们会发现问题更容易解决。将时间和精力投入到使 UI 更漂亮将通过更好的用户体验和更好的营销形象获得回报。它还让您为在系统上工作而感到自豪，这对于拥有出色的产品至关重要。优秀产品的标志是开发人员自己经常使用的产品。

【讨论】：

【解决方案7】：

真的只有一个真正的规则......知道答案的唯一人是您的潜在用户。因此，您需要从潜在用户那里获取这些信息，以便尽可能了解他们对您网站的期望。

如果它是一个已经在开发中的产品，您总是可以去获取一些用户并进行测试。

另外，重要的是要注意：即使我们假装 Web 应用程序与应用程序相同......它们不是，至少在我们的大脑中是概念上的。人们期望应用程序和 Web 应用程序的工作方式彼此不同，即使只是微小的差异。使用您的分页示例。很有可能，如果您编写了一个带有分页的完整应用程序，您可能会期望一个非常快速的转换。但是，因为它是一个网页，所以你的大脑中会出现一些标记。

编辑：如果您想阅读一些有关交互设计的书籍，您可以尝试 Alan Coopers About Face 2.0、Lucy Suchman 的定位动作或搜索诸如 usability.gov 之类的内容。

【讨论】：

【解决方案8】：

在亚马逊上查看了这里提到的其他一些书籍后，我还遇到了"Don't Make Me Think"。虽然我没有读过这本书，但我阅读了很多评论和摘录，看起来非常好，所以我将它添加到列表中。

【讨论】：

这本书，除了“日常用品的设计”之外，在我的书架和浴室里都占有一席之地 :) 如果您正在寻找一本严肃的书，我强烈建议您阅读它网络可用性简介。

【解决方案9】：

我喜欢网络应用效果和眼睛糖果。只是不要让它“矫枉过正”:)

【讨论】：

【解决方案10】：

基本上，如果您的 Web 应用程序是独一无二的，并且您认为自己不会有太多的竞争，那么完全没有必要花大价钱，因为人们无论如何都会使用您的服务（因为它是唯一的）。但是，如果你有很多竞争要处理，一个好的设计和漂亮的动画肯定会吸引更多的用户，因为你需要一些东西来打动他们。

一般来说，只要它不损害可用性，就去吧。 :)

【讨论】：

如果你的市场是独一无二的，你可能仍然需要说服用户他们需要你的产品。您还需要让他们相信您可以可靠地提供您声称他们需要的服务。
是的，确实如此，但您根本不需要太多吸引眼球的东西。只要您的应用程序看起来不像完全废话，就可以了。但如果你要与一些大玩家竞争，你需要一些东西来引起人们的注意。这就是 sliderocket.com 流行的原因。
除了 Google 没有任何吸引眼球的东西（在搜索上）并且以里程数获胜。我使用了带有动画的搜索引擎。我发现它们缓慢而令人讨厌。请记住这一点。
见我回答的最后一行。在搜索引擎的情况下，眼睛糖果会损害可用性。但并不是每个 Web 应用程序都是搜索引擎，而且大多数应用程序都可以毫无问题地使用此类效果。

【解决方案11】：

这取决于您要通过该网站实现的目标。我们已经为需要吸引眼球的品牌制作了一些网站，以牺牲性能为代价。

【讨论】：

【解决方案12】：

UI 吸引眼球非常重要。但绝不应该妨碍良好的用户体验。有一种观点（这种观点正在慢慢改变）认为拥有视觉效果会带来良好的用户体验。

应该首先设计用户体验，然后添加闪光，永远记住在设计中“少即是多”

【讨论】：