<?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>uetalk &#124; 有一说 &#187; 互联网分享</title>
	<atom:link href="http://www.uetalk.com/category/internet_sharing/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.uetalk.com</link>
	<description>Interaction Design can change the world</description>
	<lastBuildDate>Tue, 13 Jul 2010 03:54:17 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.3</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>像对话那样进行评论</title>
		<link>http://www.uetalk.com/2009/01/comment-right-now/</link>
		<comments>http://www.uetalk.com/2009/01/comment-right-now/#comments</comments>
		<pubDate>Fri, 09 Jan 2009 03:49:10 +0000</pubDate>
		<dc:creator>coffeelone</dc:creator>
				<category><![CDATA[互联网分享]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[comment]]></category>
		<category><![CDATA[ued]]></category>

		<guid isPermaLink="false">http://www.uetalk.com/?p=129</guid>
		<description><![CDATA[源地址：http://www.yeeyan.com/articles/view/pestwave/23793
博客上的评论通常都是断断续续的，而Jim Jeffers开发的开源项目“鼓励评论（Encouraged Commentary）”则让评论像对话那么简单自然。


&#8220;鼓励评... ]]></description>
			<content:encoded><![CDATA[<p><span style="color: #999999;">源地址：<a href="http://www.yeeyan.com/articles/view/pestwave/23793" target="_blank">http://www.yeeyan.com/articles/view/pestwave/23793</a></span></p>
<p>博客上的<a class="bodytag" href="http://www.yeeyan.com/articles/tag/%E8%AF%84%E8%AE%BA" target="_blank">评论</a>通常都是断断续续的，而Jim Jeffers开发的开源项目“鼓励评论（<a href="http://donttrustthisguy.com/2009/01/04/encouraged-commentary/" target="_blank">Encouraged Commentary</a>）”则让评论像对话那么简单自然。</p>
<div>
<div class="asset-body">
<p>&#8220;鼓励<a class="bodytag" href="http://www.yeeyan.com/articles/tag/%E8%AF%84%E8%AE%BA" target="_blank">评论</a>&#8220;有三个强大的功能：</p>
<p>这些<a class="bodytag" href="http://www.yeeyan.com/articles/tag/%E5%8A%9F%E8%83%BD" target="_blank">功能</a>是利用jQuery编写的，灵感来自于 <a href="http://www.readwriteweb.com/archives/ubiquity_gets_an_update_prettier_faster.php" target="_blank">Ubiquity</a>，允许用户选中某一段文字，然后立刻就此做出回应。“鼓励评论”在此基础之上进行了改进，将这些对话和内容衔接起来。</div>
<div class="asset-more">
<p>第一，用户选中文章的任何一段文字，然后出现一个“回应（Respond）按钮”，允许用户立刻进行评价。</p>
<p><img style="display: block;" src="http://img.ucdchina.com/upload/snap/2009-01/8930b5cc4d5c72455415df904b0c3bc5.gif" alt="imgEncouragedCommentaryScreen.gif" vspace="5" width="560" />第二，选中<a class="bodytag" href="http://www.yeeyan.com/articles/tag/%E8%AF%84%E8%AE%BA" target="_blank">评论</a>中的文字，并对其进行评论，自动建立类似于Twitter里“@用户”的对话形式。</p>
<p>第三，可以跟踪<a class="bodytag" href="http://www.yeeyan.com/articles/tag/%E8%AF%84%E8%AE%BA" target="_blank">评论</a>之间的链接。当鼠标指向任何一位评论者时，会显示该评论者所有评论内容，点击项目可以查看详情。</p>
<p><a class="bodytag" href="http://www.yeeyan.com/articles/tag/%E5%8A%9F%E8%83%BD" target="_blank">功能</a>演示请参考Jeffer的博客：<a href="http://donttrustthisguy.com/2009/01/04/encouraged-commentary/" target="_blank">Don&#8217;t Trust This Guy</a>。该项目开源代码下载地址： <a href="http://github.com/jimjeffers/encouraged-commentary/tree/master" target="_blank">Encouraged Commentary project on GitHub</a>.</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.uetalk.com/2009/01/comment-right-now/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>“没有结果”很特别</title>
		<link>http://www.uetalk.com/2009/01/nothing-is-special/</link>
		<comments>http://www.uetalk.com/2009/01/nothing-is-special/#comments</comments>
		<pubDate>Fri, 09 Jan 2009 03:31:26 +0000</pubDate>
		<dc:creator>coffeelone</dc:creator>
				<category><![CDATA[互联网分享]]></category>
		<category><![CDATA[ued]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://www.uetalk.com/?p=123</guid>
		<description><![CDATA[原文：Nothing is special
原作者：Chris Noessel；译者：UCD翻译小组，Weakow Wang
Article copyright by Chris Noessel and Cooper.
Chris Noessel和Cooper版权所有。
用户界面中，数字随处可见，冀以提供大量信息。通常... ]]></description>
			<content:encoded><![CDATA[<h6><span style="color: #808080;">原文：<a href="http://www.cooper.com/journal/2008/12/nothing_is_special.html" target="_blank">Nothing is special</a><span style="text-decoration: underline;"><br />
</span>原作者：<a href="http://www.cooper.com/journal/chris_noessel_1" target="_blank">Chris Noessel</a>；译者：<a href="http://ucdchina.com/topic/59" target="_blank">UCD翻译小组</a>，<a href="http://weakow.com/" target="_blank">Weakow Wang</a><span style="text-decoration: underline;"><br />
</span>Article copyright by Chris Noessel and <a href="http://www.cooper.com/" target="_blank">Cooper</a>.<br />
Chris Noessel和Cooper版权所有。</span></h6>
<p>用户界面中，数字随处可见，冀以提供大量信息。通常，数字越大表示内容越多（如你查看评论列表时），或者要做的工作越多（如你查看自己的收件箱 时）；数字越小通常表示项目数量越少。然而，当界面中必须呈现数字零时，该数应与其它数值区别对待。为什么呢？正如我将要在下文解释的，根据不同的上下 文，“零”可以代表很多事情。</p>
<h3>搜索结果</h3>
<p>零个结果要么表示关键词不在搜出的数据集里，要么表示用户把关键词敲错了。每一种可能性都暗示需要一种不同的用户帮助。</p>
<ul>
<li>纠正了关键词，也没有结果？你需要换一个词，或者去其它地方看看。</li>
<li>是否把关键词敲错了？你需要提供正确的关键词。</li>
</ul>
<p>当结果为零时，请在设计上提醒用户注意到这个错误，或者提供可替换的关键词供用户选择。</p>
<p><a href="http://weakow.com/uploads/2009/01/google-0search.jpg" target="_blank"><img class="alignnone size-full wp-image-198" title="Google的零搜索结果" src="http://weakow.com/uploads/2009/01/google-0search.jpg" alt="Google的零搜索结果" width="238" height="238" /></a></p>
<p class="image-note">当搜索结果为零时，<a href="http://www.google.com/" target="_blank">Google</a>给出“您是不是要找……”的建议来帮助用户<span id="more-123"></span></p>
<h3>引起注意的信号</h3>
<p>我们设计软件的时候，很多工作都是在引导用户的注意力。为了帮助用户完成任务，我们需要在合适的位置添加一些引起用户注意的信号。</p>
<p>例如，在桌面软件中，重大的错误报告通常需要提醒用户注意，因为这些代表用户正在等待的解决方案出了状况。为了让用户知道“我们并没有忘记你”，我 们需要在全站导航中给出状态指示。这种指示通常是一个全面的、可视化的、非模式化的反馈（rich, visual, modeless feedback，<a href="http://www.cooper.com/journal/2008/08/rich_visual_modeless_feedback.html" target="_blank">RVMF</a>），如“错误报告（2）”。</p>
<p>但是，如果没有重大的错误报告，提示用户注意到这一点就不那么明智。这时的“错误报告(0)”就成了快速浏览导航时不必要的障碍。相反地，我们将RVMF放置到导航中，这样各选项在相同的“注意水平(attention level)”上，用户可以继续其它的工作。</p>
<p><a href="http://weakow.com/uploads/2009/01/rvmf.png" target="_blank"><img class="alignnone size-full wp-image-200" title="RVMF" src="http://weakow.com/uploads/2009/01/rvmf.png" alt="" width="280" height="323" /></a></p>
<p class="image-note"><a href="http://office.microsoft.com/en-us/outlook/default.aspx" target="_blank">Microsoft Outlook</a>这一点上做得很好，在没有需要注意的邮件时放弃使用RVMF。</p>
<h3>社区变量</h3>
<p>0个参与者看起来有些凄凉。“0条评论”的标签会让一篇博文看起来无人关心。“0个成员”会让一个聊天室看起来冷冷清清。这种标签会负面地影响用户对某个事物的看法。</p>
<p><a href="http://weakow.com/uploads/2009/01/flickr-zerocomments.jpg" target="_blank"><img class="alignnone size-full wp-image-202" title="Flickr的零条评论" src="http://weakow.com/uploads/2009/01/flickr-zerocomments.jpg" alt="Flickr的零条评论" width="225" height="225" /></a></p>
<p class="image-note"><a href="http://www.flickr.com/" target="_blank">Flickr</a>的大多数照片看起来不受欢迎（大多数带有“0条评论”的标签）。</p>
<p>新发布的文章或者在网络低峰时期都没有什么评论，但这只是时间问题。这篇文章也许时效性很强，不会被进一步讨论。或者可能是讽刺性文章，会随着时间不断擦出火花。把具有负面意义的标签改造成一次机会吧。</p>
<p>比如，与其显示“0条评论”，不如换成“添加评论”。</p>
<h3>参与变量</h3>
<p>像Yahoo! Answers那样的网站，回答问题可以让用户加分，但是参与这种奖励机制对使用网站来说不是必须的。尽管“0分”确实给了那些天生好胜的用户赢取积分的动力，但是用户也许根本不知道什么是积分或者那些积分该怎么用。</p>
<p><a href="http://weakow.com/uploads/2009/01/yahooa.jpg" target="_blank"><img class="alignnone size-full wp-image-203" title="Yahoo! Answers" src="http://weakow.com/uploads/2009/01/yahooa.jpg" alt="Yahoo! Answers" width="309" height="481" /></a></p>
<p class="image-note"><a href="http://answers.yahoo.com/" target="_blank">Yahoo! Answers</a>一开始就让你知道自己是个失败者。</p>
<p>在这种情况下，你也许可以把“总分：0”改成“总分：0。开始赢取积分！”，然后添加一个了解更多信息的链接。一个“什么是得分”的链接可以帮助改进用户的操作。</p>
<p>这无疑是一点额外的工作。交互设计师必须把它细化，视觉设计师必须适应改变了的大小，而且编码人员也必须额外的在变量为零时改变显示状态，但是因为这是用户感兴趣的，尊重零所代表的不同结果——使“没有结果”变得特别。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uetalk.com/2009/01/nothing-is-special/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Account Sign-in: 8 Design Mistakes to Avoid</title>
		<link>http://www.uetalk.com/2008/12/account-sign-in-8-design-mistakes-to-avoid/</link>
		<comments>http://www.uetalk.com/2008/12/account-sign-in-8-design-mistakes-to-avoid/#comments</comments>
		<pubDate>Sun, 21 Dec 2008 09:12:31 +0000</pubDate>
		<dc:creator>coffeelone</dc:creator>
				<category><![CDATA[互联网分享]]></category>
		<category><![CDATA[sign-in]]></category>
		<category><![CDATA[ued]]></category>
		<category><![CDATA[可用性]]></category>

		<guid isPermaLink="false">http://www.uetalk.com/?p=112</guid>
		<description><![CDATA[不错的文章，有时间翻译一下。
from:Here
By Jared M. Spool
Along with their popular line of high-end networking equipment, Cisco Systems offers something else for Cisco.com visitors to buy: a line of Cisco-brand leisure wear and accessories, ... ]]></description>
			<content:encoded><![CDATA[<p>不错的文章，有时间翻译一下。</p>
<p>from:<a href="http://www.uie.com/articles/sign_in_process_reprint/"><strong>Here</strong></a></p>
<p>By <strong>Jared M. Spool</strong></p>
<p><strong>Along with</strong> their popular line of high-end networking equipment, Cisco Systems offers something else for Cisco.com visitors to buy: a line of Cisco-brand leisure wear and accessories, everything from wind breakers to golf balls. The only problem is, to see the line of logo-emboldened products, you need to first fill out a registration form.</p>
<p>Yes. You read that correctly. Just to *see* the available products, you need to create an account by filling out the four-page, 45-question form. (You have to tell Cisco your job role twice, your job title once, and the language you prefer to speak 3 times &#8212; all in English.) Then, if you can find your way back to the online marketplace, you can see the selection of laser-light key chains with the Cisco logo.</p>
<p><strong>There are many great business advantages</strong> to having users create an account and log into the system. You know who is using your system, how often they visit, and what they do on the site. You can store information they might need later, such as their order history and their billing info for future purchases. And, you can offer them content and services reserved for only your best clientele.</p>
<p>Yet, in usability test after usability test, we see the registration and sign-in processes to be consistently problematic. <strong>It&#8217;s the most common thing</strong> that scares users away from shopping on e-commerce sites. It generates the most calls to the customer-support call center.<span id="more-112"></span></p>
<p><strong>Designing an account registration and sign-in process</strong> that doesn&#8217;t frustrate users turns out to be very difficult to achieve. It looks easy at the outset, but a pile of subtleties can sneak up on your experience, making something that should be simple become stressful for the users.</p>
<p><strong>Here are 8 common design mistakes </strong>we often see as we watch users try to create accounts and sign into the site:</p>
<h3><span style="color: #ff0000;">Mistake #1</span>: Having a Sign-in In The First Place</h3>
<p>It seems the reason Cisco requires you to log in just to see the golf balls for sale is not all products are available for the general public. Some are only for employees (who also get a nice discount). Some are only for certified Cisco engineers. To know what products and prices to display, the site needs to know who you are.</p>
<p>Fortunately, most sites don&#8217;t take this approach. On most sites, you can do many things without identifying yourself.</p>
<p>And, that&#8217;s the way customers like it. They hate having to create an account to do something simple, such as download a white paper or pay for a product they&#8217;ve chosen. As one online shopper said recently during a usability test, &#8220;I don&#8217;t want to develop a relationship with these guys. I just want to buy something.&#8221;</p>
<p>Practically unheard of in the travel industry, Midwest Airlines doesn&#8217;t require their customers to register to buy an airline ticket. Instead, customers can make a purchase as a guest. Of course, they still have to enter their name and billing info, but they aren&#8217;t forced to create a username and password if they don&#8217;t want to.</p>
<h3><span style="color: #ff6600;">Mistake #2</span>: Requiring Sign-in Too Soon</h3>
<p>Part of Cisco&#8217;s issue was requiring the customer to sign in (and new customers to register) before they could see the products. Had they required it later, maybe after clicking on a link labeled &#8220;Show me my employee discount&#8221; or &#8220;Checkout&#8221;, the shoppers would have been less frustrated.</p>
<p>Amazon set the gold standard by waiting until the last possible moment to require sign-in. Clicking on &#8220;My Account&#8221;, users sees the entire list of account support options before they identify themselves. In some cases, such as one-click shopping, they never have the user sign-in. The cookie on the machine is good enough.</p>
<h3><span style="color: #ffcc00;">Mistake #3</span>: Not Stating the Benefits to Registering</h3>
<p>Creating an account puts a burden on the user. They have to answer the questions, many of which have nothing to do with their current task. They have to come up with a user name they&#8217;ll remember. They have to pick a password they&#8217;ll easily recall. They worry about getting email or having their information sent to the deepest, darkest regions of the Internet. Watch users for any amount of time and you&#8217;ll notice a huge resistance to registering.</p>
<p>What do they get in return for this added burden? At Midwest Airlines, they say right on the sign-in page: access to your frequent flyer account, booking award travel, changing reservations after they are made, and hold reservations for 24-hours, just to name a few benefits.</p>
<h3><span style="color: #99cc00;">Mistake #4</span>: Hiding the Sign-In Button</h3>
<p>Frequent customers of Netflix usually go straight to their personal home page, showing status information and movie recommendations. Yet, when cookies are deleted or they access the service from a different machine, they need to log in.</p>
<p>The default page, in that instance, was designed to sell potential new customers on the site. It had a very visible registration button. Unfortunately, the member login link was much harder to see. This caused frequent calls to the Netflix call center, until the team made the member sign-in link more visually distinct.</p>
<h3><span style="color: #3366ff;">Mistake #5</span>: Not Making &#8220;Create New Account&#8221; or &#8220;Forgot Your Password&#8221; a Button or Link</h3>
<p>At Spirit Air&#8217;s web site, the good news is they provide users with an easy way to create account and retrieve a lost password. The bad news is the links to these functions, which appear in a pull down menu, don&#8217;t really look like links. They look to users like explanatory text. Several users didn&#8217;t realize they were there and searched elsewhere on the site, to little avail.</p>
<h3><span style="color: #33cccc;">Mistake #6</span>: Not Providing Sign-in Opportunities at Key Locations</h3>
<p>We&#8217;ve observed many users will prefer to log in at the last possible moment. Maybe its because they don&#8217;t want the distraction of remembering their login information or possibly because they&#8217;re immersed in their tasks. It&#8217;s at the instance when the account can help them, such as preventing them from re-entering billing information, they suddenly desire to log in.</p>
<p>The best sites anticipate these moments and have an easy login capability. Orbitz lets their customers get well into the purchase process, and then has a simple login option to retrieve flying preferences, like meal selections and aisle or window choices.</p>
<h3><span style="color: #cc99ff;">Mistake #7</span>: Asking for Too Much Information When Registering</h3>
<p>A common trap we see site designers fall into is thinking that, once the user starts filling out questions, we want to ask them everything we could ever want to. (Cisco, during their four-page registration process, asks the users to specify the number of items presented in search results.)</p>
<p>Yet, users typically want to answer as few questions as possible. The best sites just ask for a username and password (or just a password if they are using the email address and already have it). They later ask for any profile or personalization information, when the need arises.</p>
<h3><span style="color: #999999;">Mistake #8</span>: Not Telling Users How You&#8217;ll Use Their Information</h3>
<p>&#8220;Why do they need to know my home phone number?&#8221; the user asked when trying to download a technical white paper for work. Naturally, the user was quite suspicious.</p>
<p>At Virgin America, the designers explain why they need a phone number, &#8220;In case we need to contact you, provide at least one number.&#8221; While they prompt for a mobile, home, and business number, they are giving a reason.</p>
<p>Midwest Airlines is even clearer: &#8220;Please provide a phone number where you can be reached in the event of a change to your flight reservation.&#8221; Who wouldn&#8217;t want to have the airline call them for that?</p>
<h3>Finding the Mistakes</h3>
<p>Creating a perfect registration and sign-in process takes tremendous work. The best way to identify the problems is to conduct periodic usability tests, with regular registered users, infrequent users, and first time users. If your tests are like the ones we&#8217;ve conducted, you&#8217;ll see these mistakes (and probably others) emerge almost instantly.</p>
<p><strong>Want to hear more tips on improving your sign-in process? </strong></p>
<p>When trying to attract a new customer, it&#8217;s not just the sign-in process we have to worry about &#8212; we also have to convince the user that it&#8217;s worth the investment to sign up for our product or service. That&#8217;s why we&#8217;ve asked Joshua Porter to give his very popular <a href="http://tinyurl.com/66tjyu">Designing for Sign-Up presentation</a> at Thursday&#8217;s UIE Virtual Seminar. He&#8217;ll show you how the most successful sites create an experience that makes sign up both frictionless and delightful.</p>
<h4><strong>Has your design suffered from these mistakes?</strong></h4>
<p>What have you done to improve it? We want to hear your thoughts, join the conversation on our <a href="http://www.uie.com/brainsparks/2008/12/09/uietips-sign-in-process">Brain Sparks blog</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uetalk.com/2008/12/account-sign-in-8-design-mistakes-to-avoid/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>But, what if?</title>
		<link>http://www.uetalk.com/2008/12/but-what-if/</link>
		<comments>http://www.uetalk.com/2008/12/but-what-if/#comments</comments>
		<pubDate>Sun, 21 Dec 2008 08:48:43 +0000</pubDate>
		<dc:creator>coffeelone</dc:creator>
				<category><![CDATA[互联网分享]]></category>
		<category><![CDATA[ued]]></category>
		<category><![CDATA[可用性]]></category>

		<guid isPermaLink="false">http://www.uetalk.com/?p=105</guid>
		<description><![CDATA[安全提问要考虑所提问题的用户覆盖面，尽量找些通用的题目。就像原文所说的：不是每个人都念过大学，不是每个人都有配偶，即便是有配偶也不是每个人都只有一个&#8230;
另外，不要有太多... ]]></description>
			<content:encoded><![CDATA[<p>安全提问要考虑所提问题的用户覆盖面，尽量找些通用的题目。就像原文所说的：不是每个人都念过大学，不是每个人都有配偶，即便是有配偶也不是每个人都只有一个&#8230;<br />
另外，不要有太多的问题供用户选择，因为各个站点的问题都有可能不同，而用户不可能把每一个站点的选择都记住。生日就是个很好的问题。</p>
<p>The story below comes from <a href="http://www.uie.com/brainsparks/2008/12/19/but-what-if/"><strong>Here</strong>.</a> By<strong> Jared Spool</strong></p>
<p><strong>The</strong> security challenge question on Bank of America’s site seems innocuous:<br />
<img src="http://www.uie.com/images/blog/BankOfAmerica_SecurityQuestion-20081219-200933.png" alt="Bank of America Security Question" /><br />
In what year (YYYY) did you graduate from high school?</p>
<p><span style="color: #ff0000;"><strong>But, what if </strong></span>the user didn’t graduate high school? (Little known fact: <em>I</em> didn’t graduate high school, so I’m a little sensitive to this question.)<span id="more-105"></span><br />
Should the user enter the date they would’ve graduated high school? Should they make up a date? How will they remember something that didn’t actually happen?<br />
It’s surprising how many security challenge questions are unanswerable like this. I doubt it leaves the user with a positive feeling about the experience.</p>
<p><strong>Update: </strong>This is from the Vanguard web site:<br />
<img src="http://www.uie.com/images/blog/Vanguard_SecurityQuestion-20081219-204555.png" alt="Security Challenge Question on Vanguard" /><br />
<span style="color: #000000;">Where did</span><span style="color: #000000;"> </span>you and your spouse meet for the first time? (Enter the full name of CITY only)</p>
<p><span style="color: #ff0000;"><strong>What about</strong></span> multiple marriages? Widows?<br />
To add insult to injury, the design replaces every letter the user types with a dot, so they can’t see if they’re typing the city correctly. (Again, I grew up in a city named <em>Schenectady</em>. Not something I’d want to type in the dark.)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uetalk.com/2008/12/but-what-if/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Usability Week 2009 Conference</title>
		<link>http://www.uetalk.com/2008/12/usability-week-2009/</link>
		<comments>http://www.uetalk.com/2008/12/usability-week-2009/#comments</comments>
		<pubDate>Sun, 21 Dec 2008 08:21:42 +0000</pubDate>
		<dc:creator>coffeelone</dc:creator>
				<category><![CDATA[互联网分享]]></category>
		<category><![CDATA[Conference]]></category>
		<category><![CDATA[Jakob Nielsen]]></category>
		<category><![CDATA[可用性]]></category>

		<guid isPermaLink="false">http://www.uetalk.com/?p=103</guid>
		<description><![CDATA[from:Here 可用性盛会，值得关注。议题和具体内容狂点这里
什么时候国内也举办类似的会议呢？






Apr 5-10

Jun 22-27


May 17-22


Jul 27-Aug 1




... ]]></description>
			<content:encoded><![CDATA[<p>from:<a href="http://www.nngroup.com/events/"><strong>Here</strong></a> 可用性盛会，值得关注。议题和具体内容狂点<a href="http://www.nngroup.com/events/">这里</a></p>
<p>什么时候<span style="color: #ff0000;">国内</span>也举办类似的会议呢？</p>
<p><a href="http://www.nngroup.com/events/"><img src="http://www.nngroup.com/events/images/uw2009.gif" border="0" alt="Usability Week 2009" width="211" height="21" /></a></p>
<table id="tblPhotoHeader" style="height: 203px;" border="0" cellspacing="1" cellpadding="0" width="341">
<tbody>
<tr>
<td><a href="http://www.nngroup.com/events/washington_dc/agenda.html"><img class="alignnone" style="border: 0pt none;" src="http://www.nngroup.com/events/images/uw2009_washington_dc.jpg" border="0" alt="Washington, D.C." width="140" height="100" /><br />
</a></p>
<p><a href="http://www.nngroup.com/events/washington_dc/agenda.html"><span>Apr 5-10</span></a></p>
<p><a href="http://www.nngroup.com/events/san_francisco/agenda.html"><img class="alignnone" style="border: 0pt none;" src="http://www.nngroup.com/events/images/uw2009_san_francisco.jpg" border="0" alt="San Francisco" width="140" height="100" /></a></p>
<p><a href="http://www.nngroup.com/events/san_francisco/agenda.html"><span>Jun 22-27</span></a></td>
<td><a href="http://www.nngroup.com/events/london/agenda.html"><img class="alignnone" style="border: 0pt none;" src="http://www.nngroup.com/events/images/uw2009_london.jpg" border="0" alt="London" width="140" height="100" /><br />
</a></p>
<p><a href="http://www.nngroup.com/events/london/agenda.html"><span>May 17-22</span></a></p>
<p><a href="http://www.nngroup.com/events/sydney/agenda.html"><img class="alignnone" style="border: 0pt none;" src="http://www.nngroup.com/events/images/uw2009_sydney.jpg" border="0" alt="Sydney" width="140" height="100" /><br />
</a></p>
<p><a href="http://www.nngroup.com/events/sydney/agenda.html"><span>Jul 27-Aug 1</span></a></td>
<td><a href="http://www.nngroup.com/events/san_francisco/agenda.html"></a></td>
<td><a href="http://www.nngroup.com/events/sydney/agenda.html"></a></td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://www.uetalk.com/2008/12/usability-week-2009/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Importance of Conventions</title>
		<link>http://www.uetalk.com/2008/12/the-importance-of-conventions/</link>
		<comments>http://www.uetalk.com/2008/12/the-importance-of-conventions/#comments</comments>
		<pubDate>Thu, 18 Dec 2008 03:38:53 +0000</pubDate>
		<dc:creator>coffeelone</dc:creator>
				<category><![CDATA[互联网分享]]></category>
		<category><![CDATA[convention]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[ued]]></category>

		<guid isPermaLink="false">http://www.uetalk.com/?p=65</guid>
		<description><![CDATA[常规的重要性。创新也要尽量符合用户自身的心智模型，建立在易用的基础之上。
from:Here
By Ashley Towers &#124; November 28, 2008
Conventions are important. They emerge as the ‘way things are done’. As such, when we see... ]]></description>
			<content:encoded><![CDATA[<div class="entry-meta">常规的重要性。创新也要尽量符合用户自身的心智模型，建立在易用的基础之上。</div>
<div class="entry-meta">from:<a href="http://usabilityfriction.com/2008/11/28/the-importance-of-conventions/"><strong>Here</strong></a></div>
<div class="entry-meta"><span class="author vcard">By <a class="url fn n" title="View all posts by Ashley Towers" href="http://usabilityfriction.com/author/Administrator/">Ashley Towers</a></span><span class="meta-sep"> | </span><span class="entry-date"><abbr class="published" title="2008-11-28T09:59:56-0600">November 28, 2008</abbr></span></div>
<div class="entry-meta"><strong>Conventions are important.</strong> They emerge as the ‘way things are done’. As such, when we see a control on a device, we apply our previous knowledge of similar systems and make assumptions about what will happen when the control is activated. The more experience you have in a particular field, the more conventions you know. The more conventions you know, the quicker you are at learning something new; but only as long as the conventions are followed.</div>
<div class="entry-meta">When you held your first MP3 player you (probably!) instinctively knew how to play and pause a track. You’d never used one before, but you knew how to do this because the manufacturer correctly followed the control conventions from CD players, which in turn had followed the conventions of cassette players. You didn’t need to learn anything new.</div>
<p><!-- .entry-meta --><br />
<span id="more-65"></span></p>
<div class="entry-content">
<p style="text-align: left;"><img class="alignleft size-medium wp-image-304" title="MacVolume" src="http://usabilityfriction.com/wp-content/uploads/2008/11/macvolume.jpg" alt="" width="30" height="139" /> <img class="alignleft size-medium wp-image-303" title="WindowsVolume" src="http://usabilityfriction.com/wp-content/uploads/2008/11/winvol.jpg" alt="" width="81" height="135" /></p>
<p>A convention has built up for audio playback that vertical bars are used for volume controls and both Windows XP and Mac OS X use them. This fits in with previous conventions, audio mixing desks have vertical sliders too. It also has a good affordance &#8211; you push the slider up to turn the volume up and pull it down to turn it down.</p>
<p>Horizontal bars, by convention, are used for indicating the progress of a track. For example, in iTunes, the shaded area represents played audio, the unshaded area represents unplayed and the diamond is the current position in the file:</p>
<p><a href="http://usabilityfriction.com/wp-content/uploads/2008/11/itunes.jpg"><img class="alignnone size-full wp-image-308" title="itunes" src="http://usabilityfriction.com/wp-content/uploads/2008/11/itunes.jpg" alt="" width="500" height="37" /></a></p>
<p>Other applications follow similar conventions, so why, when designing the iPhone’s volume control did Apple do this?:<br />
<img class="alignnone size-full wp-image-311" title="iPhoneiPodView" src="http://usabilityfriction.com/wp-content/uploads/2008/11/iphone_software4_20080609.jpg" alt="" width="470" height="470" /></p>
<p>To my eyes, the controls at the bottom are skip back, pause, skip forwards then a track position indicator. It even follows all the conventions: It’s horizontal, it has a shaded area to show the elapsed audio, an unshaded area to represent the unplayed and a marker to show the current track position! Fantastic, until you try and use it to skip to the end of a track and then painfully find out it’s the volume control! I’ve seen so many people do this when showing them my iPhone &#8211; I probably should warn them actually!</p>
<p>So, what could Apple have done to follow the convention and have a vertical slider?</p>
<ol>
<li>Use a vertical volume slider running down the side of the screen</li>
<li>Have a smaller slider to the height of the control pane</li>
<li>Have a pop up volume control</li>
</ol>
<p>Ok, 1 is just ugly. We don’t do ugly so that one can be discounted. Option 2 sacrifices fidelity of control (or would at best make it fiddly) and for something as personal as volume this would be unacceptable. Also, 1 and 2 would stop the interface looking nicely balanced and symmetrical which wouldn’t do! So that leaves us with option 3. This is no good either as it makes changing the volume a 2 step process and for a common interaction like changing the volume this would be annoying!</p>
<p>So, it appears Apple had a legitimate reason to ignore the convention &#8211; a tall thin screen makes a horizontal volume control the best choice. However, where they went wrong is that they broke a convention but then kept it secret until you discover it through making a mistake! They should have done something like this:</p>
<p><a href="http://usabilityfriction.com/wp-content/uploads/2008/11/modifiediphone.jpg"><img class="alignnone size-full wp-image-313" title="modifiediphone" src="http://usabilityfriction.com/wp-content/uploads/2008/11/modifiediphone.jpg" alt="" width="470" height="470" /></a></p>
<p>This simple addition of volume icons removes any questions over what the slider does and that is worth the price of a slight reduction in slider length.</p>
<p>We notice when conventions aren’t followed and get tripped up. This doesn’t mean it’s wrong to break them as long as your reasons are good and you make it clear to your user that you have done so!</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.uetalk.com/2008/12/the-importance-of-conventions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to make your user interface CRAP</title>
		<link>http://www.uetalk.com/2008/12/how-to-make-your-user-interface-crap/</link>
		<comments>http://www.uetalk.com/2008/12/how-to-make-your-user-interface-crap/#comments</comments>
		<pubDate>Thu, 18 Dec 2008 03:03:21 +0000</pubDate>
		<dc:creator>coffeelone</dc:creator>
				<category><![CDATA[互联网分享]]></category>
		<category><![CDATA[CRAP]]></category>
		<category><![CDATA[ued]]></category>
		<category><![CDATA[可用性]]></category>
		<category><![CDATA[排版]]></category>

		<guid isPermaLink="false">http://www.uetalk.com/?p=58</guid>
		<description><![CDATA[from:Here
By Ashley Towers &#124; September 8, 2008
Graphic design has 4 basic principles that appear to varying degrees in all well designed works; Contrast, Repetition, Alignment and Proximity. They are there to help guide you in making attractive desi... ]]></description>
			<content:encoded><![CDATA[<div class="entry-meta">from:<a href="http://usabilityfriction.com/2008/09/08/how-to-make-your-user-interface-crap/"><strong>Here</strong></a></div>
<div class="entry-meta"><span class="author vcard">By <a class="url fn n" title="View all posts by Ashley Towers" href="http://usabilityfriction.com/author/Administrator/">Ashley Towers</a></span><span class="meta-sep"> | </span><span class="entry-date"><abbr class="published" title="2008-09-08T09:12:49-0500">September 8, 2008</abbr></span></div>
<p><!-- .entry-meta -->Graphic design has 4 basic principles that appear to varying degrees in all well designed works; Contrast, Repetition, Alignment and Proximity. They are there to help guide you in making attractive designs, but I think they can (and should!) be applied when designing user interfaces. This post will show you how. Anyway, I like the acronym!</p>
<h3>Contrast</h3>
<p>In design avoid things that look <em>similar</em>; if 2 elements are not <em>exactly</em> the same make them very different. Don’t do your titles in 12pt Arial and your body text in 10pt Arial &#8211; they just look too similar to stand out. You can create contrast in many ways for example:</p>
<ul>
<li>Different fonts</li>
<li>Different sizes</li>
<li>Colours and backgrounds</li>
<li>Borders</li>
<li>Differing alignments</li>
<li>Spacing</li>
</ul>
<p>Our eyes are fond of contrast, it helps us prioritise and sort through the information before us. So how can we use contrast to improve usability?<br />
<span id="more-58"></span></p>
<h3>Emphasise Primary Interactions</h3>
<p>Use contrast to put emphasis on the most common or likely interface interaction and reduce the weight of secondary choices.</p>
<div id="attachment_74" class="wp-caption alignnone" style="width: 112px;"><img class="size-medium wp-image-74" title="ok-cancel-image" src="http://usabilityfriction.com/wp-content/uploads/2008/08/picture-11.png" alt="Good use of contrast for OK/Cancel buttons" width="102" height="33" /></p>
<p class="wp-caption-text">Figure 1.</p>
</div>
<p>Figure 1 shows a good use of contrast. By reducing the visual weight of the cancel action, emphasis is put on the OK button. This makes the cancel button less prominent and therefore less likely to be quickly clicked by mistake.</p>
<h3>Highlight Important Notices</h3>
<p>Contrast can be used to highlight important notices requiring attention. For example, when showing an error message it is important that this immediately stands out otherwise the user will not see that they have made a mistake and will assume that something is broken!</p>
<div id="attachment_75" class="wp-caption alignnone" style="width: 310px;"><img class="size-medium wp-image-75" title="rails-error-message" src="http://usabilityfriction.com/wp-content/uploads/2008/08/picture-2-300x95.png" alt="Figure 2." width="300" height="95" /></p>
<p class="wp-caption-text">Figure 2.</p>
</div>
<p>Figure 2 shows the default look for error messages displayed when writing web applications using Ruby On Rails. The bright red box jumps out against the rest of the page and the user is in no doubt that they need to correct something before continuing. The field on the form containing the error is also outlined in red to increase its contrast with the accepted fields.</p>
<h3>Group Related Elements</h3>
<p>Contrast can also used to group related interface elements together and make them stand apart from each other.</p>
<div id="attachment_77" class="wp-caption alignnone" style="width: 230px;"><img class="size-medium wp-image-77" title="wordpress-publish-dialogue" src="http://usabilityfriction.com/wp-content/uploads/2008/08/picture-5-220x300.png" alt="Figure 3" width="220" height="300" /></p>
<p class="wp-caption-text">Figure 3</p>
</div>
<p>Figure 3 shows the posting controls in WordPress. Notice how background colour contrast is used to group together the actions for Save, Publish and Delete Post. Bonus marks go to the WordPress interface designers for using contrast to reduce the visual weight of the “Delete post” link!</p>
<h3>Repetition</h3>
<p>Repeat visual elements throughout the design. Repetition creates unity and ties together things that would otherwise be perceived as separate. Repetition in usability at its most basic is simply to “be consistent”. If you have a way of interacting to achieve a certain goal in one place, make sure you repeat it everywhere to promote internal consistency. If you aren’t internally consistent across your system it gives the impression that the product was thrown together and there was no clear guiding vision. So, it is important to either ensure that team members working on different parts of the system stay in contact, or appoint someone with overall responsibility to maintain the consistency of the interface.</p>
<p>Consistency helps improve the learnability of the product. People are very good at recognising things they have already seen, and will be confident in their expectations of the results of their actions. Take advantage of this to speed up learning of the system by letting them apply things they already know.</p>
<p>Consistency doesn’t stop at the boundaries of your product. Repeat pre-existing conventions to achieve external consistency. For example if you are writing an application for the Mac take advantage of the existing skills people have and follow the conventions of that platform.</p>
<div id="attachment_79" class="wp-caption alignnone" style="width: 310px;"><img class="size-medium wp-image-79" title="google-web-search" src="http://usabilityfriction.com/wp-content/uploads/2008/08/picture-6-300x20.png" alt="Google Web Search" width="300" height="20" /></p>
<p class="wp-caption-text">Google Web Search</p>
</div>
<div id="attachment_80" class="wp-caption alignnone" style="width: 310px;"><img class="size-medium wp-image-80" title="google-map-search" src="http://usabilityfriction.com/wp-content/uploads/2008/08/picture-7-300x21.png" alt="Google Map Search" width="300" height="21" /></p>
<p class="wp-caption-text">Google Map Search</p>
</div>
<div id="attachment_81" class="wp-caption alignnone" style="width: 310px;"><img class="size-medium wp-image-81" title="google-product-search" src="http://usabilityfriction.com/wp-content/uploads/2008/08/picture-9-300x19.png" alt="Google Product Search" width="300" height="19" /></p>
<p class="wp-caption-text">Google Product Search</p>
</div>
<p>The search interfaces are consistent across Google’s suite of products allowing users to rely on their existing knowledge of how to use the system and how it will react.</p>
<h3>Alignment</h3>
<p>Alignment is probably the most obvious of the 4 design rules; it is the placement of elements such that the edges (or their centre lines) line up horizontally or vertically. No element of a design should be just thrown on the page randomly, it should have some connection with another element on the page to create a unified, cohesive feel.</p>
<p>Alignment can be used to guide people through a design; such as arranging form fields in to columns to indicate the order the elements should be filled in. Users will naturally go down the form vertically, but if they reach a row containing more than one element horizontally they will follow that alignment before continuing vertically.</p>
<p>In a nutshell, unless you are drawing attention to a specific element (by increasing spatial contrast), ensure that elements of your page are neatly aligned to ensure a clear reading order.</p>
<div id="attachment_85" class="wp-caption alignnone" style="width: 310px;"><a href="http://usabilityfriction.com/wp-content/uploads/2008/08/picture-8.png"><img class="size-medium wp-image-85" title="firefox-print-dialogue" src="http://usabilityfriction.com/wp-content/uploads/2008/08/picture-8-300x284.png" alt="Figure 4" width="300" height="284" /></a></p>
<p class="wp-caption-text">Figure 4</p>
</div>
<p>Figure 4 shows the print dialogue from Firefox 3. Notice how the labels down the left are right aligned to the central column of colons and the controls are left aligned. This creates an association between the labels and their controls. The row of colons lead the eyes down the page vertically and where more than one control appears on a row your eyes are led horizontally.</p>
<h3>Proximity</h3>
<p>Related items should be close to each other. Grouping related controls together helps to organise the interface. Controls that are close together are perceived to be more related than ones that are far apart. The related items create a single visual unit so your interface is perceived as being made up of a small number of related units rather than as a page full of many individual controls.</p>
<div id="attachment_94" class="wp-caption alignnone" style="width: 134px;"><a href="http://usabilityfriction.com/wp-content/uploads/2008/09/picture-11.png"><img class="size-medium wp-image-94" title="iTunes-controls" src="http://usabilityfriction.com/wp-content/uploads/2008/09/picture-11-124x300.png" alt="Figure 5" width="124" height="300" /></a></p>
<p class="wp-caption-text">Figure 5</p>
</div>
<p>Figure 5 shows the left hand side of the iTunes interface. The playback controls are grouped together and perceived as one visual unit. The Library, Store and Playlists elements group their own sub-elements as 3 distinct groups, but their proximity to each other allows the sidebar to be perceived as an interrelated whole.</p>
<p>Contrast, Repetition, Alignment and Proximity are good and simple ways to improve the look and the usability of an interface. So next time you are designing a user interface, look for ways you can make it more CRAP!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uetalk.com/2008/12/how-to-make-your-user-interface-crap/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>10个提高可用性的救命方法</title>
		<link>http://www.uetalk.com/2008/12/ten-methods-to-improve-usability/</link>
		<comments>http://www.uetalk.com/2008/12/ten-methods-to-improve-usability/#comments</comments>
		<pubDate>Wed, 17 Dec 2008 14:56:29 +0000</pubDate>
		<dc:creator>coffeelone</dc:creator>
				<category><![CDATA[互联网分享]]></category>
		<category><![CDATA[CRAP]]></category>
		<category><![CDATA[ued]]></category>
		<category><![CDATA[可用性]]></category>

		<guid isPermaLink="false">http://www.uetalk.com/?p=32</guid>
		<description><![CDATA[你工作数月并向客户交付了产品。最初的反馈还不错，但是当他们研究了几日后，却又提出要求：“你能再让这个设计对用户更友好一些吗？”天哪！这时候再重组结构有些为时已晚。但当然... ]]></description>
			<content:encoded><![CDATA[<div class="PostContent">&#8212;&#8211;此篇文章来自<a href="http://www.sumocha.com/2008/12/10-ways-to-improve-usability-when-you-thought-it-was-too-late/#comment-1504">酥抹茶</a>。</div>
<p>&#8212;-英文原文地址：狂点<a href="http://usabilityfriction.com/2008/11/05/10-ways-to-improve-usability-when-you-thought-it-was-too-late/">这里</a><span><a href="http://usabilityfriction.com/2008/11/05/10-ways-to-improve-usability-when-you-thought-it-was-too-late/" target="_blank"></a></span></p>
<p>你工作数月并向客户交付了产品 。最初的反馈还不错，但是当他们研究了几日后，却又提出要求：“你能再让这个设计对用户更友好一些吗？”天哪！这时候再重组结构有些为时已晚。但当然，你 肯定可以做点什么！这篇文章就给你提供10个提高可用性的方法，在你觉得为时已晚的时候可以派上用场。</p>
<h3>80/20法则 (The 80/20 Rule)</h3>
<p>80/20法则众所周知并被广泛应用——在这个例子中则是这样的：</p>
<ul>
<li>80%的时间花在了20%的功能特性上</li>
<li>80%的错误是由20%的交互活动引起的</li>
</ul>
<p>所以，你要做的第一件事就是找出用户最关心或者最可能引发问题的那20%的特性。有很多种方法：直接问用户（我知道这很疯狂！）、观察他们使用产品的过程、或者你可以把日志功能加到应用程序中 （这也许是最可信的方法——<a href="http://usabilityfriction.com/2008/10/17/juggling-usability-and-features/" target="_blank">用户认为他们想要的往往和他们真正想要的相去甚远</a>）。<br />
当你找到这些特性，就可以专注于改善它们了 ：</p>
<ul>
<li>如果这些特性使用频率很高，试试看如何让它们更容易被用到。比如使它们的图标更醒目、添加快捷键等。</li>
<li>如果一个用户在某处被卡住了，试着确定一下原因；这里是不是有晦涩的术语？下一步的提醒是不是太过模糊？</li>
</ul>
<p>把注意力集中在20%的特性和问题上，整体上可被感知的可用性会极大的提高，因为你把注意力放在了最重要的地方。</p>
<p><span id="more-32"></span></p>
<p style="TEXT-ALIGN: left"><img class="aligncenter" src="http://usabilityfriction.com/wp-content/uploads/2008/11/ooorg_toolbar-300x161.png" alt="" width="300" height="161" /></p>
<p style="TEXT-ALIGN: left"><span style="color: #888888;">Open Office工具条显示了最常用的命令，可以方便快捷地使用对应的功能</span></p>
<h3>增加可用性效果的美感 (Aesthetic Usability Effect)</h3>
<p>让你的应用程序漂亮一些。当你的用户要求提高可用性时，也许他们背地里叫喊的是让它不要那么丑！</p>
<p>有一个很著名的现象，吸引人的应用或产品被认为比丑陋的那些更好用也更友好。所以可以向设计师寻求帮助，整理下CSS，你会惊讶的发现你的应用程序变得更加友好了——让它更漂亮些吧！</p>
<h3>加入限制 (Constraints)</h3>
<p>加入一些限制，阻止他们以你不推荐的方式使用应用程序，确保他们只输入有效的数据。这可以减少错误而且使交互更直观。有很多种方法：</p>
<ul>
<li>如果数据库的某一列仅允许输入有限的字母——阻止用户超过限制。阻止他们犯错比直接扔出一句“错误”好得多，更糟糕的做法是截短用户的数据。</li>
<li>如果某字段仅接受数字，最开始就不要让它接受字母！不要等到验证输入时再告诉用户他们做错了！</li>
<li>如果让用户输入一个被分隔的字段（比如MAC地址、序列号或者信用卡号），不要让用户去猜在哪里输空格、冒号或者连字符等等——每一部分分配一个字段，并在之间加入不可编辑的分隔符。</li>
</ul>
<div style="TEXT-ALIGN: left"><a href="http://usabilityfriction.com/wp-content/uploads/2008/11/windowsregistration.png"><img class="size-medium wp-image-251" title="windowsregistration" src="http://usabilityfriction.com/wp-content/uploads/2008/11/windowsregistration-300x180.png" alt="The Product Key dialogue removes the uncertainty as to whether to enter the dashes" width="300" height="180" /></a></div>
<div style="TEXT-ALIGN: left"><span style="color: #888888;"> Windows XP产品序列号的对话框解除了是否需要输入破折号的疑问</span></div>
<ul>
<li>你不应让用户输入“1”、“0”或者“真”、“假”来表示布尔值；你应该使用复选框！所以，使用其它控件如滑动条或者拨号盘来输入数据，使用户<strong>无法</strong>输入无效的值。</li>
<li>如果某一空间当前不可使用，把它变灰或者直接移除。不要让用户点他们不能点的按钮。</li>
</ul>
<h3>遵守CRAP准则  (Make it CRAP)</h3>
<p>这其实包括4件事情，但将它们的首字母缩写词作为10个方法里面的一条。CRAP是图形设计领域的四个准则的首字母缩写词：对比、重复、对齐和<span style="text-decoration: line-through;">近似</span>（<strong>uetalk:</strong>英文原文中使用了&#8221;<strong>Proximity</strong>&#8220;这个词，认为翻译成“<strong>紧凑</strong>”，更贴切一些）。我写了一篇深入研究CARP以提高用户体验的文章：<a href="http://usabilityfriction.com/2008/09/08/how-to-make-your-user-interface-crap/" target="_blank">《如何让你的用户界面符合CRAP》</a>。这些原则应用起来很简单，并且不费什么力气就可以带来巨大的改变。</p>
<h3>减轻用户负担 (Lighten the load)</h3>
<p>处理大量信息增加了用户的认知负担，并且也使你的应用程序难以使用。认知负担是完成某一任务时大脑活动的总和，包括记忆、感知、思考/理解等等。你可以减轻用户负担而使应用程序更加友好，步骤如下：</p>
<ul>
<li>尽可能少问问题。过长的表格，问过多的问题都会吓到用户。用户对于填表的态度是能不填就不填。在用户可以将来再填详细信息的地方，让用户填尽可能少的内容以帮助他们继续下去。</li>
</ul>
<p style="TEXT-ALIGN: left"><span style="text-decoration: underline; color: #551a8b;"> <a href="http://usabilityfriction.com/wp-content/uploads/2008/11/littleaspossible.png"><img class="size-medium wp-image-253" title="littleaspossible" src="http://usabilityfriction.com/wp-content/uploads/2008/11/littleaspossible-300x110.png" alt="Creating a new project in Base Camp. Just the name and who\'s involved. The rest can follow later." width="300" height="110" /></a><br />
</span><span style="color: #888888;"> 在Base Camp上创建一个新项目。仅需填名称和参与人员两条。其他都可以以后再填。</span></p>
<ul>
<li>当你需要很多信息并且不可以放到将来再填时，把表格切分成几页，然后让用户一页一页来。确保向用户标示出了进度，让他们知道已经完成了多少。</li>
<li>删除不必要的信息。显示的每一处信息都是有助于理解，而不是让整个界面凌乱不堪。如果没有相关或者附加价值那就删除它。</li>
<li>如果可以的话，在某一字段的附近增加必要的解释，这样用户不用思考它的含义了。当处理技术术语和首字母缩略词时这一点尤为重要——如果用户以前没 听说过这些词，必要的解释可以降低用户的挫折感！上面Base Camp的截图就是个好例子，它给“Name the Project”的意思加了解释。</li>
</ul>
<h3>使用更少的文字 (Use less words)</h3>
<p>用户很少看文字，<a href="http://arstechnica.com/news.ars/post/20080923-study-confirms-users-are-idiots.html" target="_blank">少到让你惊讶的程度</a>。你的应用程序并不算新鲜事——如果它有很多描述性文档，用户是不会阅读的，而且大量的文档会吓到用户并让他们觉得你的应用程序非常复杂，难以使用。大部人只会点击“确定”或“下一步”，并期待得到最好的结果。如果这样做错了他们会感到很愤怒。</p>
<p>如果你需要<span>鼓励</span>用户；<span>那就使用积极的词语</span>。不需要太礼貌，那样不够精炼。比如不要给某字段加这样的标签“请输入您的全名：”，直接写“全名：”。用户不需要这么礼貌的<span>语气来告诉他们输入，没有这个必要</span>——用户不会理那些花哨的描述，即便他们可以——你的标签是不是已经阻止他们填这一项了？如果有太多内容根本读不过来，那就存在重要信息被忽略的风险。</p>
<h3>折线之上 (Above the fold)</h3>
<p>“折线”(fold)是报纸版面设计的术语。按字面理解是指报纸被对半折起来的折痕。折叠之上的信息更加醒目，因为人们不用展开报纸就能浏览。这个术语在界面设计领域也有相同的意思，是指不需要移动浏览器的滚动条就可以显示出来的区域底部。</p>
<ul>
<li>考虑重新布置页面，让用户不需滚动鼠标就能看到最重要的信息。如果干脆去除滚动条是不是更好？</li>
<li>一些应用程序把出现的错误统一显示在页面最底端。从用户的角度考虑，他们点了“提交”，但是同样的页面又显示出来。当他们想到把页面滚动到最底端 之前，他们已经觉得你的产品有问题而不是他们的操作有问题。所以，把错误信息放在页面靠上方的位置（更理想的是，放在错误出现的附近，但确保页面滚动到那 一位置，这样才能被看到）。</li>
</ul>
<h3>排序与分<span>组</span> (Sorting and Grouping)</h3>
<p>组织信息的方式极大程度地影响着可用性。分<span>组</span>的应用范围很广——从你的菜单项目顺序到你提供的工具列表。</p>
<p>5 Hat Racks原理描述了5种组织信息的方法：</p>
<ul>
<li>按字母顺序排列：简单的按字母顺序排列。当信息不能以更有意义的方式组织或者用户需要迅速找到某一信息<span>时</span>，这种方法很有效。可定制排序的菜单经常包括这一排序方式。</li>
<li>按位置排列：根据信息的物理位置排序。如果你的信息和真实世界关联，那可以采用这种方法，用图来显示它的物理背景信息。</li>
<li>按时间排列：以时间顺序排列。当你的信息与日期或时间关联时，就要采用这种排序方式，确保用户可以以时间顺序浏览信息。</li>
<li>按类别排列：根据信息之间的共同属性把它们分类。分类标准可能是包括“它们是什么”（比如是书籍、DVD等等）、“用途”（比如感冒药、洗发护发产品等）、“颜色”、“气味”等等。分类法非常适用于从用户角度分组的菜单，比如把财务信息分成预算、订单、发票几类。</li>
<li>按连续性排列：把信息排列成连续的一系列。顺序可能是从好到坏、从高到低、从流行到不流行等等。如果有衡量的标准，就提供这种分类方式。</li>
</ul>
<p>看看你是如何展现列表和菜单的，想想信息的作用和用户会通过什么方式找到它。用户获取信息的方式会随着他们当时想做什么而改变。如果你的应用可以根据用户当前的目标而改变信息组织方式，那将会获得用户的高度评价。</p>
<h3>包容 (Forgiveness)</h3>
<p>提高应用程序用户友好程度的一个好方法就是使它更加包容。<span>包容是指提供多种途径，以减少用户犯错的机率，或者在用户犯错时降低其不良影响。</span></p>
<ul>
<li>撤销：当用户不喜欢某一操作所带来的影响时，允许用户改变主意。在开发的后期，这也许很难进行改造，但它确实是使你的应用程序更加包容的最佳方法中的一种。</li>
</ul>
<p style="TEXT-ALIGN: left"><a href="http://usabilityfriction.com/wp-content/uploads/2008/11/gmailundo.png"><img class="size-medium wp-image-254" title="gmailundo" src="http://usabilityfriction.com/wp-content/uploads/2008/11/gmailundo-300x22.png" alt="When you delete an email in gmail it does so without question; but makes it easy for you to change your mind" width="300" height="22" /></a><br />
<span style="color: #888888;"> 当你在Gmail里删除一封邮件时它并不会让你确认，但它会让你可以轻松改变主意。</span></p>
<ul>
<li>确认：把操作变为两步，提示用户对他们请求的操作进行确认。确认这一操作如果被用得太多，会让界面失调，让用户厌烦。如果操作很容易被撤消，那么 你并不需要确认这一步（例如Windows XP中的“你确定要删除该文件吗？”对话框并无必要，因为文件可以轻松地从回收站里找回）。你不需要那些只包含“确定/取消”按钮的对话框来增加确认这一 步操作，这只会成为类似于“预备/射击”这种感觉的额外操作。我写过一篇文章，论述Gmail对确认操作的创造性用法，原谅用户，哪怕他喝醉了！</li>
<li>警告：显示警告以提示用户操作的影响。这是最没有侵入性的提高包容程度的措施，你可以在页面环境中增加信息以解释当前被选中的选项。</li>
</ul>
<p style="TEXT-ALIGN: left"><a href="http://usabilityfriction.com/wp-content/uploads/2008/11/inplacewarning.png"><img class="size-medium wp-image-255" title="inplacewarning" src="http://usabilityfriction.com/wp-content/uploads/2008/11/inplacewarning-300x182.png" alt="Feedburner uses a warning near the Activate button to alert you to implications without interrupting flow" width="300" height="182" /><br />
</a><span style="color: #888888;"> Feedburner在确认按钮附近显示警告以警示你操作的影响而不打断你的操作过程 </span></p>
<ul>
<li>帮助：最后，你可以把帮助和说明放入你的应用程序以增加其包容程度！<span>在你发现设计中一个不可逆转的错误，需要解释程序如何运转，以及这跟它应有的样子有何区别时，这个方法尤其重要！</span>至少在你解决问题之前！</li>
</ul>
<h3>空状态 (The Empty State)</h3>
<p>这是被许多软件忽略的一点，却是改善你的应用程序的一种真正简单的方法。当你测试或展示你的应用程序时，它充满了测试数据。然而，当一个新客户第一次使用的时候，它是空的！你知道那块<span>缺失的</span>区域会填入一些信息，底部的大列表会包含不确定信息(doobery) ，以解释这是什么，但你的用户不知道！如果用户不知道一个东西是什么或者应该是什么，他们就会疑惑。你可以通过以下方法帮助他们：</p>
<ul>
<li>不要在没有数据的情况下什么都不显示，使用一些用来占位的东西，如“没有可显示的不确定信息(doobery)”。</li>
<li>如果这是用户第一次来，告诉他们这个区域将要显示的内容的特征。<img class="size-medium wp-image-256 aligncenter" title="inplacetutorial" src="http://usabilityfriction.com/wp-content/uploads/2008/11/inplacetutorial-300x210.png" alt="Basecamp shows the ultimate empty state. It is empty, but full of information about what should be there and what to do next!" width="300" height="210" /></li>
</ul>
<p><span style="color: #888888;"> Basecamp显示的最后的空状态。它是空的，但包含了很多信息，所以你确切地知道下面会有什么！</span></p>
<ul>
<li>使用示例数据给用户提供一个预先填好的选项。如果数据准确且对用户有意义，那么这还真是一个好方法。它可以让用户看到一些实际使用中的具体数据。不过，当用户对程序有一些感觉之后，要确保用户可以轻松地除去这些测试数据，当他们一条一条地手工删除可不会<span>让他们对你产生任何好感</span>！</li>
</ul>
<h3>结论 (Conclusion)</h3>
<p>如果可用性在整个开发过程中都被充分考虑，那么产品只会越来越好。然而，总会有其它一些压力，而且当你发现自己遇到上述种种情形，知道这些压力并不 能为你帮上什么忙。我们希望，这些技巧可以让你在觉得提高可用性为时已晚的时候，为你提供一些进行简单调整和重组以改善程序可用性！</p>
<p>你曾经遇到过这些情形吗？你如何改善你的应用程序的可用性呢？</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uetalk.com/2008/12/ten-methods-to-improve-usability/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>关于用户体验</title>
		<link>http://www.uetalk.com/2008/12/about-user-experience/</link>
		<comments>http://www.uetalk.com/2008/12/about-user-experience/#comments</comments>
		<pubDate>Tue, 09 Dec 2008 09:00:54 +0000</pubDate>
		<dc:creator>coffeelone</dc:creator>
				<category><![CDATA[互联网分享]]></category>
		<category><![CDATA[ued]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://www.uetalk.com/?p=10</guid>
		<description><![CDATA[这幅来自网络的漫画，很形象地说明了项目流程中的概念冲突和转译。很明显，客户与项目经理之间的概念匹配相当重要，然后才是与其他各部分的转译。而整个过程中，UEDer需要发出更大的声... ]]></description>
			<content:encoded><![CDATA[<div id="attachment_9" class="wp-caption alignnone" style="width: 310px"><a href="http://www.uetalk.com/wp-content/uploads/2008/12/122784522401.jpg"><img class="size-full wp-image-9" title="点击查看原图" src="http://www.uetalk.com/wp-content/uploads/2008/12/122784522401.jpg" alt="点击查看原图" width="300" height="225" /></a><p class="wp-caption-text">用户体验</p></div>
<div class="mceTemp" style="text-align: left;">这幅来自网络的漫画，很形象地说明了项目流程中的概念冲突和转译。很明显，客户与项目经理之间的概念匹配相当重要，然后才是与其他各部分的转译。而整个过程中，UEDer需要发出更大的声音。</div>
]]></content:encoded>
			<wfw:commentRss>http://www.uetalk.com/2008/12/about-user-experience/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Analytics Code -->
