以访客至上的交互设计（四）

阅读过Steve Krug 所著的《Don't make me think》-访客至上的的网页设计秘笈，从中学到了不少交互设计方面的知识，在这里和你们分享。

以前写过一章，“咱们是如何使用Web”的，今天咱们来讲一下广告牌/banner设计的要点。

上次讲了第一个：在每一个页面“创建清楚的视觉层次”和“尽可能利用习惯用法”

此次继续：把页面划分红明肯定义区域，明显标示能够点击的地方，下降视觉噪点。

 

广告牌设计101法则

未扫描设计，不为阅读设计

 

若是用户们都是一览而过，那么，你须要注意如下5个重要方面，来保证他们尽量地看到了，并理解了你的网站：

l  在每一个页面创建清楚地视觉层次

l  尽可能利用习惯用法

l  把页面划分红明肯定义的区域

l  明显标识能够点击的地方

l  最大限度的下降干扰

 

 

 

把页面划分红明肯定义的区域

 

理想状况下，用户应该能在任何设计良好的网页上玩Dick Clark的25000美圆金字塔游戏（给订“水管工人用品”的类型，游戏一方将提供“扳手、切管机、防脱落裤子…”来让对方猜出这个类别。）在网页上上四处扫视以后，他们应该能指着页面上的不一样区域说出：“这是我在这个网站能进行的活动”，“这是到今日头条的连接”，“这是这个公司销售的产品”，“他们正在向我推销的东西”，“到网站其余部分的导航”。

                       

把页面划分红明肯定义的区域很重要，由于这个可让用户很快的决定关注页面的哪些区域，或者放心的跳过哪些区域。对网页扫描所进行的几项初始眼动研究代表，用户很快就会肯定页面哪些部分包含有用信息，而后对其余部分看都不看——就像他们未曾来过同样。

 

明显标识能够点击的地方

由于人们在网络上所作的大多数事情就是找到下一个地方点击，那么明确的标识哪些地方能够点击，哪些地方不能点击，这很重要。

 

例如，在议员Orrin Hatch 2000年落选总统选举时的主页上（Orrin Hatch 先生在可用性历史上至少贡献了一个脚注，由于他是（据我所知）第一个让网站可用性成为影响选举问题的总统候选人。在2000年大选的第一次共和党候选人电视辩论上，他对 乔治W.布什 说：“我得说，州长先生，和你的网站相比，在个人网站上很容易就能找到全部的内容，{轻笑}，你当网站至关难用，对用户不友好”（他的网站确实更容易使用））的确呈现了不少内容，可是什么地方是能够点击的，仍是全都不能点击让人并不清楚。该页面上有18个连接，只有两个经过其外观能够明确知道可以点击：一个是标有“Click here to CONTRIBUTE！”的大按钮，另外一个是带下划线的文字连接“FULL STORY”。

 

其余链接都是彩色的文字。但问题是，这个页面的全部文字都是彩色的，因此没法一眼看出哪些是连接。

 

这并非很严重的问题。我相信，用户肯定点击哪些并不会花很长时间，但若是你迫使用户去思考某些经过下意识就能够知道的东西，例如什么地方能够点击，那么你彻底是在浪费每一个用户对新站点有限的耐心和好感。

 

www.orrinhatch.com

（下图为2000年选举时的网页）

 

 

（下图为如今的网页）

 

 

 

另外一个反面例子就是drkoop.com（C.Everett Koop 的健康站点）上的搜索框。

 

每当看到它的时候，队会让我思考，由于执行搜索的按钮看起来实在不像按钮——尽管它提供了两个很好的视觉暗示：包含“SEARTH”(搜索)字样，这是对于搜索按钮来讲极其完美的两个用词之一（另外一个是“Go”，可是只有在你已经将“搜索”用在输入框标签上的状况下。），并且他是搜索输入框旁惟一的目标。

 

他甚至还使用了一个小小的三角箭头，这是Web习惯用法“点击这里”的指示器之一，可是箭头所指的地方在文字以外，彷佛表示它是指向一个别的东西，而习惯用法应该是指向可点击的文本。

 

若是把箭头移到左边也许能除去我脑壳中的问号了。

 

 

下降视觉噪声

让页面不易理解的一个最大的缘由是视觉噪声，实际上有两类视觉噪声。

 

1. 眼花缭乱。一些网站页面给个人感受就像在 PCH（Pupblisher’s Clearing House）的来信中当心穿行，生怕不当心粘错了表格订阅杂志同样。（PCH 一年一度给不少人发送订阅普通杂志的信件，在这些信件里也有供填写并参加抽奖的位置，但要看过搜有的杂志才能找到中奖规则，不当心就会填错，误定了杂志。）

若是页面上全部的内容都在嚷嚷着但愿获得个人注意，那么效果可能拔苗助长：满眼都是促销信息！满眼都是惊叹号和抢眼的颜色！一大堆大喊大叫正在进行。

 

1. 背景噪声。有些页面就像是在开鸡尾酒会同样。虽然没有一个地方会形成过度的干扰，可是这些很小的噪声太多也会让人以为厌烦。

 

例如，MSNBC的菜单有效而聪明的把用户快速导航到站内的新闻故事处，可是这些菜单项之间的建个线带来了不少噪声。把这些线变成灰色会让这些菜单更容易扫描。

 

 

 

下图是对比：

 

 

用户们对复杂性和干扰的容忍度不同，一些人不在意眼花缭乱的页面和背景噪声，但不少人在意。当你设计页面的时候，这样作多是一个好方法：先假定全部内容都是视觉噪声，除非获得证实它们并非视觉噪声。