前车之鉴 -- 那些好看不好用的网站案例

译者 david.wxj

尽管"外观服从于功能"这一观点备受争议却被广泛的认可。在设计网站方面，通常是指网站功能的易用性和是否可以方便访客完成自己的目标。

在接下来的案例中，我们将展示那些设计得漂亮但可用性差的网站。可用性差的原因包括：布局混乱不堪，载入速度过慢，导航识别性差。尽管这些网站在视觉设计上很有特色，但很不幸他们可用性的确很差。让我们研究下这些失败的案例避免出现在自己的设计中出现易用性差的情况。    

杂乱无序的设计      

我看到的是什么网站？我要在那里点击？接下来我该怎么做？设计的杂乱无序是给访客最糟糕的印象。访客不知道设计师所要表达的意图(因为都被隐藏在了杂乱无序的设计中)，从而导致访客在未做任何动作之前就要关闭该网页。

Creative With aK

导航信息超载！不仅我们不知道要看什么，甚至都不知道应该点击那里。通过鼠标扫描方式查找可点击区域无助于提升网站的易用性。并且，整个网站的载入过程连个进度条都没有。而且更令哥震惊的是，还要花时间搞清楚必须关闭欢迎的窗口才可以点击页面其他地方。栏目里缺少滚动条的内容让哥对藏在里面的内容顿时失去了兴趣。

Marc Ecko

Marc Ecko是一个拥有数不清楚生意的成功商人，貌似他也希望许多人了解这些生意。问题是，他展示了太多我们甚至不知道从那里开始阅读页面的内容，该网站还使用了飘忽不定的横向滚动条。坑爹啊！找到所需的内容的确需要相当长的时间。

Content Of

即便是已经阅读"关于我们"页面并文字里有许多的随机链接，哥还是很疑惑这个页面到底是不是打酱油用的。最合适的猜测可能这是个人介绍页面，而乱七八糟的链接和找不到导航栏，哥只能带着困惑和不解离开这个网站。    

There Studio

有一半的圈圈看上去是可以点的，实际上却不能。如果拖拽一个圈圈，它会跳到其他圆圈中去。当然，这些坑爹的圈圈动画效果充分的体现出公司比较xxx的理念，这明显有些过度了嘛！用58秒等待一个动画的确太漫长了。并且，如果你想需要更多的圈圈，点击或拖拉空白区域就会出来，同时也带给访问者更多迷惑。    

加载问题

Coke Light

这是另一个很糟糕的情况，flash设计师强迫用户看介绍动画。没有跳过按钮的介绍动画会让访问者在进入网站前就放弃访问。点击又没立即响应的按钮或是视觉上不像是导航栏的设计将导致访问者失去兴致继续访问即便是足够漂亮的网站。该网站花费许多周折浪费访客的时间才能回到首页将给人感觉进行次"世界之旅"。在网站地图里需要查找隐藏在里面的许多泡泡。

Desing Sul

哥从未见到过加载问题如此之杯具的网站。多重加载元素，即使你看到了网页内容实际上还有东西要再次加载。也没有迹象可以表示加载结束了，这样做也让哥非常的困惑不解并且该网站还不易使用。事实上，找到阅读的内容也需要花些功夫，而网站在牛奶卡通包装盒所做的效果与内容根本没有毛关系嘛。

Nicola Waibeck

进入网站要花很长时间痛苦的等待，如果接下来打开的网站足够漂亮，易用性再好些也算是能接受的。可惜，打开页面后哥彻底傻眼了，里面每张图片还要继续下载，我去！并且还要强迫看模糊图片。更好的改进是，加载图片时有加载进度条示意正在加载中。如果访客的带宽足够也许问题还不算严重。但如果不是，那么访客很快就会变得抓狂起来。还有那个返回按钮不够明显，这也让哥觉得这个网站很杯具。    

导航栏  

对于那些信息量大或是栏目结构复杂的网站来说，良好的导航显得尤为重要。你可以想象没有地图的情况下开车或在没有标签的杂货铺里购物有多么困难。导航栏会告诉我们应该去那里，而在下面的案例中的网站导航几乎没有提供任何有用的信息。你甚至可以考虑带个指南针了，因为这些案例实在是太容易让人迷失方向了。

EContent

经过漫长的加载后，网站需要访客点击"进入"按钮。好吧，我们点它下。尽管网站上有坨快捷菜单，但很不幸的是这坨菜单并没有引起访客的注意。并且，访客需要将鼠标挪到图片上才能查看子类目。而这些导航按钮需要访客非常仔细的查找才行。      

Prism Girl

易用性差的网站通常都有同样的通病。当哥在这么漂亮的网站上看不到导航时，就不得不用鼠标乱戳的方式查找链接。这个网站很漂亮但也非常复杂，复杂到我们需要花费一个小时来找链接，但你可能都猜不到点击跟随鼠标的图标方式进入网站。并且，这个网站除了令人印象深刻的设计之外就没提供个毛内容出来！

On Toyota's Mind  

