﻿<?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">
<channel>
<title>用户体验 - ITFeed</title>
<link>http://www.itfeed.cn</link>
<description>互联网产品设计开发知名博客聚合</description>
<dc:creator>ITFeed</dc:creator>
<pubDate>Tue, 31 Jan 2012 22:24:12 +0800</pubDate>
<language>en</language>
<item>
<title>注意力与交互设计</title>
<link>http://www.itfeed.cn/post.asp?id=7753</link>
<description>
<![CDATA[<p style="text-align: center;"><a rel="attachment wp-att-8923" href="http://uedc.163.com/8898.html/uedc_blog_banner-23"><img class="size-full wp-image-8923 aligncenter" src="http://uedc.163.com/wp-content/uploads/2012/01/UEDC_Blog_Banner2.png" alt="" width="625" height="200" /></a></p>
<p>以人为本的设计，不能不考虑普通人在一般任务执行中的耐受力问题。因为人的精力有限，再强大的需求，无力去完成也是枉然。精力的有效转化率，是衡量交互设计品质的重点。</p>
<p>1.公式<br />
精力一般由脑力和体力构成。针对互联网产品，脑力居前（非生产类网站的体力消耗很低）。而脑力的组成又分为注意力、理解力和记忆力。本文将尝试以注意力为例分析交互设计的特点和注意事项。<br />
注意力本身可以集中、分散和转移。集中一般出于明确的需求、潜在的兴趣；分散则由于信息干扰和不可控的时间；转移一般发生在需求探索阶段。<span id="more-8898"></span><br />
以网站信息结构内的各元素为单位，加上每个页面的所有视觉元素，可以得到网站总的注意力“项”。用户就是利用这些项去满足自己的需求，交互设计则是这些项的描绘者、组织者。如果假设注意力有限，那么每个项分享到的注意力应该是固定值。加上因为个体差异，兴趣和需求的等级不同，便得到了以下公式</p>
<p style="text-align: center;"><a rel="attachment wp-att-8892" href="http://uedc.163.com/8888.html/%e5%9b%be%e7%89%874-9"><img class="size-full wp-image-8892 aligncenter" src="http://uedc.163.com/wp-content/uploads/2012/01/图片42.png" alt="注意力转化率计算公式" width="357" height="80" /></a></p>
<p style="text-align: center;">注意力转化率计算公式</p>
<p>其中除了“需求强度”以外，“兴趣浓度”、“时间长度”和“可视项数量”三个值，交互设计都可对其产生影响。<br />
2.兴趣浓度<br />
用户在网络上的操作习惯和交互预期，有自己独特的心智模型，有时与现实生活中是不同的。比如现实中我们对图片的要求只是看，挂在墙上或拿在手上。而互联网首先是一个超链接整合平台，其次才是一个展示平台。所以上边的图片除了看，还被赋予链接的预期。人们对它的期待变得更加丰富。因此，赋予图片更多交互内涵可以直接提升用户的兴趣值。<br />
对兴趣的两个典型设计思想是，图胜于表，表胜于文，还有拟物化设计，包括拟物的文案。可以说对象越具体，人们就越觉得安全和亲切。而亲切有礼的，符合物理定律的，对操作及时反馈的，满足情感需求的设计，都可以为兴趣加分。反之亦然。</p>
<p style="text-align: center;"><a rel="attachment wp-att-8893" href="http://uedc.163.com/8888.html/%e5%9b%be%e7%89%871-18"><img class="size-full wp-image-8893 aligncenter" src="http://uedc.163.com/wp-content/uploads/2012/01/图片1.png" alt="" width="105" height="36" /></a></p>
<p style="text-align: center;">不可用状态不是好的设计，尤其当激活它的条件比较多时</p>
<p>正是基于人们对图形化的向往，视觉设计才会对交互设计产生不可低估的影响。个人认为交互设计中凡是与兴趣相关的部分，视觉都应该成为重要的参考因素。比如控件的颜色，文案的排版，链接的展示方式等等。<br />
3.时间长度<br />
互联网交互设计和日常用品交互设计的一个重要区别，还在于两者的时间观念。现实中，时间是重要成本，经常影响人的决策和情绪。网络环境中，体力和人际负担被充分弱化，时间大部分只是个人脑力成本。如果需求和兴趣衔接的好，时间甚至可以忽略。<br />
不说游戏这种极端的例子，以平常产品的加载时间为例，如果以兴趣为导向处理得当（进度条和微型漏斗等时间计算工具属于此列，而预加载则属于需求衔接），用户也不会产生太大抱怨。涉及到搜索、寻找、浏览等注意力分散的情况，用户几乎只关心项而不关心时间。<br />
需要注意的是，流程性比较强的任务，开始和结束都要有明确的提示，以防止注意力溢出，造成不必要的精力损耗。</p>
<p style="text-align: center;"><a rel="attachment wp-att-8894" href="http://uedc.163.com/8888.html/%e5%9b%be%e7%89%872-11"><img class="size-full wp-image-8894 aligncenter" src="http://uedc.163.com/wp-content/uploads/2012/01/图片2.png" alt="" width="331" height="95" /></a></p>
<p style="text-align: center;">任务完成提示可以防止精力损耗</p>
<p>4.可视项数量<br />
一般来说，交互设计的重头工作是项设计。如确定信息结构、元素词典、视觉形式等。为什么说可视项数量越大，注意力越小呢？这是由认知特点决定的。选项越多，步骤越长，人越需要耗费理解力。理解力带给人的压力比较大，需要求助于向内的注意力，把注意力的任务属性，转向逻辑属性，造成交互能力降低。加上对注意力转移所使用时间的预期，对鼠标和键盘操作的苛求（体力），人们普遍反感冗长的表单，页面跳转等情况。于是便出现了“响应式展开”、“弹出泡”、“弹窗”、“标签”等交互形式。</p>
<p style="text-align: center;"><a rel="attachment wp-att-8895" href="http://uedc.163.com/8888.html/%e5%9b%be%e7%89%873-7"><img class="size-full wp-image-8895 aligncenter" src="http://uedc.163.com/wp-content/uploads/2012/01/图片3.png" alt="" width="554" height="86" /></a></p>
<p style="text-align: center;">项的组织和展示方式是大课题</p>
<p>除了可以利用好的组织方式来“减少”可视项数量，元素词典、视觉形式也可以影响兴趣，利用兴趣来提升注意力。以元素词典为例，作用主要发挥在关键词上。如“推荐给你听”和“我们一起听”中的“一起”，“你可能会喜欢”和“朋友们也喜欢”中的“朋友”之类。阿拉伯数字的注意力明显高于中文数字。“删除全部”的反应速度也要快于“清空”。如果不考虑使用环境，“删除张三的微博”和“删除微博”，那个效果好？<br />
5.总结<br />
交互设计作为一门过程科学，需要一定的时间和精力损耗。从互联网领域看来，因为排除了体力因素，注意力变得尤为重要。以注意力转化率为契机，我们可以把交互设计向用户体验设计推进一步。<br />
注意力和理解力的结果是记忆力，关于记忆力对交互设计的影响，下次再交流。</p><img src="http://www1.feedsky.com/t1/600352116/uedc/feedsky/s.gif?r=http://uedc.163.com/8898.html" border="0" height="0" width="0" style="position:absolute" />]]>
</description>
<dc:creator>网易uedc</dc:creator>
<pubDate>Mon, 30 Jan 2012 14:36:30 +0800</pubDate>
</item>
<item>
<title>响应式Web设计：50实例例与实践</title>
<link>http://www.itfeed.cn/post.asp?id=7647</link>
<description>
<![CDATA[<p>Responsive Web Design: 50 Examples and Best Practices<br />
Designmodo.com版权所有<br />
作者：Adrian<br />
译者：<a href="http://ucdchina.com/topic/59">UCD翻译小组</a>，<a href="../">波希米亚</a><br />
原文地址：<a href="http://designmodo.com/responsive-design-examples/" target="_blank">http://designmodo.com/responsive-design-examples/</a></p>
<blockquote><p>译者序：当我看到这篇文章的时候，还好发布的时间不算太早，主题很对我的胃口，因为我的Blog已经这么做了。但这篇总结的很全面，提到了一个新的名词“响应式Web设计”，作为Web内容应该去更加灵活的呈现在不同的终端上。这让我想起了之前写的一篇文章《<a title="未来我们只需要浏览器" href="http://blog.b3inside.com/essay/we-need-browser-only-in-the-future/">未来我们只需要浏览器</a>》，随着智能手机和各种Pad的发展，内容终端终究会发生改变，Web展现需要去适应这种趋势，并带来优秀的阅读体验。</p></blockquote>
<p>响 应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。当然，让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。</p>
<p>响应式Web设计与传统的设计方式截然不同，开发人员（特别是新手）必须要理解它的优势和弊端。这篇文章正是为大家揭示一些实例的。（这里介绍一个叫“Media Queries”的网站，里面介绍了更多实例和演示）</p>
<p>数据表格是响应式Web设计的经典使用情景，实现它的想法与传统的设计理念有很大不同。数据表格默认很宽，当你要查看它全貌时，你得缩小表格，但这时字会变 的很小，很难去阅读。然而当你想看清楚上面的字时，就不得不再把表格放大，这时要查看完整表格就得横滚加纵滚。这么阅读表格也太KB了。或许重新格式化表格或以饼图形式展现是种解决方案。再不然，你可以弄一个迷你图，即使在窄屏幕里它也能适应。</p>
<p><span id="more-2027"></span>响应式Web设计中的图像以流式图像为主，可以被上下文感知的图像所替代，这是一种更好的设计方式。这种技术的真正意义在于，能够让图像适应不同的屏幕分辨率，更大的或更小的。所以它与传统设计的理念和技术都有很大不同，合理使用会让你的网页化腐朽为神奇。</p>
<h3>响应式Web设计实例</h3>
<div id="attachment_2030" class="wp-caption alignnone" style="width: 610px"><a href="http://colly.com/"><img class="size-full wp-image-2030" title="1" src="http://blog.b3inside.com/wp-content/uploads/2012/01/1.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Simon Collison</p></div>
<div id="attachment_2031" class="wp-caption alignnone" style="width: 610px"><a href="http://www.anderssonwise.com/"><img class="size-full wp-image-2031" title="2" src="http://blog.b3inside.com/wp-content/uploads/2012/01/2.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Andersson-Wise Architects</p></div>
<div id="attachment_2032" class="wp-caption alignnone" style="width: 610px"><a href="http://stephencaver.com/"><img class="size-full wp-image-2032" title="3" src="http://blog.b3inside.com/wp-content/uploads/2012/01/3.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Stephen Caver</p></div>
<div id="attachment_2033" class="wp-caption alignnone" style="width: 610px"><a href="http://seesparkbox.com/"><img class="size-full wp-image-2033" title="4" src="http://blog.b3inside.com/wp-content/uploads/2012/01/4.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Sparkbox</p></div>
<div id="attachment_2034" class="wp-caption alignnone" style="width: 610px"><a href="http://foodsense.is/"><img class="size-full wp-image-2034" title="5" src="http://blog.b3inside.com/wp-content/uploads/2012/01/5.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Food Sense</p></div>
<div id="attachment_2035" class="wp-caption alignnone" style="width: 610px"><a href="http://www.bostonglobe.com/"><img class="size-full wp-image-2035" title="6" src="http://blog.b3inside.com/wp-content/uploads/2012/01/6.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">The Boston Globe</p></div>
<div id="attachment_2036" class="wp-caption alignnone" style="width: 610px"><a href="http://thinkvitamin.com/"><img class="size-full wp-image-2036" title="7" src="http://blog.b3inside.com/wp-content/uploads/2012/01/7.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Think Vitamin</p></div>
<div id="attachment_2037" class="wp-caption alignnone" style="width: 610px"><a href="http://sasquatchfestival.com/"><img class="size-full wp-image-2037" title="8" src="http://blog.b3inside.com/wp-content/uploads/2012/01/8.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Sasquatch! Music Festival</p></div>
<div id="attachment_2038" class="wp-caption alignnone" style="width: 610px"><a href="http://interim.it/"><img class="size-full wp-image-2038" title="9" src="http://blog.b3inside.com/wp-content/uploads/2012/01/9.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Internet Images</p></div>
<div id="attachment_2039" class="wp-caption alignnone" style="width: 610px"><a href="http://staffanstorp.se/"><img class="size-full wp-image-2039" title="10" src="http://blog.b3inside.com/wp-content/uploads/2012/01/10.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Staffanstorp</p></div>
<div id="attachment_2040" class="wp-caption alignnone" style="width: 610px"><a href="http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html"><img class="size-full wp-image-2040" title="11" src="http://blog.b3inside.com/wp-content/uploads/2012/01/11.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Seminal Responsive Web Design Example</p></div>
<div id="attachment_2041" class="wp-caption alignnone" style="width: 610px"><a href="http://naomiatkinson.com/"><img class="size-full wp-image-2041" title="12" src="http://blog.b3inside.com/wp-content/uploads/2012/01/12.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Naomi Atkinson</p></div>
<div id="attachment_2042" class="wp-caption alignnone" style="width: 610px"><a href="http://forefathersgroup.com/"><img class="size-full wp-image-2042" title="13" src="http://blog.b3inside.com/wp-content/uploads/2012/01/13.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Forefathers Group</p></div>
<div id="attachment_2043" class="wp-caption alignnone" style="width: 610px"><a href="http://spigotdesign.com/"><img class="size-full wp-image-2043" title="14" src="http://blog.b3inside.com/wp-content/uploads/2012/01/14.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Spigot Design</p></div>
<div id="attachment_2044" class="wp-caption alignnone" style="width: 610px"><a href="http://2012.newadventuresconf.com/"><img class="size-full wp-image-2044" title="15" src="http://blog.b3inside.com/wp-content/uploads/2012/01/15.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">New Adventures In Web Design Conference 2012</p></div>
<div id="attachment_2045" class="wp-caption alignnone" style="width: 610px"><a href="http://us.illyissimo.com/"><img class="size-full wp-image-2045" title="16" src="http://blog.b3inside.com/wp-content/uploads/2012/01/16.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Illy Issimo</p></div>
<div id="attachment_2046" class="wp-caption alignnone" style="width: 610px"><a href="http://arrrrcamp.be/"><img class="size-full wp-image-2046" title="17" src="http://blog.b3inside.com/wp-content/uploads/2012/01/17.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Arrrrcamp Conference</p></div>
<div id="attachment_2047" class="wp-caption alignnone" style="width: 610px"><a href="http://robot-or-not.com/"><img class="size-full wp-image-2047" title="18" src="http://blog.b3inside.com/wp-content/uploads/2012/01/18.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Robot or Not?</p></div>
<div id="attachment_2048" class="wp-caption alignnone" style="width: 610px"><a href="http://earthhour.fr/"><img class="size-full wp-image-2048" title="19" src="http://blog.b3inside.com/wp-content/uploads/2012/01/19.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Earth Hour</p></div>
<div id="attachment_2049" class="wp-caption alignnone" style="width: 610px"><a href="http://clearairchallenge.com/"><img class="size-full wp-image-2049" title="20" src="http://blog.b3inside.com/wp-content/uploads/2012/01/20.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Clean Air Commute Challenge</p></div>
<div id="attachment_2050" class="wp-caption alignnone" style="width: 610px"><a href="http://getlaunchkit.com/"><img class="size-full wp-image-2050" title="21" src="http://blog.b3inside.com/wp-content/uploads/2012/01/21.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Launch Kit</p></div>
<div id="attachment_2051" class="wp-caption alignnone" style="width: 610px"><a href="http://teixido.co/"><img class="size-full wp-image-2051" title="22" src="http://blog.b3inside.com/wp-content/uploads/2012/01/22.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Teixidó</p></div>
<div id="attachment_2052" class="wp-caption alignnone" style="width: 610px"><a href="http://ribot.co.uk/"><img class="size-full wp-image-2052" title="23" src="http://blog.b3inside.com/wp-content/uploads/2012/01/23.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Ribot</p></div>
<div id="attachment_2053" class="wp-caption alignnone" style="width: 610px"><a href="http://www.deren.me/"><img class="size-full wp-image-2053" title="24" src="http://blog.b3inside.com/wp-content/uploads/2012/01/24.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Deren Keskin</p></div>
<div id="attachment_2054" class="wp-caption alignnone" style="width: 610px"><a href="http://sweethatclub.org/"><img class="size-full wp-image-2054" title="25" src="http://blog.b3inside.com/wp-content/uploads/2012/01/25.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Sweet Hat Club</p></div>
<div id="attachment_2055" class="wp-caption alignnone" style="width: 610px"><a href="http://glitch.com/"><img class="size-full wp-image-2055" title="26" src="http://blog.b3inside.com/wp-content/uploads/2012/01/26.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Glitch</p></div>
<div id="attachment_2056" class="wp-caption alignnone" style="width: 610px"><a href="http://2011.dconstruct.org/"><img class="size-full wp-image-2056" title="27" src="http://blog.b3inside.com/wp-content/uploads/2012/01/27.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">dConstruct 2011</p></div>
<div id="attachment_2057" class="wp-caption alignnone" style="width: 610px"><a href="http://easy-readers.net/"><img class="size-full wp-image-2057" title="28" src="http://blog.b3inside.com/wp-content/uploads/2012/01/28.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Adaptive Web Design</p></div>
<div id="attachment_2058" class="wp-caption alignnone" style="width: 610px"><a href="http://www.authenticjobs.com/"><img class="size-full wp-image-2058" title="29" src="http://blog.b3inside.com/wp-content/uploads/2012/01/29.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Authentic Jobs</p></div>
<div id="attachment_2059" class="wp-caption alignnone" style="width: 610px"><a href="http://www.fivesimplesteps.com/"><img class="size-full wp-image-2059" title="30" src="http://blog.b3inside.com/wp-content/uploads/2012/01/30.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Five Simple Steps</p></div>
<div id="attachment_2060" class="wp-caption alignnone" style="width: 610px"><a href="http://www.madebysplendid.com/"><img class="size-full wp-image-2060" title="31" src="http://blog.b3inside.com/wp-content/uploads/2012/01/31.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Splendid</p></div>
<div id="attachment_2061" class="wp-caption alignnone" style="width: 610px"><a href="http://rourkery.com/"><img class="size-full wp-image-2061" title="32" src="http://blog.b3inside.com/wp-content/uploads/2012/01/32.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Ryan O’Rourke</p></div>
<div id="attachment_2062" class="wp-caption alignnone" style="width: 610px"><a href="http://flex.madebymufffin.com/"><img class="size-full wp-image-2062" title="33" src="http://blog.b3inside.com/wp-content/uploads/2012/01/33.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">FlexSlider</p></div>
<div id="attachment_2063" class="wp-caption alignnone" style="width: 610px"><a href="http://www.cacaotour.com/"><img class="size-full wp-image-2063" title="34" src="http://blog.b3inside.com/wp-content/uploads/2012/01/34.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">El Sendero del Cacao</p></div>
<div id="attachment_2064" class="wp-caption alignnone" style="width: 610px"><a href="http://www.dolectures.com/"><img class="size-full wp-image-2064" title="35" src="http://blog.b3inside.com/wp-content/uploads/2012/01/35.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Do Lectures</p></div>
<div id="attachment_2065" class="wp-caption alignnone" style="width: 610px"><a href="http://www.stpaulsschool.org.uk/"><img class="size-full wp-image-2065" title="36" src="http://blog.b3inside.com/wp-content/uploads/2012/01/36.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">St Paul’s School</p></div>
<div id="attachment_2066" class="wp-caption alignnone" style="width: 610px"><a href="http://naomiatkinsondesign.com/"><img class="size-full wp-image-2066" title="37" src="http://blog.b3inside.com/wp-content/uploads/2012/01/37.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Naomi Atkinson Design</p></div>
<div id="attachment_2067" class="wp-caption alignnone" style="width: 610px"><a href="http://benhandzo.com/"><img class="size-full wp-image-2067" title="38" src="http://blog.b3inside.com/wp-content/uploads/2012/01/38.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Ben Handzo Photography</p></div>
<div id="attachment_2068" class="wp-caption alignnone" style="width: 610px"><a href="http://stunningcss3.com/code/bakery/index.html"><img class="size-full wp-image-2068" title="39" src="http://blog.b3inside.com/wp-content/uploads/2012/01/39.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Stunning CSS3 Media Queries Example</p></div>
<div id="attachment_2069" class="wp-caption alignnone" style="width: 610px"><a href="http://nordicruby.org/"><img class="size-full wp-image-2069" title="40" src="http://blog.b3inside.com/wp-content/uploads/2012/01/40.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Nordic Ruby Conference</p></div>
<div id="attachment_2070" class="wp-caption alignnone" style="width: 610px"><a href="http://www.halifaxgamejam.com/"><img class="size-full wp-image-2070" title="41" src="http://blog.b3inside.com/wp-content/uploads/2012/01/41.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Halifax Game Jam</p></div>
<p><a href="http://diablomedia.com/"><img class="alignnone size-full wp-image-2071" title="42" src="http://blog.b3inside.com/wp-content/uploads/2012/01/42.jpg" alt="Diablo Media" width="600" height="340" /></a></p>
<div id="attachment_2072" class="wp-caption alignnone" style="width: 610px"><a href="http://asuonline.asu.edu/"><img class="size-full wp-image-2072" title="43" src="http://blog.b3inside.com/wp-content/uploads/2012/01/43.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">ASU Online</p></div>
<div id="attachment_2073" class="wp-caption alignnone" style="width: 610px"><a href="http://3200tigres.wwf.fr/"><img class="size-full wp-image-2073" title="44" src="http://blog.b3inside.com/wp-content/uploads/2012/01/44.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">3200 Tigres</p></div>
<div id="attachment_2074" class="wp-caption alignnone" style="width: 610px"><img class="size-full wp-image-2074" title="45" src="http://blog.b3inside.com/wp-content/uploads/2012/01/45.jpg" alt="" width="600" height="340" /><p class="wp-caption-text">Pixelab</p></div>
<div id="attachment_2075" class="wp-caption alignnone" style="width: 610px"><a href="http://www.kingshillcars.com/"><img class="size-full wp-image-2075" title="46" src="http://blog.b3inside.com/wp-content/uploads/2012/01/46.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Kings Hill Cars</p></div>
<div id="attachment_2076" class="wp-caption alignnone" style="width: 610px"><a href="http://8faces.com/"><img class="size-full wp-image-2076" title="47" src="http://blog.b3inside.com/wp-content/uploads/2012/01/47.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">8 Faces</p></div>
<div id="attachment_2077" class="wp-caption alignnone" style="width: 610px"><a href="http://asburyagile.com/"><img class="size-full wp-image-2077" title="48" src="http://blog.b3inside.com/wp-content/uploads/2012/01/48.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Asbury Agile</p></div>
<div id="attachment_2078" class="wp-caption alignnone" style="width: 610px"><a href="http://www.alsacreations.fr/"><img class="size-full wp-image-2078" title="49" src="http://blog.b3inside.com/wp-content/uploads/2012/01/49.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Alsacréations</p></div>
<div id="attachment_2079" class="wp-caption alignnone" style="width: 610px"><a href="http://www.sleepstreet.be/"><img class="size-full wp-image-2079" title="50" src="http://blog.b3inside.com/wp-content/uploads/2012/01/50.jpg" alt="" width="600" height="340" /></a><p class="wp-caption-text">Sleepstreet</p></div>
<p>&nbsp;</p>
<p>相关文章<ol>
<li><a href=&#39;http://blog.b3inside.com/photography/2011-austria-salzburg/&#39; rel=&#39;bookmark&#39; title=&#39;德国之旅-奥地利萨尔茨堡&#39;>德国之旅-奥地利萨尔茨堡</a></li>
<li><a href=&#39;http://blog.b3inside.com/photography/2011-germany-neuschwanstein/&#39; rel=&#39;bookmark&#39; title=&#39;德国之旅-新天鹅堡&#39;>德国之旅-新天鹅堡</a></li>
<li><a href=&#39;http://blog.b3inside.com/photography/2011-germany-nurnberg/&#39; rel=&#39;bookmark&#39; title=&#39;德国之旅-纽伦堡&#39;>德国之旅-纽伦堡</a></li>
<li><a href=&#39;http://blog.b3inside.com/photography/2011-germany-frankfurt/&#39; rel=&#39;bookmark&#39; title=&#39;德国之旅-法兰克福&#39;>德国之旅-法兰克福</a></li>
<li><a href=&#39;http://blog.b3inside.com/photography/2011-germany-berchtesgaden/&#39; rel=&#39;bookmark&#39; title=&#39;德国之旅-贝希特斯加登&#39;>德国之旅-贝希特斯加登</a></li>
</ol></p>]]>
</description>
<dc:creator>波希米亚</dc:creator>
<pubDate>Thu, 19 Jan 2012 21:55:44 +0800</pubDate>
</item>
<item>
<title>用户研究前传—用户招募【365ucd】</title>
<link>http://www.itfeed.cn/post.asp?id=7634</link>
<description>
<![CDATA[<p><a HREF="http://www.365ucd.com/archives/3293.html"><img ALT="用户研究前传—用户招募" SRC="http://www.365ucd.com/wp-content/uploads/2012/01/zhaomu.jpg" WIDTH="700" HEIGHT="200" /></A>用户研究过程中，经常需要借用测试、访谈、焦点等方法进行定性研究，此时就需要找到具有代表性的用户样本来参与。这个过程听起来简单易操作，个中细节却是相当复杂繁琐的，需要特别注意的要点很多：招募什么人？如何找到他们？如何安排时间？如何跟对方沟通协助我们完成任务？等等。<span></SPAN>由此看来，用户招募这个差事对与陌生人的沟通能力及突发时间处理能力的要求还是有相当的要求的。</P>
<p>&nbsp;</P>
<p>总的来说，用户招募过程可以浓缩为以下几个问题：</P>
<p><a HREF="http://www.365ucd.com/wp-content/uploads/2012/01/001.gif"><img ALT="用户研究前传—用户招募" SRC="http://www.365ucd.com/wp-content/uploads/2012/01/001.gif" WIDTH="440" HEIGHT="167" /></A></P>
<p>首先，到哪里去寻找用户？</P>
<p>&nbsp;</P>
<p>一般，我们招募用户有以下几种渠道：</P>
<p>&nbsp;</P>
<p>1.公司用户数据库抽取外部真实用户</P>
<p>
通过让用户在线填写问卷来收集用户数据。在招募的时候，首先粗略筛选出符合条件的用户，然后逐一进行甄别，找出一些比较接近需求的目标用户。</P>
<p>&nbsp;</P>
<p>
显然，对于经常需要招募用户的公司，自建用户数据库是一个比较好的选择，一是用户来自不同渠道，数量比较充裕，既具有代表性，又能够体现样本的真实性和客观性。</P>
<p>&nbsp;</P>
<p>2.公司内部用户</P>
<p>内部人员指公司内部的同事，根据项目需求，以下情况可以考虑招募内部用户：</P>
<p>&nbsp;</P>
<p>在可用性测试进行预测试时，可以邀约内部人员；</P>
<p>内部人员与目标用户具有相同特征，并且对产品不熟悉；</P>
<p>在某些情况下，内部人员比外部人员对产品有更严格的要求，会毫不犹豫地指出更多的问题，也有利于新产品的保密。</P>
<p>&nbsp;</P>
<p>3.外挂问卷链接</P>
<p>
一些产品比较难直接招募到实际目标用户，一般我们会制作在线问卷，将问卷的链接有针对性地发布在一些网站或是论坛，收集问卷数据。采用这种方法比较容易从中找到我们需要的实际目标用户，而且用户也乐意参与到我们后续的活动。</P>
<p>&nbsp;</P>
<p>4.通过熟人介绍</P>
<p>
如果以上的渠道都无法找到合适的参与者，而且时间又比较急的情况下，我们会让身边熟悉的人帮忙介绍一些符合条件的用户，但这些用户不能与项目主持人认识。这种方式基本不用，只有个别产品在招募上存在难度，才会考虑这种渠道去协助我们完成招募。</P>
<p>&nbsp;</P>
<p>其次，如何甄别合适的用户？</P>
<p>&nbsp;</P>
<p><strong>先来看下招募外部真实用户的流程：</STRONG></P>
<p><a HREF="http://www.365ucd.com/wp-content/uploads/2012/01/002.jpg"><img ALT="用户研究前传—用户招募" SRC="http://www.365ucd.com/wp-content/uploads/2012/01/002.jpg" WIDTH="608" HEIGHT="196" /></A></P>
<p>
我们从数据库初步筛选出来的用户，往往比实际需要的人数要多，而且未必每个用户都合适，因此接下来要做的事就是打电话给用户逐一甄别，了解实际情况。</P>
<p>&nbsp;</P>
<p>第一次电话甄别，我们一般采用以下流程：</P>
<p><a HREF="http://www.365ucd.com/wp-content/uploads/2012/01/003.bmp"><img ALT="用户研究前传—用户招募" SRC="http://www.365ucd.com/wp-content/uploads/2012/01/003.bmp" /></A></P>
<p>在这个过程中，可能会遇到以下问题：</P>
<p>&nbsp;</P>
<p>1、&nbsp; 用户：你怎么会知道我的电话号码？</P>
<p>&nbsp;</P>
<p>
用户不一定记得曾经留下自己的联系方式，这时我们有必要向用户解释清楚，可以这么说：“您近期在我们网站上填过一份问卷，问卷中征求过您的意愿，如果愿意接受我们后期的电话访谈，请留下电话号码供我们需要时联系你”。这是实际情况，用户是自愿留下联系电话，自然会消除心中的疑虑。</P>
<p>&nbsp;</P>
<p>2、用户：怎么又是这种讨厌的调查/电话访谈？</P>
<p>&nbsp;</P>
<p>
部分用户对“调查”类的字眼已经形成一种惯性的厌恶感。所以不必生搬硬套，我们大可以聊天的方式开始与用户交谈：“这次为了优化我司XXX产品的设计，想了解下大家平时的使用习惯和使用中遇到些什么问题，便于我们改善我们的产品”。大多数用户会乐意接受我们的提问，甚至会说出很多我们预先没有想到的问题。善于沟通的用户，更会以讲故事的方式来讲述自己遇到的情况。</P>
<p>&nbsp;</P>
<p>3、用户：我怎么相信你？</P>
<p>&nbsp;</P>
<p>
电话甄别因为无法亲临公司现场，双方仅有声音的交流，常常令用户心存怀疑。一般我们会从下面几点向用户解释，如“我们是如何获得用户的联系方式？”“我们电话甄别的目的是什么？”“我们电话甄别的过程不需要用户透露重要的、隐私的信息，而且后期我们有研究活动需要邀请你来参加的话，你可以到我们公司现场见证一下“。与用户交流时，用语必须礼貌，态度保持坚定，语速适中，语调亲切。</P>
<p>&nbsp;</P>
<p>4、用户：我很忙，你要耽误我多少时间？</P>
<p>&nbsp;</P>
<p>
给用户打电话有可能打扰到用户的生活和工作，当用户表示不方便时，应该予以尊重，中止访谈，询问用户方便的时间，务必在约定的时间点再次去电话访谈。对用户提问应尽量简洁，问题应该有所侧重，只要了解到我们需要收集的信息就可以结束了。</P>
<p>&nbsp;</P>
<p>5、用户：人口统计学问题？拒绝回答</P>
<p>&nbsp;</P>
<p>
部分用户对个人信息特别敏感，不愿意透露确切的信息，这时可以换种方式询问：“能否透露下您的收入范围/年龄范围？”争取即便不能获得最准确的信息，至少也能了解大致的情况。如果用户确实不愿意透露，我们应该尊重用户，不再追问。</P>
<p>&nbsp;</P>
<p>6、用户态度不端正，趁机搭讪怎么办？</P>
<p>&nbsp;</P>
<p>当用户询问工作人员个人信息时，工作人员可以以超出个人工作职责为由明确予以回绝。</P>
<p>&nbsp;</P>
<p>
通过第一次电话甄别后，应核对已有用户数据，确认每位未参加过类似用户研究活动。对于参加过此类活动的用户，可能是单纯为了报酬而夸大其词，应提高注意。</P>
<p>&nbsp;</P>
<p>在整个招募流程中，为了避免专门参加此类活动的 “会虫”及提高招募质量，需要注意及时更新用户数据库：</P>
<p>&nbsp;</P>
<p>1、电话甄别前，从userpool（用户数据库）中抽取用户资料时，排除此前参加过研究活动的用户</P>
<p>&nbsp;</P>
<p>2、项目执行阶段结束后，务必于userpool（用户数据库）中将此次参与研究活动的用户信息做标记</P>
<p>&nbsp;</P>
<p>此时，我们还需遴选出较适合的人选，还有甄别工作要进行，即第二次电话甄别；第二次甄别相对简单：</P>
<p>&nbsp;</P>
<p>1、再次核实他们是否具备所需的条件（再次与用户口头确认重点信息无误）。</P>
<p>&nbsp;</P>
<p>2、核实他们在活动当天是否有时间。</P>
<p>&nbsp;</P>
<p>3、提前告知活动持续的时间，活动的大致内容，以及其他的注意事项（如期间会录像和录音等等）。</P>
<p>&nbsp;</P>
<p>4、告知他们的参与可以给到什么样的补偿。</P>
<p>&nbsp;</P>
<p>5、判断他们是否是优秀的参与者（是不是可以做到发声思维，是否善于表达？）</P>
<p>&nbsp;</P>
<p>第二次电话甄别结束后，发送邀请邮件告知用户活动时间、地点、活动内容。邮件应包含如下信息：</P>
<p>&nbsp;</P>
<p>1、前往测试地点的行车路线（自驾车和公交路线）</P>
<p>&nbsp;</P>
<p>2、停车地点</P>
<p>&nbsp;</P>
<p>3、测试房间的具体位置</P>
<p>&nbsp;</P>
<p>4、发生突发事件能及时联系安排测试的工作人员的电话号码</P>
<p>&nbsp;</P>
<p>5、保密协议（如果有的话）以便他们在测试之前阅读</P>
<p>&nbsp;</P>
<p>到此，招募工作已接近尾声，接下来再次电话确认用户已收到邮件邀请函并重申注意事项（注意事项指告知用户时间地点等）。</P>
<p>&nbsp;</P>
<p>最后，用户到达现场，接待用户。</P>
<p>&nbsp;</P>
<p>一般，在用户到达现场前，应给用户打电话以核实他们能够参加活动并解答用户提出的任何疑问。</P>
<p>&nbsp;</P>
<p><strong>招募内部用户流程：</STRONG></P>
<p><a HREF="http://www.365ucd.com/wp-content/uploads/2012/01/004.jpg"><img ALT="用户研究前传—用户招募" SRC="http://www.365ucd.com/wp-content/uploads/2012/01/004.jpg" WIDTH="618" HEIGHT="82" /></A></P>
<p>
招募内部用户比较省时省力，过程也比较简单易行，用户甄别过程和招募外部真实用户的过程大致相同，确定合适的人选，约定方便的时间参加活动。</P>
<p>最后，如何补偿用户付出的时间？</P>
<p>
在第二次甄别后，确定邀约用户过来，应在发邀请邮件中，告知用户我们会给予一定的报酬作为补偿。邀请外部用户参加活动，给予的报酬会视活动的内容及所花费的时间长短而定。在活动结束时，应把相应的补偿亲手给用户并向用户表示衷心的感谢。</P>
<p>
在真正的用户招募操作过程中，远远不止以上笔者条条框框列举的那些情况，细节问题多多，还需要招募人员耐心沟通，多思考，妥善解决。用户招募过程会直接影响产品测试的准确度，所以把握每个环节，讲求沟通策略是非常重要的。</P>
<p>&nbsp;</P>
<p>
本文转载自网易UEDC&nbsp;&nbsp;&nbsp;&nbsp;
链接<a HREF="http://uedc.163.com/5042.html">http://uedc.163.com/5042.html</A></P>]]>
</description>
<dc:creator>修泽</dc:creator>
<pubDate>Wed, 18 Jan 2012 09:21:49 +0800</pubDate>
</item>
<item>
<title>互联网用户研究人员的知识体系</title>
<link>http://www.itfeed.cn/post.asp?id=7569</link>
<description>
<![CDATA[<p>
	　　问：为什么想做用户研究?</p>
<p>
	　　答：对用户研究感兴趣.</p>
<p>
	　　问：用户研究常用的方法你知道那些?</p>
<p>
	　　答：我不是学相关专业的，不是特别了解</p>
<p>
	　　问：你有看过相关的书籍和资料么?</p>
<p>
	　　答：没有</p>
<p>
	　　问：(汗~!)&hellip;&hellip;</p>
<p>
	　　来面试用户研究的有些同学非常有意思，对于用户研究的了解，多半是看了一些讲座或者博文，脑袋一热就来面试了，甚至还没弄清楚一些基础知识;甚至连可用性测试都没有听说过，就敢来投简历面试。</p>
<p>
	　　这些同学面试之后总要问看什么书?怎么提高?或者是在学校要补哪些课程?</p>
<p>
	　　说实话这真是因人而异，如果是刚参加工作的毕业生，根据不同的背景，要补的课不一样。比如，统计学背景的同学定量调研基础强，但是做用户访谈就略差;心理学背景的同学，定性定量调研掌握方法都不错，但是动手能力(比如做原型)或者产品感都需要加强。技术背景的同学实现能力很强(直接编程了)，但对于调研方法的掌握就不足了。工业设计的同学技能非常综合，动手能力和调研方法的掌握都不错，但是统计学的知识还需要加强一下。</p>
<p>
	　　补课只是一方面，最终要的还是要搭建合理的知识体系，谈到互联网用户研究人员知识体系，包括但不限于：基础理论，工具使用，逻辑思维，口头表达，报告撰写，互联网行业常识等。</p>
<center>
	&nbsp;</center>
<p style="text-align: center; ">
	<strong><img alt="" src="http://www.yixieshi.com/uploads/allimg/120115/1-120115031942543.jpg" style="width: 597px; height: 397px; " /></strong></p>
<p>
	<strong>　　基础理论</strong></p>
<p>
	　　对于用研来说基础理论，是如UCD的各种方法可用性测试，卡片分类等等之类的知识。当然其中最重要的还是调研方法的部分(这里不多说，许多书都可以买到)。</p>
<p>
	<strong>　　逻辑思维</strong></p>
<p>
	　　逻辑思维是用研思考的重要工具，用研常常要从支离破碎的数据或者现象中，抽丝拨茧，发现现象的本质，因此需要有思维没有条理，常常误读数据或者现象。逻辑思维也是用研沟通的重要工具，因为用研的主要需求方，产品经理的逻辑思维都很强，如果没有好的逻辑思维，很难和产品在一个层面上沟通。</p>
<p>
	<strong>　　口头表达</strong></p>
<p>
	　　嘴皮子非常重要，用研在沟通调研需求和调研结果宣讲上，经常要面对别人的质疑，如果不能反映灵敏，表达清晰，以理服人，调研成果的接受度会大打折扣。</p>
<p>
	<strong>　　报告撰写</strong></p>
<p>
	　　我发现很多同学在做调研的时候非常辛苦，兢兢业业，到了些报告的时候，就有些敷衍，认为反正结论都和需求方沟通过了，报告就是走个过场。其实不然，报告是你的一张名片，让别人一看就能记着你。而且报告一般都会存档备案，其他人不用你讲就了解整个实验的目的、背景、主要发现和结论。另外，报告不是数据结果的堆砌，结构、数据的展现方式、图表的样式配色、结论的描述等也要做适当地考虑。</p>
<p>
	<strong>　　工具使用</strong></p>
<p>
	　　工具和工作容非常相关。浏览任务为主的页面做实验会使用眼动仪测试。分析问卷数据可能会用到spss。做实验的物料，如果测试原型的话，可能需要用axure。分析日志数据可能要用到数据库和Python。没有一种工具可以解决所有问题。开始不会没关系，边干边学就是了。</p>
<p>
	<strong>　　互联网行业常识</strong></p>
<p>
	　　做互联网用户研究起码要对互联网的新产品感兴趣，而且在各种产品的使用和理解上要比一般的用户更深。如果平常上网只聊天、玩游戏，连微博也没有，也没在网上买过东西，显然对于互联网的理解也不会有什么高见。</p>

				<p>本文链接：<a href="http://www.yixieshi.com/ucd/10158.html" target="_blank">http://www.yixieshi.com/ucd/10158.html</a></p><img src="http://www1.feedsky.com/t1/596935486/yixieshi/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/yixieshi/~8269072/596935486/6372261/1/item.html" border="0" height="0" width="0" style="position:absolute" />]]>
</description>
<dc:creator>包子</dc:creator>
<pubDate>Sun, 15 Jan 2012 03:18:32 +0800</pubDate>
</item>
<item>
<title>如何让数据说话！ —网站实例分析</title>
<link>http://www.itfeed.cn/post.asp?id=7466</link>
<description>
<![CDATA[<p align="center"><img class="aligncenter  wp-image-3107" title="11111111" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/11111111.jpg" alt="" width="600" height="296" /></p>
<p style="text-align: center;" align="center"><img title="编辑：S++小组" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/10/三人小组logo副本.jpg" alt="" width="134" height="134" /></p>
<p style="text-align: center;">编辑：S++小组</p>
<p align="left">数据在很多网站都被看作是衡量一个产品或者一个设计好坏的基本指标之一。数据指标也曾经压的我很长一段时间喘不过气来。但是现在想想确实有时候数据能告诉你很多很多。它未必是衡量产品好坏的唯一标准，但是它也确实能告知你很多。</p>
<p align="left"><span id="more-3090"></span></p>
<p align="left"><strong>那么数据究竟能告知我们些什么呢？</strong></p>
<p align="left">–     你的流量有效吗？</p>
<p align="left">–     如何发现漏水的窟窿？</p>
<p align="left">–     真的了解访问者？</p>
<p align="left">–     页面，构架是否合理？</p>
<p align="left">–     投放的广告有用吗？</p>
<p align="left">–     改版带来了什么？……</p>
<p align="left"><strong>我们先来看看数据的简称</strong></p>
<p align="left">在之后的例子中会针对这些简称做一些分析。</p>
<p align="left">–     PV （即Page View，综合页面浏览量）</p>
<p align="left">比如：当我点击了一个banner，那么从点击后出现的页面开始，后面所有点击出现的页面的浏览量就是PV。</p>
<p align="left">–     CLICK（页面点击量）</p>
<p align="left">–     DISPLAY（单个页面浏览量）</p>
<p align="left">–     UV（即Unique Visitor，独立访问者）</p>
<p align="left">访问您网站的一台电脑客户端为一个访客。24小时之内，同一IP，多次访问，只算一次。</p>
<p align="left">–     BUYER（购买者）</p>
<p align="left">访问您网站的一台电脑客户端为一个访客。24小时之内，同一IP，多次购买，只算一次。</p>
<p align="left">–     CTR（点击转化率，也就是Click/Display）</p>
<p align="left">–     广告位转化率（也就是PV/Click）</p>
<p align="left"><strong>实例来了</strong></p>
<p align="left">l       <strong>Banner</strong><strong>篇</strong></p>
<p align="left">–     案例一</p>
<p align="center"><img class="aligncenter size-full wp-image-3091" title="image001" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/image001.png" alt="" width="554" height="208" /></p>
<p align="left">A 广告位转化率:1.9</p>
<p align="left">B 广告位转化率:10.8★</p>
<p align="left">该数据告知我们，在一个页面中不明显的位置的广告位，如果做成文字形式会很容易被很多其他信息干扰的看不到，这个时候如果放上吸引人目光的图片，很可能效果会非常的好。</p>
<p align="left">–     案例二</p>
<p align="center"><img class="aligncenter size-full wp-image-3092" title="image002" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/image0021.png" alt="" width="503" height="432" /></p>
<p align="center">测试目的是：在该banner尺寸中商品数量和大小的最优表现。</p>
<p align="center"><img class="aligncenter size-full wp-image-3093" title="table1" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/table1.png" alt="" width="228" height="220" /></p>
<p align="left"> 该数据告知我们，作为banner块的商品数量并不是越多越好，它会有一个最合适的大小和数量的比配，如图所示，4个商品虽然图片大，但是由于选择相对狭小，数据表现果然比较差，但是8个商品相对同尺寸的banner来说图片会比较小，给予用户的吸引力也会受一定影响，因此6个商品就在商品数量和大小上为最优化。当然该测试也有一定的弊端，当6个或者8个商品的图片中有一个特别受用户欢迎也会影响数据的表现。因此针对该测试只能多次尝试才能看出最优的组合。</p>
<p align="left">–     案例三</p>
<p align="center"><img class="aligncenter size-full wp-image-3094" title="image003" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/image0031.png" alt="" width="288" height="360" /></p>
<p align="center">测试目的是：banner改版过程中各个类别的表现对比。</p>
<p align="center"><img class="aligncenter size-full wp-image-3095" title="table2" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/table2.png" alt="" width="164" height="176" /></p>
<p style="text-align: left;" align="left">该测试是基于同一个页面的三次改版过程中，Center banner数据表现来实现的。因此它不是通过同个时间条件和同个商品条件来测试的，我们拿了很多个数据来比对，尽量避免了不同商品造成的banner数据的误差。</p>
<p style="text-align: left;" align="left">在改版过程中，首先我们上线了A版本，当A版本改版至B版本的时候，banner的尺寸相对阔大，而其中商品图片内容也增加，因此我们认定上线后的表现一定会优于A版本，结果发现完全不是这样，B版本反而比原来A的转化率下降了不少，一开始我们以为是否因为新版本上线导致老用户不习惯于新设计造成一些操作中的困扰，但是发现过了1个月数据仍然无很大起色。于是我们上线了C版本，索性加大了单个banner的尺寸来查看数据表现，果然这次数据不仅优于B也优于A表现。</p>
<p style="text-align: left;" align="center">其中的原因我们细细分析，觉得可能是由于，B版本给到用户的选择增大，对于整体的banner让用户无从选择入手，对于广告类的banner来说可能大型单一的广告会更优。</p>
<p align="left">l       <strong>导航篇</strong></p>
<p align="left">–     案例四</p>
<p align="center"><img class="aligncenter size-full wp-image-3096" title="image004" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/image0041.png" alt="" width="552" height="247" /></p>
<p align="center">测试目的是：改版过程中各个类别的表现对比。</p>
<p align="left">该测试是基于同一个页面导航的三次改版过程中，我们不仅比对了整个导航的转化率，为了页面数据比对的公平起见也比对了导航与整个页面click的占比。</p>
<p>A版本是老版本，数据为<strong>占首页CLICK:9%</strong>，<strong>CTR:4.6%。</strong>B版本上线后，数据表现一下子下降为<strong>占首页CLICK:2%</strong>，<strong>CTR:0.5%。</strong>C版本上线后，数据略有回升<strong>占首页CLICK:9%</strong>，<strong>CTR:2.7%，</strong>虽然转化率并不理想，但是click占比已经上升和A一样。D版本上线后，数据终于上升为<strong>占首页CLICK:12%</strong>，<strong>CTR:5.2%。</strong></p>
<p>我们分析了一下整个导航的click分配占比发现，其中最重要的原因是由于频道导航的点击，A的频道入口非常明显；B删掉了频道导航入口；C虽然增加回导航入口，但是还并没有做的很明显；D又将入口加回，并且删掉了其他干扰信息，使得其更加明显。</p>
<p>就导航而言，D版本表现是优秀的，但是如果频道首页入口的增加对首页来说是否真的有效呢。因此我们查看了频道页面的BUYER转化率，发现频道首页BUYER转化率表现虽然没有优于流程页，但是相对表现也算不错，相对于首页一些其他的位置，比如社区和一些广告的位置来说，频道导航转化率还是比较高的，因此最后我们认定对于导航而言，频道首页的入口不仅需要加，还需要明显。因此D版本为比较优的选择。</p>
<p align="left">l       <strong>页面篇</strong></p>
<p align="left">–     案例五</p>
<p align="center"><img class="aligncenter size-full wp-image-3097" title="image005" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/image0051.png" alt="" width="482" height="422" /></p>
<p>测试目的是：首页改版后的市场推广类位置的表现比对<strong></strong></p>
<p align="center"><img class="aligncenter size-full wp-image-3098" title="table3" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/table3.png" alt="" width="363" height="435" /></p>
<p>&nbsp;</p>
<p>上述数据表可以看出改版后，CTR上升模块为2、3、6，于是我们查看了2、3、6的Buyer转化率，结果发现除了3的表现较高之外，其他两个都是数据BUYER转化率排名非常靠后，而很多Buyer转化率偏高的模块，却CTR下降非常明显，因此就市场推广模块来说这次改版是失败的。</p>
<p>从下面的总表就可以更加明显的看出了：</p>
<p align="center"><img class="aligncenter size-full wp-image-3099" title="table4" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/table4.png" alt="" width="148" height="226" /></p>
<p>虽然HP的页面Display增长的，但是其他数据均下降了。但是最终我们并没有回退前版本，其中有各种原因，其一是在新版本中增加了自动维护模块而该模块所带来的BUYER的增长非常的明显，并且新版本中的关键字部分的调整也使得整个页面的表现增长非常明显，因此最后只是针对一些重要的位置再次进行了设计和位置上的调整，而没有对整个页面进行回退的操作。</p>
<p>–     案例六</p>
<p align="center"><img class="aligncenter size-full wp-image-3100" title="image008" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/image0081.png" alt="" width="553" height="246" /></p>
<p align="center">测试目的是：这是多版本测试以同时间，同商品，同链接页面来比对四个版本的表现。</p>
<p align="center"><img class="aligncenter size-full wp-image-3101" title="table5" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/table5.png" alt="" width="558" height="92" /></p>
<p>该测试是针对市场推广的LANDING PAGE来做的，就CTR而言，A版本的转化率优于其他版本，原因是商品区域重点突出，其他LP BTU信息相对较弱，干扰不大。而D版本不仅使用了双栏结构，并且加重了LP BTU的视觉效果，使得D版本的LP BTU的点击大于了A版本。如下图所示：</p>
<p>（LP BTU是指LANDING PAGE与其他LANDING PAGE的互链入口）</p>
<p align="center"><img class="aligncenter size-full wp-image-3102" title="table6" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/table6.png" alt="" width="421" height="177" /></p>
<p>就设计CTR表现来说A确实优于D，但是因为该页面是为市场推广所做，而市场推广部门不仅仅只看一个页面的好坏，更重要的是要看整体推广的效果，所以D版本就单个页面表现虽然一般，加强的LP BTU部分增加了互链的影响，因此使得整体页面带来的各个推广页面间的转化率增加，而使得其表现在24小时内的PV效果不一般。最后采用的是D版本。</p>
<p align="left">l       <strong>如何正确看待数据</strong></p>
<p align="left">–     案例一</p>
<p align="center"><img class="aligncenter size-full wp-image-3103" title="image009" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/image0091.png" alt="" width="553" height="111" /></p>
<p>当老板设定了一个离谱的数据指标后，各部门为了达到该指标各管各想出了各种应付的手段。然而这些手段导致最后的虚假指标对于公司的业绩没有任何帮助。</p>
<p>这个说明了：<strong>数据不是为了制定不切实际的指标。</strong></p>
<p>在制定数据指标的时候应该有一定的合理增长的分析，而不该拍脑袋的方式来决定。</p>
<p align="left">–     案例二</p>
<p align="center"><strong><img class="aligncenter size-full wp-image-3104" title="image010" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/image0101.png" alt="" width="411" height="144" /></strong></p>
<p>当一个比较有创意的大型项目上线，而三个月的数据表现并不是表现非常好的时候，是否需要马上撤换下马呢？虽然数据的好坏也需要看，但未必一定看的是绝对值，其中增长趋势也是很重要的环节。而一个大型项目在上线前应该做比较充分的准备，但一旦上线后，如果表现不够好，也可以通过一些用户的调研再次调整来修正它，马上撤换下马不一定是最好的方法。</p>
<p>这个说明了：<strong>很多项目要看长期的数据趋势，在过程中可以做一些其他UER调研来完善它。</strong></p>
<p align="left">–     案例三</p>
<p align="center"><img class="aligncenter size-full wp-image-3105" title="image011" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/image0111.png" alt="" width="553" height="111" /></p>
<p>每个部门都会有针对该部门所制定的不同的指标，这个也就是矛盾的产生，比如市场部觉得A版本好，因为他们对该版本有自己的数据分析，而设计部门也会有自己一套数据分析，结论可能完全不同，业务也是一样。这个就会带来很多争吵，那么如何避免这些争吵。一定是有一个最大的目标值，比如最后会以BUYER为最终指标值，那么就会在此基础上来对其他的数据进行优化。</p>
<p>这个说明了：<strong>数据需要统筹考虑，不同角度会有不同结论。</strong></p>
<p align="left">–     案例四</p>
<p align="center"><strong><img class="aligncenter size-full wp-image-3106" title="image012" src="http://ued.ctrip.com/blog/wp-content/uploads/2011/12/image0121.png" alt="" width="216" height="144" /></strong></p>
<p>这个是我们以前一个领导经常挂在口头的话，他老是自以是的说有了数据，UER就可以全部都不要了。但是终于有一天我们一个超级牛叉的UER反驳他这样一句话，导致他以后再也不敢提这个论调了。<strong>数据告诉我们哪里出问题，用户调研能告诉我们问题出在哪里。</strong>这里的两个哪里让我觉得非常的经典。<br />
<strong>尾声：</strong>数据是个双刃剑。虽然数据分析是非常重要的，也是每个公司的老板非常看重的部分，但是它需要我们合理分析，综合考量。如果它的分析出了错，那么可能会导致一个决策上致命的错误。因此数据需要我们认真和全面的思考。</p>
]]>
</description>
<dc:creator>携程UED</dc:creator>
<pubDate>Fri, 06 Jan 2012 08:30:16 +0800</pubDate>
</item>
<item>
<title>讲四点亚马逊的“小”体验</title>
<link>http://www.itfeed.cn/post.asp?id=7431</link>
<description>
<![CDATA[<p>虽然国人使用亚马逊很不习惯，但其网站还是有众多值得参考学习的，我想京东苏宁的人应该整天在研究亚马逊吧！</p>
<p><strong>第一点：无处不在的收货时间提醒、告知，这对于猴急的国内网购者应该很有效果吧</strong></p>
<p><a href="http://aboutb2c.com/wp-content/uploads/2012/01/1a.jpg"><img class="alignnone size-full wp-image-483" title="亚马逊" src="http://aboutb2c.com/wp-content/uploads/2012/01/1a.jpg" alt="" width="600" height="280" /></a></p>
<p><span style="color: #333333;">这是每个商品下边的收货时间提示，似乎在告诉你赶紧下单</span></p>
<p><a href="http://aboutb2c.com/wp-content/uploads/2012/01/1b.jpg"><img class="alignnone size-full wp-image-484" title="送货时间" src="http://aboutb2c.com/wp-content/uploads/2012/01/1b.jpg" alt="" width="600" height="170" /></a></p>
<p>这是在确认订单页面的时间提醒</p>
<p>对于这点，一般b2c要想学习真不容易。在物流不发达的中国，估计也只有少数的几家敢给用户这么精准的时间承诺！</p>
<p><strong>二、一个订单多个收货地址（在国外网站叫multiple addresses)</strong></p>
<p><a href="http://aboutb2c.com/wp-content/uploads/2012/01/2a.jpg"><img class="alignnone size-full wp-image-485" title="2a" src="http://aboutb2c.com/wp-content/uploads/2012/01/2a.jpg" alt="" width="600" height="250" /></a></p>
<p>在确认订单处可更改发送地址</p>
<p><a href="http://aboutb2c.com/wp-content/uploads/2012/01/2b.jpg"><img class="alignnone size-full wp-image-486" title="2b" src="http://aboutb2c.com/wp-content/uploads/2012/01/2b.jpg" alt="" width="600" height="310" /></a></p>
<p>对于这个需求点，普通网站学不来。京东和苏宁未来 后端的业务流理得很顺了估计会参考。</p>
<p><strong>三、非IE内核的浏览器支付的提示</strong></p>
<p><a href="http://aboutb2c.com/wp-content/uploads/2012/01/3a.jpg"><img class="alignnone size-full wp-image-487" title="支付提示" src="http://aboutb2c.com/wp-content/uploads/2012/01/3a.jpg" alt="" width="630" height="250" /></a></p>
<p>这点很值得中小网站参考，现在各大银行支持非ie内核浏览器的不多</p>
<p><strong>四、让用户选择——到货后一起发货or分拆包裹发货</strong></p>
<p><a href="http://aboutb2c.com/wp-content/uploads/2012/01/4a.jpg"><img class="alignnone size-full wp-image-488" title="收货方式" src="http://aboutb2c.com/wp-content/uploads/2012/01/4a.jpg" alt="" width="630" height="550" /></a></p>
<p>这种情况会出现在多仓库发货的b2c，一般小网站不会碰到。苏宁的pm告诉我他们尚未实现该功能，可见后端的业务流要走顺真不容易。（国内的京东凡客已实现该功能）</p>
<p>就说到这里，比较简单，但管中窥豹，可见一斑！很多看起来很简单的功能，因为后端的业务逻辑问题，要实现真不容易。</p>
<h2  class="related_post_title">推荐你看看其它类似的文章</h2><ul class="related_post"><li>2011/11/19 -- <a href="http://aboutb2c.com/167" title="B2C评价系统的规划（二）">B2C评价系统的规划（二）</a> (2)</li><li>2011/11/14 -- <a href="http://aboutb2c.com/146" title="B2C精准营销概述">B2C精准营销概述</a> (1)</li><li>2011/11/13 -- <a href="http://aboutb2c.com/90" title="B2C评价系统的规划（一）">B2C评价系统的规划（一）</a> (1)</li><li>2011/11/13 -- <a href="http://aboutb2c.com/26" title="如何利用会员的个人信息进行关联推荐">如何利用会员的个人信息进行关联推荐</a> (2)</li></ul>]]>
</description>
<dc:creator>About B2C</dc:creator>
<pubDate>Tue, 03 Jan 2012 17:04:44 +0800</pubDate>
</item>
<item>
<title>用户研究思路概述：以淘宝网SNS’分享’为例</title>
<link>http://www.itfeed.cn/post.asp?id=7321</link>
<description>
<![CDATA[<p><strong>事发突然：</strong><strong></strong></p>
<p>今年8月份，发神经般的在微博上点开了一个广告链接，发现某美妆品牌的东西性价比很高，于是成功购买。这是我在SNS的网站上达成的第一笔交易，拿到钟爱的护肤品，突然发现：我居然没有在“我的淘宝”的“好友动态”里点击过别人分享的东西，更别提购买了。于是，有了这次的研究。</p>
<p><strong>一、立项：</strong><strong></strong></p>
<p>基于以上想法，本打算研究SNS用户习惯及动机（没有限定在淘宝网），希望能通过照片日志（Photo Dairy）的方法，从定性的角度研究活跃在各大SNS网站用户的特征，从而帮助淘宝网来定位自己的目标人群。但是，后来发现：在淘宝网购物的人群本身就是有自己特点的，而我的研究更多的价值点应该是放在【如何让这些网购用户成为淘宝网的SNS用户】。</p>
<p>带着这个目标，了解了SNS下半年的业务规划，为了能够更好的让业务方得到启发和指导，更多的提升研究价值，将产品定位在【淘宝网分享】，研究使用淘宝分享的使用习惯及驱动因素。</p>
<p><strong>二、研究思路的确定：</strong></p>
<p>&nbsp;</p>
<p>一个严谨、完整的研究，我认为，定性与定量的结合是必不可少的。所以，这个项目采取了先定量、再定性、最后定量的研究过程。见图1。</p>
<p style="text-align: center"><a href="http://ued.taobao.com/blog/wp-content/uploads/2011/12/11.jpg"><img class="aligncenter size-full wp-image-4897" src="http://ued.taobao.com/blog/wp-content/uploads/2011/12/11.jpg" alt="" width="281" height="159" /></a>图1</p>
<p><strong>1</strong><strong>、定量——确定目标用户：</strong><strong></strong></p>
<p>确定了要研究的产品，最重要的就是要确定目标用户了。</p>
<p>为了让我的目标用户更“目标”，我选择了与BI（商业智能部门）同事的合作。希望BI的同事能将全网使用过SNS分享用户（当时是8月份，我们的‘分享’产品6月份上线）的特征数据进行提取、分析，帮助我们选择定性研究的样本。</p>
<p>在这个过程中，我们发现，7月使用大分享1-2次的用户、8、9月份GMV­­­<sup>①</sup>&gt;=3笔以上，但8、9月份没有再进行分享的用户占所有SNS大分享用户的76.2%，我们认为，这部分用户为什么不再使用SNS分享是一个很有价值的挖掘点。根据这一思路，我们将用户分为三层：见图2</p>
<p style="text-align: center"><a href="http://ued.taobao.com/blog/wp-content/uploads/2011/12/21.jpg"><img class="aligncenter size-full wp-image-4898" src="http://ued.taobao.com/blog/wp-content/uploads/2011/12/21.jpg" alt="" width="257" height="211" /></a>图2</p>
<p>新用户：8月1日至8月17日之间，第一次进行过分享，且至少绑定了一个外网SNS网站的用户。</p>
<p>活跃用户：6月份，7月份，8月份均进行过分享，且至少绑定了一个外网SNS网站的用户。</p>
<p>流失用户：6月份分享过，但是7月，8月均未分享的用户，且至少绑定了一个外网SNS网站。（BI建议：调研时候可以选择分享天数&gt;=2的用户，因为分享天数为1的用户大部分可能只是尝试下。） 注：这里并未用分享次数来定义流失。因为一个用户如果一天内分享了10次，第二天不再分享，也算作流失用户。</p>
<p>但是，问题出来了。如果我们三个层面的用户都来做研究，可能会出现每类用户研究的都不透彻，所以，经过讨论，排出了优先级：流失用户&gt;新用户&gt;活跃用户。</p>
<p>&nbsp;</p>
<p>所以，最后，目标用户确定为：使用淘宝网SNS分享的流失用户。<strong></strong></p>
<p>&nbsp;</p>
<p><strong>2</strong><strong>、定性——以研究目的为导向，深入挖掘定性问题</strong><strong></strong></p>
<p>用户分层结束，确定了目标用户——流失用户。接下来，就是对用户的星级、在淘宝成交情况、人口特征等因素做出分析，然后进行定性研究前的抽样。具体的抽样方法不做赘述，这属于另外一个方面的问题。</p>
<p>接下来，根据提纲，电话深访了16名买家，其中有10名流失用户和6名活跃用户，得到了诸多的定性问题，经过整理，要进行定量验证了。</p>
<p>为什么要对活跃用户进行深访呢？在接下来的定量阶段，我会做出具体的解释。</p>
<p>&nbsp;</p>
<p><strong>3</strong><strong>、定量——定性结果的量化</strong><strong></strong></p>
<p>从BI提取的数据中，流失用户最后的样本仅有3万多用户，据我们平时的问卷回收情况估算，样本量过低，这样得到的结果误差会比较大。为了保证最后实验结果的可靠性和丰富性，添加了【非流失用户】，即7、8、9月份GMV&gt;=3笔以上的淘宝纯买家（除去流失用户）。因为这部分有效样本可以保证，而且涵盖了新用户和活跃用户，可以和流失用户在人口特征、习惯、动机、使用驱动因素上做以对比。</p>
<p>也是因为这个原因，我们在电话调研的过程中，添加了6名活跃用户的电访。</p>
<p>在问卷设计的过程中，面临最大的挑战就是关于驱动因素的题目。因为建立驱动因素的模型是需要很多传统的、经过诸多验证的题目来建立模型。但是SNS领域的驱动因素建模少之又少，为了保证模型的完整性和科学性，项目期间，还做了许多的桌面研究。</p>
<p>&nbsp;</p>
<p>整个项目主要分为这三个阶段进行的。最后得到的非流失用户及流失用户的相关模型如下图：（结论仅供大家参考，由于实验设计和目标用户的不同，最后的结果可能是会有不同）</p>
<p>&nbsp;</p>
<p style="text-align: center"><a href="http://ued.taobao.com/blog/wp-content/uploads/2011/12/31.jpg"><img class="aligncenter size-full wp-image-4899" src="http://ued.taobao.com/blog/wp-content/uploads/2011/12/31.jpg" alt="" width="562" height="369" /></a>图3：有过分享经历的非流失用户做分享的原因模型</p>
<p style="text-align: center">圆圈越大，代表相关度越高（下同）。图中蓝色代表与购物相关的因素，红色代表用户心理层面的因素。</p>
<p>&nbsp;</p>
<p style="text-align: center"> <a href="http://ued.taobao.com/blog/wp-content/uploads/2011/12/41.jpg"><img class="aligncenter size-full wp-image-4900" src="http://ued.taobao.com/blog/wp-content/uploads/2011/12/41.jpg" alt="" width="580" height="371" /></a>图4：流失用户做分享的原因模型</p>
<p>&nbsp;</p>
<p style="text-align: center"> <a href="http://ued.taobao.com/blog/wp-content/uploads/2011/12/51.jpg"><img class="aligncenter size-full wp-image-4901" src="http://ued.taobao.com/blog/wp-content/uploads/2011/12/51.jpg" alt="" width="573" height="368" /></a>图5：有过分享经历的非流失用户不分享的因素模型</p>
<p>&nbsp;</p>
<p style="text-align: center"> <a href="http://ued.taobao.com/blog/wp-content/uploads/2011/12/6.jpg"><img class="aligncenter size-full wp-image-4902" src="http://ued.taobao.com/blog/wp-content/uploads/2011/12/6.jpg" alt="" width="547" height="369" /></a>图6：未分享过的非流失用户不分享的因素模型</p>
<p>&nbsp;</p>
<p style="text-align: center"> <a href="http://ued.taobao.com/blog/wp-content/uploads/2011/12/71.jpg"><img class="aligncenter size-full wp-image-4905" src="http://ued.taobao.com/blog/wp-content/uploads/2011/12/71.jpg" alt="" width="565" height="368" /></a>图7：非流失用户刺激因素的模型</p>
<p>&nbsp;</p>
<p style="text-align: center"> <a href="http://ued.taobao.com/blog/wp-content/uploads/2011/12/81.jpg"><img class="aligncenter size-full wp-image-4906" src="http://ued.taobao.com/blog/wp-content/uploads/2011/12/81.jpg" alt="" width="567" height="367" /></a>图8：流失用户刺激因素的模型</p>
<p>&nbsp;</p>
<p>以上结论是我在专业同事的帮助下完成的，也是我们对SNS领域的初步探索。期待与大家更深入的探讨与交流。</p>
]]>
</description>
<dc:creator>淘宝UED</dc:creator>
<pubDate>Wed, 28 Dec 2011 22:48:19 +0800</pubDate>
</item>
<item>
<title>修改密码的表单设计及整体体验</title>
<link>http://www.itfeed.cn/post.asp?id=7276</link>
<description>
<![CDATA[<p>
	　　2011年岁末先后爆出CSDN、天涯等站点的用户明文密码泄漏，大家纷纷忙着修改密码，不少网站也通过在网页醒目位置发布公告或发送邮件提醒告知用户及时修改自己的密码以确保账户安全。对网站而言，希望用户能够定期主动去修改密码并保证一定的复杂度;但对用户来说，一般不到万不得已，通常不会经常修改密码。同样是表单，注册表单的产品设计大家常讨论，那么修改密码的表单设计及整体体验又是如何?</p>
<p>
	<strong>　　一、大型门户</strong></p>
<p>
	<strong>　　1. 网易通行证</strong></p>
<center>
	<img alt="NetEase" height="277" src="http://www.yixieshi.com/uploads/allimg/111227/0022064c3-0.jpg" width="450" /></center>
<p>
	　　表单中的每个输入框均会给出有效性反馈，新密码的复杂度要求一直显示在输入框下方，并需要填写验证码(英文+数字，不区分大小写)。</p>
<p>
	　　另：界面上有一处&ldquo;&gt;&rdquo;字符漏出，应是缺陷。</p>
<p>
	<strong>　　2. 搜狐通行证</strong></p>
<center>
	<img alt="Sohu" height="217" src="http://www.yixieshi.com/uploads/allimg/111227/0022063A2-1.jpg" width="450" /></center>
<p>
	　　界面中提示了当前用户名;当焦点在输入框中时，跟随输入框在其后提示密码复杂度要求的说明信息;验证码为小写英文+数字。</p>
<p>
	<strong>　　二、SNS社区</strong></p>
<p>
	<strong>　　1. 人人网</strong></p>
<center>
	<img alt="Renren" height="259" src="http://www.yixieshi.com/uploads/allimg/111227/0022061429-2.jpg" width="450" /></center>
<p>
	　　在本次观察中人人网的密码修改流程相对显得比较特殊，它在修改密码之前，给出了&ldquo;身份验证&rdquo;的这一步，提供了验证旧密码、向注册邮箱发送密码重置邮件、账号申诉三种方式。它对用户的指引更为明确，当用户在长时间记住密码后遗忘了密码，则能直接通过发送邮件的方式进行密码修改，而不必退出登录后再走取回密码的流程。</p>
<p>
	<strong>　　2. 天涯社区</strong></p>
<center>
	<img alt="Tianya" height="243" src="http://www.yixieshi.com/uploads/allimg/111227/00220C045-3.jpg" width="450" /></center>
<p>
	　　输入旧密码后，会实时检查是否正确;焦点从输入框中移开后会检查有效性;焦点在新密码的输入框中时，会提示密码的复杂度要求(强制要求字母与数字组合);比较奇怪的是，为何这句&ldquo;输入6-16位的字母和数字的组合，密码区分大小写&rdquo;会始终显示在验证码输入框的下方&mdash;&mdash;这句话所针对的表单项对象究竟是新密码还是验证码?这是一处不必要的困扰。</p>
<p>
	<strong>　　3. 豆瓣网</strong></p>
<center>
	<img alt="Douban" height="395" src="http://www.yixieshi.com/uploads/allimg/111227/00220C517-4.jpg" width="385" /></center>
<p>
	　　豆瓣网的密码修改界面很简单，甚至有些简陋&mdash;&mdash;没有表单项的有效性验证，甚至连密码长度的说明都没有给出。&ldquo;当前密码&rdquo;与&ldquo;新口令&rdquo;的文案区别不知是否可以为之，个人认为还是统一为密码比较好，虽然口令更显Geek。</p>
<p>
	<strong>　　4. Facebook</strong></p>
<center>
	<img alt="Facebook" height="219" src="http://www.yixieshi.com/uploads/allimg/111227/0022063Q0-5.jpg" width="450" /></center>
<p>
	　　Facebook在界面中并未给出密码输入的说明;对当前密码项的为空时没有提醒;当新密码太短或太简单时会给出提醒;也会提示重复输入密码与新密码是否匹配。</p>
<p>
	<strong>　　三、微博</strong></p>
<p>
	<strong>　　1. 新浪微博</strong></p>
<center>
	<img alt="Weibo" height="181" src="http://www.yixieshi.com/uploads/allimg/111227/00220C3F-6.jpg" width="450" /></center>
<p>
	　　提醒界面上以红色高亮的方式告知用户密码安全的重要性;焦点移开时表单项会进行有效性验证;特别给出安全强度标尺再次提醒用户使用高强度的密码;焦点选中时，会提示用户密码的长度说明。</p>
<p>
	<strong>　　2. Twitter</strong></p>
<center>
	<img alt="Twitter" height="273" src="http://www.yixieshi.com/uploads/allimg/111227/00220C093-7.jpg" width="450" /></center>
<p>
	　　当表单项为空时不会给出提示;同Facebook一样，在新密码太短或过于简单时会给出提示;旧密码如果错误，点击&ldquo;Change&rdquo;后会在页面顶端显示，与全站的统一反馈提示一致;需要留意的是，Twitter在修改密码的界面给出了取回密码的入口，点击后会进入输入邮箱取回密码的页面，这一点与人人网相类似。</p>
<p>
	<strong>　　四、搜索引擎</strong></p>
<p>
	<strong>　　1. 百度</strong></p>
<center>
	<img alt="Baidu" height="283" src="http://www.yixieshi.com/uploads/allimg/111227/00220A551-8.jpg" width="450" /></center>
<p>
	　　表单项没有有效性验证，给出了密码长度等的说明，看下来这是一个比较标准并传统的密码修改界面。</p>
<p>
	<strong>　　2. Google</strong></p>
<center>
	<img alt="Google" height="278" src="http://www.yixieshi.com/uploads/allimg/111227/00220A122-9.jpg" width="450" /></center>
<p>
	　　Google在验证当前信息时，可以选择输入旧密码或密码提醒问题的答案;新密码的强度都会给出提示，&ldquo;Password strength&rdquo;上附链接，点击后新窗口弹出 Password Help 页面，告知用户如何设定一个安全的密码;重复输入密码时不会实时检查与新密码的匹配。</p>
<p>
	<strong>　　五、电子商务网站</strong></p>
<p>
	<strong>　　1. 支付宝</strong></p>
<center>
	<img alt="Alipay" height="383" src="http://www.yixieshi.com/uploads/allimg/111227/00220B458-10.jpg" width="450" /></center>
<p>
	　　支付宝账户中，同时有登录与支付两种密码，修改操作基本相同;它是这次体验过程中，唯一将修改密码的操作放置在浮动层中进行的网站;在浮动层中，给出了密码安全提示说明;表单项均无有效性验证提示;当用户开通了数字证书而当前浏览器不支持时，可以通过绑定的手机进行校验。</p>
<p>
	<strong>　　2. 京东商城</strong></p>
<center>
	<img alt="360buy" height="194" src="http://www.yixieshi.com/uploads/allimg/111227/0022063422-11.jpg" width="450" /></center>
<p>
	　　焦点移开时，会对表单项有效性进行验证提醒;重复输入密码时也会检查是否与新密码一致;个人并不赞同在已红色高亮的警示性文案后面再使用感叹号，以避免给用户造成过大的心理压力。</p>
<p>
	<strong>　　3. 携程网</strong></p>
<center>
	<img alt="Ctrip" height="199" src="http://www.yixieshi.com/uploads/allimg/111227/00220B5N-12.jpg" width="450" /></center>
<p>
	　　表单项焦点移开时，会做有效性验证;当表单填写不正确时，将输入框红色高亮，而提示文字使用了相对弱的黄色背景呈现出来;密码强度通过图形标识来提醒用户。</p>
<p>
	　　在看了以上国内外13个大型网站的密码修改界面之后，我们可以发现：</p>
<p>
	　　●密码强度的设定，与网站业务息息相关，通常网站中出现与钱相关的业务(如网络游戏等)时，对密码的复杂度会有强制性的要求;支付宝等甚至会设定登录密码与支付密码，并两者不能相同。</p>
<p>
	　　●对于旧密码的验证，通常只验证是否为空，而不会对正确性做实时校验;</p>
<p>
	　　●对新密码的强度，多数网站均会给出明确说明以降低用户的困扰;</p>
<p>
	　　●多数网站，均会特别提醒用户新密码中需要区分大小写字母;</p>
<p>
	　　●13个案例中，除了豆瓣网之外，均会对新密码与重复输入的新密码之间做匹配校验;</p>
<p>
	　　●有3个网站在修改密码时需填写验证码，个人更希望将这一步放在幕后&mdash;&mdash;系统智能判断哪些情况下需要通过验证码进行增强验证，而不是简单地一刀切;</p>
<p>
	　　●在修改密码的界面上，同时告知用户一些必要的密码安全信息，是必要的;</p>
<p>
	　　●Google、Twitter与人人网的案例，告诉我们修改密码的流程不是僵硬不变，并不一定要通过旧密码来校验用户&mdash;&mdash;这对常常使用&ldquo;记住我&rdquo;的用户来说，无疑是一个便利;</p>
<p>
	　　●在界面设计上，警示性提示的呈现，需要我们在提醒用户与不冒犯用户加以平衡：红色高亮、红叉图标、惊叹号、输入框高亮等方法中选用哪些，值得考量;</p>
<p>
	　　●大多数网站对登录及通行证信息的修改均使用了SSL进行加密。</p>
<p>
	　　====== 更新 @2011/12/26 15:00 ======</p>
<p>
	　　本文集中讨论的是修改密码这一常用操作在交互设计及用户体验的实践，并不涉及密码存储等开发层面的问题。关于密码设定等信息安全领域的信息，推荐延伸阅读以下文章：</p>
<p>
	　　<a href="http://coolshell.cn/articles/6193.html" target="_blank">CSDN明文口令泄漏的启示</a> @陈皓</p>
<p>
	　　<a href="http://blog.devep.net/virushuo/2011/12/25/post_82.html" target="_blank">密码泄漏和黑天鹅事件</a> @霍炬</p>
<p>
	　　<a href="http://www.guokr.com/article/81430/" target="_blank">CSDN数据库泄露!那些网站够安全吗?</a> @sqybi</p>

				<p>本文链接：<a href="http://www.yixieshi.com/ucd/10061.html" target="_blank">http://www.yixieshi.com/ucd/10061.html</a></p><img src="http://www1.feedsky.com/t1/590733115/yixieshi/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/yixieshi/~8269072/590733115/6372261/1/item.html" border="0" height="0" width="0" style="position:absolute" />]]>
</description>
<dc:creator>包子</dc:creator>
<pubDate>Tue, 27 Dec 2011 00:25:22 +0800</pubDate>
</item>
<item>
<title>增强应用“可用性”的10条设计原则</title>
<link>http://www.itfeed.cn/post.asp?id=7245</link>
<description>
<![CDATA[<p>
	　　众所周知，如果开发者想发布一款iOS应用，必须提交苹果应用商店审查。苹果可能以各种各样的理由驳回你的申请，所幸苹果也把审查的规矩讲很清楚。通过审查的必备条件之一是你的应用必须有很高的&ldquo;可用性&rdquo;。何谓可用性也?你可以去查这份叫做iOS Human Interface Guidelines的指导手册，更方便的是直接阅读从中提炼出的10条精华小贴士!</p>
<center>
	<img alt="" height="299" src="http://www.yixieshi.com/uploads/allimg/111225/214314D08-0.jpg" width="400" /></center>
<p>
	<strong>　　1 控制器看起来是可触摸的</strong></p>
<p>
	　　应用的控制器应该有圆润平滑的轮廓，让人一看就想摸。(锯齿什么的，不要。)</p>
<center>
	<img alt="" height="300" src="http://www.yixieshi.com/uploads/allimg/111225/214314D55-1.jpg" width="400" /></center>
<p>
	<strong>　　2 结构整洁便于导航</strong></p>
<p>
	　　充分利用iOS的导航栏，导航器应按层级展开，尽可能地便于用户探索应用的构架。</p>
<center>
	<img alt="" height="300" src="http://www.yixieshi.com/uploads/allimg/111225/21431429E-2.jpg" width="400" /></center>
<p>
	<strong>　　3 用户反馈要精细而清楚</strong></p>
<p>
	　　使用动画效果来展示用户行为的结果。经典的例子是当用户长时按住主界面图标时，所有的图标都会抖动起来，进入&ldquo;重排模式&rdquo;。</p>
<center>
	<img alt="" height="300" src="http://www.yixieshi.com/uploads/allimg/111225/21431431a-3.jpg" width="400" /></center>
<p>
	<strong>　　4 外观与功能相整合</strong></p>
<p>
	　　如果你的应用是效率工具，那么装饰应当出现在背景中，便于用户集中注意于功能的最大化。如果你的应用是游戏，游戏界面应该占满全屏，便于用户获得沉浸式的体验。App的美学设计服务于功能。</p>
<center>
	<img alt="" height="300" src="http://www.yixieshi.com/uploads/allimg/111225/214314Nc-4.jpg" width="400" /></center>
<p>
	<strong>　　5 关注当前任务</strong></p>
<p>
	　　每一屏都只留必要的功能。苹果的备忘录只允许添加新内容。邮件应用要么用来读邮件要么写邮件，不能同时进行。开发者需要确定哪一项是最重要的。</p>
<center>
	<img alt="" height="300" src="http://www.yixieshi.com/uploads/allimg/111225/2143145E5-5.jpg" width="200" /></center>
<p>
	<strong>　　6 给用户清晰的逻辑思路</strong></p>
<p>
	　　提供&ldquo;返回上层&rdquo;按钮或者其他的标记，以便用户清楚地知道自己在应用架构的哪一部分，以及每一屏的功能是什么。如果你的应用每一屏都只有唯一的路径，那么在审查中会得到加分：最简化产生熟悉感。</p>
<center>
	<img alt="" height="300" src="http://www.yixieshi.com/uploads/allimg/111225/2143142330-6.jpg" width="400" /></center>
<p>
	<strong>　　7 请讲普通话</strong></p>
<p>
	　　避免复杂的黑话和术语，保证和用户的沟通顺畅。iOS系统的Wi-Fi网络屏就是一个好榜样，他们可以使用超级隐晦的技术语言来说明，不过最终就是这么朴实的一句大白话。</p>
<center>
	<img alt="" height="300" src="http://www.yixieshi.com/uploads/allimg/111225/214314D19-7.jpg" width="400" /></center>
<p>
	<strong>　　8 增强真实性</strong></p>
<p>
	　　苹果的语音备忘录的界面展示的是一只麦克风。通讯录应用不妨做成纸质电话本的样子。你越能模拟实体物品的样子，用户越容易与你的应用互动。</p>
<center>
	<img alt="" height="300" src="http://www.yixieshi.com/uploads/allimg/111225/21431440Z-8.jpg" width="400" /></center>
<p>
	<strong>　　9 考虑重力感应</strong></p>
<p>
	　　iOS用户喜欢心血来潮把设备颠来倒去，你的应用要考虑到这一点。另外，不管你的应用怎么旋转，内容始终是注意的焦点。</p>
<center>
	<img alt="" height="300" src="http://www.yixieshi.com/uploads/allimg/111225/2143143924-9.jpg" width="400" /></center>
<p>
	<strong>　　10 可触摸目标应该是指尖大小</strong></p>
<p>
	　　苹果自带计算器按键的大小就是一个很好的例子，苹果建议的可触摸目标大小是44&times;44像素。</p>
<br />
<p>
	　　文/Dylan Love (<a href="http://www.businessinsider.com/apple-human-interface-guidelines-2011-12#" style="font: normal normal normal 14px/21px tahoma, arial, helvetica, sans-serif; color: rgb(1, 95, 142); text-decoration: none; " target="_blank">BI</a> )</p>

				<p>本文链接：<a href="http://www.yixieshi.com/ucd/10048.html" target="_blank">http://www.yixieshi.com/ucd/10048.html</a></p><img src="http://www1.feedsky.com/t1/590444919/yixieshi/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/yixieshi/~8269072/590444919/6372261/1/item.html" border="0" height="0" width="0" style="position:absolute" />]]>
</description>
<dc:creator>包子</dc:creator>
<pubDate>Sun, 25 Dec 2011 21:44:25 +0800</pubDate>
</item>
<item>
<title>玩转用户心理：b2c中“捆绑销售”的设计思路</title>
<link>http://www.itfeed.cn/post.asp?id=7234</link>
<description>
<![CDATA[<p><strong>写在前面</strong></p>
<p>“商品捆绑销售”是一种非常有意思的销售方式，也是电商网站中深度“把玩”用户心理的功能。该方式在传统零售中早已运用得如火纯清。所以，电商产品经理，不了解点传统零售，设计出来的产品也只能凑个数！</p>
<p><strong>哈哈，开玩笑，下面进入正题</strong></p>
<p>某天，你打算去超市买一瓶1.5L的雪碧，超市真是琳琅满目，美女如云……你走到饮料区，拿起一瓶1.5L的雪碧，价格是5.5元，你准备放入购物车走人。突然发现有1瓶同样是1.5L的雪碧和1.5L的可乐捆绑在一起，只要9.9元，单独购买可是需要11元。真便宜，你心动了，扔掉单瓶的雪碧，拿走了捆绑的雪碧和可乐！</p>
<p>以上是捆绑销售在传统超市中的应用。</p>
<p><strong>概念解释：</strong></p>
<p>捆绑销售，简单的解释是捆绑两件或两件以上的商品进行销售。</p>
<p>我们简单对捆绑销售分个类：</p>
<p><strong>根据捆绑商品的不同，可分为</strong><strong></strong></p>
<p>同一商品捆绑 （如一瓶1.5L的雪碧+一瓶1.5L的雪碧，实际上是数量叠加有优惠）</p>
<p>同类商品捆绑 （如一瓶1.5L的雪碧+4瓶250ml的雪碧）</p>
<p><span style="color: #ff0000;">相关商品捆绑 （如一瓶雪碧+一包纸杯或一瓶雪碧+一瓶可乐），这是电商网站用得最多的一种。</span></p>
<p>非相关商品捆绑 （如一瓶雪碧+一盒避孕套）</p>
<p><a href="http://aboutb2c.com/wp-content/uploads/2011/12/a.jpg"><img class="alignnone size-full wp-image-415" title="京东捆绑销售" src="http://aboutb2c.com/wp-content/uploads/2011/12/a.jpg" alt="" width="561" height="285" /></a></p>
<p><strong>根据捆绑商品是否独立，又可分为</strong></p>
<p>自愿捆绑（可单独购买捆绑商品中的商品），这在电商网站中最常见。</p>
<p>强行捆绑（不能单独购买捆绑商品中的商品），这类商品在电商网站一般会编制成一个独立SKU进行销售，如常见的床上用品“四件套”。</p>
<p>此外，在电商网站中还有一种叫可选配件、可选组合的方式，这种方式我认为不属于“捆绑”，是人工或系统的关联推荐，交叉销售。</p>
<p><a href="http://aboutb2c.com/wp-content/uploads/2011/12/b.jpg"><img class="alignnone size-full wp-image-416" title="b" src="http://aboutb2c.com/wp-content/uploads/2011/12/b.jpg" alt="" width="584" height="178" /></a></p>
<p>分类方式还有其它，我这里把认为<strong>最重要的两类例举出</strong>，有兴趣的可以去查找资料。</p>
<p><strong>捆绑销售的形式上，可分为：</strong><strong> </strong></p>
<p align="left">1.优惠购买，用户购买A商品时，可以以更优惠的价格购买到商品B；</p>
<p align="left">2.统一价出售，商品A和商品B不单独标价，按照捆绑后的统一价出售（很常见于超市和电商网站）；</p>
<p>3.统一包装出售，商品A和商品B放在同一包装里出售（常见于传统超市，电商网站一般会用独立的SKU上架销售，如前面提到的“四件套”，只能一起购买，不单独销售。</p>
<p><span id="more-414"></span></p>
<p><strong>了解了这么多东西，我们终于要开始捆绑销售功能的设计了</strong>（写到这里我已经准备偷懒不写了，用一张图表述运营需求和用户需求的分析）</p>
<p><strong>捆绑销售的作用和意义：</strong></p>
<p>1、对用户来说捆绑销售的商品更加优惠</p>
<p>2、对用来说购买捆绑销售的商品更加方便和节省时间</p>
<p>3、对商家来说，捆绑销售降低销售成本</p>
<p>4、对商家来说，捆绑销售可增加再销售的机会，提高客单价</p>
<p><strong>简单理解用户需求：</strong></p>
<p><a href="http://aboutb2c.com/wp-content/uploads/2011/12/c.jpg"><img class="alignnone size-full wp-image-417" title="用户的兴趣点" src="http://aboutb2c.com/wp-content/uploads/2011/12/c.jpg" alt="" width="584" height="266" /></a></p>
<p><strong>分解运营需求：</strong></p>
<p><a href="http://aboutb2c.com/wp-content/uploads/2011/12/运营需求副本.jpg"><img class="alignnone size-large wp-image-418" title="运营需求" src="http://aboutb2c.com/wp-content/uploads/2011/12/运营需求副本-671x1024.jpg" alt="" width="620" height="946" /></a></p>
<p><strong>运营上，简单提一点，一般认为，捆绑的商品之间应该是：</strong></p>
<p>1、互补性强，非相互替代的商品（如可以是衣服+裤子，而手电筒+蜡烛就要考虑下了）；</p>
<p>2、可以是相互竞争的商品（如雪碧+可乐）；</p>
<p>3、捆绑商品的目标客户群体应该接近，且商品应该价格不至于差的太离谱（如卖给工薪阶级和卖给富豪的东西一般不宜捆绑）</p>
<p>4、更多规律，当然是靠不断的尝试和数据分析，这里就不继续乱说了。</p>
<p><strong><span style="color: #000000;"> 最终我们去污除垢，威逼利诱运营，减少不必要的需求，深入挖掘用户，想用户所想和未想，苦思冥想，焦头烂额之后，终于转化为产品设计思路：</span></strong></p>
<p>1、在哪里让用户看到捆绑销售的商品？</p>
<p>2、如何方便用户购买？</p>
<p>3、如何体现捆绑商品的优惠，如何让用户冲动？</p>
<p>4、捆绑商品的设置和管理</p>
<p>5、捆绑商品的统计和分析</p>
<p>6、捆绑商品对后端业务处理流的影响</p>
<p>7、其它更多杂七杂八的问题</p>
<p><strong>没想到这篇文章又写了这么长，捆绑销售的产品设计思路且看下文</strong></p>
<h2  class="related_post_title">评论最多的文章推荐</h2><ul class="related_post"><li>2011/11/22 -- <a href="http://aboutb2c.com/216" title="B2C站购物流程中优惠券的交互设计优化方案">B2C站购物流程中优惠券的交互设计优化方案</a> (6)</li><li>2011/11/11 -- <a href="http://aboutb2c.com/about" title="关于我们">关于我们</a> (4)</li><li>2011/11/13 -- <a href="http://aboutb2c.com/26" title="如何利用会员的个人信息进行关联推荐">如何利用会员的个人信息进行关联推荐</a> (2)</li><li>2011/11/19 -- <a href="http://aboutb2c.com/167" title="B2C评价系统的规划（二）">B2C评价系统的规划（二）</a> (2)</li><li>2011/12/05 -- <a href="http://aboutb2c.com/338" title="B2C积分系统的规划（二）-数据分析">B2C积分系统的规划（二）-数据分析</a> (2)</li><li>2011/11/13 -- <a href="http://aboutb2c.com/90" title="B2C评价系统的规划（一）">B2C评价系统的规划（一）</a> (1)</li><li>2011/11/14 -- <a href="http://aboutb2c.com/146" title="B2C精准营销概述">B2C精准营销概述</a> (1)</li><li>2011/11/28 -- <a href="http://aboutb2c.com/281" title="底层数据库规划之一搭建标签体系">底层数据库规划之一搭建标签体系</a> (1)</li></ul>]]>
</description>
<dc:creator>About B2C</dc:creator>
<pubDate>Sun, 25 Dec 2011 12:45:09 +0800</pubDate>
</item>
</channel>
</rss>
