十大网站设计错误 - 网站设计|中国民办高校网

　前言：这是Jakob Nielsen写的另一篇文章，主要讨论的是广义上的网站面临的错误设计问题，是他的另一篇《博客可用性：十大错误设计》的姊妹篇，当然，这些问题对于博客站点来说也是同样适用的。

十大网站设计错误

作者：Jakob Nielsen　翻译：William Long

　　自1996年以来，我曾经指出了很多网站中的设计错误，参见底部我的系列文章列表，本文将重点介绍的是，这些问题当中十个最为严重的网站设计错误。

　　1、搜索引擎不友好

　　搜索引擎对于难以处理和识别的打字稿、复数、连字号等等各种各样的问题，搜索的准确度会降低。显然，如果搜索引擎刻意去迎合这种错误使用的话，会伤害到所有的搜索使用者。

　　一个相关的问题是，搜索引擎区分结果是依靠文档的重要性，而只是按照内容关联次数简单地进行结果区分。

　　当找不到信息的时候，搜索是用户的救生索。即使有高级搜索功能，建议还是使用简单搜索，搜索形式应该是一个简单的录入框，就像我们常见的那一种。

　　2、使用PDF文件做为在线阅读

　　用户讨厌在浏览的时候跳出PDF文件，因为那会打断用户的浏览过程，因为普通的浏览器按钮无法工作，因此即使如打印或保存文档这样简单的事情也会变得复杂。由于其版面设计是基于纸张优化的，因此文字的字体很少会和用户的流量其窗口相适应。没有了平滑的滚动浏览，有的只是超小号的字体。

　　更糟糕的是，PDF文件内容是分块的，很难浏览。

　　PDF是对于印刷及发行手册等和其他需要打印的大文件来讲是很合适的，使用它的目的只是为了保留它的信息使其网页上浏览成为现实。

　　3、未改变已访问链接的颜色

　　一个好的浏览历史能够帮助你了解目前的位置，因为那是你浏览的起点。知道过去和现在的位置反过来使得决定下一步去哪里变得容易了。链接是这些浏览过程中的一个关键因素。用户可以不去访问那些没有用处的地址，相反，他们会访问那些对他们有帮助的链接地址。

　　最重要的是，他们知道哪些网页已经访问过了，这样就不必一次又一次访问同一个历史页面。

　　但是这些好处只是基于一个重要的假设：由于网站提供不同的颜色显示，用户可以分辨出哪些链接访问过，哪些链接没有访问过。如果访问一个链接后颜色没有发生变化，那么用户很可能会感到迷惑并无意中反复访问同一历史页面。

　　4、文字未排版

　　将所有文字堆积在一起是一种可怕的体验，浏览这样的文字将是痛苦的经历。

　　在线写作，并不是为了打印，需要让用户能很好地阅读，下面是几个改进的要点：

　　使用子标题

　　使用列表

　　突出关键字

　　使用小段落

　　反金字塔结构

　　简单的写作风格

　　5、固定字体大小

　　CSS样式不幸让网站有权禁止浏览器的“改变字体大小”的功能，并使得网站有一个固定的字体大小。对于大多数人的年龄超过40岁的人来说，这个固定地文字大小实在太小了。

　　尊重用户的喜好，让他们按照自己的需要修改文字的大小，同时，明确字体大小是相对的，而非绝对显示像素的数量多少。

　　6. 网页标题搜索引擎不友好

　　搜索是用户发现网站的最重要途径，搜索用户找到一个独立网站的最重要的方法。网页的标题是你吸引新用户或老用户从搜索列表中定位到你网站的主要工具。

