四种影响网站可用性的网页设计例子

  本文是雅各布·尼尔森开办的互联网设计可用性应用专业网站上登载的一文,用四个失败的例子讲述了四种网页设计上常犯的错误,这四个例子很好的解释了怎样的设计会使网站的可用性及用户体验变得一塌糊涂。相信对喜欢网页设计和关注网站可用性用户体验的朋友会有帮助。

  不合适的内容,坏链接,糟糕的导航系统,不清楚的分类……哪些最影响商业成绩?以下的例子里,不合适的内容荣列“浪费企业最多金钱”榜首。

  每年,不论在专业研究还是日常生活中,我都看到几千个设计上的错误。就像中了丹·诺曼的诅咒一样,半数的网页设计让我看了就感到生气:为什么人们不能按着丹 20年前就告诉他们的那样去做?

  然而,网页设计者们也没有按照我 13年前说的去做,这就是让我大为吃惊的原因。下面罗列的几个近日遇到的最蠢设计算是我最近的小小收获。

没法提供信息的链接:《纽约时报》

nytimes.com 网站在每一篇文章下面都放了一个链接:

网站可用性-研究
点击可查看清晰大图

  谁会去点这个“下一篇商业文章”链接呢?除非是某些对“第 19篇文章”特别感兴趣的,否则没有几个人会去点击它。

  除了数字以外,点遍这些链接看不到任何有用的信息 — 这种设计早在 12年前我就在对 Slate.com 的评论中批评过了。链接需要含有能帮助人们了解如果点击过去能链到什么地方的信息。人们没有时间每个链接都点一下去看到底可以链到什么地方。

  《纽约时报》可以用统计学来为他们的设计辩护:也许不像我非难他们的那样,这种含糊的链接确实可以赢得几次点击。毕竟,如果你拥有上百万的用户,就算最蠢的设计点子也能排上点用场。就是这种设计哲学导致了类似时代广场这种冗长的网站,给人类感官以无情的打击。

  问题在于,所有多余的元素都会损害网页上其它设计的效果。当你向人们推销那些无关紧要的链接的同时,也是在告诉人们忽略那些重要的链接。

  (补充:《纽约时报》重新设计了他们的网站。现在,文章下面的链接改叫“更多商业文章”。好了一点,但还不够好。我还是保留我的批评,因为这个愚蠢的设计他们用了长达一年之久 — 无论如何就算在他们对它进行了“部分的”修改之后,你仍能从他们的错误中学到东西。)


失控的模拟:订制机车

  机车商 specialized.com  用博物馆的陈列作为自己悬挂系统的类目页样式:

网站可用性-设计
点击可查看清晰大图

  老实说,我喜欢用机车部件做的“鲸鱼骨架”。但在这样一个模拟的 3D 环境中浏览,想要看清各种悬挂系统的结构却痛苦异常。

  3D 导航几乎每次都搞砸。难以操作,没法像 2D 界面那样做很多选择,而且运行速度很慢。

  用户可以把对某个现实环境现有的知识运用到模拟环境中,因此使用模拟环境有时能让用户界面变得容易理解。本例中,尽管你知道怎样参观自然历史博物馆,但也不能帮助你更好地鉴别机车部件。使用模拟环境设计的网站几乎总是做过头,最终导致可用性的降低。犹如迷惑人的魔鬼,模拟环境让设计团队的注意力从网页本质的该展现给用户的实际内容上偏离开去。


不合适的内容:林肯中心的爵士演出

  当在纽约参加我的可用性讨论会时,我想带演讲人们晚上出去听听爵士乐。下面是我在林肯中心爵士演出的网页上找到的信息:

网站可用性
点击可查看清晰大图

  都有哪些信息呢?网页提供了音乐家们的名字和一张首席长号手的照片。就这些!没有演员简介,没有演出曲目介绍,没有乐评,没有链到某个乐评的链接,没有音频片断让你试听乐队的演出。

  公平的讲,jalc.org 给出了一些演出的音乐片段。样本音乐片段显然是与音乐相关的网站利用多媒体的一个手段;用音频片断说明音乐比用文字要容易得多。在大都会歌剧团的网站上听上一段音乐片段,你在一分钟内就能明白晦涩的谭盾歌剧和生动的莫扎特古典音乐之间的区别。

  然而,上面的网页仅仅提出了个充满希望的请求(大字体的那行文字),希望人们在对演出一无所知的情况下“下预约”。除非你对乐队足够了解,否则怎么可能?!

  不过,该网页也提供了几个不错的功能,比如支持转发的邮件功能和给其他移动装置用的纯文本格式。但是,要是能提供更多内容就更好了。


