高效率网页设计的十大军规

原文出处:http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
版权声明:本文版权归原作者所有 译文仅供国内读者参考
    决定一个网站成败有时候并不是样式设计,而是可用性和易用性。对于一个页面的访问者来说,他所做的只是点击然后决定下一步要做的事情,因此以用户为中心的设计思路已经成为了业界定义成功设计的事实标准。当然,如果没有任何提供给用户的功能,这个标准也不复存在了。
    我们不打算深入探讨关于可用性的实践细节(比如搜索框应该放置在页面的什么位置)因为已经有相当多的文章就此做了深入的阐述,我们将重点介绍一些核心法则、启示,合理的使用这些法则,能使你的网站更加成熟,展示的内容更容易让用户理解。
请注意:

你可能对这两篇我们之前的文章感兴趣 10 Usability Nightmares 和 30 Usability Issues 。
我们会在后续的文章中继续讨论关于可用性的问题,您可以订阅我们的网站  subscribe to our RSS-feed 。

    为了能够正确的使用这些法则,首先我们需要知道用户是如何和页面进行交互的,用户是如何思考的以及用户的常见行为是怎样的。
用户如何思考?
    基本上,一个网站的用户习惯和一个商店的顾客用户习惯没什么区别。用户快速地浏览每个新页面,从页面文字中找出第一个使他们感兴趣的或者和他们正在寻找的东西类似的链接并点击。因此,事实上页面的大部分内容,用户根本没有注意过。    用户总是在那些看上去可能的链接中寻找他们感兴趣并能点击的链接,然后点击。如果内容不是他们想要的,他们会立刻点击“后退”按钮并继续搜寻他们想要的内容。

用户偏好质量和可靠性 如果一个页面提供给用户以高质量的内容,用户将能够接受页面上的广告和站点的设计。这就是为什么有些站点内容质量很高,但是设计的很糟糕,依然有着很高的流量的原因。内容远比支持它的设计来的重要。切记。
用户并不会细读,他们是浏览 分析一个站点,用户始终在寻找一些锚记(译注 fixed point 内容节点)来作为页面内容的导航员。 

                      (图1 图上的热点标示了用户的阅读集中在句子的前半部分)

网站用户是急切并强烈要求迅速满足需求的 非常简单的法则:如果一个站点不能满足用户的期望,那这个网站的设计师就是不称职,这个公司也将失去很多挣钱的机会。认知负载越高,直观导向越少,用户越是会放弃该站点来选择另一个网站来代替。
用户并不会做最佳的选择  用户不会为了搜索他们想要的东西而去寻找最快速的方法。他们不会从上至下的一段段看下去来寻找他们想要的东西。取而代之的是能够满足他们需求的第一个选择。当他们看到第一个看上去能够满足他们需求的链接,他们就会在第一时间点击。所以,从全部内容中找出最优的链接耗时太多,也太累,寻找满足需求的看上去更有效率。[video]  

                    (图2 图3  这两幅图片展示了线性阅读在网页浏览中是不适用的)

用户跟从的是他们的直觉 大多数情况下,用户不会认真去看设计师提供的内容,根据Steve Krug(Don’t make me think 作者)的说法,主要原因是用户根本不在乎这些。
用户希望拥有对浏览器的控制 用户希望能够控制他们的浏览器,并且信赖从始至终提供一直内容展现形式的网站。比如,他们不希望自动弹出的窗口,和随时能够通过“后退”按钮回到他们先前浏览过的网页,所以,一个非常重要的准则就是“不要在新窗口打开网页”。(译注:这点上,中国的用户的操作习惯恰恰相反,比如谷歌就不得不改成在新窗口打开,另外,在web标准中<a>标记的target属性是被废弃的,也是基于这个原因。)

  
1. 别让我思考
     根据Krug的可用性第一军规,网页必须是清晰且自说明的。当你开始创建一个站点是,你的首要职责就是让网站摆脱“问号”—— 用户的决定应该是在赞成,反对以及替代者中自觉地做出的选择。         如果一个站点的导航和站点架构不够直观,那这个网站中的“问号”将会越来越多,并且会让用户很难理解这个网站如何工作和如何才能够A点到B点(即功能的导向很模糊)。一个拥有适当的可视化导向线索和很容易理解的链接的网站结构,将能有效的帮助用户找到达到他们目标的路径。
   
    让我们来看一个例子 Beyondis.co.uk 的口号是”beyond channels, beyond products, beyond distribution”。 这是什么意思呢?因为用户多数情况下采用“F”-pattern 来浏览一个网页,这3句话将是用户在这个页面上第一眼看到的内容。尽管该设计本身非常的简洁而且直观,但是这个页面的主题是什么,用户必须去网页中寻找答案。这是一个完全没有必要的“问号”。对于设计师来说,必须让这样的问号数量为0。将左右页面的内容互换一下,将大大提高可用性。   
     ExpressionEngine 这个网站使用了和Beyondis类似的页面结构,但是避免了前者存在的“问号”。而且,网站的标语本身具备了功能性,用户可以直接在这里尝试提供的服务和下载试用版本。    通过让用户很容易就能理解系统提供的内容,将有效降低用户的认知负载。当你有过一次成功经历后,你可以和用户沟通,看看系统给用户提供了什么,是什么让他们受益。如果用户不能在你的网站找到他们想要的内容,他们是不会使用你的网站的。