<?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.litanwei.com/tag/%e6%b5%8f%e8%a7%88%e7%83%ad%e5%8c%ba/feed" rel="self" type="application/rss+xml" />
	<link>http://www.litanwei.com</link>
	<description>讨论和学习互联网产品策划、用户体验、网站架构、网站运营、网络营销以及相关内容。</description>
	<lastBuildDate>Wed, 08 Feb 2012 02:59:08 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>用户是如何浏览你的网站的</title>
		<link>http://www.litanwei.com/yonghu-liulan/366</link>
		<comments>http://www.litanwei.com/yonghu-liulan/366#comments</comments>
		<pubDate>Sun, 09 May 2010 16:08:07 +0000</pubDate>
		<dc:creator>李谭伟</dc:creator>
				<category><![CDATA[产品开发]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[网摘]]></category>
		<category><![CDATA[F形浏览热区]]></category>
		<category><![CDATA[Jakbo Nielsen]]></category>
		<category><![CDATA[浏览热区]]></category>

		<guid isPermaLink="false">http://www.litanwei.com/?p=366</guid>
		<description><![CDATA[事实上，互联网用户浏览网页的习惯和顾客浏览商店中物品的习惯没有多大差别。用户打开一个新的页面，扫视一些文字，并点击第一个引起他兴趣的链接。在这过程中，页面上有大量的区域用户甚至完全没有看过。大部分用户在页面上寻找他感兴趣且可点击的内容，一旦发现目标，点击行为就会发生，但如果页面不符合期望，后退或关闭按钮也将马上被点击。

用户是如何浏览你的网站的

1. 大部分时候用户并非在阅读屏幕上的内容，而是在扫视。

<span class="readmore"><a href="http://www.litanwei.com/yonghu-liulan/366" title="用户是如何浏览你的网站的">阅读全文——共1450字</a></span>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.litanwei.com/wp-content/uploads/2010/05/1.jpg" rel="lightbox[366]"><img class="alignnone size-full wp-image-370" title="用户是如何浏览你的网站" src="http://www.litanwei.com/wp-content/uploads/2010/05/1.jpg" alt="用户是如何浏览你的网站" width="409" height="140" /></a><br />
事实上，互联网用户浏览网页的习惯和顾客浏览商店中物品的习惯没有多大差别。用户打开一个新的页面，扫视一些文字，并点击第一个引起他兴趣的链接。在这过程中，页面上有大量的区域用户甚至完全没有看过。大部分用户在页面上寻找他感兴趣且可点击的内容，一旦发现目标，点击行为就会发生，但如果页面不符合期望，后退或关闭按钮也将马上被点击。<span id="more-366"></span></p>
<p><strong>用户是如何浏览你的网站的</strong></p>
<p><strong>1. </strong>大部分时候用户并非在阅读屏幕上的内容，而是在扫视。<br />
用户习惯扫视和快速寻找页面上一些能够引导他理解内容的关键点。</p>
<p><strong>2. </strong>不要考验用户的耐心<br />
当一个页面不能满足用户的期望时，离开就在所难免。希望通过添加相关内容来丰富页面和留住用户往往效果不佳甚至适得其反。一屏页面上承载的信息越多，认知的负担就会越重，就需要花费更多的时间去处理信息，如果这些信息中还有些不是用户期望的，那就还要花额外的精力将这些多于信息从注意力中剥离。<span class='wp_keywordlink_affiliate'><a href="http://www.litanwei.com/tag/jakbo-nielsen" title="查看 Jakbo Nielsen 中的全部文章" target="_blank">Jakbo Nielsen</a></span> 的研究结论也表明：一个页面上的认识负担越重，导航和浏览就会越困难，用户离开并寻找其他替代品的可能性就越大。</p>
<p><strong>3. </strong>用户并不做最佳选择<br />
用户并不是在搜寻找到最佳选项的最快途径，他们也并非用线性的方式来阅读屏幕上的内容（有顺序地从一个模块到另一个模块）。当用户找到第一个合理的选项，或者一旦找到了可能的目标内容，立即点击的可能性会非常大。其实，用户是在寻找能让他们觉得够用或者合适的内容，而非寻找最佳的选择，理由也很直观，让用户自己去做最佳选择需要花费不少时间和精力，那已经在考验用户的耐心了（选择即成本）。<br />
<a href="http://www.litanwei.com/wp-content/uploads/2010/05/eyetrack.jpg" rel="lightbox[366]"><img class="alignnone size-full wp-image-374" title="eyetrack" src="http://www.litanwei.com/wp-content/uploads/2010/05/eyetrack.jpg" alt="" width="466" height="320" /></a><br />
来自 <a href="http://blog.eyetools.com/" target="blank">eyetools</a> 的图片，可以看出用户浏览时的关注点和非线性的浏览轨迹。</p>
<p><strong><span class='wp_keywordlink_affiliate'><a href="http://www.litanwei.com/tag/jakbo-nielsen" title="查看 Jakbo Nielsen 中的全部文章" target="_blank">Jakbo Nielsen</a></span>的<span class='wp_keywordlink_affiliate'><a href="http://www.litanwei.com/tag/f%e5%bd%a2%e6%b5%8f%e8%a7%88%e7%83%ad%e5%8c%ba" title="查看 F形浏览热区 中的全部文章" target="_blank">F形浏览热区</a></span></strong></p>
<p>Jakbo Nielsen曾对232位用户浏览几千个页面的过程中的眼动情况进行追踪，发现用户在不同站点上的浏览行为有明显的一致性，将浏览热点可视化后呈现出类似F形的图案。这种浏览行为有三个特征：<br />
<strong>1.</strong> 用户首先会在内容区的上部进行横向浏览。<br />
<strong>2.</strong> 用户视线下移一段距离后在小范围内再次横向浏览。<br />
<strong>3.</strong> 最后用户会在内容区的左侧做快速的纵向浏览。</p>
<p>PS.显然，用户的浏览行为并非精确的包含这个三个过程，有时候，在这三个过程之后，还会在底部有横向浏览的热点，使得整个<span class='wp_keywordlink_affiliate'><a href="http://www.litanwei.com/tag/%e6%b5%8f%e8%a7%88%e7%83%ad%e5%8c%ba" title="查看 浏览热区 中的全部文章" target="_blank">浏览热区</a></span>图看上去更像E而不是F。也有时候，用户浏览时只反应了上述的行为1和行为3，使得<span class='wp_keywordlink_affiliate'><a href="http://www.litanwei.com/tag/%e6%b5%8f%e8%a7%88%e7%83%ad%e5%8c%ba" title="查看 浏览热区 中的全部文章" target="_blank">浏览热区</a></span>图像一个倒写的L。但从所有数据整体上来看，用户的屏幕浏览热区图还是较一致地反应出了F图像。<br />
<a href="http://www.litanwei.com/wp-content/uploads/2010/05/nielsenf.jpg" rel="lightbox[366]"><img class="alignnone size-full wp-image-376" title="nielsenf" src="http://www.litanwei.com/wp-content/uploads/2010/05/nielsenf.jpg" alt="" width="508" height="176" /></a></p>
<p>如何运用F形阅读行为进行设计：<br />
<strong>1.</strong> 用户并不会浏览页面上的所有内容（F形之外的大片空白区）<br />
<strong>2.</strong> 将最重要的信息放在头两段（F热区中的两个横向热区）<br />
<strong>3.</strong> 在后续的内容中，将关键词和信息放在段首，使用户在左侧纵向浏览时能更容易关注到。</p>
<p><strong>总结和启示</strong></p>
<p>1. 用户习惯扫视，而不是阅读<br />
2. 用户并不会关注到页面上的所有内容<br />
3. 不要考验用户的耐心，不要增加用户的认知负担<br />
4. 用户并不做最佳选择<br />
5. 用户在屏幕上的浏览热区整体上符合“F形”<br />
6. 针对F形浏览行为，将最重要的信息放在上部，将相关的关键内容和信息放在内容区左侧。</p>
<p>参考文献：<br />
1. F-Shaped Pattern For Reading Web Content, by Jakbo Nielsen<br />
2. Common Email Layouts: B2C Electronics Template, by Teresa Hernandez<br />
3. But What Does It All Mean? Understanding Eye-Tracking Results, by Teresa Hernandez</p>
<h2  class="related_post_title">或许这些文章您也喜欢：</h2><ul class="related_post"><li><a href="http://www.litanwei.com/jiaohu-shejishi-zhuanye/307" title="交互设计师的专业度表现">交互设计师的专业度表现</a> (0)</li><li><a href="http://www.litanwei.com/zhenshi-de-lijie-yonghu/303" title="更真实的理解用户">更真实的理解用户</a> (0)</li><li><a href="http://www.litanwei.com/google-baidu-ue/55" title="从Google和Baidu的调查统计看网页布局对用户体验的影响 ">从Google和Baidu的调查统计看网页布局对用户体验的影响 </a> (0)</li></ul><h3>Related Posts</h3><ul><li><a href="http://www.litanwei.com/jiaohu-shejishi-zhuanye/307" title="交互设计师的专业度表现 2009.12.27">交互设计师的专业度表现</a>(0)</li>
<li><a href="http://www.litanwei.com/zhenshi-de-lijie-yonghu/303" title="更真实的理解用户 2009.12.18">更真实的理解用户</a>(0)</li>
<li><a href="http://www.litanwei.com/google-baidu-ue/55" title="从Google和Baidu的调查统计看网页布局对用户体验的影响  2008.08.29">从Google和Baidu的调查统计看网页布局对用户体验的影响 </a>(0)</li>
</ul><h3>Recent Comments</h3><ul><li><a class="commentor" href="http://blog.sina.com.cn/yhcwlhl" >萤火中国</a> : <a class="comment_content" href="http://www.litanwei.com/yonghu-liulan/366#comment-158" title="View the entire comment by 萤火中国" >好文章！</a></li>
<li><a class="commentor" href="http://www.sponge-iron.com" >海绵铁</a> : <a class="comment_content" href="http://www.litanwei.com/yonghu-liulan/366#comment-157" title="View the entire comment by 海绵铁" >很不错</a></li>
<li><a class="commentor" href="http://www.doujiangji123.com" >商用现磨豆浆机</a> : <a class="comment_content" href="http://www.litanwei.com/yonghu-liulan/366#comment-156" title="View the entire comment by 商用现磨豆浆机" >用户体验很重要也很难做啊</a></li>
<li><a class="commentor" href="http://www.517mr.com" >隆胸手术</a> : <a class="comment_content" href="http://www.litanwei.com/yonghu-liulan/366#comment-155" title="View the entire comment by 隆胸手术" >@linux99老张,</a></li>
<li><a class="commentor" href="http://www.120ic.com" >健康村论坛</a> : <a class="comment_content" href="http://www.litanwei.com/yonghu-liulan/366#comment-154" title="View the entire comment by 健康村论坛" >说得是啊</a></li>
</ul>]]></content:encoded>
			<wfw:commentRss>http://www.litanwei.com/yonghu-liulan/366/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

