﻿<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>阿石的日志 &#187; 导航设计</title>
	<atom:link href="http://www.ashnotes.com/tag/%e5%af%bc%e8%88%aa%e8%ae%be%e8%ae%a1/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ashnotes.com</link>
	<description>关注 iPhone App、产品策划、信息架构、网站分析、网站优化</description>
	<lastBuildDate>Wed, 14 Dec 2011 12:21:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>信息架构的十大误区</title>
		<link>http://www.ashnotes.com/top10-mistakes-of-information-architecture/</link>
		<comments>http://www.ashnotes.com/top10-mistakes-of-information-architecture/#comments</comments>
		<pubDate>Fri, 09 Oct 2009 13:13:52 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[信息架构]]></category>
		<category><![CDATA[导航设计]]></category>
		<category><![CDATA[框架结构]]></category>
		<category><![CDATA[站内搜索]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=199</guid>
		<description><![CDATA[Jakob Nielsen是可用性工程方面的大师，在其可用性信息技术网站上有一篇关于信息架构方面的文章，觉得不错，翻译如下： 信息架构的十大误区 内容大概：框架结构和导航设计要紧密联系，且要和站内搜索、整个子网站相辅相成。要知道信息架构的复杂度、不一致性、隐藏的选项以及臃肿的用户界面设计等因素妨碍了用户寻找她们想要的信息,Jakob Nielsen从两个方面来阐述信息架构的十大误区：一是框架结构误区、二是导航设计误区。 一、框架结构误区 1、没有框架结构 最显著的框架结构问题是当产品设计师将网站视为一个混乱的大沼泽地，对个性化类目忽视一般组织结构原理。是的，用户可能通过使用站内搜索、当下促销的链接、外部网站来到这个大沼泽地并有可能找到“大鱼”。但无论用户怎么挖掘也仅此而已，因为她们没有机会了解网站的其他产品信息和当下相关的类目。而这个问题普遍存在于那些将文章资讯页、产品详情页视为独立单元而不牵涉其他相关信息的新网站和以分类为基础的电子商务网站当中。毫无疑问，用户会立即离开这样的网站。 2、没有整合过的站内搜索与框架结构 我们老早就知道用户表现出的由搜索主导上网行为的偏好(阿石注：例如传统购物习惯AIDMA到现在AISAS的转变）。但这并不意味着搜索就是她们所需要的全部。通过搜索来到某个页面的概率好比一个伞兵空降到一个指定城市，就像你要去巴黎，你期望在那里着陆而不是在阿姆斯特丹（荷兰的首都）那样，因此在任何情况下，你都不太可能精确到达你最喜欢餐厅的门旁。要到达那儿，你还得亲自走走，甚至需要打的。与此类似，用户经常需要在搜索“着陆地”附近可浏览其他相关性内容（阿石注：类似于百度的相关搜索和淘宝站内搜索的智能推荐）。 当然，局部导航只有在一个网站拥有一个良好的框架结构去定义相关性内容的前提下才能起到作用（看看误区1就知道）。但是产品设计师必须向用户展示局部可选项，如果针对用户的查询的关键词显示其他相关的词语的话效果更好。 在每次搜索触发展示了它的结果页和网站结构，SERP(搜索引擎结果页）的可用性则得到提高。象Google那样的外部通用搜索引擎则做不到上述效果，因为其并不了解网站内部的框架结构以及其自身的导航维度展示效果和一般通用网站别无二致。尽管如此，你还是应了解你的网站的框架结构，然后将这些信息集成到你的SERP上去（这一点很像站内搜索与通用搜索的区别，详情请见阿石的日志《谈谈站内搜索》）。 然而非常不幸的是，大多数网站并没有将站内搜索与网站的框架结构紧密结合起来，这一点被另外一个通病放大：导航设计中并没有显示出用户的当前位置。也就是说，当用户点击一个搜索结果之后，她们并不能决定她们在网站哪个位置——比如当你搜索到裤子，却点击了一个鞋子，但这时没有其他方法告诉用户查看更多裤子。 3、登陆页消失掉的分类目录 我们强烈建议网站需要建立一系列的分类目录，这样每个分类类目都链接到她们各自的登陆页（阿石注：landing page，对应于网络推广或营销的概念的某个页面，详情请看)，使得用户可以预览每个分类的视图。有的网站放弃了这个预览页面，只是简单的提供链接直接链到详情页。这不仅会减少网站的页面数，而且当如果没有二级次要页面被显著标明，用户会完全不理解网站的范围，错过重要的细节、产品和服务信息。 分类目录页还可以对SEO有帮助，因为它们是用户搜索一个特定产品、服务或信息后最有可能“着陆”的地方（阿石注：一般类似二级页面的分类目录页关键词丰富且密集，更容易被搜索引擎抓取靠前）。分类目录页也还是解决误区2中的问题，因为她们可以在搜索将用户带到一个完全讲究细节的详情页时帮助用户在网站的一级或二级结果跳跃浏览（面包屑导航就是拥有这样的功能方便用户很容易向上一级结构返回） 4、过多的层次结构 与现实世界相比，在线虚拟世界最大的好处是个体类目可以存在于多个地方。因为网站按照多个维度层次对产品信息和其他内容信息进行区分，他们可以帮助用户浏览其他相关类目、提供多方面的产品信息空间且可管理配置的列表，以满足用户在这方面的主要需求。 这样的处理方法大多是好的，但过多的层次结构往往变成为依赖性很强的“拐杖”。相比花很多时间建立几个直觉性良好且逻辑严密的高级分类类目而言，团队往往会匆忙完成这个进程，随之会建立数以倍计的的弱分类和产品列表。那么可用性的影响？用户花了大把时间挣扎在高级分类类目上，当他们在多个维度层次上发现次级类目时会被搞得晕头转向。 伴随着太多的分类选项和太多的层次结构，用户被迫艰难思考下一步该怎么走，并导致用户质疑网站提供的信息线索。这些产生在早期网站体验过程中的不自信，会衍生到用户往下的浏览体验过程，并对最终结果带来消极影响（如放弃购物车） 5、次级域名站点与微型站点和主打站点融合度差 由于老套的市场营销策略，被遗弃的微型站点（阿石注:在大型集团中由于产品丰富、营销策略多样性，而针对某个产品或营销而推出独立域名的网站站点）大量充斥在互联网各领域中。在你发布一个新产品时，一个专用的微型站点会起到良好作用，但到了下一个年度，他将会削弱你的在线市场营销策略和你的在线形象。 网站设计是为了时代潮流而设计，考虑一下你的设计在5年以后看是如何表现的。 放弃建立独立站点，在主打站点的次级域名下放置新的信息的做法明显是最好的，但也要注意的是你依然需要在网站的整个架构中集成这些二级域名站点（阿石注:其实也未必，象中国移动集团和各省市网站主要定位于咨询和业务办理，而他其他众多子网站更倾向于搞独立域名、独立运作）。例如，在微型站点和二级域名站点中，我们常常发现产品详情页下面忘记了放置公司和组织相关信息，再比如很多站点在主站点的站内搜索很糟糕的对他们的次级域名站点和微型站点的搜索结果予以展示。 二、导航设计的错误 6、不可见的导航选项 网站信息架构最糟糕的错误当然是没有导航，但这种情况现在已经很少见了以至我没有必要讨论它。然而，用户不能看到的有可能也是不存在的；不可见的导航几乎和没有导航一样糟糕。 发觉识别导航不应该成为用户一项主要任务：一定要在页面上让导航永远可见。小孩子很喜欢对网站导航玩“扫雷”（在屏幕上发滚动鼠标，以发现暗藏的东东），然而青少年不会喜欢这样做，成年人则更是厌恶。 类似的，无论是导航本身看上去很像横幅广告，还是你将他放到其他如看上去像广告以至用户会视而不见的组件旁边，你都应该抵制导航不可见。即使导航在电脑显示屏幕上，如果用户不看它，导航依然不可谓不可见。 7、不可控制的导航组件 一般来说，任何移动和跳动的组件会降低网站的可用性，尤其是当用户正尝试可寻时导航会发生移动。用户会把注意力集中到更高级的去哪儿的问题层面上，而不是去那些更低级的怎样操作图形用户界面GUI上来。 在这里两大常见阻碍是展开和隐藏内容的rollover（阿石注：一般是指导航菜单的展开和鼠标移上去的链接状态），以及那些移动、旋转或循环的组件。用户一般来说对这些组件并不感冒，而在这里将这些组件囊括到网站上的产品设计师和程序员们严重低估了用户沮丧感而带来的商业影响。 8、不一致导航 导航存在的目的是为了帮助用户，而不是为了困惑她们。导航的设计应该是让用户立马可以了解到，并将这种理解贯穿到他浏览整个网站过程中。然而糟糕的是，很多网站在用户浏览进程中呈现出不同的导航特征，不同的导航来来去去，使得用户感到无法自我掌控，如她们会问“我怎样才能将那个菜单栏选项搞回来呢？我之前页面中可是看到过的啊”(阿石注：其实在现行电子商务网站如淘宝、拍拍都没有一个完全不变的全局导航，或受制于市场策略、二级页面定位、设计安排而出现两个以上的全局导航） 尽管全局导航并不是一个网站最受欢迎的组件，而它的一致性特征表达了其重要内涵：全局导航是帮助用户了解她们在哪儿以及在迷路时她们怎样可以轻松掌控回到网站的顶级结构上去的一座灯塔。 9、太多的导航技术 在&#60;&#60;seminar on navigation design&#62;&#62;中有了解到竟然有25种不同的网站导航技术方法。每个技术方法都有其自身的可用性优势和潜在的缺点，而这些就会导致团队将精力集中在设计的权衡上来——也就说何时运用导航的何种形式（阿石注：导航会随着网站的发展、市场营销而变动导航形式，这个特点体现在电子商务网站如amazon、红孩子、深圳移动网上商城等） 有一点是肯定的：每个导航技术都有在特定网站和企业网中有其一席之地。但是，如果你将上面提到的25种技术全部派上用场的话，你会发现你得到的不是每个技术优势之和，甚至更少。（阿石注：朴素的哲学思想：局部之和小于全部） 为了吸引用户的眼球而竞赛吧！太多的地方需要了解，切忌哗众取宠！ 10、伪装的菜单选项 在过去，伪装的菜单选项这种误区高高在上，但幸运的是现在好多了，没有过去普遍。然而，依然有很多网站继续将她们的标签和其他的导航选项伪装成她们自己的专用组件。 除了继续困惑用户外，伪装的导航也会妨害站内搜索：用户不能找到她们叫不上号的东东，即使你提供了同义词，主导航带来了额外的SEO权重，对那些优化没有用户关注的查询来说无疑是种浪费。 老词就是好。当用户了解了她们自己的选择，她们更愿意选择其中合适的一个。将文案说的清楚明白、简洁简约些。如果用户不能理解某个菜单选项，她们就一般不大可能点击它。而搞笑的是，一些公司为最新和   最重要的产品冠以很炫目的名称而累此不疲，这样就被双管来福枪将自己给毙了。 这篇文章直接翻译的成分较多，比较生硬，可看看荣荣的成果：http://hi.baidu.com/xiaoxingrong13/blog/item/9846f802dafbb1064afb5170.html 相关阅读：《简化信息架构 》<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">无觅猜您也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="站内搜索的演化——淘宝篇" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fevolution-of-internal-site-search-at-taobao%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Ftop10-mistakes-of-information-architecture%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027612.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">站内搜索的演化——淘宝篇</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="简化信息架构" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fsimplify-information-architecture%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Ftop10-mistakes-of-information-architecture%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027617.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">简化信息架构</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="谈谈站内搜索" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Ftalk-about-internal-site-search%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Ftop10-mistakes-of-information-architecture%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027615.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">谈谈站内搜索</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《设计中的设计》——信息传达" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Ftop10-mistakes-of-information-architecture%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——信息传达</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="豆瓣改版分析" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fnewer-douban-analysis%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Ftop10-mistakes-of-information-architecture%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027625.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">豆瓣改版分析</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft" title="信息架构" src="http://t.douban.com/lpic/s3431996.jpg" alt="" width="200" height="264" /><br />
Jakob Nielsen是可用性工程方面的大师，在其<a id="xbrk" style="color: #551a8b;" title="可用性信息技术网站" href="http://www.useit.com/" target="_blank">可用性信息技术网站</a>上有一篇关于信息架构方面的<a id="g2.j" style="color: #551a8b;" title="文章" href="http://www.useit.com/alertbox/ia-mistakes.html" target="_blank">文章</a>，觉得不错，翻译如下：</p>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"><strong><span style="font-size: medium;"><br />
</span></strong></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"><strong><span style="font-size: medium;">信息架构的十大误区</span></strong></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"><strong><span style="font-size: medium;"><br />
</span></strong></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;">
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"> 内容大概：框架结构和导航设计要紧密联系，且要和站内搜索、整个子网站相辅相成。要知道信息架构的复杂度、不一致性、隐藏的选项以及臃肿的用户界面设计等因素妨碍了用户寻找她们想要的信息,Jakob Nielsen从两个方面来阐述信息架构的十大误区：一是框架结构误区、二是导航设计误区。</span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"><span style="background-color: #ffffff;"><br />
</span></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"><span style="background-color: #ffffff;"><span style="background-color: #ffffff;"><strong><span style="font-size: small;"><span style="color: #ff0000;">一、框架结构误区</span></span></strong></span></span></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"><span style="background-color: #ffffff;"><span style="background-color: #ffffff;"><strong><span style="font-size: small;"><br />
</span></strong></span></span></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>1、没有框架结构</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;">最显著的框架结构问题是当产品设计师将网站视为一个混乱的大沼泽地，对个性化类目忽视一般组织结构原理。是的，用户可能通过使用站内搜索、当下促销的链接、外部网站来到这个大沼泽地并有可能找到“大鱼”。但无论用户怎么挖掘也仅此而已，因为她们没有机会了解网站的其他产品信息和当下相关的类目。<span style="background-color: #ffffff;">而这个问题普遍存在于那些将文章资讯页、产品详情页视为独立单元而不牵涉其他相关信息的新网站和以分类为基础的电子商务网站当中。毫无疑问，用户会立即离开这样的网站。</span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>2、没有整合过的站内搜索与框架结构</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;">我们老早就知道用户表现出的由搜索主导上网行为的偏好(<em>阿石注：例如传统购物习惯AIDMA到现在AISAS的转变</em>）。但这并不意味着搜索就是她们所需要的全部。通过搜索来到某个页面的概率好比一个伞兵空降到一个指定城市，就像你要去巴黎，你期望在那里着陆而不是在阿姆斯特丹（荷兰的首都）那样，因此在任何情况下，你都不太可能精确到达你最喜欢餐厅的门旁。要到达那儿，你还得亲自走走，甚至需要打的。与此类似，用户经常需要在搜索“着陆地”附近可浏览其他相关性内容（<em>阿石注：类似于百度的相关搜索和淘宝站内搜索的智能推荐</em>）。</div>
<div style="margin-top: 0px; margin-bottom: 0px;">当然，局部导航只有在一个网站拥有一个良好的框架结构去定义相关性内容的前提下才能起到作用（看看误区1就知道）。但是产品设计师必须向用户展示局部可选项，如果针对用户的查询的关键词显示其他相关的词语的话效果更好。</div>
<div style="margin-top: 0px; margin-bottom: 0px;">在每次搜索触发展示了它的结果页和网站结构，SERP(搜索引擎结果页）的可用性则得到提高。象Google那样的外部通用搜索引擎则做不到上述效果，因为其并不了解网站内部的框架结构以及其自身的导航维度展示效果和一般通用网站别无二致。尽管如此，你还是应了解你的网站的框架结构，然后将这些信息集成到你的SERP上去（<em>这一点很像站内搜索与通用搜索的区别，详情请见阿石的日志</em><a id="eqr7" style="color: #551a8b;" title="《谈谈站内搜索》" href="http://www.ashnotes.com/talk-about-internal-site-search/" target="_blank"><em>《谈谈站内搜索》</em></a>）。</div>
<div style="margin-top: 0px; margin-bottom: 0px;">然而非常不幸的是，大多数网站并没有将站内搜索与网站的框架结构紧密结合起来，这一点被另外一个通病放大：导航设计中并没有显示出用户的当前位置。也就是说，当用户点击一个搜索结果之后，她们并不能决定她们在网站哪个位置——比如当你搜索到裤子，却点击了一个鞋子，但这时没有其他方法告诉用户查看更多裤子。</div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>3、登陆页消失掉的分类目录</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;">我们强烈建议网站需要建立一系列的分类目录，这样每个分类类目都链接到她们各自的登陆页（<em>阿石注：landing page，对应于网络推广或营销的概念的某个页面，</em><a id="uxly" style="color: #551a8b;" title="详情请看" href="http://www.chinawebanalytics.cn/?p=54"><em>详情请看</em></a>)，使得用户可以预览每个分类的视图。有的网站放弃了这个预览页面，只是简单的提供链接直接链到详情页。这不仅会减少网站的页面数，而且当如果没有二级次要页面被显著标明，用户会完全不理解网站的范围，错过重要的细节、产品和服务信息。</div>
<div style="margin-top: 0px; margin-bottom: 0px;">分类目录页还可以对SEO有帮助，因为它们是用户搜索一个特定产品、服务或信息后最有可能“着陆”的地方（<em>阿石注：一般类似二级页面的分类目录页关键词丰富且密集，更容易被搜索引擎抓取靠前</em>）。分类目录页也还是解决误区2中的问题，因为她们可以在搜索将用户带到一个完全讲究细节的详情页时帮助用户在网站的一级或二级结果跳跃浏览（面包屑导航就是拥有这样的功能方便用户很容易向上一级结构返回）</div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>4、过多的层次结构</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong> </strong>与现实世界相比，在线虚拟世界最大的好处是个体类目可以存在于多个地方。因为网站按照多个维度层次对产品信息和其他内容信息进行区分，他们可以帮助用户浏览其他相关类目、提供多方面的产品信息空间且可管理配置的列表，以满足用户在这方面的主要需求。</div>
<div style="margin-top: 0px; margin-bottom: 0px;">这样的处理方法大多是好的，但过多的层次结构往往变成为依赖性很强的“拐杖”。相比花很多时间建立几个直觉性良好且逻辑严密的高级分类类目而言，团队往往会匆忙完成这个进程，随之会建立数以倍计的的弱分类和产品列表。那么可用性的影响？用户花了大把时间挣扎在高级分类类目上，当他们在多个维度层次上发现次级类目时会被搞得晕头转向。</div>
<div style="margin-top: 0px; margin-bottom: 0px;">伴随着太多的分类选项和太多的层次结构，用户被迫艰难思考下一步该怎么走，并导致用户质疑网站提供的信息线索。这些产生在早期网站体验过程中的不自信，会衍生到用户往下的浏览体验过程，并对最终结果带来消极影响（如放弃购物车）</div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>5、次级域名站点与微型站点和主打站点融合度差</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong> </strong>由于老套的市场营销策略，被遗弃的微型站点（<em>阿石注:在大型集团中由于产品丰富、营销策略多样性，而针对某个产品或营销而推出独立域名的网站站点</em>）大量充斥在互联网各领域中。在你发布一个新产品时，一个专用的微型站点会起到良好作用，但到了下一个年度，他将会削弱你的在线市场营销策略和你的在线形象。</div>
<div style="margin-top: 0px; margin-bottom: 0px;">网站设计是为了时代潮流而设计，考虑一下你的设计在5年以后看是如何表现的。</div>
<div style="margin-top: 0px; margin-bottom: 0px;">放弃建立独立站点，在主打站点的次级域名下放置新的信息的做法明显是最好的，但也要注意的是你依然需要在网站的整个架构中集成这些二级域名站点（<em>阿石注:其实也未必，象中国移动集团和各省市网站主要定位于咨询和业务办理，而他其他众多子网站更倾向于搞独立域名、独立运作</em>）。例如，在微型站点和二级域名站点中，我们常常发现产品详情页下面忘记了放置公司和组织相关信息，再比如很多站点在主站点的站内搜索很糟糕的对他们的次级域名站点和微型站点的搜索结果予以展示。</div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: small;"><span style="color: #ff0000;">二、导航设计的错误</span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: small;"><br />
</span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;">6、不可见的导航选项</span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"><br />
</span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"> <span style="font-weight: normal;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><span style="font-size: x-small;">网站信息架构</span><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><span style="font-size: x-small;">最糟糕的错误当然是没有导航，但这种情况现在已经很少见了以至我没有必要讨论它。然而，用户不能看到的有可能也是不存在的；不可见的导航几乎和没有导航一样糟糕。</span></span></span></strong></span></span></strong></span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><span style="font-size: x-small;"><br />
</span></span></span></strong></span></span></strong></span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"> 发觉识别导航不应该成为用户一项主要任务：一定要在页面上让导航永远可见。小孩子很喜欢对网站导航玩“扫雷”（在屏幕上发滚动鼠标，以发现暗藏的东东），然而青少年不会喜欢这样做，成年人则更是厌恶。</span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><br />
</span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"> 类似的，<strong><span style="font-size: x-small;"><span style="font-weight: normal;"><span style="font-size: x-small;">无论是导航本身看上去很像横幅广告，还是你将他放到其他如看上去像广告以至用户会视而不见的组件旁边，</span><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><span style="font-size: x-small;">你都应该抵制导航不可见。即使导航在电脑显示屏幕上，如果用户不看它，导航依然不可谓不可见。</span></span></span></strong></span></span></strong></span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><br />
</span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="font-size: x-small;"><strong>7、不可控制的导航组件</strong></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="font-size: x-small;"><strong><br />
</strong></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;">一般来说，任何移动和跳动的组件会降低网站的可用性，尤其是当用户正尝试可寻时导航会发生移动。用户会把注意力集中到更高级的去哪儿的问题层面上，而不是去那些更低级的怎样操作图形用户界面GUI上来。</div>
<div style="margin-top: 0px; margin-bottom: 0px;">在这里两大常见阻碍是展开和隐藏内容的rollover（<em>阿石注：一般是指导航菜单的展开和鼠标移上去的链接状态</em>），以及那些移动、旋转或循环的组件。用户一般来说对这些组件并不感冒，而在这里将这些组件囊括到网站上的产品设计师和程序员们严重低估了用户沮丧感而带来的商业影响。</div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>8、不一致导航</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong> </strong>导航存在的目的是为了帮助用户，而不是为了困惑她们。导航的设计应该是让用户立马可以了解到，并将这种理解贯穿到他浏览整个网站过程中。然而糟糕的是，很多网站在用户浏览进程中呈现出不同的导航特征，不同的导航来来去去，使得用户感到无法自我掌控，如她们会问“我怎样才能将那个菜单栏选项搞回来呢？我之前页面中可是看到过的啊”<em>(阿石注：其实在现行电子商务网站如淘宝、拍拍都没有一个完全不变的全局导航，或受制于市场策略、二级页面定位、设计安排而出现两个以上的全局导航）</em></div>
<div style="margin-top: 0px; margin-bottom: 0px;">尽管全局导航并不是一个网站最受欢迎的组件，而它的一致性特征表达了其重要内涵：全局导航是帮助用户了解她们在哪儿以及在迷路时她们怎样可以轻松掌控回到网站的顶级结构上去的一座灯塔。</div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>9、太多的导航技术</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong> </strong>在&lt;&lt;<a id="lq3r" style="color: #551a8b;" title="seminar on navigation design" href="http://www.nngroup.com/events/tutorials/info_arch_2.html" target="_blank">seminar on navigation design</a>&gt;&gt;中有了解到竟然有25种不同的网站导航技术方法。每个技术方法都有其自身的可用性优势和潜在的缺点，而这些就会导致团队将精力集中在设计的权衡上来——也就说何时运用导航的何种形式（<em>阿石注：导航会随着网站的发展、市场营销而变动导航形式，这个特点体现在电子商务网站如amazon、<a id="hfgu" style="color: #551a8b;" title="红孩子" href="http://www.redbaby.com.cn/">红孩子</a>、<a id="h4bv" style="color: #551a8b;" title="深圳移动网上商城" href="http://sz.e100.cn/">深圳移动网上商城</a>等</em>）</div>
<div style="margin-top: 0px; margin-bottom: 0px;">有一点是肯定的：每个导航技术都有在特定网站和企业网中有其一席之地。但是，如果你将上面提到的25种技术全部派上用场的话，你会发现你得到的不是每个技术优势之和，甚至更少。（<em>阿石注：朴素的哲学思想：局部之和小于全部</em>）</div>
<div style="margin-top: 0px; margin-bottom: 0px;">为了吸引用户的眼球而竞赛吧！太多的地方需要了解，切忌哗众取宠！</div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>10、伪装的菜单选项</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong> </strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong> </strong>在过去，伪装的菜单选项这种误区高高在上，但幸运的是现在好多了，没有过去普遍。然而，依然有很多网站继续将她们的标签和其他的导航选项伪装成她们自己的专用组件。</div>
<div style="margin-top: 0px; margin-bottom: 0px;">除了继续困惑用户外，伪装的导航也会妨害站内搜索：用户不能找到她们叫不上号的东东，即使你提供了同义词，主导航带来了额外的SEO权重，对那些优化没有用户关注的查询来说无疑是种浪费。</div>
<div style="margin-top: 0px; margin-bottom: 0px;">老词就是好。当用户了解了她们自己的选择，她们更愿意选择其中合适的一个。将文案说的清楚明白、简洁简约些。如果用户不能理解某个菜单选项，她们就一般不大可能点击它。而搞笑的是，一些公司为最新和   最重要的产品冠以很炫目的名称而累此不疲，这样就被双管来福枪将自己给毙了。</div>
<div style="margin-top: 0px; margin-bottom: 0px;"><em>这篇文章直接翻译的成分较多，比较生硬，可看看荣荣的成果：</em><a style="color: #551a8b;" href="http://hi.baidu.com/xiaoxingrong13/blog/item/9846f802dafbb1064afb5170.html"><em>http://hi.baidu.com/xiaoxingrong13/blog/item/9846f802dafbb1064afb5170.html</em></a></div>
<div style="margin-top: 0px; margin-bottom: 0px;">相关阅读：<a href="http://www.ashnotes.com/simplify-information-architecture/" target="_self">《简化信息架构 》</a></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><em><br />
</em></div>
</div>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">无觅猜您也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="站内搜索的演化——淘宝篇" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fevolution-of-internal-site-search-at-taobao%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Ftop10-mistakes-of-information-architecture%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027612.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">站内搜索的演化——淘宝篇</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="简化信息架构" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fsimplify-information-architecture%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Ftop10-mistakes-of-information-architecture%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027617.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">简化信息架构</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="谈谈站内搜索" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Ftalk-about-internal-site-search%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Ftop10-mistakes-of-information-architecture%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027615.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">谈谈站内搜索</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《设计中的设计》——信息传达" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Ftop10-mistakes-of-information-architecture%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——信息传达</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="豆瓣改版分析" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fnewer-douban-analysis%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Ftop10-mistakes-of-information-architecture%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027625.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">豆瓣改版分析</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/top10-mistakes-of-information-architecture/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