网页的标题文字是在标记之间的文字，并通常作为搜索引擎结果列表中的链接文字。搜索引擎一般只显示标题开头66个字，是真正的缩略内容。</p><p>　　网页标题也用户将一个网址加为书签时的默认文字，对于你的主页，应该以公司名称开头，接着是网站的简介，不要用“The”或“Welcome to”做为开头文字。</p><p>　　对于其他网页来说，标题应该是将具体内容的概要文字说明，由于网页标题是浏览器窗口的标题，也是用户任务条上的标签，多个窗口下将会显示每一页的标题，因此，如果你所有的网页标题字都相同的话，对于开了多个窗口的用户来说，你网站的可用性将严重降低。</p><p>　　7、所有的东西看起来都像广告</p><p>　　有选择地吸引注意力是相当有力的途径。用户已经学会了对挡在眼前的那些目的性很强的广告采取不予理睬的态度。这也就是为何点击率每年以半数速度下降，网络广告根本不起作用的原因。</p><p>　　不幸的是，这也使得用户忽视了那些看起来很像广告的设计样式。毕竟，当你不理会某些东西时，就不会仔细地研究它并搞清楚它是什么。</p><p>　　因此，最好避免任何类似广告的设计。这一指导方针所传达的含义随着新的广告形式出现而变化。目前遵循以下规则：</p><p>　　无视横幅：着用户将不会把注意力放在任何看似横幅广告的东西，这取决于它的形状及位置。</p><p>　　避免使用动画：用户会忽视那些闪烁的文字或其它侵略性很强的动画。</p><p>　　净化弹出窗口：用户在弹出窗口完全打开前就会将其关闭，有时是带着极端厌恶的情绪。</p><p>　　8、违反设计惯例</p><p>　　一致性是最重要的可用性原则之一：当事物遵循相同的原则运作时，用户不用担心发生意外，因为他们根据先前的经验已经很清楚将会发生什么事情。就像你每次在牛顿的头顶上放下一个苹果，它一定会砸中他的脑袋一样。</p><p>　　用户的期望实现得越多，他们就越感觉是自己在控制整个系统，并且更加喜欢它。相反地，用户则会感到可靠程度不够。想想，当我释放苹果时，它变成了西红柿并朝着天空蹦出一英里，那多荒诞！</p><p>　　9、打开新的浏览器窗口</p><p>　　打开新的浏览窗口就像一个吸尘器推销员在上门推销时，直接将烟灰缸里的杂物倾倒在消费者家中的地毯上。拜托！不要用任何窗口污染我的屏幕（尤其在当前操作系统低劣的窗口管理技术下），如果我需要一个新窗口，我会自己打开的。</p><p>　　设计者打开新窗口的本意是要让用户留在他的站点上。但是却忽略了控制用户的机器所带来的负面效应，这种策略恰恰弄巧成拙，因为当用户想通过“后退”按钮返回先前的站点时，已经做不到了。用户通常注意不到新窗口已经被打开，尤其当他们的显示器很小，而窗口又正好是最大化时。因此，当用户想要返回原来的站点时，面对的却只是一个不可用的灰色“后退”按钮。</p><p>　　点击链接的标准结果是目标页面在当前的浏览窗口中加载，取代现有页面。出现其它的任何情况都违背了用户的期望，令他们感到对网络的控制不稳定。用户痛恨那些突然弹出来的窗口，当用户想要在新窗口打开一页的时候，会自己使用“在新窗口打开”功能，因此不要用一些代码来干扰了用户浏览器的操作。</p><p>　　10、不回答用户的提问</p><p>　　用户是因为某个目的才访问你的网站。他们方式可能是想购买你的产品或者其他，但最终却失败了，因为网站没有提供用户寻找的资料信息。</p><p>　　事实上问题远没有这么简单，如果你不告诉用户具体情况，用户就会以为你的产品或服务不能满足他们的需求，因此用户就不会购买你的产品，或者有一些信息，深深隐藏在各种文档之间，用户没有时间阅读所有这些隐藏的信息，因此也就认为它们不存在。</p><p>　　不回答用户提问的最坏的例子是拒绝提供产品和服务的价格清单，没有任何B2C的商务网站会犯这种错误，但是这在B2B中却普遍存在，大多数“企业解决方案”的提出，让你不能告诉用户他们适合100个站点、还是10万个站点人。价格是最主要的作用是便于想用户提供相应的产品，避免提供一个不成熟的产品给用户。</p><p>　　即使是B2C网站有时页会忘记在所有地方提供相关产品价格清单，例如在目录页或者搜索结果页，要知道，在这两种情况下，价格是关键，它让用户能够区分不同的产品并找到最合适的目标。</p><p>　　其他各年的十大错误列表</p><p>　　2005年的十大网站设计问题：</p><p>　　一．易读性的问题－让使用者决定浏览时字体大小。</p><p>　　二．没有标准的超连结表示</p><p>　　三．Flash的使用</p><p>　　四．网页无法呈现网站内容</p><p>　　五．搜寻的重要</p><p>　　六．浏览器的差异</p><p>　　七．讨厌的框架</p><p>　　八．没有链接相关资讯或是公司资讯</p><p>　　九．固定的页面宽度</p><p>　　十．不适当的图片放大连结</p><p>　　2003年的十大网站设计问题：</p><p>　　一．主题不明确</p><p>　　二．更改以存档的链接地址</p><p>　　三．内容没有注明日期</p><p>　　四．缩略图看不清细节</p><p>　　五．图片的ALT文字过于冗长</p><p>　　六．不给用户自定义选择</p><p>　　七．过长的商品列表选择</p><p>　　八．商品仅按照商标排序</p><p>　　九．过于限制用户录入的信息</p><p>　　十．页面包含指向自身页面的链接</p><p>　　1999年的十大网站设计问题：</p><p>　　一．破坏或减慢“后退”按钮</p><p>　　二．打开新的浏览窗口</p><p>　　三．使用不规范的GUI（图形用户界面）部件</p><p>　　四．缺少自我介绍</p><p>　　五．缺少存档</p><p>　　六．移动页面至新的URL地址</p><p>　　七．标题和内容不匹配</p><p>　　八．对最新的网络热门紧追不舍</p><p>　　九．服务器访问速度过慢</p><p>　　十．所有的东西看起来都像广告</p><p>　　原文地址：http://www.useit.com/alertbox/9605.html</p><p>　　译文地址：http://www.williamlong.info/archives/560.html</p><p> </p> </article>  <nav class="article-nav"> <span class="article-nav-prev">上一篇<br><a href="../../../zxxx/2009/07/14008.html">c#的开发环境及开发软件</a></span> <span class="article-nav-next">下一篇<br><a href="../../../zxxx/2009/07/14006.html">让广告代码不再影响你的网页加载速度</a></span> </nav> <div class="relates"> <h3 class="title"><strong>相关阅读</strong></h3> <ul> <li><a href="../../../zxxx/2010/10/92402.html"><img data-src="../../../d/file/p/201010/smalleccf0b47a525c1c50046603de7fd0d8c.jpg" width="188px" height="141px" class="thumb"/>平面设计常见的配色方案及色</a></li> <li><a href="../../../zxxx/2010/10/92147.html"><img data-src="../../../d/file/p/201010/small79b13910cb12ed2d18a1b4a49ec2be6c.jpg" width="188px" height="141px" class="thumb"/>支付宝产品设计师白鸦: 如何</a></li> <li><a href="../../../zxxx/2010/10/92145.html"><img data-src="../../../d/file/p/201010/smalla41e88177eb9c77bc18aa881d03b72d7.png" width="188px" height="141px" class="thumb"/>网易跟贴的前世今生</a></li> <li><a href="../../../zxxx/2009/07/13988.html"><img data-src="small969995737c91c8f24c52102ff1ca69db.jpg" width="188px" height="141px" class="thumb"/>服务器集群方案简介</a></li> </ul> </div> </div> </div> <aside class="sidebar isfix">  <div class="widget widget_ads"> <div class="widget_ads_inner"><a href="../../../"><img src="../../../skin/202/image/ad1.jpg"></a></div> </div> <div class="widget widget_ads"> <div class="widget_ads_inner"><a href="../../../"><img src="../../../skin/202/image/ad2.jpg"></a></div> </div> <div class="widget widget_tags"> <h3 class="title"><strong>栏目分类</strong></h3> <ul class="widget_tags_inner"> <li><a href="../../../zxxx/web/">网站设计</a></li> <li><a href="../../../zxxx/soft/">实用软件</a></li> <li><a href="../../../zxxx/fanw/">写作范文</a></li> <li><a href="../../../zxxx/hulian/">互联网络</a></li> <li><a href="../../../zxxx/teach/">教师</a></li> </ul> </div> <div class="widget widget_postlist"> <h3 class="title"><strong>本栏热门</strong></h3> <ul class="items-02"> <li><a target="_blank" href="../../../zxxx/2010/10/92402.html"><span class="thumbnail"><span><img data-original="../../../d/file/p/201010/smalleccf0b47a525c1c50046603de7fd0d8c.jpg" class="thumb"/></span></span><span class="text">平面设计常见的配色方案及色标（最精典、</span><span class="text-muted post-views">阅读(375)</span></a></li> <li><a target="_blank" href="../../../zxxx/2010/10/92147.html"><span class="thumbnail"><span><img data-original="../../../d/file/p/201010/small79b13910cb12ed2d18a1b4a49ec2be6c.jpg" class="thumb"/></span></span><span class="text">支付宝产品设计师白鸦: 如何提高网站用</span><span class="text-muted post-views">阅读(138)</span></a></li> <li><a target="_blank" href="../../../zxxx/2009/07/13988.html"><span class="thumbnail"><span><img data-original="small969995737c91c8f24c52102ff1ca69db.jpg" class="thumb"/></span></span><span class="text">服务器集群方案简介</span><span class="text-muted post-views">阅读(92)</span></a></li> <li><a target="_blank" href="../../../zxxx/2010/10/92145.html"><span class="thumbnail"><span><img data-original="../../../d/file/p/201010/smalla41e88177eb9c77bc18aa881d03b72d7.png" class="thumb"/></span></span><span class="text">网易跟贴的前世今生</span><span class="text-muted post-views">阅读(25)</span></a></li> </ul> </div> <div class="widget widget_postlist"> <h3 class="title"><strong>本栏推荐</strong></h3> <ul class="items-01"> </ul> </div> <div class="widget widget_searchbox"> <h3 class="title"><strong>站内搜索</strong></h3> <form class="search-form" name="formsearch" method="post" action="../../../e/search/index.php"> <input type="hidden" name="show" value="title"/> <input class="form-control" name="keyboard" type="text" placeholder="输入关键字"> <input class="btn" type="submit" name="submit" value="搜索"> </form> </div> <div class="widget widget_tags"> <h3 class="title"><strong>标签检索</strong></h3> <ul class="widget_tags_inner"> </ul> </div> </aside> </section> <section class="container"> <div class="content-wrap"> <div class="pagination"> <ul> <li class="next-page"><a href="../../../" style="padding:5px 50px;">www.chinambedu.com</a></li> </ul> </div> </div> </section> <footer class="footer"> <div class="foot"> <div class="text">Copyright <span class="fontArial">©</span>2004-2016 Chinambedu.com Inc. All Rights Reserved. 中国民办高校网版权所有<br/> 中华人民共和国工业和信息化部备案：京ICP备号鲁ICP备号<br/>　短信监督：133 3517 7220 举报邮箱：<a href="mailto:jubao@chinambedu.com">jubao@chinambedu.com</a><br/> </div> <a href="../../../about/2009/07/51803.html" target="_blank">关于中国民办高校网</a> | <a href="../../../about/2009/07/51804.html" target="_blank">联系我们</a> | <a href="../../../about/2009/07/51805.html" target="_blank">版权声明</a> <br/> 国家教育部监管中国民办高校网 <br/> <div align="center"> </div> </div> </footer> <script> var jsui={ uri: "../../../skin/202" }; </script> <script type="text/javascript" src="../../../skin/202/js/jquery.js"></script> <div style="display:none"><script src="http://s44.cnzz.com/stat.php?id=164952&web_id=164952&show=pic1" language="JavaScript" charset="gb2312"></script> </div> <script src="../../../e/public/onclick/"></script></body> </html>