缓慢的加载导致访客不明白接下来要做点啥：导航栏的视觉不清晰与难以发现的返回按钮问题一样严重。哥很疑惑：当访问该丰田网站时到底要传递给访客什么样的概念呢？

Theologos

无跳过介绍的按钮。无视觉清晰的导航栏。加载很慢。而牛x的是页面与播放的背景音乐竟然是分开的。当网速快的访客访问网站时，网站的动画都可能引起访客的反感。

构架与目录问题  

你的网站加载情况良好，你知道访客来你网站想做什么，你的网站有固定的导航。但访客一旦进入你的网站却无法知道你的目录结构。就好比，要吃肉就应该去肉食店，而不是牛奶店。很不幸的是，有些网站就是这么干的。

Self Titled

隐藏的菜单与类目不清楚导致网站导航难以使用。当访客想找到他想了解的类目将会是非常困难的。

Vanalen  

该网站的类目由竖条折叠而成。当哥点击时却提供了非常少的信息。如果是第一次访问该网站，可能需要花点时间才能找出你需要的东西。

GripLimited  

  该网站的确告诉我们要"点击与拖拽"，但这个区域看上去更像是份海报，我很怀疑到底会有多少人知道那里是可以点击的。该网站也的确的意识到了上面说的这一点，于是在页面顶部创建了菜单。但有多大的几率会被人看到呢？

Kyle Tezak  

  这是另一个视觉效果很好但由于糟糕的用户体验会引起访客不爽的案例。网站上没有固定的导航栏，而只是浮动的头部。如果要找到联系方式，需要到左下角点击"Information"（信息）。使用更传统的方式将有助于提升访客体验：例如，放一个电子邮箱或是将文案改为"contact information"（联系信息），亦或是在页面底部添加联系方式。这是典型的通过细节提升用户体验的方式。  

可视化与滚动条  

即便是网站布局并不混乱，导航也十分清晰。但如果关闭了鼠标交互效果或页面不能滚动了，那也就意味着无人可以看到这些内容了。原本可见的元素因为变为不可见会导致访客直接离开你的网站。

Real Casual  

除非你用鼠标点击不同的区域，否则可点击元素是根本看不见的。点击某个区域后又是长时间的等待，点击后额外增加的效果也在考验访客跳出网站的几率。

Lego Click  

网页的滚动通常是从左至右，从上到下。而这个坑爹的网站却是从网页底部开始。加上不能关闭的关闭按钮和其他些小问题，你会觉得乐高这个网站很莫名其妙（虽然设计很漂亮）。

Journey to Zero  

该网站非常巨大，但事实上你打开后根本就不可能知道这个情况。拖动滚动条后也没有提示信息，就离开内容区域。如果你拖拉滚动条太快甚至都可以跑出网站设计部分。而且，回到内容部分也很麻烦。该网站的设计好但也太难用了吧。

Faub（现已离线）  

这是另一个设计漂亮，但却导航无鼠标交互效果或提示信息。

Uniqlo  

优衣库网站看上去很美观也很易用。但直到访客添加10件商品到购物车才发觉无法结账。而事实上这根本就不是购物车而是愿望清单。该体验完完全全的把每个使用过的用户都给坑了。

Bio Bak  

这是另一个拖动方式进行导航的网站，很显然它对于这种导航方式自我感觉非常良好。从视觉/乐趣角度来说是个好网站，但设计公司设计了用户体验很糟糕的导航方式：必须要使用鼠标滚轮才能看到比首屏更多的内容。  

小结  

设计要服务于网站功能以及访客沟通。如果你的网站同时也能够达到美观，那就一举两得了。设计得美观漂亮仅当网站首要任务是视觉美观才适用。    注意那些无序的排版，尤其是在导航栏与访客首次访问的页面。设计的排版过于杂乱无序会导致访客不知道如何使用你的网站。最糟糕的可能是访客在首个页面没有打开就走掉了。网站访客不喜欢等待。确保网站的加载速度快，并且能让访客知道可以加载完毕所花费的时间。减少访客流失的最小风险是一打开网页就能够吸引他们的注意。

一旦访客访问，你希望他们访问你网站上的某个页面。确保访客可以轻松找到你的导航栏，以及每个导航元素的动作。不要让访客猜测或胡乱点击寻找链接。在有许多内容的的大网站，信息构架与组织尤为重要。要确保访客可以浏览你的内容。确保菜单易识别，节省访客的时间，让访客知道导航可用。  

内容的可见性很重要，但许多人都无视它。确保访客可以在最小的分辨率下也可以看到所有你希望他们看的内容。如果你正在为销售产品做设计，确保你的设计是为销售服务的。必须明确你的设计是为推销产品服务的。你的网站越是没为销售产品服务，你赚得钱就越少。

[原版英文]：http://uxdesign.smashingmagazine.com/2010/11/25/showcase-of-beautiful-but-unusable-websites/

[译文]：http://davidw.me/translate/showcase-of-beautiful-but-unusable-websites/