卖弄的装饰性设计:柯里斯托弗·诺曼巧克力

  吃克里斯托弗·诺曼巧克力是令人愉快的事情,浏览他的网页却味同嚼蜡。当你从主导航菜单选择了一个类目以后,你看不到一个罗列着同类产品的页面。取而代之的是一幅卖弄的画面,就像下面这个“几何与水果”:

网站可用性
点击可查看清晰大图

  一般用户会以为这个类目下只有这两种产品,而且如果对页面上的梨或者多米诺盒子不感兴趣,他们会立即离开。而实际情况是,用户要点击进入画面之后,才可以看到有完整产品列表的那个真正的类目页面。

  用这种卖弄的画面做网页主页糟糕透顶,不过用户最多只遇到一次这种情况。如果每个类目页面都用这种设计,用户就必须点过很多多余的页面才可以看到所有的产品。


差劲的设计的商业代价

  这些差劲的设计理念让网站经营者付出多少代价?

  《纽约时报》也许是付出代价最少的;大多数用户都会忽略那个没有意义的链接。同时,当然了,其它一般的链接得到了机会:在同样的地方,报纸可以提供一个链到和现在文章相关的其它页面的链接。能够从头到尾读完文章的用户很有可能去点击那个链接。因此,如果更好的利用该位置,或许网站有可能赢得额外 2-5% 的浏览量。

  我断定那个内容糟糕的爵士演出网页损失最大。我们的产品页面用户测试报告(诺曼·尼尔森集团报告:《产品页面可用性的电子商务用户体验指导》)显示,当一个网页回答了用户对该产品的疑问时,他们极有可能作出购买的决定。几乎可以担保,只有那些对维克里夫·戈登极度忠诚的粉丝们,才会在没有提供任何实质信息的网页上预订林肯中心的那场演出。

  我预测,如果加上更多信息,该网站能够卖出至少 5倍的票给那些平常观众们。在《提高可用性后的投资赢利》研究中,我们往往发现 1000% 甚至更多的销售增长。所以,加上有意义的内容,甚至可以让该网页成为能从那些非粉丝手里大赚利润的赢利法宝。总体销售额能够增长多少,就要看该演员的狂热拥护者的数量和那些仅仅有时喜欢听听爵士乐的观众数量之比。我认为,第二组人(非粉丝)的数量如此众多,如果网页内容组织得好,可以带来销售爆增。

  其余两个网站付出的代价属于中间级别。对于大的网站来说,用笨拙的导航系统就像是给自己开了个死亡处方:如果要从超过1万个产品中找到自己想要的东西,用户是无法忍受浏览那些与目的分裂的过于卖弄的页面,或是那些过分虚拟的页面。但如果销售的产品数量不多的话 — 像克里斯托弗·诺曼和订制机车 — 积极的用户可以自己克服导航带来的麻烦。如果网站销售的产品很少,用户是不太可能在里边迷路的。

  当然,消极用户一旦感到迷路就会立即离开网站。不管网站多么小,愚蠢的设计总会让他们损失金钱。


英文原文:Four Bad Designs
翻译:nicomm

2 Comments

发表评论

  • 100 free sex chat
    2015-07-15

    Great goods from you, man. I’ve understand your stuff previous to and you are simply too excellent. I actually like what you’ve obtained right here, certainly like what you are stating and the way in which during which you are saying it. You’re making it enjoyable and you continue to care for to stay it sensible. I cant wait to learn much more from you. That is actually a terrific website.

  • pengxuelou
    2011-07-21

    从这几个例子里,我十分肯定的说,百度身边的改版相当的失败。
    甚至,它整个网站定位都让人不清楚到底是什么东西了。