<?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>彬Go &#187; 用户体验</title>
	<atom:link href="http://blog.bingo929.com/category/user-experience/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.bingo929.com</link>
	<description>关注前端开发/网页设计/网站可用性/用户体验</description>
	<lastBuildDate>Fri, 16 Dec 2011 17:14:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>推荐20个关于网站可用性及界面设计的网站</title>
		<link>http://blog.bingo929.com/20-websites-web-design-usabillity.html</link>
		<comments>http://blog.bingo929.com/20-websites-web-design-usabillity.html#comments</comments>
		<pubDate>Tue, 11 Nov 2008 03:59:04 +0000</pubDate>
		<dc:creator>暴风彬彬</dc:creator>
				<category><![CDATA[用户体验]]></category>
		<category><![CDATA[网站可用性]]></category>
		<category><![CDATA[网页设计]]></category>
		<category><![CDATA[资源]]></category>
		<category><![CDATA[教程]]></category>

		<guid isPermaLink="false">http://blog.bingo929.com/?p=1848</guid>
		<description><![CDATA[　　随着技术的进步，网站和网络应用正在变得更具互动性，我们有更多增强用户体验的方法和技巧。下面列出的这些网站能够帮你处理界面设计、用户体验(UE)、以用户为中心的设计(UID)、网... ]]></description>
			<content:encoded><![CDATA[<p>　　随着技术的进步，网站和网络应用正在变得更具互动性，我们有更多增强<a href="http://blog.bingo929.com/category/user-experience">用户体验</a>的方法和技巧。下面列出的这些网站能够帮你处理界面设计、用户体验(UE)、以用户为中心的设计(UID)、网站可用性以及任何这方面的问题。如今“形式追随功能”的理念正变得更加重要。我们的目标就是更加完善的用户界面。</p>
<h3>1.<a title="UI-patterns.com" href="http://ui-patterns.com/" target="_blank">UI-patterns</a></h3>
<p><img title="网页设计" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-18_ui_patterns.png" alt="网页设计" width="550" height="250" /></p>
<p><em>　　<span style="font-style: normal;">UI-patterns</span></em>是一个顶级用户界面库，收集展示了一些改进过的设计模型，比如<a href="http://ui-patterns.com/pattern/Captcha" target="_blank">验证码</a>、<a href="http://ui-patterns.com/pattern/AccountRegistration" target="_blank">帐户注册</a>、<a href="http://ui-patterns.com/pattern/NavigationTabs" target="_blank">导航标签</a>等。</p>
<p><span id="more-1848"></span></p>
<h3>2.<a title="Yahoo! Design Pattern Library" href="http://developer.yahoo.com/ypatterns/" target="_blank">Yahoo! Design Pattern Library</a></h3>
<p><img title="网站可用性" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-20_ydn_design_pattern_library.png" alt="网站可用性" width="550" height="250" /></p>
<p>　　Yahoo开发网络有一个日渐丰富的设计模型库<em>Yahoo! Design Pattern Library</em>。这里展示了用户界面设计方面的通用设计模型。一些广为讨论的模型包括<a href="http://developer.yahoo.com/ypatterns/pattern.php?pattern=moduletabs" target="_blank">模块标签</a>、<a href="http://developer.yahoo.com/ypatterns/parent.php?pattern=dragdrop" target="_blank">拖放操作</a>和<a href="http://developer.yahoo.com/ypatterns/parent.php?pattern=ratingsreviews" target="_blank">评级评论</a>。</p>
<h3>3. <a title="UI Pattern Factory - home page." href="http://uipatternfactory.com/" target="_blank">UI Pattern Factory</a></h3>
<p><img title="用户界面设计" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-19_ui_pattern_factory.png" alt="用户界面设计" width="550" height="250" /></p>
<p>　　<em><span style="font-style: normal;">UI Pattern Factory</span></em>既是一个UI模型库又是一个UI画廊。它展示和讨论<a href="http://uipatternfactory.com/p=stacked-tabs/" target="_blank">堆叠标签</a>、<a href="http://uipatternfactory.com/p=carousel/" target="_blank">旋转灯笼效果</a>、<a href="http://uipatternfactory.com/p=edit-in-place/" target="_blank">即时点击编辑</a>等UI模型。</p>
<h3>4.<a title="Interaction Design Pattern Library - Welie.com - home page." href="http://www.welie.com/patterns/index.php" target="_blank">Welie.com</a></h3>
<p><img title="网页设计" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-17_welie_dot_com.png" alt="网页设计" width="550" height="250" /></p>
<p>　　Welie.com的交互设计模型库提供了各种交互设计的设计模型，包括<a href="http://www.welie.com/patterns/showPattern.php?patternID=crumbs" target="_blank">面包屑导航</a>、<a href="http://www.welie.com/patterns/showPattern.php?patternID=tabbing" target="_blank">导航标签</a>、<a href="http://www.welie.com/patterns/showPattern.php?patternID=comment-box" target="_blank">评论框</a>等等。</p>
<h3>5.<a title="Pattern Tap - Interface Collection for Design Inspiration - home page." href="http://patterntap.com/" target="_blank">Pattern Tap</a></h3>
<p><img title="网页设计" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-16_pattern_tap.png" alt="网页设计" width="550" height="250" /></p>
<p>　　学习有效用户界面的设计，最好的办法是看看其他设计师是如何做的。你可以从Pattern Tap的设计模型展示中获得灵感。这儿收藏了<a href="http://patterntap.com/tap/collection/forms" target="_blank">表单设计</a>、<a href="http://patterntap.com/tap/collection/login" target="_blank">登录界面</a>、<a href="http://patterntap.com/tap/collection/subnavigation" target="_blank">二级导航</a>、<a href="http://patterntap.com/tap/collection/buttons" target="_blank">按钮</a>等资源。</p>
<h3>6.<a title="Design with Intent - Architectures of Control - Dan Lockton - home page." href="http://architectures.danlockton.co.uk/" target="_blank">Design with Intent</a></h3>
<p><img title="网页设计-教程" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-15_design_with_intent.png" alt="网页设计-教程" width="550" height="250" /></p>
<p><em>　　<span style="font-style: normal;">Design with Intent</span></em> 是 <a href="http://architectures.danlockton.co.uk/dan-lockton/" target="_blank">Dan Lockton</a> 的博客，主题是理解和影响用户交互。</p>
<h3>7.<a title="Usability in Website and Software Design" href="http://www.usabilityfirst.com/" target="_blank">Usability First</a></h3>
<p><img title="Usability First" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-14_usability_first.png" alt="Usability First" width="550" height="250" /></p>
<p>　　Usability First旨在提供与网站和应用相关的可用性的有价值的资料。Usability first的分类包括<a href="http://www.usabilityfirst.com/websites/index.txl" target="_blank">网站设计</a>、<a href="http://www.usabilityfirst.com/roi/index.txl" target="_blank">可用性投资回报率</a>和<a href="http://www.usabilityfirst.com/accessibility/index.txl" target="_blank">网络无障碍设计</a>。</p>
<h3>8.<a title="Usability.gov - home page." href="http://www.usability.gov/" target="_blank">Usability.gov</a></h3>
<p><img title="网站可用性-研究" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-13_usability_dot_gov.png" alt="网站可用性-研究" width="550" height="250" /></p>
<p>　　<em><span style="font-style: normal;">Usability.gov</span></em>是由美国卫生与公众服务部提供的可用性和用户中心设计的政府资源。您可以在这儿学习<a href="http://www.usability.gov/basics/" target="_blank">可用性基础</a>和<a href="http://www.usability.gov/methods/" target="_blank">可用性方法</a>。</p>
<h3>9.<a title="Designing Interfaces - home page." href="http://designinginterfaces.com/About_the_Book" target="_blank">Designing Interfaces</a></h3>
<p><img title="网页设计" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-12_designing_interfaces.png" alt="网页设计" width="550" height="250" /></p>
<p>　　<em><span style="font-style: normal;">Designing Interfaces</span></em>是一本在线图书，也就是<a href="http://books.google.com/books?id=oCTSeKfMaWUC" target="_blank">O’Reilly’s</a>出版的《<a href="http://books.google.com/books?id=oCTSeKfMaWUC" target="_blank">Designing Interfaces: Patterns for Effective Interaction Design.</a>》的摘要。（<a href="http://www.douban.com/subject/2365393/" target="_blank">豆瓣</a>）</p>
<h3>10.<a title="InfoDesign - Understanding by Design - home page." href="http://www.informationdesign.org/" target="_blank">InfoDesign</a></h3>
<p><img title="网站可用性" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-11_infodesign.png" alt="网站可用性" width="550" height="250" /></p>
<p>　　InfoDesign主要讨论信息设计方面的话题。也有一些关于<a href="http://www.informationdesign.org/archives/cat_accessibility.php" target="_blank">网络无障碍性</a>、<a href="http://www.informationdesign.org/archives/cat_usability.php" target="_blank">可用性</a>和<a href="http://www.informationdesign.org/archives/cat_user_experience.php" target="_blank">用户体验</a>方面的文章分类。</p>
<h3>11.<a title="useit.com - Jakob Nielsen on Usability and Web Design - home page." href="http://www.useit.com/" target="_blank">useit.com</a></h3>
<p><img title="用户体验" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-10_useit.png" alt="用户体验" width="550" height="250" /></p>
<p>　　useit.com是可用性专家Jakob Nielsen建立的网站。网站的<a href="http://www.useit.com/alertbox/" target="_blank">Alertbox</a>部分是一个讨论当前可用性问题的双周专栏。</p>
<h3>12.<a href="http://www.lukew.com/ff/" target="_blank">Functioning Form</a></h3>
<p><img title="表单设计" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-09_functioning_form.png" alt="表单设计" width="550" height="250" /></p>
<p>　　<em><span style="font-style: normal;">Functioning Form</span></em>是一个交互式设计博客，作者是国际公认的网络专家、作家<a href="http://www.lukew.com/ff/about.asp" target="_blank">Luke Wroblewski</a>。你能在Functioning Form上找到诸如《<a href="http://www.lukew.com/ff/entry.asp?589" target="_blank">英国航空公司网站表单设计</a>》和《<a href="http://www.lukew.com/ff/entry.asp?702" target="_blank">用户注册表单模型</a>》之类的文章。</p>
<h3>13.<a href="http://www.uie.com/" target="_blank">User Interface Engineering</a></h3>
<p><img title="网页设计" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-08_user_interface_engineering.png" alt="网页设计" width="550" height="250" /></p>
<p>User Interface Engineering公司主要进行用户界面工程的研究、培训和咨询，举办<a href="http://www.uie.com/events/uiconf/2008/" target="_blank">用户界面年会</a>。公司网站的<a href="http://www.uie.com/articles/" target="_blank">文献</a>栏目下有大量用户界面设计方面的文章。这些话题包括<a href="http://www.uie.com/articles/web_app_challenges/" target="_blank">web应用设计中的可用性挑战</a>和<a href="http://www.uie.com/articles/account_design_mistakes/" target="_blank">帐户登录页面需要避免的设计失误</a>。</p>
<h3>14.<a title="Usable Web - home page." href="http://www.usableweb.com/" target="_blank">Usable Web</a></h3>
<p><img title="网站-可用性" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-07_usable_web.png" alt="网站-可用性" width="550" height="250" /></p>
<p>　　<em><span style="font-style: normal;">Usable Web</span></em>收集了用户界面设计方面的话题的链接。虽然网站不再更新一些文章已经过时，但你总能找到超越时间的文章和资源。</p>
<h3>15.<a title="Usability Counts, a blog about Usability, User Experience, Information Architecture, and Social Media - home page." href="http://www.usabilitycounts.com/" target="_blank">Usability Counts</a></h3>
<p><img title="网站可用性-研究" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-06_usability_counts.png" alt="网站可用性-研究" width="550" height="250" /></p>
<p>　　<em><span style="font-style: normal;">Usability Counts</span></em>博客的作者是Patrick Neeman 和 Ha Phan，两位都是<a href="http://blog.bingo929.com/category/user-experience">用户体验</a>方面的顾问。博文中有航空公司网站表单的设计实例，也有<a href="http://www.usabilitycounts.com/2008/03/24/hello-world/" target="_blank">关于可用性的深入思考</a>。</p>
<h3>16.<a title="Usability Post - home page." href="http://www.usabilitypost.com/" target="_blank">Usability Post</a></h3>
<p><img title="网站可用性-分析" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-05_usability_post.png" alt="网站可用性-分析" width="550" height="250" /></p>
<p><em>　　<span style="font-style: normal;">Usability Post</span></em>是一个关于<a href="http://blog.bingo929.com/category/web-usability">可用性</a>设计的博客。博客文章中提到了很多技巧，比如<a href="http://www.usabilitypost.com/2008/09/16/utilize-space-efficiently-for-better-ui/" target="_blank">用页面空白改进用户界面</a>、<a href="http://www.usabilitypost.com/2008/07/30/photoshop-color-profiles-for-web-images/" target="_blank">用Photoshop颜色配置文件设计web图</a>像等。</p>
<h3>17.<a title="A List Apart User Science topic." href="http://alistapart.com/topics/userscience" target="_blank">A List Apart: User Science</a></h3>
<p><img title="网页设计-教程" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-04_alistapart.png" alt="网页设计-教程" width="550" height="250" /></p>
<p>　　A List Apart是最好的基于标准的设计和开发的文章资源，其中的<em>User Science</em>专题涵盖用户界面设计的各个方面。User Science的议题进一步分成三类：<a href="http://alistapart.com/topics/userscience/accessibility/" target="_blank">网络无障碍</a>、<a href="http://alistapart.com/topics/userscience/informationarchitecture/" target="_blank">信息架构</a>、<a href="http://alistapart.com/topics/userscience/usability/" target="_blank">可用性</a>。</p>
<h3>18.<a title="Insights and inspiration for the user experience community - home page." href="http://www.uxmatters.com/" target="_blank">UXmatters</a></h3>
<p><img title="用户体验" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-03_uxmatters.png" alt="用户体验" width="550" height="250" /></p>
<p>　　UXmatters是一个非营利性网络杂志。本杂志致力于分享有效用户体验技术，为专业人士提供用户界面（UX）资源。<a href="http://www.uxmatters.com/topics/" target="_blank">UXmatters杂志的议题</a>包括可用性、以用户为中心的设计、Web 2.0应用等等。有的文章在讨论<a href="http://www.uxmatters.com/MT/archives/000041.php" target="_blank">富网络应用对用户的帮助</a>和<a href="http://www.uxmatters.com/MT/archives/000068.php" target="_blank">搜索表单的可用性设计</a>。</p>
<h3>19.<a title="UX Magazine - The User Experience Magazine - home page." href="http://www.uxmag.com/" target="_blank">UX Magazine</a></h3>
<p><img title="用户体验" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-02_ux_magazine.png" alt="用户体验" width="550" height="250" /></p>
<p>　　<em><span style="font-style: normal;">UX Magazine</span></em> 主要讨论关于用户体验的话题，诸如<a href="http://www.uxmag.com/design/86/the-layers-of-design-the-style-layer" target="_blank">层样式设计</a>、<a href="http://www.uxmag.com/design/91/design-101-for-programmers" target="_blank">程序员的设计技巧</a>等。</p>
<h3>20.<a title="Boxes and Arrows home page." href="http://www.boxesandarrows.com/" target="_blank">Boxes and Arrows</a></h3>
<p><img title="网页设计" src="http://blog.bingo929.com/wp-content/uploads/2008/11/20-web-design-usabillity/14-01_boxes_and_arrows.png" alt="网页设计" width="550" height="250" /></p>
<p>　　<em><span style="font-style: normal;">Boxes and Arrows</span></em>提供交互设计、可用性设计和信息设计方面的专业信息。有的文章会教你<a href="http://boxesandarrows.com/view/getting-a-forms98" target="_blank">设计具有良好可用性的在心邮件应用</a>，还有<a href="http://boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio" target="_blank">利用VISIO展示富网络应用的例子</a>。</p>
<p>英文原文:<a title="Permanent Link to 20 Websites to Help You Master User Interface Design" rel="bookmark" href="http://sixrevisions.com/usabilityaccessibility/20-websites-to-help-you-master-user-interface-design/">20 Websites to Help You Master User Interface Design<br />
 </a>翻译:<a href="http://www.butwho.net/" target="_blank">不是俺</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.bingo929.com/20-websites-web-design-usabillity.html/feed</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>闲聊一下陈奕迅演唱会的用户体验</title>
		<link>http://blog.bingo929.com/eason-moving-on-tianjin-ux.html</link>
		<comments>http://blog.bingo929.com/eason-moving-on-tianjin-ux.html#comments</comments>
		<pubDate>Mon, 10 Nov 2008 10:19:38 +0000</pubDate>
		<dc:creator>暴风彬彬</dc:creator>
				<category><![CDATA[我的生活]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://blog.bingo929.com/?p=1835</guid>
		<description><![CDATA[　　前天晚上和GF一起去看了EASON(陈奕迅)的演唱会，演唱会本身非常精彩，整个晚上全场的观众都很High，原本对陈奕迅没有什么喜爱之情的我，在看完他卖力的演唱以后，也想把自己的Mp3装些... ]]></description>
			<content:encoded><![CDATA[<p style="float:left;margin-right:10px;"><a href="http://blog.bingo929.com/eason-moving-on-tianjin-ux.html"><img title="陈奕迅-天津-演唱会" src="http://blog.bingo929.com/wp-content/uploads/2008/11/7204t.jpg" alt="陈奕迅-天津-演唱会" width="200" height="102" /></a></p>
<p>　　前天晚上和GF一起去看了EASON(陈奕迅)的演唱会，演唱会本身非常精彩，整个晚上全场的观众都很High，原本对陈奕迅没有什么喜爱之情的我，在看完他卖力的演唱以后，也想把自己的Mp3装些他的歌了。</p>
<p>　　对于陈奕迅，我没什么可说的，只能用&#8221;精彩&#8221;形容。但对于演唱会的主办方，我想唠叨几句，你们太不考虑你们的上帝了！观众花了钱买了昂贵的场内票，却得不到同等价值的&#8221;用户体验&#8221;。下面我简单说两点为什么没有好的用户体验:</p>
<p><span id="more-1835"></span></p>
<h3>1.VIP贵宾区的座位&#8212;-脏！</h3>
<p>　　这次有幸拿到VIP贵宾区的两张票(别人送的)，本来也没奢望会享受VIP般的服务，只是觉得会看到舞台更清楚些。当我们怀着无比激动的心情走进天津奥体中心找到自己的座位时，我惊呆了&#8230;.座位好脏好脏&#8230;就像是几年都没人坐过一样，座位上厚厚的一层灰尘马上把之前的好心情打碎了。之后的行为可想而知，每个进场的观众都很不高兴的从口袋和包中寻找同样的东西——纸！</p>
<p>　　如果把这种现象模拟到Web中会是怎样的呢？如果使用FF之类浏览器的高端互联网用户来到某个期盼已久的网站，刚打开主页，发现网站在FF下无法正常浏览，或布局混乱根本无法完成必要的操作。然后网站弹出&#8221;友情提示&#8221;，本网站需要在IE浏览器下才能正常浏览。我估计90%以上的FF用户之前的好心情都会一扫而光，而这90%的用户中会有50%的人会放弃访问这个网站。当然，这个模拟并不一定很恰当，但是所产生的结果是一样的，那就是糟糕的最初<a href="http://blog.bingo929.com/category/user-experience">用户体验</a>！</p>
<p><img class="alignnone size-medium wp-image-1836" title="演唱会-用户体验" src="http://blog.bingo929.com/wp-content/uploads/2008/11/1.jpg" alt="演唱会-用户体验" width="500" height="375" /><br />
照片中是擦过和没擦过的椅子的对比</p>
<p><br class="spacer_" /></p>
<h3>2.看台区部分观众视线被挡</h3>
<p><img class="alignnone size-medium wp-image-1837" title="用户体验-分析" src="http://blog.bingo929.com/wp-content/uploads/2008/11/2.jpg" alt="用户体验-分析" width="500" height="347" /></p>
<p>　　照片中的那的搭起来的设备正好挡住了后面看台上的部分观众，也就是说这些观众花了钱买了票，但如果坐在相对的座位的话，演唱会就只能用耳朵听了，什么也看不到，全都被那个碍事的设备挡上了。在演唱会开始前，后面的观众很一致的喊&#8221;退票&#8221;"看不见&#8221;之类的不满声，可能是因为演唱会的看台上座率并没有满，最后那些视线被阻的观众改坐到了其它位置。</p>
<p>　　我想说的并不是那个阻挡视线的设备不应该放在那，但至少主办方事先已经知道这个东西会放在那，也会阻挡后面部分观众的视线，但是为什么还要卖那些座位的票呢？假设如果上座率是满的，那些视线被阻的观众还有地方去吗？难当真的要花钱来听歌，而不是看演唱会？这样的用户体验真是不敢恭维。虽然我没在看台上，也没有实现被阻，但可以想象那些观众当时愤怒的心情！</p>
<p>　　这两个用户体验问题主要还是演唱会还没开始的时候出现的，演唱会的过程还是蛮享受的，不过也希望主办方能多从观众的角度去考虑一下这些细节，不要总这样考验观众们的忍耐力。下面附上几张演唱会的照片，全场几万人一起唱《十年》的时候真的好感动。</p>
<p><img class="alignnone size-medium wp-image-1857" title="eason-moving-on" src="http://blog.bingo929.com/wp-content/uploads/2008/11/eason-4.jpg" alt="eason-moving-on" width="500" height="375" /></p>
<p><img class="alignnone size-medium wp-image-1838" title="陈奕迅-演唱会-照片" src="http://blog.bingo929.com/wp-content/uploads/2008/11/31.jpg" alt="陈奕迅-演唱会-照片" width="500" height="375" /></p>
<p><img class="alignnone size-medium wp-image-1839" title="eason-演唱会-天津" src="http://blog.bingo929.com/wp-content/uploads/2008/11/4.jpg" alt="eason-演唱会-天津" width="500" height="375" /></p>
<p><img class="alignnone size-medium wp-image-1840" title="陈奕迅-天津" src="http://blog.bingo929.com/wp-content/uploads/2008/11/5.jpg" alt="陈奕迅-天津" width="500" height="375" /></p>
<p><img class="alignnone size-medium wp-image-1858" title="eason-演唱会" src="http://blog.bingo929.com/wp-content/uploads/2008/11/eason-5.jpg" alt="eason-演唱会" width="500" height="375" /></p>
<p><img class="alignnone size-medium wp-image-1859" title="陈奕迅天津演唱会" src="http://blog.bingo929.com/wp-content/uploads/2008/11/eason-7.jpg" alt="陈奕迅天津演唱会" width="500" height="375" /></p>
<p><img class="alignnone size-medium wp-image-1860" title="eason-演唱会" src="http://blog.bingo929.com/wp-content/uploads/2008/11/eason-8.jpg" alt="eason-演唱会" width="500" height="375" /></p>
<p><img class="alignnone size-medium wp-image-1861" title="eason-演唱会" src="http://blog.bingo929.com/wp-content/uploads/2008/11/eason-6.jpg" alt="eason-演唱会" width="500" height="667" /><br class="spacer_" /></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.bingo929.com/eason-moving-on-tianjin-ux.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>四种影响网站可用性的网页设计例子</title>
		<link>http://blog.bingo929.com/bad-design-web-usabillity.html</link>
		<comments>http://blog.bingo929.com/bad-design-web-usabillity.html#comments</comments>
		<pubDate>Mon, 27 Oct 2008 14:09:45 +0000</pubDate>
		<dc:creator>暴风彬彬</dc:creator>
				<category><![CDATA[用户体验]]></category>
		<category><![CDATA[网站可用性]]></category>
		<category><![CDATA[网页设计]]></category>

		<guid isPermaLink="false">http://blog.bingo929.com/?p=1750</guid>
		<description><![CDATA[　　本文是雅各布·尼尔森开办的互联网设计可用性应用专业网站上登载的一文，用四个失败的例子讲述了四种网页设计上常犯的错误，这四个例子很好的解释了怎样的设计会使网站的可用性及... ]]></description>
			<content:encoded><![CDATA[<p>　　本文是雅各布·尼尔森开办的互联网设计可用性应用专业网站上登载的一文，用四个失败的例子讲述了四种网页设计上常犯的错误，这四个例子很好的解释了怎样的设计会使网站的可用性及用户体验变得一塌糊涂。相信对喜欢网页设计和关注<a href="http://blog.bingo929.com/category/web-usability">网站可用性</a>及<a href="http://blog.bingo929.com/category/user-experience">用户体验</a>的朋友会有帮助。</p>
<p>　　不合适的内容，坏链接，糟糕的导航系统，不清楚的分类&#8230;&#8230;哪些最影响商业成绩？以下的例子里，不合适的内容荣列“浪费企业最多金钱”榜首。</p>
<p>　　每年，不论在专业研究还是日常生活中，我都看到几千个设计上的错误。就像中了丹·诺曼的诅咒一样，半数的网页设计让我看了就感到生气：为什么人们不能按着丹 20年前就告诉他们的那样去做？</p>
<p>　　然而，网页设计者们也没有按照我 13年前说的去做，这就是让我大为吃惊的原因。下面罗列的几个近日遇到的最蠢设计算是我最近的小小收获。</p>
<h3>没法提供信息的链接:《纽约时报》</h3>
<p>nytimes.com 网站在每一篇文章下面都放了一个链接:</p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/10/nytimes.png"><img class="alignnone size-medium wp-image-1751" title="网站可用性-研究" src="http://blog.bingo929.com/wp-content/uploads/2008/10/nytimes-499x122.png" alt="网站可用性-研究" width="499" height="122" /></a><br />
 <em>点击可查看清晰大图</em></p>
<p><span id="more-1750"></span></p>
<p>　　谁会去点这个“下一篇商业文章”链接呢？除非是某些对“第 19篇文章”特别感兴趣的，否则没有几个人会去点击它。</p>
<p>　　除了数字以外，点遍这些链接看不到任何有用的信息 &#8212; 这种设计早在 12年前我就在对 <a class="old" title="Alertbox: Slate Magazine - An Early Review" href="http://www.useit.com/alertbox/9607.html">Slate.com</a> 的评论中批评过了。链接需要含有能帮助人们了解如果点击过去能链到什么地方的信息。人们没有时间每个链接都点一下去看到底可以链到什么地方。</p>
<p>　　《纽约时报》可以用统计学来为他们的设计辩护：也许不像我非难他们的那样，这种含糊的链接确实可以赢得几次点击。毕竟，如果你拥有上百万的用户，就算最蠢的设计点子也能排上点用场。就是这种设计哲学导致了类似时代广场这种冗长的网站，给人类感官以无情的打击。</p>
<p>　　问题在于，所有<strong>多余的元素</strong>都会损害网页上其它设计的效果。当你向人们推销那些无关紧要的链接的同时，也是在告诉人们忽略那些重要的链接。</p>
<p>　　（补充：《纽约时报》重新设计了他们的网站。现在，文章下面的链接改叫“更多商业文章”。好了一点，但还不够好。我还是保留我的批评，因为这个愚蠢的设计他们用了长达一年之久 &#8212; 无论如何就算在他们对它进行了“部分的”修改之后，你仍能从他们的错误中学到东西。）</p>
<p><br class="spacer_" /></p>
<h3>失控的模拟:订制机车</h3>
<p>　　机车商 specialized.com  用博物馆的陈列作为自己悬挂系统的类目页样式：</p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/10/specialized-bicycles-metaphor.jpg"><img class="alignnone size-medium wp-image-1752" title="网站可用性-设计" src="http://blog.bingo929.com/wp-content/uploads/2008/10/specialized-bicycles-metaphor-500x275.jpg" alt="网站可用性-设计" width="500" height="275" /></a><br />
 <em>点击可查看清晰大图</em></p>
<p>　　老实说，我喜欢用机车部件做的“鲸鱼骨架”。但在这样一个模拟的 3D 环境中浏览，想要看清各种悬挂系统的结构却痛苦异常。</p>
<p>　　3D 导航几乎每次都搞砸。难以操作，没法像 2D 界面那样做很多选择，而且运行速度很慢。</p>
<p>　　用户可以把对某个现实环境现有的知识运用到模拟环境中，因此使用模拟环境有时能让用户界面变得容易理解。本例中，尽管你知道怎样参观自然历史博物馆，但也不能帮助你更好地鉴别机车部件。使用模拟环境设计的网站几乎总是做过头，最终导致可用性的降低。犹如迷惑人的魔鬼，模拟环境让设计团队的注意力从网页本质的该展现给用户的实际内容上偏离开去。</p>
<p><br class="spacer_" /></p>
<h3>不合适的内容:林肯中心的爵士演出</h3>
<p>　　当在纽约参加我的可用性讨论会时，我想带演讲人们晚上出去听听爵士乐。下面是我在林肯中心爵士演出的网页上找到的信息：</p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/10/jazz-lincoln-no-content.jpg"><img class="alignnone size-medium wp-image-1753" title="网站可用性" src="http://blog.bingo929.com/wp-content/uploads/2008/10/jazz-lincoln-no-content-500x401.jpg" alt="网站可用性" width="500" height="401" /></a><br />
 <em>点击可查看清晰大图</em></p>
<p>　　都有哪些信息呢？网页提供了音乐家们的名字和一张首席长号手的照片。就这些！没有演员简介，没有演出曲目介绍，没有乐评，没有链到某个乐评的链接，没有音频片断让你试听乐队的演出。</p>
<p>　　公平的讲，jalc.org 给出了一些演出的音乐片段。<strong>样本音乐片段</strong>显然是与音乐相关的网站利用多媒体的一个手段；用音频片断说明音乐比用文字要容易得多。在大都会歌剧团的网站上听上一段音乐片段，你在一分钟内就能明白晦涩的谭盾歌剧和生动的莫扎特古典音乐之间的区别。</p>
<p>　　然而，上面的网页仅仅提出了个充满希望的请求（大字体的那行文字），希望人们在对演出一无所知的情况下“下预约”。除非你对乐队足够了解，否则怎么可能？！</p>
<p>　　不过，该网页也提供了几个不错的功能，比如支持转发的邮件功能和给其他移动装置用的纯文本格式。但是，要是能提供更多内容就更好了。</p>
<p><br class="spacer_" /></p>
<h3>卖弄的装饰性设计:柯里斯托弗·诺曼巧克力</h3>
<p>　　吃克里斯托弗·诺曼巧克力是令人愉快的事情，浏览他的网页却味同嚼蜡。当你从主导航菜单选择了一个类目以后，你看不到一个罗列着同类产品的页面。取而代之的是一幅卖弄的画面，就像下面这个“几何与水果”：</p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/10/cristophernorman-splash.jpg"><img class="alignnone size-medium wp-image-1754" title="网站可用性" src="http://blog.bingo929.com/wp-content/uploads/2008/10/cristophernorman-splash-500x317.jpg" alt="网站可用性" width="500" height="317" /></a><br />
 <em>点击可查看清晰大图</em></p>
<p>　　一般用户会以为这个类目下只有这两种产品，而且如果对页面上的梨或者多米诺盒子不感兴趣，他们会立即离开。而实际情况是，用户要点击进入画面之后，才可以看到有完整产品列表的那个真正的类目页面。</p>
<p>　　用这种卖弄的画面做网页主页糟糕透顶，不过用户最多只遇到一次这种情况。如果每个类目页面都用这种设计，用户就必须点过很多多余的页面才可以看到所有的产品。</p>
<p><br class="spacer_" /></p>
<h3>差劲的设计的商业代价</h3>
<p>　　这些差劲的设计理念让网站经营者付出多少代价？</p>
<p>　　《纽约时报》也许是付出代价最少的；大多数用户都会忽略那个没有意义的链接。同时，当然了，其它一般的链接得到了机会：在同样的地方，报纸可以提供一个链到和现在文章相关的其它页面的链接。能够从头到尾读完文章的用户很有可能去点击那个链接。因此，如果更好的利用该位置，或许网站有可能赢得额外 2-5% 的浏览量。</p>
<p>　　我断定那个内容糟糕的爵士演出网页损失最大。我们的产品页面用户测试报告（诺曼·尼尔森集团报告：《产品页面可用性的电子商务用户体验指导》）显示，当一个网页回答了用户对该产品的疑问时，他们极有可能作出购买的决定。几乎可以担保，只有那些对维克里夫·戈登极度忠诚的粉丝们，才会在没有提供任何实质信息的网页上预订林肯中心的那场演出。</p>
<p>　　我预测，如果加上更多信息，该网站能够卖出至少 5倍的票给那些平常观众们。在《提高可用性后的投资赢利》研究中，我们往往发现 1000% 甚至更多的销售增长。所以，加上有意义的内容，甚至可以让该网页成为能从那些非粉丝手里大赚利润的赢利法宝。总体销售额能够增长多少，就要看该演员的狂热拥护者的数量和那些仅仅有时喜欢听听爵士乐的观众数量之比。我认为，第二组人（非粉丝）的数量如此众多，如果网页内容组织得好，可以带来销售爆增。</p>
<p>　　其余两个网站付出的代价属于中间级别。对于大的网站来说，用笨拙的导航系统就像是给自己开了个死亡处方：如果要从超过1万个产品中找到自己想要的东西，用户是无法忍受浏览那些与目的分裂的过于卖弄的页面，或是那些过分虚拟的页面。但如果销售的产品数量不多的话 &#8212; 像克里斯托弗·诺曼和订制机车 &#8212; 积极的用户可以自己克服导航带来的麻烦。如果网站销售的产品很少，用户是不太可能在里边迷路的。</p>
<p>　　当然，消极用户一旦感到迷路就会立即离开网站。不管网站多么小，愚蠢的设计总会让他们损失金钱。</p>
<p><br class="spacer_" /></p>
<p style="text-align: right;">英文原文:<a href="http://www.useit.com/alertbox/bad-design.html" target="_blank">Four Bad Designs</a><br />
翻译:<a href="http://www.yeeyan.com/space/show/36059">nicomm</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.bingo929.com/bad-design-web-usabillity.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>可用性研究:用户在网站内部页面上的行为</title>
		<link>http://blog.bingo929.com/user-behavior-of-the-page.html</link>
		<comments>http://blog.bingo929.com/user-behavior-of-the-page.html#comments</comments>
		<pubDate>Tue, 14 Oct 2008 13:25:32 +0000</pubDate>
		<dc:creator>暴风彬彬</dc:creator>
				<category><![CDATA[用户体验]]></category>
		<category><![CDATA[网站可用性]]></category>

		<guid isPermaLink="false">http://blog.bingo929.com/?p=1605</guid>
		<description><![CDATA[　　网站可用性关系到它能为用户节省多少时间。网站可用性越高，用户体验也就越高，用户也就会增加停留在网站上的时间。当一个经验不足的用户通过你网站的一个深层链接访问某个内部... ]]></description>
			<content:encoded><![CDATA[<p>　　网站可用性关系到它能为用户节省多少时间。网站可用性越高，用户体验也就越高，用户也就会增加停留在网站上的时间。当一个经验不足的用户通过你网站的一个深层链接访问某个内部页面时，他们第一次会在那里平均花60秒钟的时间，而经验丰富的用户在他们第一次访问一个内部页面时会花45秒钟。</p>
<p>　　<strong>支持深层链接的一个主要原因是，同主页相比，用户会更加充分地阅读网站内部页面上的内容。</strong></p>
<p><span id="more-1605"></span></p>
<p>　　我们看到了内部页面和主页有同样的现象：即随着经验的增多，人们扫描第一次访问页面的速度会加快，同时决定他们想要在网站上做什么的过程也会更快。和进入到一个主页时相比，当用户进入到一个内部页面时，他们会花费70％～80％的更多时间来审视他们进入网站的位置，这是因为他们访问的内部页面和他们的任务有着更直接的关系。</p>
<p>　　既然用户在内部页面上花费45～60秒钟的时间，那么在理论上，他们就可能阅读大约200个单词，不过，通常他们会将一部分时间用于评估网站的导航系统以及决定下一步去哪里。然而，他们仍可能会阅读1 00个单词量的信息，这同他们进入主页时只阅读1 O～2n小单词相比已经显得相当多了。支持深层链接的一个主要原因就是因为用户在网站的内部页面上会阅读更多的内容。</p>
<p><strong><span style="font-size: medium; "> 主页和内部页面的比较</span></strong></p>
<p style="border: 1px solid #99c7fb; padding: 10px; width: 410px; background-color: #e4f1ff;"><strong>使用Web的经验　　花在主页上的时间　　花在内部页面上的时间</strong><br />
       经验不足                      35秒                               60秒<br />
       经验丰富                      25秒                               45秒 </p>
<p>　　与主页相比，人们会花费更多的时间在内部页面上。可以再次看到，具有更多web使用经验的用户能够以更快的速度扫描屏幕，而新手用户更倾向于很仔细地观看屏幕．</p>
<p>　　当用户浏览某个网站并访问其中的内部页面时，他们在每个页面上平均花费了27秒钟的时间。这个极短的时间强调了以下设计要点的重要性：即在每个页面上，对于用户想要得到的东西要表达得像水晶一样清楚。人们没有时间阅读所有的内容，因此他们将会在数秒钟的时间内对页面做出判断。</p>
<h3>设计提示:对内部页面上的链接进行优化</h3>
<p>　　在内部页面上所花费的大约半分钟的时间内，用户将其中的大部分用在了内容区域上，而不是导航区域。应当在这个区域中放置重要的链接，这样用户就很可能会看到它们。</p>
<div style="float: left; padding: 30px 15px 0 15px; width: 200px;"><span style="color: #808080;">　　比如说一个用户正在研究音乐播放器，并且他已经来到苹果公司网站的关于iP0ds产品的页面。平均来说，人们会阅读大约相当于下图中我们用红色的方框突出显示的文字数量。实际上，用户不会逐字地来阅读这两段，而是浏览上面的几段，并且每一段只会察看不到一半的内容。用户将会把45—60秒钟时间内的剩余部分用于观看照片、浏览那些以带有圆点的列表方式组织的功能列表以及页面上的其他内容。这个页面总共有523个单词(包括一个没有显示在这里的免责声明)，这些部分将花费普通用户两分钟的时间来阅读，而这超过了用户可能花在该页面上时间的两倍。页面上的文字是按照八年级的阅读水平来书写的，这符合我们对于成年人用户的建议。但是，它对于很多青少年来说就显得太难了，而他们恰好是这个产品很重要的一类目标用户。</span></div>
<div style="float:left;"><img class="alignnone size-medium wp-image-1607" title="网站可用性-研究" src="http://blog.bingo929.com/wp-content/uploads/2008/10/43.jpg" alt="网站可用性-研究" width="250" height="472" /></div>
<p><br class="spacer_" /></p>
<p style="width: 500px; display: block; clear: left; padding-top: 15px;">　　上图中显示的是用户是通过点击页面上的哪些位置来导航到同一个网站中的其他位置的。这里的数据是通过对4719个点击进行平均后得到的。</p>
<p style="text-align: center;"><img class="size-medium wp-image-1608 aligncenter" title="网站可用性-分析" src="http://blog.bingo929.com/wp-content/uploads/2008/10/63.jpg" alt="网站可用性-分析" width="300" height="162" /></p>
<p>　　如果您对网站可用性研究很感兴趣，可以<a href="http://blog.bingo929.com/category/web-usability">参考彬Go更多网站可用性相关文档</a>或<a href="http://feed.feedsky.com/bingo929" target="_blank">订阅彬Go</a>，也可以在此<a href="#respond">留言</a>与暴风彬彬一同探讨网站可用性。</p>
<p style="text-align: right;"><span style="color: #808080;">本文出自《网站优化-通过提高网站可用性构建用户满意的网站》</span></p>
<p style="display:block;background-color:#e9faff;border:1px solid #afedff;padding:10px;"><strong><span style="color: #ff0000;">转载声明:</span></strong><br />
 原载:<a href="http://blog.bingo929.com/">彬Go</a><br />
 本文链接:<a href="http://blog.bingo929.com/user-behavior-of-the-page.html">http://blog.bingo929.com/user-behavior-of-the-page.html</a><br />
 如需转载必须以链接形式注明原载或原文地址，谢谢合作</p>
<p><br class="spacer_" /></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.bingo929.com/user-behavior-of-the-page.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>中国网站2008年用户体验排名</title>
		<link>http://blog.bingo929.com/chinese-website-user-experience-top-list.html</link>
		<comments>http://blog.bingo929.com/chinese-website-user-experience-top-list.html#comments</comments>
		<pubDate>Mon, 06 Oct 2008 01:56:28 +0000</pubDate>
		<dc:creator>暴风彬彬</dc:creator>
				<category><![CDATA[用户体验]]></category>
		<category><![CDATA[网站]]></category>

		<guid isPermaLink="false">http://blog.bingo929.com/?p=1365</guid>
		<description><![CDATA[　　用户体验越来越被中国网站重视，关注用户体验在一定程度上成为网站人性化的标准，暴风彬彬一直关注着用户体验分析及用户体验研究，这些用户体验排名数据虽然说明不了什么，但客... ]]></description>
			<content:encoded><![CDATA[<p>　　用户体验越来越被中国网站重视，关注用户体验在一定程度上成为网站人性化的标准，暴风彬彬一直关注着用户体验分析及用户体验研究，这些用户体验排名数据虽然说明不了什么，但客观的讲，网站抓住用户体验就等于抓住了用户，抓住了用户才能获得更多的利润，用户体验在渐渐被中国的网站所接受，但仍有太多太多的中国网站忽视这用户体验的重要性。</p>
<h3><a href="http://blog.bingo929.com/chinese-website-user-experience-top-list.html">Gomez中国网站用户体验排行榜</a></h3>
<p><span id="more-1365"></span></p>
<p><strong>中国门户网站<a style="text-decoration:none;color:#000;" href="http://blog.bingo929.com">用户体验</a>排行榜</strong></p>
<p>　　排名网站响应时间(秒)可靠性(%)稳定性(秒)</p>
<p>　　1搜狐3.27 99.89% 4.23</p>
<p>　　2和讯网4.17 99.61% 4.23</p>
<p>　　3凤凰网3.38 99.78% 8.53</p>
<p>　　4 21CN 4.62 99.77% 6.33</p>
<p>　　5 MSN中国4.34 99.94% 8.51</p>
<p>　　6雅虎中国5.84 93.23% 8.07</p>
<p>　　7网易7.58 99.33% 9.63</p>
<p>　　8金融界网7.49 99.78% 11.09</p>
<p>　　排行榜平均7.42 98.91% 11.42</p>
<p>　　9 CCTV 7.54 99.16% 14.15</p>
<p>　　10东方财富网7.93 99.78% 14.50</p>
<p>　　11中华网9.06 98.69% 12.26</p>
<p>　　12 Tom 8.61 99.94% 14.10</p>
<p>　　13猫扑网8.67 99.89% 14.82</p>
<p>　　14北青网9.55 98.20% 13.48</p>
<p>　　15中新网8.46 98.93% 16.96</p>
<p>　　16腾讯网10.10 95.04% 14.01</p>
<p>　　17千龙网10.98 99.94% 14.17</p>
<p>　　18新浪网11.92 99.44% 16.59</p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<h4>中国搜索网站用户体验排行榜</h4>
<p><br class="spacer_" /></p>
<p>    排名 网站 响应时间(秒) 可靠性(%) 稳定性(秒)</p>
<p>　　1 百度 0.50 100.00% 1.10</p>
<p>　　2 易搜 0.69 100.00% 1.01</p>
<p>　　3 搜狗 1.13 100.00% 1.52</p>
<p>　　4 谷歌 0.98 100.00% 2.54</p>
<p>　　5 搜搜 0.95 99.94% 2.77</p>
<p>　　6 有道 1.39 100.00% 1.61</p>
<p>　　7 365.com 1.78 100.00% 2.28</p>
<p>　　8 九酷 1.57 99.33% 2.82</p>
<p>　　9 商龙 2.39 99.83% 3.02</p>
<p>　　排行榜平均 4.79 99.09% 7.00</p>
<p>　　10 中搜 5.35 99.49% 6.09</p>
<p>　　11 酷讯 5.58 99.78% 6.30</p>
<p>　　12 狗狗 4.7 99.66% 9.28</p>
<p>　　13 爱问 5.51 100.00% 8.89</p>
<p>　　14 YOK超级搜索 7.05 99.10% 6.05</p>
<p>　　15 雅虎 6.33 92.37% 8.46</p>
<p>　　16 奇虎 6.89 99.44% 11.23</p>
<p>　　17 奇查 7.65 98.54% 10.07</p>
<p>　　18 万方数据 6.16 98.43% 16.72</p>
<p>　　19 地带搜索 13.05 98.76% 13.49</p>
<p>　　20 VeryCD 16.09 97.07% 24.75</p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<h4>中国B2C网站用户体验排行榜</h4>
<p><br class="spacer_" /></p>
<p>排名 网站 响应时间(秒) 可靠性(%) 稳定性(秒)</p>
<p>　　1 易趣网 3.69 99.60% 6.01</p>
<p>　　2 卓越亚马逊 3.70 99.78% 6.19</p>
<p>　　3 No5时尚广场 4.27 99.89% 5.14</p>
<p>　　4 孔夫子旧书网 4.10 99.27% 7.61</p>
<p>　　5 篱笆网 3.66 93.01% 5.82</p>
<p>　　6 新蛋网 6.19 100.00% 6.49</p>
<p>　　7 D1便利网 6.50 99.72% 6.70</p>
<p>　　8 淘宝网 5.04 99.94% 9.97</p>
<p>　　9 红孩子 7.16 99.78% 6.37</p>
<p>　　10 麦网 6.54 99.72% 8.92</p>
<p>　　11 卡当网 8.54 98.48% 7.24</p>
<p>　　12 当当网 7.80 99.66% 13.36</p>
<p>　　13 京东商城 8.48 91.96% 9.09</p>
<p>　　排行榜平均 8.86 97.62% 11.55</p>
<p>　　14 DHC中国 9.36 99.83% 11.78</p>
<p>　　15 拍拍网 12.25 98.31% 19.07</p>
<p>　　16 东方CJ 11.61 87.32% 17.00</p>
<p>　　17 YY购物搜索 13.70 96.04% 17.55</p>
<p>　　18 时尚起义 14.25 96.79% 18.62</p>
<p>　　19 富贵网 15.60 97.80% 24.15</p>
<p>　　20 中商网 24.77 95.52% 23.92</p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<h4>中国新媒体网站用户体验排行榜</h4>
<p><br class="spacer_" /></p>
<p>排名 网站 响应时间(秒) 可靠性(%) 稳定性(秒)</p>
<p>　　1 优度 3.65 99.89% 4.38</p>
<p>　　2 优酷网 3.76 99.89% 5.13</p>
<p>　　3 土豆网 3.65 99.44% 6.78</p>
<p>　　4 激动网 3.35 93.77% 3.55</p>
<p>　　5 六间房 6.46 99.38% 9.18</p>
<p>　　6 皮皮网 6.61 98.99% 9.39</p>
<p>　　7 悠视网 6.34 99.33% 12.28</p>
<p>　　8 爆米花 9.81 99.89% 10.67</p>
<p>　　9 搜刮网 7.74 98.48% 11.23</p>
<p>　　10 PPS网络电视 7.52 99.44% 13.02</p>
<p>　　11 第一视频 10.06 99.55% 12.07</p>
<p>　　12 九天音乐网 7.37 98.31% 13.87</p>
<p>　　13 酷6网 7.99 98.03% 14.37</p>
<p>　　14 一听音乐网 10.40 99.27% 13.73</p>
<p>　　15 久游视频 9.51 99.26% 14.77</p>
<p>　　16 我乐网 1.65 82.84% 5.10</p>
<p>　　17 分贝网 9.55 94.76% 13.78</p>
<p>　　18 偶偶网 14.53 99.83% 14.80</p>
<p>　　19 PPLive 12.07 99.16% 16.81</p>
<p>　　20 网友天下 12.87 98.48% 15.68</p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p>      排行榜平均 13.49 96.70% 14.40</p>
<p>　　21 我秀网 16.04 98.76% 18.25</p>
<p>　　22 互联星空 19.13 98.35% 19.79</p>
<p>　　23 Mofile 22.40 98.14% 26.27</p>
<p>　　24 第九频道 14.23 70.74% 18.53</p>
<p>　　25 华聚网 110.55 93.47% 56.64</p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<h4>中国跨国公司网站用户体验排行榜</h4>
<p><br class="spacer_" /></p>
<p>排名 网站 响应时间(秒) 可靠性(%) 稳定性(秒)</p>
<p>　　1 可口可乐 1.55 93.84% 3.43</p>
<p>　　2 诺基亚 4.29 99.85% 3.13</p>
<p>　　3 联邦快递 3.70 99.46% 5.50</p>
<p>　　4 强生 3.31 94.28% 3.87</p>
<p>　　5 百事 4.43 95.74% 2.98</p>
<p>　　6 微软 4.43 99.61% 5.49</p>
<p>　　7 沃特迪斯尼 4.88 99.71% 8.31</p>
<p>　　8 麦当劳 4.71 99.61% 9.04</p>
<p>　　9 通用汽车 3.81 93.44% 8.35</p>
<p>　　10 雀巢 5.64 99.41% 9.79</p>
<p>　　11 辉瑞 5.20 93.34% 7.36</p>
<p>　　12 惠普 7.62 99.41% 6.48</p>
<p>　　13 宝马 5.48 97.60% 12.17</p>
<p>　　14 丰田 10.45 99.75% 4.28</p>
<p>　　15 思科 8.07 99.51% 8.84</p>
<p>　　16 皇家飞利浦电子 7.13 98.33% 10.33</p>
<p>　　排行榜平均 10.41 99.85% 7.98</p>
<p>　　17 摩托罗拉 10.01 99.31% 8.68</p>
<p>　　18 耐克 11.47 99.56% 7.95</p>
<p>　　19 汇丰控股 10.06 97.18% 11.71</p>
<p>　　20 戴尔 8.29 94.41% 16.98</p>
<p>　　21 三星 10.33 95.18% 15.93</p>
<p>　　22 沃尔玛 12.22 99.02% 14.98</p>
<p>　　23 埃克森美孚 10.66 97.20% 17.47</p>
<p>　　24 苹果 16.66 94.09% 20.25</p>
<p>　　25 宝洁 15.73 95.67% 27.23</p>
<p>　　26 通用电气 23.91 98.37% 15.27</p>
<p>　　27 IBM 18.54 95.65% 24.00</p>
<p>　　28 万事达 20.14 96.75% 22.20</p>
<p>　　29 索尼 19.51 90.68% 22.57</p>
<p>　　30 LG 29.29 96.89% 20.54</p>
<p style="text-align: right;">本数据采自<a class="top" href="http://www.icxo.com/" target="_blank">世界经理人</a></p>
<p><span><span style="color: #ff0000;"><strong>转载声明:</strong></span></span><br />
<span>转载本文必须以链接形式注明原载或本文链接，谢谢合作！<br />
原载:<a href="http://blog.bingo929.com/">彬Go<br />
</a>本文链接:http://blog.bingo929.com/chinese-website-user-experience-top-list.html</span><br class="spacer_" /></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.bingo929.com/chinese-website-user-experience-top-list.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>教你如何量化用户体验</title>
		<link>http://blog.bingo929.com/quantify-user-experience.html</link>
		<comments>http://blog.bingo929.com/quantify-user-experience.html#comments</comments>
		<pubDate>Sat, 04 Oct 2008 13:55:36 +0000</pubDate>
		<dc:creator>暴风彬彬</dc:creator>
				<category><![CDATA[用户体验]]></category>
		<category><![CDATA[网站可用性]]></category>
		<category><![CDATA[网页设计]]></category>

		<guid isPermaLink="false">http://blog.bingo929.com/?p=1343</guid>
		<description><![CDATA[　　大多数人都认为用户体验是网站成功的一个大致指标，分析一个网站在提供争取的用户体验的同时达到什么样的效果，往往会成为主观因素，但这普遍停留在观点的因素，缺乏一定的客观... ]]></description>
			<content:encoded><![CDATA[<p>　　大多数人都认为<strong>用户体验</strong>是网站成功的一个大致指标，分析一个网站在提供争取的用户体验的同时达到什么样的效果，往往会成为主观因素，但这普遍停留在观点的因素，缺乏一定的客观性。</p>
<p>　　今天暴风彬彬将向大家推荐一篇国外经典用户体验文章，让你更深入了解量化用户体验的方法，我发现这个方法对于提供给客户一个关于他们的网站和过去开发所作努力的快速、客观、形象的表现很有帮助。</p>
<h3>什么是<span style="font-style: normal;"><a style="text-decoration:none;color:#000;" href="http://blog.bingo929.com/category/user-experience">用户体验</a></span>？ </h3>
<p>　　“用户体验”这个术语指的是一个概念：把最终用户作为设计和开发活动的焦点，而不是系统、应用程序或者单纯的审美价值。它是基于一般的以用户为中心（用户至上）的设计理念。 </p>
<p>量化用户体验有四个互相关联的重要因素:</p>
<ol>
<li><strong> 品牌(branding) </strong></li>
<li><strong><a href="http://blog.bingo929.com/category/web-usability">可用性(usability)</a></strong></li>
<li><strong>功能性(functionality)</strong></li>
<li><strong>内容(content)</strong></li>
</ol>
<p>单独作用的话，这些因素中没有一个能带来积极的用户体验；然而，如果综合起来，这些因素就组成了一个网站成功的主要因素。</p>
<p style="text-align: center;"><a href="http://blog.bingo929.com/quantify-user-experience.html"><img class="size-medium wp-image-1344 aligncenter" title="用户体验-要素" src="http://blog.bingo929.com/wp-content/uploads/2008/10/ue-4elements.jpg" alt="用户体验-要素" width="484" height="484" /></a></p>
<p><span id="more-1343"></span></p>
<p>　　举例来说，一个设计精美的网站，却频繁地出现服务器错误或超时。或者想象一个很棒的数据库应用程序，由于某种原因而从未被使用过，因为它被深深地掩埋在了网站信息架构的深处。在两种情况中，我们都可以看到，独立的品牌、可用性、功能和内容等要素是无法说明一个网站是成功的。然而，当综合在一起时，这些核心要素就构成了用户体验的基础。</p>
<p><br class="spacer_" /></p>
<h3>一个客观的分析工具的必要性</h3>
<p>　　比如说你来了一位新领导 – 他们对网站现状不满意，想让你帮忙把握网站的正确航向。如果你像我一样的话，第一件要做的事就是先浏览一下这个网站，然后在脑海中做一些粗略的记录。然后你怎样把这些想法和记录传达回给你的客户，而不是简单地像撕成八瓣一样对现有网站批判一番？  </p>
<p>　　问题在于，我们每个人对一个<em><span style="font-style: normal;">网站</span></em>是好还是坏的感知，是受我们个人背景和行业特性的影响而有所偏倚的。如果被叫来评价一个网站的优点和缺点，一个开发人员、可用性专员、设计人员或信息架构人员可能会有完全不同的评判。 </p>
<p> 　　一个客观的测量分析工具，会帮你提供给客户有事实依据的建议，而不仅仅是主观臆断和观点。本文中暴风彬彬将和大家探讨的方法会帮助你: </p>
<ul>
<li><span>尽可能消除个人偏见（主观因素）</span></li>
<li><span>让不同背景的人（设计人员，开发人员，客户）能够在理解<em><span style="font-style: normal;">网站</span></em>上有统一的共识</span></li>
<li><span>创建基准规则，以便于<em><span style="font-style: normal;">网站</span></em>与其竞争者或过去的开发努力作比较</span></li>
<li><span>为你的客户提供一个关于他们<em><span style="font-style: normal;">网站</span></em>的优缺点的事实依据和可视化的展示</span></li>
</ul>
<p><br class="spacer_" /></p>
<h3>衡量用户体验</h3>
<p><br class="spacer_" /></p>
<p><span>如上所述，<em><span style="font-style: normal;">用户体验</span></em>由四个相互关联的要素所组成：  </span></p>
<ul>
<li><span><em><span style="font-style: normal;">品牌</span></em></span></li>
<li><span><em><span style="font-style: normal;">可用性</span></em></span></li>
<li><span><em><span style="font-style: normal;">功能</span></em></span></li>
<li><span><em><span style="font-style: normal;">内容</span></em></span></li>
</ul>
<p> 但是，我们如何量化和衡量这些看似无形的元素呢？</p>
<p>　　方法很简单。我们把分析分为四个部分 – 每个用户体验的元素为一个部分。对于每一个元素，我们创建一系列的描述或参数，用于针对性地测量网站。我们为每一个描述创建一个从1到X的尺度范围；并且在这个范围内给每个描述打分。</p>
<p><span>一旦你完成了这个分析的第一部分，四个栏目中的每一个描述就都有了一个对应的分数。</span></p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/10/ue-1.png"><img class="alignnone size-medium wp-image-1345" title="用户体验-分析" src="http://blog.bingo929.com/wp-content/uploads/2008/10/ue-1.png" alt="用户体验-分析" width="500" height="500" /></a></p>
<p><br class="spacer_" /></p>
<p><span>　　在本文附上的范例分析中，我们只为每个元素使用了五个描述或参数。因此，我们使用了一个20分的尺度范围，这样<em><span style="font-style: normal;">网站</span></em>的最高分值就是100。所以，如果我们为每个元素添加额外的五个描述或参数，我们就会使用10分的尺度范围来打分。</span></p>
<p> 下面就是对范例分析中的每个元素以及描述或参数的概要：</p>
<p><br class="spacer_" /></p>
<p><strong>品牌</strong></p>
<p>品牌包括在网站中所有审美的、设计相关的项目。它带给网站想要的组织形象或信息的创意。用于测量品牌的描述包括：</p>
<ul>
<li><span><em><span style="font-style: normal;">网站</span></em>提供给访客有吸引力的和难忘的体验</span></li>
<li><span><em><span style="font-style: normal;">网站</span></em>的视觉效果与品牌特征保持一致</span></li>
<li><span>图像、附加<em><span style="font-style: normal;">内容</span></em>和多媒体对于体验的增值</span></li>
<li><span><em><span style="font-style: normal;">网站</span></em>传达出品牌的感知预示</span></li>
<li><span><em><span style="font-style: normal;">网站</span></em>利用了媒体的能力来增强和扩展品牌 </span></li>
</ul>
<p><span><strong><em><span style="font-style: normal;">功能</span></em></strong></span></p>
<p><span><em><span style="font-style: normal;">功能</span></em>包括所有技术方面的和“后台的”进程和应用。它让<em><span style="font-style: normal;">网站</span></em>提供给所有最终用户交互式的服务，而且重要的是，注意这有的时候同时意味着前台公众用户和后台管理员。网站功能的描述包括：</span></p>
<ul>
<li><span>用户及时获得对他们查询和提交信息的响应</span></li>
<li><span>任务进程的清晰告知（比如，成功页面或邮件更新提示）</span></li>
<li><span><em><span style="font-style: normal;">网站</span></em>和应用严格遵守通用的安全和隐私标准</span></li>
<li><span>在线<em><span style="font-style: normal;">功能</span></em>与离线业务流程结合</span></li>
<li><span><em><span style="font-style: normal;">网站</span></em>包含管理员工具来加强管理员的效率 </span></li>
</ul>
<p><span><strong><em><span style="font-style: normal;">可用性</span></em></strong></span></p>
<p><span><em><span style="font-style: normal;">可用性</span></em>带来的是所有<em><span style="font-style: normal;">网站</span></em>元素和特性的总体易用性。可用性之下的二级主题包括导航和易用性（友好度）（注释：易用性处理的是使在线内容可用于用户的体验，享受和使用的问题）。可用性的描述包括：</span></p>
<ul>
<li><span><em><span style="font-style: normal;">网站</span></em>防止错误发生，并帮用户从错误中恢复</span></li>
<li><span>整体网页侧重针对主要受众优化</span></li>
<li><span><em><span style="font-style: normal;">网站</span></em>帮助访问者达成一般目标和任务</span></li>
<li><span><em><span style="font-style: normal;">网站</span></em>遵循它自己的一致性和标准</span></li>
<li><span><em><span style="font-style: normal;">网站</span></em>为残疾用户提供内容 </span></li>
</ul>
<p><span><strong><em><span style="font-style: normal;">内容</span></em></strong></span></p>
<p><span><em><span style="font-style: normal;">　　内容</span></em>指的是<em><span style="font-style: normal;">网站</span></em>的实际内容（文本，多媒体，图像）及其结构，或信息架构。我们来看信息和内容是如何按照定义的用户需要和客户的商业需求组织的。测量内容的描述包括：</span></p>
<ul>
<li><span>链接密度有足够的清晰度，且容易导航</span></li>
<li><span><em><span style="font-style: normal;">内容</span></em>组织方便用户达到目标</span></li>
<li><span><em><span style="font-style: normal;">内容</span></em>及时准确</span></li>
<li><span><em><span style="font-style: normal;">内容</span></em>适合客户需要和商业需求</span></li>
<li><span>多语言的综合性<em><span style="font-style: normal;">内容 </span></em></span></li>
</ul>
<p><span>　　在多数情况下，我会为这四种元素分别使用10到20个独立的描述。我建议你使用如上描述作为你创建你自己的分析的基础。请记住，如果你添加了更多的描述，你必须也调整20分的尺度，以便每个元素的总分为100。例如，如果你为每个元素使用10个描述，那么你的评分尺度应该是1-20。如果你为每个元素使用20个描述，你的尺度应该是1-5。</span></p>
<p><span>作为这一类分析的例子，请你下载<a href="http://blog.bingo929.com/wp-content/uploads/2008/10/quantifyusabilitysample.zip">这个范例Excel文件</a>。</span></p>
<p><br class="spacer_" /></p>
<h3>将你的结果显示出来</h3>
<p>一旦你完成了你的分析，并且得到了每个描述或参数的分值，就是时候把数据放入清晰而便于告知的格式中去了。</p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/10/ue3.gif"><img class="alignnone size-medium wp-image-1346" title="用户体验-分析" src="http://blog.bingo929.com/wp-content/uploads/2008/10/ue3.gif" alt="用户体验-分析" width="484" height="319" /></a></p>
<p>　　首先我们要做的是，把每个元素的所有的分值加总。因为我们已经设置了分值尺度，来为每个元素提供满分为100的分数，我们真正得到的是一个百分比的分数。一旦我们有了这些百分数，我发现最有效的是创建一个雷达图来直观地呈现。微软的Excel或者Open Office Calc都很适合，尽管任何带有图表<em><span style="font-style: normal;">功能</span></em>的数据表软件都可以。</p>
<p>　　使用你的数据表软件，你可以创建一个可视化的数据展示。请参见你在上面下载的示例文件来获取更多的范例。</p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/10/ue4.gif"><img class="alignnone size-medium wp-image-1347" title="用户体验-分析" src="http://blog.bingo929.com/wp-content/uploads/2008/10/ue4.gif" alt="" width="484" height="411" /></a></p>
<p><br class="spacer_" /></p>
<h3>通过分析获得更多的创意</h3>
<p>　　关于本文描述的分析和方法最棒的事情是，他们可以用于满足你的特定客户或项目需求。</p>
<p>　　你当然可以在分析中添加第五个类别来描述易用性（友好度）或者商业指标。例如，你得到了一个政府客户，需要严格遵循508规则（针对美国）。你可以容易地创建一套描述或参数来专门处理易用性（友好度）元素，修改你的图表来相应展示。同样，你也可以很容易地创建一个类别来专门处理你的客户的重要商业指标，比如，ROI，点击率，转化量，或者重复顾客数。</p>
<p>　　这个分析平台使你能在你选取的某一元素中增加权重，比如你的客户是一个生产商，它非常侧重品牌和外观及氛围。毫无疑问你可以修改衡量体系，给予品牌元素更多更好的侧重。给于可通知性少些侧重。</p>
<p><br class="spacer_" /></p>
<h3>实践使用</h3>
<p>　　我已经把这个分析用于很多我所从事的项目。我常常在新客户的提案中包含一个“快餐式”分析作为附录，来提供预期的客户一个关于他们<em><span style="font-style: normal;">网站</span></em>相对于竞争者的简单印象。</p>
<p>　　提供这类的评论通常能够给你一个极好的机会来展示你的专业性。机会是其它竞标的公司不会包含这样的免费咨询服务 – 并且你在提案中包含的这个报告可能会是一个对你有利的决定性因素。</p>
<p>　　在其它事例中，我已经有客户出钱购买关于他们<em><span style="font-style: normal;">网站</span></em>的深入的分析和完整的建议。这类报告包括，对于每种描述或参数，完成不同的描述性段落，再配上截屏范例。如果我最终通过跟进我的建议而赢得了客户，我通常会预定网站发布6个月后的再一次评估，作为显示进步的方式，同时加强我的服务的价值。</p>
<p>　　<span>这种分析也能作为一个入门项目，引出更多的业务。如果你给这种分析定价合理，它可以是一个很棒的工具来让你得到新客户，并展示给他们你的服务的好处。</span> </p>
<p style="text-align: right;">via:<a href="http://www.sitepoint.com/print/quantify-user-experience" target="_blank">sitepoint</a></p>
<p><br class="spacer_" /></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.bingo929.com/quantify-user-experience.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>浅谈网站用户体验UX与SEO的关系</title>
		<link>http://blog.bingo929.com/user-experience-and-seo.html</link>
		<comments>http://blog.bingo929.com/user-experience-and-seo.html#comments</comments>
		<pubDate>Sun, 28 Sep 2008 04:05:35 +0000</pubDate>
		<dc:creator>暴风彬彬</dc:creator>
				<category><![CDATA[SEO]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://blog.bingo929.com/?p=1287</guid>
		<description><![CDATA[　　用户体验，英文名称：User Experience，缩写便为UE或者UX。 　　广泛的讲是一种纯主观的在用户使用一个产品或者某种服务的过程中建立起来的切身感受。因为它是纯主观角度的，就难免会带... ]]></description>
			<content:encoded><![CDATA[<p>　　用户体验，英文名称：User Experience，缩写便为UE或者UX。</p>
<p>　　广泛的讲是一种纯主观的在用户使用一个产品或者某种服务的过程中建立起来的切身感受。因为它是纯主观角度的，就难免会带有一定的不确定因素。因每个人的观点不同也决定了每个用户的真实体验是无法通过其他途径来衡量相比的。但是对于一个主观相似的用户群体来讲，其用户体验的共同性是能够由良好的设计以及包装能够达到。</p>
<p><span id="more-1287"></span></p>
<p>　　站在网站的角度来讲则是是指用户访问一个网站或者使用一个系统时的全部体验感受。他们对网站的印象和切身感觉，是否成功？是否享受？是否还会再来使用。</p>
<p>　　衡量网站用户体验有四个主要因素，分别是品牌、使用性、功能性、内容。</p>
<p>　　关于用户体验没有确切的标准，它随着网站的服务色彩与针对人群不同采取的方式也不同。</p>
<p>　　针对小型服务型行业的网站有时浏览者仅仅为最快速的找到联系方式、或者准确的找到自己需求的产品资料、图片等等，这点仅仅需要网站的层次鲜明、样式美观大气、体现得当即可达到。</p>
<h2><span style="color: #3366ff;">至于用户体验与SEO的关系</span></h2>
<p>　　两者在引擎营销中有密不可分的关系，目前众多的优化公司仅仅为了排名而去SEO，很难将用户体验考虑进去，仅仅为了排名而去交换友情链接、修改网站标题、增加关键词密度，有的甚至在破坏网站的用户体验。</p>
<p>　　真正的白帽SEO技术应当从网站的用户体验出发，增进引擎友好型，再加以辅助链接，使网站在引擎推广中达到最佳效果。</p>
<p>　　引擎是根据什么进行排名的？</p>
<p>1）网站的用户体验度，目前引擎所能够判别的仅仅为网站内容原创性（此部还有待于进一步提高），内部链接的协调性（板块层次目录结构鲜明有条理），网站内容更新速度等等..</p>
<p>2）众行业网站对其网站的投票，这里确切的说是指外部链接，如果是大家一致认可的行业权威网站自然排在最前面了，但是目前的SEO改变了自然投票现象（因此引擎会逐渐降低此方面的权重性）</p>
<p>3）网站是否有不良记录，例如网站空间的稳定性.是否能故无时无刻的为浏览者带来浏览，网站域名的年龄.是否从事此行业多年，这样具有一定的信誉保障等等..</p>
<p>引擎判定排名的因素还有很多，这里仅单单介绍几种，由此可见，引擎排名算法始终是跟着搜索者的体验角度去走的，它也必须注重自己网站的用户体验满足一个用户搜索角度更好的找到相关信息、相关产品、交易安全保障等等因素，至于它们的用户体验方式则是一个复杂的过程，甚至是几个人几个团队所无法相及的。</p>
<p><br class="spacer_" /></p>
<p style="text-align: right;">via:<a href="http://www.seopm.cn/zeya/">ZeYa</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.bingo929.com/user-experience-and-seo.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>用户体验分析：用户期望什么时候在哪里找到登录区域？</title>
		<link>http://blog.bingo929.com/where-when-user-expectations.html</link>
		<comments>http://blog.bingo929.com/where-when-user-expectations.html#comments</comments>
		<pubDate>Sat, 27 Sep 2008 05:18:46 +0000</pubDate>
		<dc:creator>暴风彬彬</dc:creator>
				<category><![CDATA[用户体验]]></category>
		<category><![CDATA[网页设计]]></category>

		<guid isPermaLink="false">http://blog.bingo929.com/?p=1230</guid>
		<description><![CDATA[　　最近，有一个设计师问我们一个关于用户体验的问题:用户期望在页面的哪儿找到登录区域呢？有的站点把它放在左边，有的却放在右边。我们是不是有什么研究能够表明放在这儿比放在那... ]]></description>
			<content:encoded><![CDATA[<p style="float:left;margin-right:10px;"><a href="http://blog.bingo929.com/where-when-user-expectations.html"><img class="alignnone size-medium wp-image-1239" title="用户体验分析" src="http://blog.bingo929.com/wp-content/uploads/2008/09/login-where1.jpg" alt="用户体验分析" width="150" height="170" /></a></p>
<p>　　最近，有一个设计师问我们一个关于<strong>用户体验</strong>的问题:用户期望在页面的哪儿找到登录区域呢？有的站点把它放在左边，有的却放在右边。我们是不是有什么研究能够表明放在这儿比放在那儿能得到更好的网站用户体验呢？</p>
<p>　　这样的用户体验设计问题拉出了一个更大的问题:为用户的期望而设计。一方面来说，用户，无论是新生儿还是新手，都会对某件事物理应出现的地方产生期望。为这种期望而设计将会减少用户的认知负担，并且能够让他们能够将注意力集中在他们的任务上。从另一方面来说，并不是所有的业界标准都是设计的最佳之道。设计师能够正确地摆脱前人的束缚，才会出现更好的替代方案。甚至有时，那将是现有标准的一种“进步”。因此，有个两头论:我们应该为用户的期望而设计还是给他们一个新的用户体验？——这种新的用户体验也许会更好但会违背用户的期望。登录区域的问题对我们来说是个不错的案例来探索如何解决这个两头论。我们可以利用视觉设计和交互设计作为导向来帮助我们解决这个问题，从而提高网站用户体验&#8230;</p>
<p><span id="more-1230"></span></p>
<h2><span style="color: #3366ff;"><span style="color: #ff0000;">到底、究竟该放在哪里</span></span></h2>
<p>　　在最近的包括经常浏览的用户的研究中，我们有机会看到第一手关于当登录功能被放置在页面的不同地方时，登录功能将如何见效的资料。登录放在哪儿并没有一贯 的原则。例如，hertz.com把他们的登录放在左边栏的中间；Marriott.com放在页面的中央；USAriways.com把用户名和密码输 入框横跨在页面的最顶端。</p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/09/hertz_homepage.png"><img class="alignnone size-medium wp-image-1231" title="用户体验-要素" src="http://blog.bingo929.com/wp-content/uploads/2008/09/hertz_homepage-500x432.png" alt="用户体验-要素" width="500" height="432" /></a></p>
<p><em>Hertz home page</em></p>
<p><br class="spacer_" /></p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/09/marriott_homepage.png"><img class="alignnone size-medium wp-image-1232" title="网站用户体验" src="http://blog.bingo929.com/wp-content/uploads/2008/09/marriott_homepage-500x297.png" alt="网站用户体验" width="500" height="297" /></a></p>
<p><em>Marriott Home Page</em></p>
<p><br class="spacer_" /></p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/09/usair_homepage.png"><img class="alignnone size-medium wp-image-1233" title="用户体验的要素-登录区域的位置" src="http://blog.bingo929.com/wp-content/uploads/2008/09/usair_homepage-500x405.png" alt="用户体验的要素-登录区域的位置" width="500" height="405" /></a></p>
<p><em>US Airways Home Page</em></p>
<p>　　虽然没有太多的一贯的<a style="color:#000;text-decoration:none;" href="http://blog.bingo929.com/category/user-experience">用户体验</a>原则，但是他们都确实使用了登录表单——一个用户名或者email输入框，加上一个密码输入框——或者只是用了一个叫做“登录”的链 接，这个链接带领用户到第二个登录界面。Orbitz.com的页面上方就有一个这样的链接，Avis.com把他们的链接放在了页面的中间，Westin.com将链接放在了左上方。</p>
<p>　　观察用户我们得出，无论是位置还是样式(表单或者链接)都没有明显的区别。这些位置和样式都很好地完成了功能——想登录的用户可以没有挫败感、不会出错地开始登录。这对设计师来说是个好消息。这个结论给予了他们在设计上的很大的灵活性。</p>
<h2><span style="color: #ff0000;">到底、究竟该如何表现</span></h2>
<p>　　虽然放在哪儿并不重要，但是我们确实发现了视觉表现的重要性。貌似很明显地，如果登录区域或者链接在页面上难以看见，那么用户会遇到麻烦的。</p>
<p>　　在最近的对电影租赁网站的UI部门经理Bill Scott的采访中，他承认了我们的这个发现。他讲述了一个故事:由于“登录”链接太小，被混乱在设计之中，因而Netflix的用户到了网站的新页面上 却找不到“登录”链接。当他们对颜色、大小和表现做了一些微小的改动后，他们发现，问题基本消失了。</p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/09/netflix_registerpage.png"><img class="alignnone size-medium wp-image-1234" title="用户体验-研究" src="http://blog.bingo929.com/wp-content/uploads/2008/09/netflix_registerpage-500x443.png" alt="用户体验-研究" width="500" height="443" /></a></p>
<p><em>Netflix Register Page</em></p>
<p>　　使用视觉设计上的一些最优方法可以帮助团队保证在他们的用户需要登录功能的时候找到它。对登录使用一些视觉上的变化可以让那些寻找登录的人很容易在页面中发现它。</p>
<h2><span style="color: #ff0000;">双输入框模式</span></h2>
<p>　　根据我们对用户的观察，貌似他们首先会去寻找两个等大的文字输入框。他们的眼睛会先会先扫描页面(常常伴随着鼠标移动)寻找两个输入框。</p>
<p>　　网站上的一般包含在一个不同的背景和边框里的两个输入框，可以很快的抓住用户的注意。他们应该会在第一个框内输入用户名，在第二个框内输入密码。</p>
<p>　　这样的模式十分根深蒂固以至于影响了本不该是登录框的模式。在Etrade.com上，一个在线贸易行业银行业务的网站，他们设计了两对双输入框。第一对是标准的登录区域，但是更突出的另一对是股票报价和站内搜索功能。</p>
<p><br class="spacer_" /></p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/09/etrade_homepage.png"><img class="alignnone size-medium wp-image-1235" title="用户体验-设计" src="http://blog.bingo929.com/wp-content/uploads/2008/09/etrade_homepage-500x245.png" alt="" width="500" height="245" /></a></p>
<p><em>ETrade Home Page</em></p>
<p><br class="spacer_" /></p>
<p>　　由于用户对这种的模式的强烈的反应，常常见到用户将自己的用户名和密码输到股票和搜索的地方，完全忽视了正确的登录表单，这样便影响了<a style="color:#000;text-decoration:none;" href="http://blog.bingo929.com/">用户体验</a>。由此可见，设计师在放置一堆文字输入框的时候应当注意用户是否会把它们误认为登录框。</p>
<h2><span style="color: #ff0000;">登录链接模式</span></h2>
<p>　　如果用户没有看到两个输入框，那么他们会开始扫描寻找一个叫做登录的链接。(我们还未发现有人用按钮来表示它。其实按钮也是一种选择。但是，我们怀疑如果按钮没有恰当地表现，那么这可能会照成认知上的不一致。)</p>
<p>　　在我们的研究中，有一个模式很可行。这个模式就是:一旦登录，就把登录链接更换成用户名、id、或是email地址，接着后边放上一个退出的链接。用户表现出他们理解了这个语义，这使他们安心地知道了系统已经确认了他们的帐号信息。</p>
<p>　　和两个输入框模式一样，登录链接需要在视觉上做得明显并且能够与在页面上的许多其他的链接区分开来。聪明的视觉设计师可以轻易地将“登录”做得明显而又不影响页面的美观。</p>
<h2><span style="color: #ff0000;">什么时候让用户登录？</span></h2>
<p>　　我们不但发现用户的期望仿佛不能决定页面上登录信息应该出现的地方，我们同时还注意到当登录应该出现的时候，用户有很强的期望它能够出现。交互流程的设计在我们研究的站点中有很明显的影响。</p>
<p>　　在Hertz.com上，首页向浏览者同时展示了登录区域和租赁详情区域。我们许多浏览者来网站时对航班信息记忆犹新。他们可能先开始输入航班信息，然后点击按钮开始选车并进入查看支付信息的步骤。</p>
<p>　　不幸的是，这种方法并不能让用户很好享受保存着他们的车参数和支付信息的Hertz一等俱乐部的会员资格。一旦进入了第二个步骤，他们必须返回首页，重新登 录，然后再次输入到达航班和离开航班的数据。在我们研究的时候，他们一旦开始了这个流程，就没办法能够做到不用放弃并重新开始就能预订。(注：Hertz 随后变更了他们的设计。这个问题不再重现。)</p>
<p>　　在Marriott.com上，注册用户在搜索酒店之前是不需要登录的。他们可以选择一间酒店准备入住并开始进行预订。当站点需要展示一个页面，并且如果有储存的会员信息将会使这个页面更加有效的时候，浏览者可以在不用重复上诉步骤的前提下选择登录。</p>
<p>　　虽然这时交互设计很重要，但是它并不能降低视觉设计的地位。有些Marriott的浏览者由于登录框不显著地出现在页面的右侧以致没有发现它。用户体验降低。</p>
<p><br class="spacer_" /></p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/09/marriott_reservationpage.png"><img class="alignnone size-medium wp-image-1236" title="用户体验分析" src="http://blog.bingo929.com/wp-content/uploads/2008/09/marriott_reservationpage-500x375.png" alt="用户体验分析" width="500" height="375" /></a></p>
<p><em>Marriott Reservation Page</em></p>
<p>　　Westin.com使用了另一种方法，将“喜达屋荣誉会员”登录(新的注册会员的噱头)作为表单的第一栏放在了页面的中央。浏览者在预定的时候很容易看到。(注：Marriott近期将他们的设计改得更类似于Westin的方式。)</p>
<p><br class="spacer_" /></p>
<p><a href="http://blog.bingo929.com/wp-content/uploads/2008/09/westin_reservationpage.png"><img class="alignnone size-medium wp-image-1237" title="网站用户体验" src="http://blog.bingo929.com/wp-content/uploads/2008/09/westin_reservationpage-500x371.png" alt="网站用户体验" width="500" height="371" /></a></p>
<p><em>Westin Reservation Page</em></p>
<h2><span style="color: #ff0000;">期望、视觉设计和交互设计</span></h2>
<p>　　视觉设计让我们能够让元素更加突出，这样用户就能容易地找到他们想要的，从而提升网站用户体验。交互设计让我们能够将元素一体化，形成对话，这样用户能够在他们需要的时候就能用到。</p>
<p>　　制作很好的用户体验的时候，并不是一直在设计用户所期望的东西。相反的，应该是设计明显地在用户需要的那一刻去迎合他们的东西。拥有强大的视觉设计和交互设计技能的团队，会找到他们如何进入更高阶的设计的方法的。</p>
<p style="text-align: right;">via:<a href="http://www.om19.cn/" target="_blank">om19</a></p>
<p><br class="spacer_" /></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.bingo929.com/where-when-user-expectations.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

