我想网 » User-behavior

网站可用性测试全过程

seasun — Wed, 24 Nov 2010 15:14:32 +0000

一、何谓“可用性测试”

“可用性测试”也可称之为“用户体验测试”，是通过产品功能设计测试任务，让用户按照任务完成一些真实测试，检验产品的可用性，作为产品后续改进和完善的重要参考依据。
二、为什么要进行可用性测试
1. 存在如下疑问
在我们研发完成了新的产品功能或是创造了新的产品特性之后，总是有这样的疑问：
a.最新的版本是不是比以前的版本更好？
b. 我们的网站与竞争对手的网站使用起来一样容易吗？
c.用户是否能够按照我们设计的流程完成他们所要完成的工作？
d.我们的设计师是否按照用户的操作习惯和产品的特性设计排版了？

2. 原因可能有
a. 每个网站都存在可用性问题
使用网站的过程中，经常会遇到可用性问题，而有些问题通常很严重，让用户无法完成原本要做的操作。成熟的网站经过多轮测试，问题相对少些，但是任然存在可用户问题。
b. 严重的问题通常容易被发现
网站的设计和制作者往往知道网站的工作方式，会按照设计的思路去操作；而用户并不知道，所以让用户试用网站往往能较容易的发现那些严重问题。
c. 观看用户使用产品能成为更优秀的设计师
在设计师的眼中用户往往是抽象的概念，而设计是根据自己的想象完成的。通过观看用户可以更深入了解用户如何使用产品以及如何为使用而设计产品。
三、测试的流程
3.1基本流程说明
a.准备测试用例
对网站所有功能进行整理，找出用户浏览网站关键、重要步骤（或者是期望测试到的功能），对功能场景进行设计，并最终形成测试任务文档。
任务用例如下：

b.招募测试人员
根据网站前期规划，对用户群体的定位，找出能具代表性的个别用户，进行邀请加入测试；邀请的人员要能切合目标（潜在）用户群体。
c.准备测试环境
因可能性测试的特殊性，对环境我一定的特殊要求：
<1>能提供一个相对独立的房间，并且配有一台能联接网络的普通PC机，供用户进行测试，提供独立的房间的目的主要是为了能尽量避免外部干扰，让用户能全身心投入，并用有利于遇到可用性问题时，观查用户的处理方式；
<2>普通PC机上不应开启会影响测试过程的软件，如杀毒软件、聊天工具等弹出窗口式软件；
<3>PC机上必需装有屏幕录制软件和声音录制软件，以便记录测试过程中用户操作和发声思维的过程；
d.组织人员观查
提前安排观查人员，人员可能包括产品经理、交互设计师、视觉设计师、前端工程师及程序开发人员；
e.进行测试
测试人员把用户带到测试房间，介绍本次测试的相关性况，并且在试人员的观查下进行测试。
3.2测试前的注意事项
a.测试前需要跟用户说明本次测试持续的时间
b.要求用户尽可能的进行发声思维（对他看到的、想做的以及怎么想的）
c.与用户说明“我们要测试的是网站，并不是用户”
d.在测试过程中用户提的关于如何使用的问题，不能立刻回答，可以在测试完成之后做回答；我们要测试的是用户在没有人帮忙的情况下将如何完成任务的
e.在用户不能完成任务的情况下，切换到下一个任务，本次任务做不能完成处理
f.说明本次测试屏幕、声音将被录制，并且得到用户许可；录制的内容将被作为网站改进的依据，不会被该项目无关的人员看到。
3.3测试人员情况登记
在对每个用户进行测试前，需要对用户情况进行登记，以确定用户适应范围：
a.职业，年龄？
b.每周上网大概时长？
c.浏览网页时访问什么样的网站？例举出几个
d.有非常喜欢去的网站吗？
3.4主页观光
在人员情况了解之后，首先打开我们网站首页，让用户浏览，在这个阶段，先不要让用户切换到其它任务页面，向用户了解以下情况：
a. 您认为这是什么样的网站？
b. 该网站是做什么的？
c. 您在网站中能做些什么？
让用户简单描述以上问题之后，有利于发现对网站总体设计上存在的问题。
四、关于总结和交流
在一次测试测试完成之后，相关参与人员进行一次总结会，每个人把本次观查到的问题进行提出讨论，并把处理意见进行汇总，在下一次改版中进行修正。

Feed enhanced by Better Feed from Ozh

用户成长体系设计思考

seasun — Sun, 21 Nov 2010 07:07:14 +0000

当当网前两天发来一封标题为“钻石卡会员身份即将到期”的邮件，邮件内容大致如下：

您的钻石卡会员身份将于2010年12月31日到期。截止到发信日，您在会员期间内的合格购物金额为1270.60元，到期日前再消费2617.40元，您的钻石卡身份将延期一年。

随手删掉了邮件，这样的信息对我而言没有太多价值。记得前年也出现类似的情况，当时还突击购买了一些东西，延续了钻石卡会员身份，当时被当当对钻石卡可以“部分商品在当当价基础上享受最高可达95折上折的优惠”的宣传所吸引。现今之所以觉得当当网所谓的钻石卡毫无价值，原因大致如下：

1）、钻石卡所享受的优惠商品其实很有限，折扣也很有限，个人感觉总共就优惠过十多元钱。现在才了解了当当的“部分商品”、“最高可达95折上折” 用辞是何其恰当，何其精心。

2）、所谓的钻石卡除了“部分商品”能够享受折扣外，再没有其他的用处，也即：钻石卡=打折卡，但正如1）所述，这样打折很有限，还不如那些线下的商店们“持有xx卡全场享受9.8折的折上折优惠”更吸引人。

3）、拥有钻石卡并没有什么荣誉、特权可以享受。并不会因你持有钻石卡就会在发货速度等方面享受更高特权，在尊贵感上也无所体现。

当当的用户等级大致分为两级：普通会员、贵宾会员。贵宾会员又分为：金卡会员、钻石卡会员。钻石卡获取的唯一渠道似乎只有通过购物。积分的获取渠道基本上上就是购物、确认收货、使用在线支付、级别赠分等方式挣积分。而积分也与钻石卡类似，没有太多价值。对于现在一堆SNS社区所强调的用户互动行为，当当并不会给予什么奖励，即使你很踊跃地参与写书评等活动，当当也不会认同你的奉献和价值。

试想一下，持有一个钻石卡只会比普通会员一年优惠几十元，同时在虚荣心上无所依托，谁还会去延续这样的身份呢？

整体说来，当当的用户等级体系及积分体系无法调动用户参与的积极性，尤其是面临众多竞争者可供选择的条件下。

现实生活中人既有自然属性（作为动物的人）和社会属性（作为社会的人）。作为自然的人会有从婴儿->少年->青年->中年 ->老年的成长过程（或者可以参考更文雅点的：中国古代年龄称谓大全），而作为社会的人又有一系列的荣誉、勋章、职称、头衔、官衔、信用、学历等来度量用户的社会地位和社会价值。

与此类似，用户在一个网站也有一个成长过程，为了度量用户的成长过程及其价值，基本上所有的网站都发展出了一系列的指标体系来进行度量，我们姑且叫做用户成长体系吧。一般而言，目前大部分的网站除了用户账户体系外，对于用户的成长体系主要分为几种方案：用户等级体系、积分体系、信用体系、虚拟币体系等

用户等级体系：用户等级是对用户细分并进行分层的必然结果，也是用户享有权利的直接度量手段。用户等级典型的例子是QQ会员等级体系、Discuz的会员等级体系。

积分体系：这里的积分体系不单纯只是平常所说的积分，还包括诸如勋章（例如Foursquare的勋章）、经验值、魅力值等各种变形的称谓。积分体系是用户等级体系的有力补充。

信用体系：信用体系用于度量用户、商家的信用度，在这当下中国社会信用缺失的情况下，对于电子商务、在线支付、金融信贷等方面很有价值。典型的例子淘宝的信用体系、银行体系的信用体系

虚拟币体系：虚拟币是网站内各种交易行为的货币度量，一般与货币有直接兑换关系，尤其是Q币的成功沉淀的大量资金引得一帮做网站的同志们都将虚拟币作为盈利的必备杀手级工具。

大部分网站也意识到了用户成长的相关体系对于提高用户忠诚度、提高用户粘性的价值，因此各大网站基本上都有对应的等级体系、积分体系、虚拟币体系，但具体细看各大部分网站的相关体系就会发现都存在较大的问题，成长体系并没有达到理论上的效果，反而引起用户的疑惑，甚至反感。

一些不成体系的思考：

1、用户成长体系的根本目标

学习一下Web Analytics 的大牛Avinash Kaushik喜欢玩的测试：so what？

建立用户成长体系的目标是什么？

能够区分不同价值的用户，这样不同的用户可以享有不同的特权，例如下载权限、不同的折扣

那又怎么样呢？

用户就必须不停地在网站奉献的金钱、精力，来保持他/她所拥有的特权，从而提升用户的活跃度

那又怎么样呢？

用户对我们网站更有粘性，在同样的选择下，他/她更愿意选择投入了精力和金钱的网站，也愿意通过口碑营销向他/她的朋友推荐我们的网站

那又怎么样？

我们的客户忠诚度更高、维系成本更低、营销成本更低

2、度量用户的价值不单纯只是交易行为本身，用户成长体系是网站文化的映射

作为电子商务网站，将客户交易金额作为用户价值的核心度量指标无可厚非，但用户价值不单纯只是交易本身，还应当包括用户互动贡献的内容，例如推荐、投票、点评、收藏、建议等等，这些内容也应当纳入到激励体系中，让用户感受到自身的价值从而产生成就感、认同感，这样才能够与用户形成良好的互动，最终形成都有的社区文化，也正是这些东西让冰冷冷的网站充满人气。一个电子商务网站如果只是纯粹强调交易本身而没有建立起一种社区文化，那么这种纯粹的交易行为很难持久支持网站的运营，尤其是面临更廉价的后来者竞争时候。

成长体系实际上是整个网站文化价值标准的量化，是用户做出贡献的风向标。不合理的成长体系只会挫伤用户的热情，从根本上动摇网站文化建设的基石。每一个网站都有其独有的价值准则，因此在没有想清楚以前，与其仓促抄个体系规则过来，还不如先从营造网站的文化开始。

正是这些社区文化让那些草根网站的众多义务版主们虽毫无报酬但取乐此不疲。

3、用户成长体系本质也是一种品牌策略，因此需要以品牌建设的态度去定位、规划、建设、运营

用户成长体系以用户的价值为度量标准对用户进行了区隔和分层，与此对应，对于不同层次的用户其营销策略及维系策略也不尽相同，例如对于一些低端的用户可能看重打折优惠这样的实惠，但对于高端的用户而言，在打折优惠力度有限的情况下，更看重服务本身的差异性、个性化、尊贵型。例如更快的配送速度、优先试用网站新功能、更多的特权及个性化的服务等等。在这过程中，必须以网站品牌形象作为核心的准则来保证各种策略的一致性，这包括定位、规划、建设、运营等方面。

关于用户成长体系其他的具体建设思路，在电子商务用户帐号体系思考中有所思考，有空再继续。

Feed enhanced by Better Feed from Ozh

用户界面设计中“状态”和“动作”的表达

seasun — Sun, 07 Nov 2010 15:47:32 +0000

一、问题引发思考

前阵子与同事探讨一个小需求时又遇到了按钮表示“动作”和表示“状态”间矛盾问题。想想这个问题多年前已经开始讨论了，所以在此整理一下思路，与大家共享。

「图1」

具体案例是这样的：如上图所示，在“启用”和“停用”搜索定制功能时，这个按钮到底是表示“状态”还是表示“动作”呢？简单的说，上图中 1表示当前是停用状态，还是表示点击后为停用操作呢？答案显然是不清晰的。

怎样能够清晰的表达两者的差异，减少用户的误解呢？我们首先要从“动作”、“状态”的定义和两者的关系入手。

二、什么是动作，什么是状态

动作是指具有一定动机和目的并指向一定对象的运动。
状态指人或事物表现出来的形态。
结合来讲，动作是促使人或事物改变某一状态的运动，而状态是动作造成的结果表现。因此两者经常是紧密关联的，有时甚至是互为条件的。

比如“操作收音机”这件事，我需要扭动旋钮或按键等“打开”的动作来打开收音机，当动作完成后收音机的状态是“打开的”。而“关闭”收音机这个动作的前提，是一个“打开的”状态的收音机。
”听起来好复杂阿！“很多人都会这么认为。为什么我们在生活中天天面对类似的事却很少有这样的感觉呢？

下面来看看生活中的例子我们或许就能理解了。

三、生活中的例子

1、电灯开关

「图2」

单控开关，我们最常见的开关之一，设计极其简单，按下一边是开，另一边是关。至于到底那边是开那边是关，没有几个人会特别关心。因为我尝试两次总会作对操作，几乎没有什么成本。人们不会感觉什么不爽。

当然，现在还有更好的设计。

「图2」

2、Ipod HOLD

「图3」

苹果的Ipod播放器的按键锁定功能“HOLD”。当开关拨动到“HOLD”字样一边时，左侧便会露出红色。而拨动到另一边是没有颜色的。巧妙的运用了色彩对人们心里特征的影响区分出了hold的状态。

3、显示器

「图4」

显示器电源开关，又一个“动作”和“状态”结合的应用。使用按钮突出的形态，和开关的图形表现来表示可执行的动作（这里按下去是用来开关的），使用背景灯的暗与亮来表示开关状态（灯亮表示现在是开的状态）。

类似的应用非常多，我们可以看到其中具有的特点是：1、可以触摸、按动（拨动）的按钮 2、色彩的区分 3、有的还有明显的位置差异以及标识。

四、软件以及网站中的例子

软件或网站界面显然不具备可触摸的特点，不过我们的设计师也尽量会模拟出类似现实中物品的可以操作的形状和质感。

「图5」

播放器常用的UI。点击中间的“播放”与“暂停”键即可切换操作。可以看出，这里忽略了状态的表现，我无法直观的看到现在是播放还是暂停的状态。原因很简单，就像开关电灯一样，影片的打开与关闭是可以直接感知到的，不需要专门的状态提示。

「图6」

再来看列表的视图切换。图上箭头所示“切换到大图”功能也是此类应用，忽略了状态的表现。因为“切换到大图”动作执行后，界面的状态会明显的改变（大图模式），不需要专门的状态来标识。

再看另一种情况

「图7」

音乐播放器中的随机播放。因为“随机”与“按顺序”播放并不容易直观察觉，因此状态需要明确标识。而动作本身由于并不是核心功能被弱化了，仅仅依赖界面功能区块划分来表示此处的可操作性。

「图8」

还是音乐播放器，这次不同的是线性的状态表示。音量的大小并不只是“开、关”两个状态那么简单，而是由小到大线性变化的。上面那个UI 通过左右两个喇叭的形状很好的表达了音量大小的两端，中间的圆钮既是动作的操纵杆又是音量大小的刻度标识。因为它和左侧很好的连接在一起形成水槽效果，填满部分的长短再一次反映了音量的大小，非常巧妙。而下面那个UI只在左侧放了音量大小标识，虽然不同因量大小时左侧图标也会相应改变，但相比之下初次使用会难理解很多。

「图9」

上面是某帐户管理的UI，将状态和操作（动作）明显的分两列标识，虽然显得有些啰唆，但也清楚的表达出了应有的含义。

最后我们来看一个手机界面的应用。

「图10」

仿照物理拨动开关的质感与色彩表达，很好的”动作“与”状态“结合的例子。这样的设计你还会犯错么？

五、小结

前面作了很多应用的举例，那么到底怎样才能做好”动作“与”状态“结合的设计呢？

1、分离状态与动作的表示（如图9）。最直接，产生歧义的可能最小，但可能会占用大量空间，以及造成信息冗余。
2、忽略状态，突出动作（如图6）。当状态无需标识也能直观识别时适用。
3、忽略动作，突出状态（如图7）。当动作操作已经被划分指定区域，可以预期其可操作性时适用。
4、具象与仿生（如图10）。当与现实物品建立感官联系时，人们的学习成本会大大降低。此类运用不好定义其适用范围，留给大家探讨吧。

Feed enhanced by Better Feed from Ozh

培养用户的使用习惯

seasun — Mon, 25 Oct 2010 13:18:33 +0000

前几天听朋友讲述了他是怎么喜欢订阅上手机报的过程，让我对培养用户使用习惯有了一些新的认识。

在去年的某一天下午，这位朋友收到一条短信，短信的大致内容是：某服务商推出了一种新的服务—手机报，如果你愿意可以马上为你开通免费使用三个月。随后附着了一期的手机报，我朋友看了一下感觉还不错，心想反正是免费的可以订阅尝试一下。朋友开始使用手机报，过了一段时间的某一天朋友突然发现给他发手机报的号码改变了，这让他警觉了起来，怕自己被服务商偷偷给强制付费订阅了该服务，就打服务电话进行询问结果是号码的确变了，但是没问题还是可以继续免费阅读手机报，朋友这才放心下来。后来朋友已经习惯于每天早上起床在路上观看手机报而且会直接翻到第四块看体育信息。

三个月很快就到了，服务商发来消息，告诉他免费使用的时间马上就要结束了，询问他是否需要花钱订阅，朋友感觉这三个月使用的不错，每个月花几块钱也不贵，而且里面的信息他对比了一下和网上的搜狐、新浪等门户的新闻是一致的，就决定每个月订阅手机报。

很多时候，我们考虑的都是怎么设计出符合用户使用习惯的好的产品，怎样在现有的市场中杀出一条血路。我们一味的尊重用户已有的使用习惯，只会使我们的产品的开发之路越来越窄，进入到一片红海之中。我们完全可以在充分了解用户的潜在需求之后，开发出好的产品，培养出用户使用该新产品的使用习惯，这样就是我们的产品开发进入一片蓝海，取得商业上的胜利。

培养出的用户习惯有以下优势。
1.创造出新的产品需求市场，具有先发优势。
2.让用户向其它竞争对手的产品迁移制造了壁垒，
3.提高了品牌的美誉和忠诚度
4.培养出来的使用习惯，使产品的后续开发具有更好的用户体验

微软在充分了解用户的需求之后开发出windows系统，经过二十多年对用户使用习惯的培养，使得地球上的大多数人都已经习惯于使用windows 系统，习惯于windows系统的界面表现形式和它的交互方式。虽然苹果有易用性更好的操作系统，但是因为大多数人都已经习惯于使用windows系统，使得用户在从windows系统迁移到苹果的操作系统的时候产生巨大的困难，所以我们会常常发现许多苹果电脑里面装的是windows系统。具有讽刺意味的是，正是人们已经习惯于使用windows系统，微软开发出来的Vista系统因和以前的系统交互方式等差别太大，所以很多人并没有使用这个系统，这也从反面证明了培养出来的用户习惯是多么的强大和忠诚。

Feed enhanced by Better Feed from Ozh

用户界面和用户体验的差别

seasun — Fri, 15 Oct 2010 16:09:54 +0000

用户界面设计

用户界面设计

用户体验设计

用户体验设计在便池上放一个假苍蝇会导致男人撒尿的时候会不由自主地瞄准它，有证据表明，这样的用户体验可以减少80%的小便溅出便池。

板凳注：有点意思…

Feed enhanced by Better Feed from Ozh

15 个用户体验设计赏析

seasun — Tue, 12 Oct 2010 18:26:53 +0000

用户界面和用户体验（UI/UX）是任何产品成败的关键，尤其是Web，Web 是一种公开的，可以被任何人随时随地访问的特殊产品，用户的体验几乎意味着一切，虽然内容更重要，但内容可以替代，体验却是独一无二的，本文分析了15个不同的 UI/UX 案例，优秀的用户体验给我们带来的启发是无价的。

内容滚动中的运动视差效果

Parallax scrolling是让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验仍然非常出色。Charlie Gentle’s portfolio 网站就是该效果的绝佳展示，点击左右导航按钮，除了滚动进入不同内容区域之外，上方的多层背景图以不同速度移动而形成的3D运动视差效果非常漂亮。

iPhone 的下滑式刷新

iPhone 的多数社会化网络应用都包含数据刷新功能，有的是晃一晃机器，有的是按某个按钮，在我看来，最好的方法是下滑式刷新。包括 Gowalla, Foursquare 以及 Tweetie 等应用都默认使用该方法，你在用手指翻动列表的时候，如果想刷新一下数据，你的手指还没离开那个区域，如果使用按钮，手指必须离开当前的位置，导致操作上的不连贯，而下滑式刷新，手指继续留在原来操作的位置，只是改变一下动作。

我们从这里可以学习到的东西是，经常检查你的 UI，看看是不是存在让用户注意力转移的操作。

随时随地的提示界面

一些深受欢迎的 Mac 程序经常是在后台默默运行，到了需要用户介入的时候弹出界面，完成后又默默消失，象 The Hit List, 随时随地会将需要通知的消息显示出来，看上去，象操作系统本身的功能。

Convertbot 的圆盘式菜单

Convertbot 是为数不多的事实上并不好用但用起来又妙趣横生的 UI 设计之一。这个 iPhone 程序用来进行单位转换，iPhone 的应用商店这样的程序数不胜数，但都没有这个这么有趣。它设计了一个圆盘式操作界面，很形象，很漂亮，让人有时不时想拿出来用一下的冲动，这个案例告诉我们，有时候，中看也很重要。

SlideDeck 的手风琴式导航

Web 上，基于 jquery 的内容滚动面板非常多，SlideDeck 是其中的佼佼者。使用独特的手风琴式界面显示内容，可以看做是 Outlook 风格导航面板的水平版，但视觉效果和体验更出众。

Strongbad 的随机回信

Strongbad 是 Homestarrunner 推出的经久不衰的网络动画中的卡通形象，每周，Strongbad 会给观众回复很搞笑的邮件，这些邮件慢慢越积越多，最近，站点开发方推出一个随机邮件浏览功能，点一下那个随机按钮，就像抽奖机那样随机选中一封过去的邮件显示。这个随机显示的过十分生动，让人忍不住一点再点。这个 UI 案例告诉我们，有时候，你在用户界面上的一点微小改动，有可能带来意想不到的效果。

Made By Tinder 的主题色选择

这是一个很神秘的小站点，神秘到我们不知道它到底是做什么的。但这个网站的顶部，有几个小色块，点击后，整个站点就按色块上的色调重新配色，虽然很简单，但用户体验实在太妙了。

Pixelmator

Pixelmator 是一个很出色的图像编辑工具，虽然远不如 Photoshop 强大，但包含很多创新功能。它的用户界面中有一个很有趣的功能，你在为图像的某个位置设置效果的时候，设置点和设置界面之间会显示一条很自然的连线，移动设置点的时候，连线也跟着改变，虽然这条连线并没有多少实际意义，但给用户带来一种操作上的暗示，也很有趣味。

Riot Industries 的导航体验

这个站点的导航很有特色，不仅流畅，而且设计出众，鼠标在导航条目上盘旋的时候，导航条目从左边的容器中微微探出，点击后，以渐变的方式，逐渐显示当前内容，这一切并没有使用任何 Flash 技术。

Web 上的拖放操作

在我看来，任何应用都应该支持拖放操作，当然 Web 有它的局限性，不过，近年来，Web 上的拖放操作已经很常见了。在上面的站点，你可以直接将喜欢的程序拖放到下载按钮处，直接下载。IconDock 的购物车也支持列斯的操作。（Wufoo 和 Polldaddy 的拖放式表单设计 UI 在我看来是 Web 拖放界面的最佳实现 – 译者）

在线 Photoshop 的照片堆叠界面

这是另一个没有实际意义，但很吸引人的界面设计，Adobe 的在线 Photoshop 在加载的时候，会显示一堆照片，你可以把他们抓起来乱扔，让它们相互碰撞，其物理效果十分出色，非常吸引人。

随鼠而动

同样展示运动视差效果，同时，随着鼠标的移动，画面的工作区也随着移动。这个站点也实现了类似的效果。（感觉这种体验并不好 – 译者）

双滚动面板

这又是一个基于 jQuery 的，非常出色的内容滚动面板设计。图片垂直滚动，而解释文字同步水平滚动，视觉效果和体验都十分出众。

基于物理动力的滚动

我第一次使用 iPhone 的时候，对它的基于物理动力的交互 UI 印象深刻，在 Safari 上用手指翻动页面的时候，页面并不是按线性速度滚动，而是象现实物理世界中的物体那样，拥有曲线速度，先是快速滚动，然后慢慢慢下来。

至简的界面

漂亮而复杂的 UI 让人喜欢，有时候，简洁的界面更吸引人。Mac 的 WriteRoom 是一个非常强大的文本编辑器，这些强大的功能隐藏在至简的界面下。

Feed enhanced by Better Feed from Ozh

Peter Skillman 浅谈用户体验创新

seasun — Tue, 21 Sep 2010 04:46:46 +0000

“一款顶级设备要素构成中，设计只占 5%。市场营销、销售、分流以及采购构成了余下的 95%。”

最近，ZURB 网站有幸近距离与新任 Nokia MeeGo 设备用户体验和服务总负责人 Peter Skillman 进行了一次访谈，他们就如何创造绝佳的移动体验进行了一些交流。由于谈话时间较长，本文是根据谈话录音做的总结摘录。对于想了解全部谈话的读者，可以点击下方的链接进行收听。当然，也可以订阅 ZURB 网站的 Podcast – iTunes RSS

移动的机遇

首先，Peter 表示移动创新现在有很多机遇，并列举一些现存的问题：

设备之间没有互动（互相交流）- 单纯的比较设备间的参数是非常笨的一种行为。
很多智能手机操作系统的界面不尽人意 – Android 上 Motoblur 就是个很好的例子。
公司内部各功能负责团队没有互相交流 – 大部分组织觉得他们就像大学里没有互动的独立的科系，如数学、物理、英语系。对设计而言，绝大多数的机会来自于交流沟通。
山寨和抄袭一台手机实在是太简单了 – 大约只要 8 小时便可以拆解一台手机并激光扫描整台设备。再花 2 到 3 周进行山寨模仿并组装成型，门槛已经很低了。

简洁，简洁，再简洁

“做减法比做加法重要得多。”

Peter 认为手机设计的目标就是找到并解决困扰用户的问题，这是造就你的产品长久与众不同的所在。简洁和高效带来超凡的体验，也是解决用户困扰的有效途径。Peter 列举了以下有关简洁的原则：

把系统结构做的直观简洁。
能非常轻松的使用常用功能。
确保用户可以简单有效的撤销误操作。
程序中的操作方式应具有重复性。一旦用户熟悉了某种操作或思路，便可以重复使用。
让用户看到使用时的反馈和状态。如果用户选取一段他们希望看到高亮的文字但却未能如愿，他们将不知道接下来如何去做。
重复检查系统以确保没有任何冗余信息。

设计上的 3 个 tips

要保持连贯性。现实中如果你想厨房去餐厅，直接走过去就可以了。但是在手机中却不是这么回事儿—— 去哪里都要回到大门口。iPhone 的 Home 键就像让你回到大门口的按键。这和我们的习惯并不相符，我们的世界应该是立体的。
要让用户对产品产生感情。这能让人们变得宽容。当人们对某些用户体验有了感情时，他们不会再斤斤计较。
尽量避免平庸，一旦触及，你将平庸到底！如果你的产品遗漏了某个微小的细节，整个产品都将变得糟糕。对于细节，你一定要吹毛求疵。

必要的 4 点

Peter 随口提及了一些要点。如果不具备会怎样？Say bye bye.

出色的硬件
云服务
丰富的用户界面
开发者生态圈

随后 Peter 还和 ZURB 的人聊了些未来移动能给我们带来什么，由于本文着重关注用户体验，这里便不一一赘述了。

写在最后

老酒新装的 Symbian^3 尽管做了很多优化，但是依旧被人诟病“像极了 S60 V5 用户界面”。而高端的 MeeGo 机型并未如人们所期盼般亮相于 Nokia World 2010，业界甚至有声音开始怀疑究竟会不会有 MeeGo 手机。笔者认为曾经的巨人在蓄力。“深蹲是为了跳得更高。”。Peter Skillman，作为 MeeGo 用户体验的总负责人，相信不会降低个人的满意基准。让我们静待他能为移动手持业界带来什么新的惊喜。

Feed enhanced by Better Feed from Ozh

JS下拉菜单实现与可访问性的思考

seasun — Thu, 16 Sep 2010 16:07:09 +0000

一、俗耐的开篇语

关于下拉菜单的可用性问题，我之前一直都是忽略的，可以说是不知道，常常仅仅止步于眼前的效果上。前段时间看到了Roger的”Accessing Nav Drop-Downs“一文，就是讲了下下拉菜单的可用性问题。同时，巧的是，最近在看淘宝UED翻译的《ppk谈JavaScript》一书，其多次提到了可访问性的问题，尤其在p28~p37对JavaScript及其一些可用性问题发表了自己的看法。其中主要的观点和注意事项与Roger的文章是一致的。
这些阅读的经历让我意识到自己长时间忽略下拉菜单的可访问性，于是开始结合实际情况，思考自己以后需要注意和提高的地方。这让我对下拉菜单实现方式选择、标签的使用等有了更加明确的认识。不太成熟的思考，仅用于交流。再具体讲述下拉菜单的可访问性之前，先简单说说下拉菜单以及下拉菜单的实现吧。
二、关于下拉菜单及其实现
百度百科对“下拉菜单”一词的解释是：以条形菜单栏和菜单栏中每个菜单项的弹出菜单窗口两部分组成，一般作为应用系统的主菜单使用。

不过这段话就像《盗梦空间》一样，让人很难懂。通俗点讲，就是“经过/会点击就会显示列表的菜单”就叫做下拉菜单。在web上非常之常见，例如~~我随便打开个页面，啊，就像是我浏览器现在显示的百科的页面的右上角：

或是隔壁的微博页面，啊，果然，看左上角的广场下拉：

恩恩，看来下拉菜单就像是男人一样，满地都是。就不一一举例了，关于下拉菜单的实现，那方法可就多了，class切换，属性绑定，js定位等，不同的页面，不同的设计，不同的架构，就有不同的实现方法。由于每个项目，每个页面的情况都不一样，所以，不能轻易的下结论，你是大熊猫，是国宝，它是小野猫，是杂草。但是，就可用性而言，不同的方法优劣还是有标准来评判的，这个在后面会自然而然的展示。
现在，举个切换class实现下拉效果的简单例子，实例菜单原型来自Mtime时光网，//zxx:Mtime创始人在新浪微博上很活跃，你有兴趣可以follow他， @马日拉，你有没有觉得这个名字很有遐想的空间呢？，截图如下：

此导航下拉的每个下拉内容都已经通过CSS定位好了，但是，考虑到加载的原因，其下拉内容默认是未装载的。也就是说，是鼠标移至导航内容上，才动态load下拉div并嵌入导航li标签内的，如下图所示：

当然，作为静态demo页面，没有必要动态load下拉内容，所以，demo页面的下拉div默认就是隐藏且装载好的，于是，我们就可以通过简单的class切换实现下拉效果。
首先是HTML结构，见下图：

核心CSS代码如下：

可见，我们只要让li标签的class，例如“我的时光”所在li标签，由”home”变成”home_hover”就可以控制下拉菜单的显示与隐藏了，很简单吧，所以，相应的js代表就会类似于下面：

然后，效果就如下图所示，截自IE6浏览器：

您可以狠狠地点击这里：时光网下拉菜单demo
恩，不错，效果良好，没有兼容性问题，js代码也算是简洁易懂，开起来似乎大功告成。要是以前的我，估计也就会到这里就结束了，没有 bug，测试工程师不会来找茬了。但是，实际上，此处下拉的可访问性只能说是中等及格的水平。//zxx:不过貌似现在整个行业（即使淘宝这类重视前端的公司）的下拉菜单都只实现到这一程度，或许其中有着各种各样的原因，但我个人感觉还是整个行业的水平有待提高。
为何说看似不错的下拉菜单效果其实可用性低呢？继续下文。
三、下拉菜单可访问性问题
首先回答这个问题：什么是可访问性？
可访问性是指你的网页对任何人、在任何环境下都是可持续访问的。但是，在目前，要使得所有的网站在任何情况下都保持完美无缺的可访问性，这样的要求比要求老板升职还要高，是不实际的，但是，在有限的范围内，有着实际意义的，我们可以提高的地方还是很多的。常见的可访问性问题有下面三个：
无脚本
这个主要是考虑到某些浏览器不支持JavaScript的情况。例如Google的页面中经常可见
标签，其就考虑到这一点。但是，就我个人的观点，如果您的网站不是面对亚非拉美这些国家，无脚本的问题其实是可以忽略的。当然，某些人员故意禁用JavaScript则另当别论。
没有鼠标
这是经常会遇到的。有些用户不使用鼠标，而是使用键盘，理由各种各样。例如我自己，有时候懒惰到境界的时候，要是左手已经搁在键盘上，就懒得抬起我的右手，去移动点击鼠标，多麻烦累人啊。直接左手指头垂直动个几厘米多轻松多方便啊；像我大学同学，电脑不知出了什么问题，鼠标都是使用不灵，所以他的大部分上网操作都是键盘完成的；还有些用户有手部残疾（或缺陷）而无法控制鼠标做出微笑的移动，按键为他们提供了一个很好的备选方案，除非 JavaScript开发人员忘记照顾他们。而实际上，包括我在内的许多前端开发工程师，或是省功夫，或是其他什么原因，而将这部分人群当作成年的包裹，都扔掉了。
屏幕阅读器
有些人不能使用常规的浏览器。最典型的就是盲人和视力受损的人，他们无法看到屏幕上的任何东西。作为替代品，他们需要一个能把页面内容大声朗读出来的程序。这就是屏幕阅读器。
以前我纯粹按照自己臆想的经验，认为，盲人用户用电脑，估计就是个梦，就算有屏幕阅读器这类东西，估计也做不了什么操作。但是，路要自己走才知道多远，水要自己趟才知道多深。对自己没有经历过事情的认知往往总是不准确的，对于盲人用户与上网的认识也是如此。我发现自己认知的偏差是因为腾讯 CDC的“闭上眼睛用QQ – 盲人用户探访实录”这篇文章。企鹅公司就是企鹅公司，有钱有人有访谈，这次访谈实录对于像我这样没有机会亲历盲人用户的开发人员来讲是非常宝贵的一手资料，让我意识到，盲人用户也有些他们精彩的世界，他跟我们这些视力良好的人一样，也是可以很好的体验到web给我们生活带来的快乐的。
//zxx:下面这段摘自“闭上眼睛用QQ – 盲人用户探访实录”一文。
盲人用户所有的电脑操作都依赖于读屏软件和键盘来完成。这三位用户现在使用的都是永德读屏软件，它安装后即在后台运行，把普通的操作系统变成了带语音的操作系统。盲人朋友依靠tab键，方向键和部分快捷键来调整目前光标的所在位置，而每按一次键盘，或屏幕上出现新的内容，或可操作界面上状态出现任何变化，系统都会有语音提示，这样盲人朋友也可以像普通人一样对电脑进行操作了。由于多年的训练，盲人所用的语音库的语速都非常快，普通人难以识别。顺带说一句，目前国内的读屏软件都不便宜，如永德是在1200左右，而一个盲人按摩师的月收入也就1、2千吧，问及他们是否会觉得这个软件太贵，老板娘笑了笑说：“我觉得值！”电脑和网络给盲人带来了全新的生活。

图片来自腾讯CDC 小黄和他的电脑（右边的数字键盘对他们很重要）信息无障碍是我们应尽的公益责任，而我国是世界上盲人最多的国家，根据中国残联最近一次公布的数据（在 2006年发布），视障患者的数量在1300万左右，若按照目前的速度增长下去，预计在2020年这一人数将达到5000万左右。要使盲人朋友能够更好的使用电脑，畅享网络生活，我们需要做的事情还有很多。
从上面三点可以看出，对键盘的支持是提高页面可访问性的最重要的因素。所以，我们再制作页面的时候，还需要多多考虑到键盘事件，尤其像上下左右键，TAB键和回车键。
四、国外支持键盘事件菜单
国外是有不少键盘支持下拉菜单的例子的，例如：
mozilla的官方首页。

当我们使用TAB键让导航项获取焦点后（IE和Firefox浏览器会有虚框），按下←键，或是→键，或是↓键，如果有导航项的话，就会显示下拉内容的。
又如yahoo开发示例的这个下拉菜单：

与Mozilla首页下拉菜单相比，这里功能更多了些，支持二级菜单，由于导航非链接，所以还支持回车键显示下拉菜单。
上述两个实例都是一定程度上支持了键盘事件的下拉菜单的示例。但是，这里我要重重地转折！这里的键盘支持的实际应用价值是多少呢？开发的可行性又是多大呢？我的结论是：实际应用价值低，开发的可行性低。
首先是使用价值，通过移动方向键显示下拉菜单，就中国行情而言，就数十年来中国网民的使用习惯而言，就中国目前前端对方向键的支持情况来看，即使你呕心沥血做了个可以通过方向键控制下拉显示的导航菜单，再即使你昭示天下此导航可方向键操作，有几个人鸟你的账呢？所以我说，在中国，在目前，方向键的可用性虽然看上去不错，实际上没有多大价值。
其次是开发的可行性，要知道，大部分的公司的资源人力有限，而且很多人能力有限，你说，花巨大的代码成本搞个可用性很好（但受众很小的）的下拉菜单，有必要吗？可能吗？你会吗？
所以说，上面yahoo开发和Mozilla首页的下拉的键盘方法是没有任何实际应用价值的，其意义仅在于学习、提高JavaScript 水平，尤其在控制键盘事件上。
您可能会疑问，照我的结论，所谓“下拉菜单可访问性”只是个空洞的理论，没有实际价值嘛。哦，其实不然，我们其实可以找到即有实际应用价值，同时又开发简单常用，又能提高页面键盘可用性的方法的。其关键就是focus事件。作为键盘用户，最常用的是哪个键，一个是Enter回车键，另外一个就是Tab焦点切换键。Tab键可以让页面上的a标签以及表单元素(button, input)依次获取焦点(如果没有设置tabindex属性的话)，当Tab键切换到某个元素时，此元素其实已经相应了onfocus方法（大部分情况下未定义方法），此时如果按下Enter回车键，其实相对于触发了onclick方法，如果a标签有链接的话，会打开链接的。
所以，我们可以抛开烦人的方向键，而专注于Tab键，以及Tab切换触发的focus方法。我们再添加一个让菜单获取焦点的显示下拉的方法，其不是大大提高了页面的键盘可访问性。而且onfocus方法本身与键盘无关，我们只需要专注于事件本身，而忽略键盘，所以开发成本是低的，非常可行的。
下面，就以mtime时光网的下拉为例，添加Tab键的下拉方法（其实是onfocus方法），看如果通过添加几行额外的代码，来大大提高页面的可访问性的。
五、给菜单添加focus事件增加键盘可用性
什么元素支持focus事件呢，据我所知为a标签，以及表单元素。所以，还是Mtime时光网的例子，我们要在下图所标示位置的a标签上添加focus方法，让其获取焦点时也能显示下拉菜单：

由于鼠标经过也实现同样的下拉效果，所以，我们需要将显示下拉菜单的方法提出来，一番处理后，js代码如下：

上述方法除了focus方法之外，为了让下拉显示的列表也能通过Tab键访问，所以，对当前显示的下拉对象cache了下，以能够准确收起之前展开的下拉菜单。
上述脚本代码的效果如下图所示，通过切换Tab键显示的下拉列表内容：

这里只看图是体会不出这里可访问性是如何切实提高的，您可以狠狠地点击这里：Tab键可访问的下拉菜单demo
无论是Firefox浏览器还是IE浏览器，不停的切换Tab切换键，当导航中的a标签获取焦点时（出现虚框，Chrome土橙色框，Safari蓝框）（可见outline是可访问性里面很重要的东西，没事就设置outline:none;的人都是不明真相的盲从者），就会出现下拉菜单。此时下拉菜单中的列表项也可以通过Tab键获取（如果下拉菜单不显示，菜单列表是无法通过Tab键访问的）。
于是，对于那些无法或不想使用鼠标的用户而言，这里导航的可访问性显然更高一筹，因为，他们可以轻松使用键盘访问导航里面的每一项内容，Tab切换，回车键访问。
值得一提的是，对于Safari浏览器用户，默认Tab切换元素是不高亮的，您需要在偏好设置里勾选此项，如下图所示：

六、抓住最后一点尾巴
我知道“站着说话不腰疼”，放眼看看中国互联网上的这些网站，绝大多数网站连个小众用户都没有，更别谈考虑到“键盘偏好用户”了，人力有限，财力有限，所谓的这些可访问性问题都只是些用钱的公司，有钱的网站有资本把玩的东西。成千上万生死先上挣扎的中小网站，对于他们来讲，本文的意义又何在呢？
我想，应该不少同行看过本文，知道了下拉菜单这类东西最好添加键盘可访问的方法。但是多仅局限于只是知道而已，真正去付诸实践的有多少呢，我是很怀疑的。所以从这点来讲，本文的实际价值又似乎打了折扣了。所以，我自己并不奢望每个前端开发人员日后都开始重视键盘用户的可访问性问题，要为页面重要的地方写键盘事件，或者是本文重点演示的focus事件。
然而，虽然，我觉得为少了的键盘用户、屏幕阅读器用户额外写js方法在大多数网站是行不通的。但是，其实只要举手之劳，我们也能够让自己网站的可访问性更好，而这些看上去不起眼的操作实际上是更加有实际应用与推广价值的，到底哪些“举手之劳”呢？
首先，把网站CSS reset中的outline:0;，痛痛快快，舒舒服服地删掉。
其次，凡事涉及到事件的元素，例如按钮，选项卡等。都必须使用（或包含）a标签或是表单元素（如button）。这不难理解，就拿本文时光网导航举例，实际上导航中的a标签去掉，同样的脚本，已经可以实现下拉菜单的效果了。或许有人反而会认为自己仅仅使用了ul, li标签就实现下拉菜单效果沾沾自喜，认为自己去掉了荣誉的a标签，HTML代码够简洁，这就跟《媳妇的美好时代》里面的毛峰一样，家里这个温柔贤惠漂亮勤劳的老婆不要，跑去沾惹那个什么龙瑾，不要是看外表风骚，看知道内涵才行。
所以，我要看到只要ul,li标签的导航觉得苗条性感，实际上只是个花花瓶子，里面需要有点内涵的东西——a标签。a标签本身的存在就是提高的页面的可访问性了。
所以呢，那些自以为代码精简、或是自认为a标签虚框不好看而使用类似span标签代替的做法，都是业余的，是可以轻松改进的。
然后，不要自以为的不要自以为边缘处理后的文字似乎更好看，就把按钮，选项卡的文字用图片代替，连文字也不留两个。你说屏幕阅读器认识图片吗，还有，你就这么喜欢没事来两个图片链接请求来虐待服务器吗？所以，少用图片代替文字，即使要代替，也要把文字藏在后面，注意是藏在后面，就是图片不显示文字就显示，而不是隐藏掉。
最后，总结下，就是outline，a标签，文字。如果您想做真正优秀的网站，加一条，键盘响应事件。
七、结语加《盗梦空间》电影之旅
本来这篇文章预计9点就可以发布，结果拖到现在，为什么呢？啊，说来话长，当时我写文章正进入体验高峰状态，突然外面有人敲窗户，我以极慢的速度转过头，
盯着黑乎乎的窗外看了10秒钟，眼睛共慢悠悠地眨了3下（1~2~3~），突然，眼前一亮，啊！这不是芳芳同学吗？我故作镇静的走过去，打开窗户，“什么事？”只见其玉手拿出两张黄黄的票子，说：“我这儿有两种《盗梦空间》的电影票，多了一张，你要不要去看？”此言一出，我肾上腺素立即升高，“哇靠，这不是电视剧里才有的桥段吗？”这等美事怎能放过，于是乎，我平生第二次和女生单独看电影（第一次是和我妹）。不要问我后来怎么样了，我现在脑子里有的就是：啊，电影很好看；啊，陆家嘴很美；啊，我的心情超好。
呼~~长嘘一口气，回到本文，关于本文……果然，还是不行，心情依旧沉浸在喜悦之中。算了，有什么问题评论交流。就这些，洗洗睡了~~

Feed enhanced by Better Feed from Ozh

如何量化用户体验

seasun — Tue, 27 Jul 2010 13:58:03 +0000

很多人都把用户体验看作是网站成功与否的一个总体衡量标准。分析一个网站在提供好的用户体验方面的效果如何，往往会变成一项很主观的事情，仅停留在观点层面，缺乏客观依据。

本文描述了一个量化用户体验的快餐式的方法，我发现这个方法对于提供给客户一个关于他们的网站和过去开发所作努力的快速、客观、形象的表现很有帮助。

什么是用户体验？

“用户体验”这个术语指的是一个概念：把最终用户作为设计和开发活动的焦点

，而不是系统、应用程序或者单纯的审美价值。它是基于一般的以用户为中心（用户至上）的设计理念。

用户体验主要由四个因素组成：

品牌
可用性（注释：用户能够使用一个界面来达到他们的目的的难易程度）
功能
内容

单独作用的话，这些因素中没有一个能带来积极的用户体验；然而，如果综合起来，这些因素就组成了一个网站成功的主要因素。

举例来说，一个设计精美的网站，却频繁地出现服务器错误或超时。或者想象一个很棒的数据库应用程序，由于某种原因而从未被使用过，因为它被深深地掩埋在了网站信息架构的深处。在两种情况中，我们都可以看到，独立的品牌、可用性、功能和内容等要素是无法说明一个网站是成功的。然而，当综合在一起时，这些核心要素就构成了用户体验的基础。

目标分析工具的必要性

比如说你来了一位新领导 – 他们对网站现状不满意，想让你帮忙把握网站的正确航向。如果你像我一样的话，第一件要做的事就是先浏览一下这个网站，然后在脑海中做一些粗略的记录。然后你怎样把这些想法和记录传达回给你的客户，而不是简单地像撕成八瓣一样对现有网站批判一番？

问题在于，我们每个人对一个网站是好还是坏的感知，是受我们个人背景和行业特性的影响而有所偏倚的。如果被叫来评价一个网站的优点和缺点，一个开发人员、可用性专员、设计人员或信息架构人员可能会有完全不同的评判。

一个客观的测量分析工具，会帮你提供给客户有事实依据的建议，而不仅仅是主观臆断和观点。本文中我们将探讨的方法会帮助你：

尽可能消除个人偏见（主观因素）
让不同背景的人（设计人员，开发人员，客户）能够在理解网站上有统一的共识
创建基准规则，以便于网站与其竞争者或过去的开发努力作比较
为你的客户提供一个关于他们网站的优缺点的事实依据和可视化的展示

衡量用户体验

如上所述，用户体验由四个相互关联的要素所组成：

品牌
可用性
功能
内容

但是，我们如何量化和衡量这些看似无形的元素呢？

方法很简单。我们把分析分为四个部分 – 每个用户体验的元素为一个部分。对于每一个元素，我们创建一系列的描述或参数，用于针对性地测量网站。我们为每一个描述创建一个从1到X的尺度范围；并且在这个范围内给每个描述打分。

一旦你完成了这个分析的第一部分，四个栏目中的每一个描述就都有了一个对应的分数。

在本文附上的范例分析中，我们只为每个元素使用了五个描述或参数。因此，我们使用了一个20分的尺度范围，这样网站的最高分值就是 100。所以，如果我们为每个元素添加额外的五个描述或参数，我们就会使用10分的尺度范围来打分。

下面就是对范例分析中的每个元素以及描述或参数的概要：

品牌

品牌包括在网站中所有审美的、设计相关的项目。它带给网站想要的组织形象或信息的创意。用于测量品牌的描述包括：

网站提供给访客有吸引力的和难忘的体验
网站的视觉效果与品牌特征保持一致
图像、附加内容和多媒体对于体验的增值
网站传达出品牌的感知预示
网站利用了媒体的能力来增强和扩展品牌

功能

功能包括所有技术方面的和“后台的”进程和应用。它让网站提供给所有最终用户交互式的服务，而且重要的是，注意这有的时候同时意味着前台公众用户和后台管理员。网站功能的描述包括：

用户及时获得对他们查询和提交信息的响应
任务进程的清晰告知（比如，成功页面或邮件更新提示）
网站和应用严格遵守通用的安全和隐私标准
在线功能与离线业务流程结合
网站包含管理员工具来加强管理员的效率

可用性

可用性带来的是所有网站元素和特性的总体易用性。可用性之下的二级主题包括导航和易用性（友好度）（注释：易用性处理的是使在线内容可用于用户的体验，享受和使用的问题）。可用性的描述包括：

网站防止错误发生，并帮用户从错误中恢复
整体网页侧重针对主要受众优化
网站帮助访问者达成一般目标和任务
网站遵循它自己的一致性和标准
网站为残疾用户提供内容

内容

内容指的是网站的实际内容（文本，多媒体，图像）及其结构，或信息架构。我们来看信息和内容是如何按照定义的用户需要和客户的商业需求组织的。测量内容的描述包括：

链接密度有足够的清晰度，且容易导航
内容组织方便用户达到目标
内容及时准确
内容适合客户需要和商业需求
多语言的综合性内容

在多数情况下，我会为这四种元素分别使用10到20个独立的描述。我建议你使用如上描述作为你创建你自己的分析的基础。请记住，如果你添加了更多的描述，你必须也调整20分的尺度，以便每个元素的总分为100。例如，如果你为每个元素使用10个描述，那么你的评分尺度应该是1-20。如果你为每个元素使用20个描述，你的尺度应该是1-5。

作为这一类分析的例子，请你下载这个范例Excel文件。

显示你的结果

一旦你完成了你的分析，并且得到了每个描述或参数的分值，就是时候把数据放入清晰而便于告知的格式中去了。

首先我们要做的是，把每个元素的所有的分值加总。因为我们已经设置了分值尺度，来为每个元素提供满分为100的分数，我们真正得到的是一个百分比的分数。一旦我们有了这些百分数，我发现最有效的是创建一个雷达图来直观地呈现。微软的Excel或者Open Office Calc都很适合，尽管任何带有图表功能的数据表软件都可以。

使用你的数据表软件，你可以创建一个可视化的数据展示。请参见你在上面下载的示例文件来获取更多的范例。

对你的分析发挥创意

关于本文描述的分析和方法最棒的事情是，他们可以用于满足你的特定客户或项目需求。

你当然可以在分析中添加第五个类别来描述易用性（友好度）或者商业指标。例如，你得到了一个政府客户，需要严格遵循508规则（针对美国）。你可以容易地创建一套描述或参数来专门处理易用性（友好度）元素，修改你的图表来相应展示。同样，你也可以很容易地创建一个类别来专门处理你的客户的重要商业指标，比如，ROI，点击率，转化量，或者重复顾客数。

可选地，这个分析平台还可以让你能够为你选择的元素添加更大的权重。比如说你有一个客户，他是奢侈品生产商，并且主要侧重在品牌和视觉效果上。你当然可以创建一个修改过的测量系统，来为品牌要素提供更大的权重，而为，比如说，可用性要素上减少权重。

实际应用

我已经把这个分析用于很多我所从事的项目。我常常在新客户的提案中包含一个“快餐式”分析作为附录，来提供预期的客户一个关于他们网站相对于竞争者的简单印象。

提供这类的评论通常能够给你一个极好的机会来展示你的专业性。机会是其它竞标的公司不会包含这样的免费咨询服务 – 并且你在提案中包含的这个报告可能会是一个对你有利的决定性因素。

在其它事例中，我已经有客户出钱购买关于他们网站的深入的分析和完整的建议。这类报告包括，对于每种描述或参数，完成不同的描述性段落，再配上截屏范例。如果我最终通过跟进我的建议而赢得了客户，我通常会预定网站发布6个月后的再一次评估，作为显示进步的方式，同时加强我的服务的价值。

这种分析也能作为一个入门项目，引出更多的业务。如果你给这种分析定价合理，它可以是一个很棒的工具来让你得到新客户，并展示给他们你的服务的好处。

译者：Leon Zhang, 数字营销宝典 (DigiMarketing.cn)

原作者：Robert Rubinoff；原文：http://www.sitepoint.com/print/quantify-user-experience

Feed enhanced by Better Feed from Ozh

故事：用户凭什么跟你走

seasun — Fri, 23 Jul 2010 04:03:32 +0000

先说一个寓言，caoz自己编的。

从前有个山沟，住着一群村民；山沟缺水，村民到处打井。

第一个人出现了，他帮助村民打井总能又快又好，村民都很信任他，但是水仍然越来越少，井越打越深，难度越来越大，村民越来越辛劳。

第二个人住在山顶，他每天都在远眺，有一天他跑下来对忙碌的村民说，你们跟我走吧，离开这个地方去外面的世界。村民放下工具问他，我们为什么跟你走？他说，外面有落日余晖，有大片的草场，有漂亮的花朵和成群奔跑的羚羊。村民说，干我球事，于是拿起工具继续挖井。这个人只好离开，喃喃自语，愚蠢的人们啊。

第三个人出现了，他也帮村民打过井，也在干渴中煎熬过，但是有一天，他走到了山顶，远眺了一下，他的眼镜放出了光芒；他匆匆的跑下山，走到村民中，大声喊。收拾自己的东西，赶紧跟我走，我们现在就出发，离开这里！村民放下工具问他，我们为什么跟你走？他说，山外有条大河！我们再也不用打井了！！

故事结束，您应该知道我要说什么了。

第一个人，他是我们常说的合格的产品经理，他理解体会用户的需求，并为此努力着，他奉行绝对跟随用户的原则，这种人，每个公司其实都需要。

第二个人，高端，精英，他看的比别人远，知道的比别人多，他们一厢情愿的以为自己描绘的蓝图可以吸引用户，很抱歉，他们不了解用户真正的饥渴，用户凭什么跟他走？这种人在现实中经常是评论家。

第三个人，是真正的大师，领袖，如果要在现实中找一个载体，这个人叫乔布斯。

好了，谁能让用户跟随，第一你要知道用户的饥渴，也就是本质需求，用户告诉你他需要一口井，其实他需要的是水；第二，看到的比用户更远；第三，有更好的解决用户本质需求的方法和路线。

中国IT产业，呼唤新的大师。

Feed enhanced by Better Feed from Ozh

亚马逊用户体验改善

seasun — Tue, 20 Jul 2010 14:30:06 +0000

本文被发表于《商界评论》2010年7月号P98

亚马逊的成功是强大用户购物体验的直接结果，今天无论是在理念还是在实践上，都堪称电子商务开发者的学习标杆。

随着电子商务热潮的持续升温，现在电子商务网站的设计，正面临着一系列的挑战，其中最主要的挑战就是如何建立一种用户体验，来提高用户在线购物的可能性。

为了对抗网上激烈的竞争，消除网上多疑购物者的顾虑，设计人员可以采取一些措施来改善他们网上商城的可用性。自1995年以来，亚马逊已经成为在电子商务B2C领域里公认的世界领导者。它的成功并非偶然，也不仅仅是在一个正确的地方与一个正确的时间的结果。

亚马逊的成功是强大用户购物体验的直接结果，今天无论是在理念还是实践上，都为许多的电子商务开发者提供了值得仿效的参考。

双重目标明确

产品搜索和在线采购

当您浏览一般的电子商务网页时，常常会面对一片凌乱的布局，让你不知所措。而亚马逊则通过为数不多的简洁区块，或者独特的元素立即就能捕捉用户的眼睛：在导航搜索的左上角和靠近顶端的搜索/购物车控制器，这使得亚马逊的简单的双重目的得以实现：

即用户可以快速查找和购买产品；其次，卖方能够快速处理网上订单并获得利润。

亚马逊的设计师和架构师团队必须确保在网站的结构中，这两个元素是足够的突出和可用的。设计师、客户、项目经理和参与建设电子商务网站的开发人员，从一开始的用户体验（无论是第一次用户或回头客）都会遵循明确强调产品搜索和在线购买。

内容适合当前用户

一旦建立了网站的产品搜索与网上购物等功能，用户最有可能想利用这些特性的优势马上开始搜索。亚马逊使用Cookies来记录用户登录情况，并对用户的购物习惯进行跟踪并存储到服务器端。这是一个很好的提高，因为它能动态地定制用户体验：以事先进行搜索、网页浏览、愿望清单添加、评价填写为基础，并达到最终购买目的。

一篇UI 规范文件

seasun — Thu, 08 Jul 2010 12:53:48 +0000

这是一个UI模板规范，在做B/S版应用程序时比较适用，其实这样的东西算不上什么正规的规范，只是为了适应我们现在面对的开发环境和组织流程做的一些权宜的努力，和解决了一些与程序沟通和接口的问题，尽量避免误会和摩擦。

一　适用环境和对象
二　必要性
三　技术原则
四　代码编写规范
五　页面模版使用规范

一　适用环境和对象
本规范适用基于浏览器的B/S版软件项目开发工作。开发流程中的模版页面编写和模版文件套用工作必须遵照此规范执行。适用对象为开发编码人员、UI设计人员、模版编写人员、界面测试人员等。
基于客户端的C/S版软件开发工作不适用本技术规范。

二　必要性
本规范旨在制订开发编码人员和UI模版编写人员之间在工作交叉部分的技术标准，使他们遵循同一操作规范，利于交叉工作的平缓顺利交接。以标准化方式，提高沟通和技术协作的水平，提高工作效率。减少和改变责任不明，任务不清，和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。

三　技术原则
代码规范化书写
代码规范化书写实现了脚本整体风格的一致，保证了同一个人不同时期写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致。因为开发不可能在孤立中进行，所以代码规范化书写是项目组人员合作沟通的前提。

数据层、结构层、表现层分离
数据内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。这里强调的“真正”，是指纯粹的数据信息本身。把信息内容以一种合适的方式格式化，简言之就是页面排版，例如：分成标题、作者、章、节、段落和列表等，使内容更加具有逻辑性，条理清晰易读易懂，叫做“结构 (Structure)” 虽然定义了结构，但是内容还是相同的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，称之为“表现(Presentation)” “表现”的作用使内容看上去漂亮、赏心悦目、打动人心！

所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，人对页面内容的交互及操作效果叫做“行为（Behavior）”,

对于数据、结构与表现相分离，最早是在软件开发架构理论中提出来的。UI设计师设计出页面模版，程序员负责内容数据的嵌入，数据可能是从数据库中提取出来，也可能是静态写入的提示性文字，最后形成一个新的页面展示给软件操作者。模版文件的结构利用HTML＋XHTML标签来定义，而所有涉及表现的东西通通剥离出来，把它放到一个单独的文件里，这个单独的文件就是CSS。

数据、结构与表现相分离的好处是：
程序员不需要过多的思考页面显示问题，而只需要根据模版效果把数据放入模版相应的位置。界面的结构和表现由UI设计师负责。填入结构的数据自觉套用设计好了的表现效果。最后呈现一个实现功能的完整界面。
表现层的分离保持整个软件界面视觉的一致性，使改版也变得非常简单，修改样式表就可以了；
由于结构清晰，数据层相对独立，对数据的集成、更新、处理和再利用也更加方便灵活；

四　代码编写规范

（一）目录结构及命名规则

目录结构规范
1、目录建立的原则：以最少的层次提供最清晰简便的访问结构。
2、根目录一般只存放index.htm以及其他必须的系统文件
3、在根目录中原则上应该按照系统的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片
4、所有JS,ASP,PHP等脚本存放在根目录下的 scripts目录
5、所有CGI程序存放在根目录下的cgi-bin目录
6、所有CSS文件存放在根目录下style目录
7、每个语言版本存放于独立的目录。例如：简体中文gb
8、所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录
9、temp 子目录放客户提供的各种文字图片等等原始资料，以时间为名称开设目录，将客户陆续提供的资料归类整理。

文件和目录命名规范
1、文件命名的原则：以最少的字母达到最容易理解的意义。
2、每一个目录中包含的缺省html 文件，文件名统一用index.htm
3、文件名称统一用小写的英文字母、数字和下划线的组合，不得包含汉字、空格和特殊字符
4、尽量按单词的英语翻译为名称。例如：feedback(信息反馈)，aboutus(关于我们) 不到万不得已不要以拼音作为目录名称
5、多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。例如：news_01.htm。注意，数字位数与文件个数成正比，不够的用0补齐。例如共有200条新闻，其中第18条命名为news_018.htm

图片的命名规范
1、名称分为头尾两两部分，用下划线隔开。
2、头部分表示此图片的大类性质。例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ；装饰用的照片我们取名：pic ；不带链接表示标题的图片我们取名：title 依照此原则类推。
3、尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.

4、有onmouse效果的图片，两张分别在原有文件名后加”_on”和”_off”命名

其它文件命名规范
1、 js的命名原则以功能的英语单词为名。例如：广告条的js文件名为:ad.js
2、所有的CGI文件后缀为cgi。所有CGI程序的配置文件为 config.cgi

（二）　 html编写规则

一般原则
1、在编写模版文件，排布结构表格之前，要思考一个最佳方案，表格的嵌套尽量控制在三层以内；要考虑程序套用的可实现性、通用性、灵活性、预见性，所有内容均采用积木式组织，可替换和删除，并对总体结构不会造成破坏性影响
2、尽量避免两个标记，经验表明，这两个标记会带来许多麻烦
3、一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内。因为浏览器在解释页面元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用标记，以便能够使这个大表格分块显示
4、排版中经常会遇到需要进行首行缩进的处理，不要使用全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上

标记，注意，一般情况下，请不要省略

结束标记
5、原则上，我们禁止用来人为干预图片显示的尺寸，而且建议标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，务必在最后给附上 width 和 height 属性
6、为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中尽量不要使用
来人工干预分段
7、不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号
8、为贯彻结构层和表现层分离的原则，严禁使用传统的HTML3.2/4.0控制表现的标签，例如,，还有本意用于结构后来被滥用于控制表现的标签，例如：
,等。所有的字号都应该用样式表来实现，禁止在页面中出现标记，　　
　
标记，严禁在结构页面写表现标签
9、不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
10、中英文混排时，我们尽可能的将英文和数字定义为 verdana 和arial 两种字体
11、行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%
12、系统中的路径全部采用相对路径
13、为保证系统和浏览器的兼容性，当设置背景图片时，要坚持用双引号。
14、“网页大小”为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。页面大小保持在34K以下为合适

代码规则
head区标识（head区是指首页HTML代码的和之间的内容）
1、公司版权注释
Generator: 中软融鑫
Creation Data: 2005-8-1
Original Author: 张三
–>

2、网页显示字符集
简体中文：

繁体中文：

英语：

?
3、简介
?

4、网页的css文件定义，所有css文件尽量采用外部调用

5、网页标题
这里是你的网页标题

6、所有的javascript脚本尽量采取外部调用
javascript” SRC=”script/xxxxx.js”>

head区可以选择加入的标识
7、设定网页的到期时间。一旦网页过期，必须到fwq上重新调阅。

8、禁止浏览器从本地机的缓存中调阅页面内容。

9、用来防止别人在框架里调用你的页面。

10、自动跳转。

5指时间停留 5秒。

11、网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。

12、收藏夹图标

13、搜索关键字

head区以下的标记
1、body标记
为了保证浏览器的兼容性，必须设置页面背景

2、table标记
在写
互相嵌套时，严格按照的规范，对于单独的一个
来说，，
这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：

于同一个级别的
各缩进两个半角空格，结束标记和开始标记平齐。中如果还有嵌套的表格，也缩进两个半角空格，如果结束标记应该与
错误写法
a\

中没有任何嵌套的表格，处于同一行，不要换行。
正确写法：
a\

b\

b\

一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px 的单元格应该在之间写一个，如果高度小于12px, 则应该在之间插入一个1*1 大小的透明的gif 图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW中可以通过command->apply souce formatting进行重新整理！

3、Width 和height标记
一般情况下只有一列的表格，width 写在
和和
的标签内，只有一行的表格，height 写在
的标签内，多行多列的表格，width 和height 写在第一行或者第一列的
标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化。
a、只一列的表格的width标记

b、只一行的表格的height标记

c、多行多列表格的width和height标记

4、table的 width属性

为遵循页面结构灵活性、通用性原则，table的width属性原则上全部写成100％或者不写width属性，不推荐写成其他非100％宽度属性。留空显示效果通过其给外部td施加style的padding属性实现。

table宽度 100％

需要说明的是这里td的style虽然是css的写法，但不属于表现层的内容，而是属于结构层的内容，所以可以直接写在html标记中间。

5、数据列表表格代码写法
表格外加上一个
，并对
赋一个 id，即
，然后通过样式表对这个id下的所有html元素进行控制，
用
表示表头
设置每列宽度的位置在表头对应的中，其中列表项中，字数最多或者字数不定的一项不设置宽度。
宽度的值依据列表项内容的多少来定，2个字的30px，三个字40px，时间、年月日（比如2004-11-11）80-120px,
类似于标题的列表项，表格对齐方式为左对齐（align=left）,时间，人名一般居中对齐，数据一般右对齐（align=right）。
对齐页面内容时不要用div来对齐，直接在td 或th中写align=…
表头文字一般不折行，方法是在中加上nowrap,或者通过样式表来控制

选择标题发表人时间大小

（三）　 css编写规则

css文件调用写法
1、所有的CSS的尽量采用外部调用，特殊情况才允许使用内置html写法。

css文件结构组织
1、文件提头，css文件名称、时间、作者

2、　将不同目的和效果的CSS选择符分别编组，编组分层级使结构清晰，便于查对。并恰当地成块注释，注释要说明施加的页面文件的对象。顶级注释用*TOP*打头，次级注释不用。

.headtext {
font-size: 14px;
color: #ffffff;
font-weight: bold;
}?
.headtext a:link {
color: #ffffff;
text-decoration: none;
}
.headtext a:visited {
color: #ffffff;
text-decoration: none;
}
.headtext a:hover {
color: FED078;
text-decoration:none ;
}
#clientcard {
align:left;
}
#clientcard th {
height:20;
font-size: 12px;
color: #737373;
padding-left:10;
font-weight: bold;
background-attachment: fixed;
background:url(images/dot2.gif)

background-repeat: no-repeat;
background-position: left center;
}
#clientcard td {
height:20;
font-size: 12px;
color: #FD783A;
padding-right:25;
}

3、选择符分组的顺序是重定义的最先，伪类其次，自定义最后。便于自己和他人阅读。
例如：

BODY {
margin-left: 0px;
…
}

TD {
font-size: 12px;
…
}
a:link {
color:?#484848;
text-decoration: none;
}
a:visited {
color: #484848;
text-decoration: none;
}
a:hover {
color:#BD0800;
text-decoration: underline;
}
.ltreename {
font-size: 14px;
…
}

类和ID命名规则
1、以功能和定义对象的位置，而不是外观为类和ID命名。例如创建了一个 .smallblue 类，后来打算将文字改大，颜色变为红色，这个类名就不再有任何意义了。所以，用更有描述性的名字如 .copyright 和.info-list更加合适。

单位
1、0不用单位
2、非零值要指明单位，指定字体、边距或大小时，必须指明所用的单位
例如： padding: 0 2px 0 1em;
3、特例：line-height不需要单位

字号大小
1、为了保证不同浏览器上字号保持一致，字号像素px 来定义，一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用14.7px 的字号比较合适
例如： font-size: 12px;

顺序
1、a:link a:visited a:hover a:actived 要按照规范顺序写
2、边框(border)、边距(margin)和补白(padding)的简写次序为：顺时针方向从上开始，即 Top, Right, Bottom, Left。
例如： margin: 0 1px 3px 5px;表示上边距为零，右边距为1px，依此类推。

组合选择符
1、保持CSS短小对减少下载时间非常重要。尽量为选择符分组、利用继承(inheritance)以及使用简写(shorthand)来减少冗余。

使用图片
1、 css中经常遇到使用图片的情况, 图片的路径一律采用相对路径。
例如：

.hurdlename {
font-size: 14px;
color: #0B43C2;
height:25px;
font-weight: bold;
background-image: url(images/rbar_bg.gif);
background-repeat: repeat-y;
text-indent: 12px;
}

.but1{
background-image: url(../images/but1.gif);
font-size: 12px;
color: #000000;
border: 0;
width:85px;
height:26px;
cursor: hand;
}

2、使用图片替换技术时要考虑与系统和文件结构的亲和力。如果引用css的所有文件不在同一级相对路径，就会出现css指定的图片无法显示的问题。在这种情况下不支持使用图片技术。建议采用filter技术
例如：

input.buttton {
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#CFD1CF, endcolorstr=#EFEFEF);
border: #B5B6B5 1px solid;
font-size: 12px;
color: #000000;
cursor: hand;
height:24px;
background:#ffffff;
}

五　页面模版使用规范

页面模版使用规范的目的是统一和约定UI设计、界面工程师与不同的程序编码人员的行为方式，光有了书写代码的规范还不能完全解决界面套用的统一性问题。因为不同的编码人员对同一个模版的理解有可能不同，再加上个人工作习惯的不同，界面套用的结果往往很容易出现差异。哪怕是每人一点点差异，都可能使软件的质量收到很大的影响。

责任分工明确
1、 UI设计、界面工程师负责界面风格的设计和软件模版的编写，并监督界面套用的效果。对软件最终的界面负责。
2、编码工程师负责软件业务逻辑的实现，软件模版的套用。对软件的数据和程序负责。
3、现实的情况是个别编码工程师在模版套用出现偏差后，在界面工程师提出修改意见的时候拒绝修改，以开发进度、时间不够为由搪塞，甚至主观认为“这个（界面）不重要”致使界面工程师的作用得不到应有的发挥，影响软件产品质量。
4、解决办法是各负其责。界面问题提高重视程度，并纳入开发流程和进度管理之中。

界面模版交界过程
1、模版文件制作完成后，在提交给编码工程师时，要简要说明模版的文件的使用说明和提醒。
2、编码工程师和界面工程师密切合作，完全理解模版使用说明。
3、对界面结构层html的table嵌套关系理解清楚并明确和程序结合的用意。有和程序不相配合的情况，进一步和界面工程师讨论，获得解决方案。不得在界面工程师不知情的情况下随意修改table结构、定位属性和嵌套关系。这样做的坏处是虽然一个人解决了暂时的显示问题，但和其他编码工程师套用的结果出现不同。也不利于界面工程师控制总体界面。
4、对表现层的界面元素和css文件选择符的对应关系。做到心中有数，理解一个模版文件，到套用其他文件时就能够举一反三。

5、编码工程师完全理解了界面模版后，就能够顺畅的把数据层的内容放到结构层合适的位置，并指定表现层合适的选择符属性。完成界面套用工作。

模版说明的内容
1、总体的界面结构
2、页面板块的布局和定位table的写法
3、 table嵌套的方式的理由
4、不同功能的界面显示单元说明和使用方法
5、 css文件中选择符的使用说明，一般的都能理解，个别特殊的要着重说明。

Css文件的版本控制
Css 文件应引入版本控制的机制，项目组中应指定专人负责css文件的上传和修改。fwq的css文件和界面工程师的css文件应该同步更新。不支持编码工程师随意添加选择符修改css文件。谁都可以改就没有标准，没有版本控制就做很难做到界面统一。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果抓虾

Feed enhanced by Better Feed from Ozh

12个由于支付过程不友好导致的客户流失问题

seasun — Wed, 30 Jun 2010 04:33:20 +0000

来自电子商务博客Get Elastic的一篇文章，阅读后感觉对国内的电子商务网站也挺有借鉴意义，就顺手摘译出来。

1.支付错误信息不友好：客户支付的时候难免会出现一些问题，给出更友好的提示对客户有很大的帮助。比如输入信用卡安全码错误时，可以用图片显示告诉客户什么是信用卡的安全码。另外在页面上显示客服信息让客户可以取得帮助，也非常重要。

2.登录：客户都不喜欢注册和登录，即使以前购买过可能也不记得登录帐号和密码。是否可以允许客户先支付购买商品，在购买结束时询问客户是否想创建一个帐号用于下次购买

3. 支付过程中的一些必输项目不要默认选中某个选项，因为客户容易忽视已经选中的内容。比如不要默认选中信用卡是Visa卡，这样使用 Mastercard的用户可能会忽略这个地方，而不去修改成Mastercard

4.取消按钮：不要把取消按钮放得太靠近提交按钮

5.交叉销售：在结算的时候如果有太多交叉销售的选择的话，可能会让客户迷惑，反而放弃订单

6.不必要的提醒和解释：有时候一些提醒和警告会让客户反而感觉不太安全。比如有的网站，在确定订单时会提示说“出于安全考虑，您的IP已经被记录”，或者“多次点击提交按钮会导致重复下单”。一个原则是如果这些警告不是必需的，可能让客户重新考虑是否下单的话，就去掉它们。

7.不安全的网络链接提示：这种错误非常常见，如果在一个使用https链接的结算页面中包含了使用http方式的内容，比如图片，javascript，IE等浏览器就会弹出提示框，警告客户这个页面中含有不安全的元素，这对于想要进行网上支付的客户来说，可不是一个好消息。

8.只有单一的支付手段

9.没有充分利用订单成功页面：在订单成功页面上不要仅仅写上感谢下单这样的话，你可以做得更多，比如加上一个分享这个网站给朋友的表单，显示客户服务条款或让客户填一个在线调查表。

10.隐藏一些附加收费内容：没有人喜欢在最后一分钟的时候看到一些出人意料之外的收费内容

11.客服热线不明显：客户希望在网站上看到明显的客服号码，这样在出问题的时候可以马上联系，有明显的客服号码可以让人有信任感

12.缺货：如果产品缺货了，需要在商品页及购物车中就及时提示客户。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果抓虾

Feed enhanced by Better Feed from Ozh

关于用户体验量化的一些事

seasun — Tue, 29 Jun 2010 13:03:51 +0000

从去年年底到今年年初，我分三次将自己读书时候的文章《用户体验量化方法研究》通过UED博客进行了连载。来自各界的热心网友对此文进行了评论，有反对的、有提出疑议的、有给出诸多建议的。而上周通过碳酸饮料会和大家分享这篇文章时，相关同事们也给予了最激烈的讨论。当我看到UED博客上网友的评论、当我回想起碳酸饮料分享过程中的精彩讨论时，我首先感受到的是欣慰；其次是动力。

一：为什么感到欣慰？

这篇文章已经发表有段时间了，但在这段时间里，太少人关注到了这篇文章。在没有肯定、没有否定，没有质疑、没有建议的日子中，《用户体验量化方法研究》一直被搁置着。通过UED博客、碳酸饮料会，我看到了有很多人在关注这个的话题，评论中或许更多的是对这个研究的质疑，但我依然感到欣慰，因为我看到了这么多人在关注这个话题，而且当大家看到这个话题后有思考、有不同的建议、有激烈的讨论……这样的情形让我感受到做这个研究是有价值的。同时当我看到了大家所给予的反馈时，我感受到了大家对这一研究后续发展的期待，这足以给予我动力将用户体验量化的研究坚持下去。而这些正是我欣慰之所在。

二：获取了哪些动力？

获得的动力可以概括为两方面，一方面是就研究本身而言的，发现了研究中存在很多不足，需要进一步完善；另一方面是就研究的意义而言，研究与实际工作相差甚远，如何将研究的内容应用于实践中需要进一步思考。

◎ 研究的过程

研究过程中暴露了很多不足，这些不足正是后续工作所要去完善的内容之一。

一是理论基础薄弱，有待加强。文章的可参考资料过少，导致有些部分内容并没有足够的理论支持，如用户体验量化层次模型的提出。有人说这个层次“拧巴”，有人说这个层次不完整……的确存在这些问题，而理论基础单薄不仅体现在体验量化层次模型的构建上，在论文中还有多处存在同样的问题，我们后期需要对这些问题点去完善。而欣慰的是网友们不光有指出理论知识的不足，同时也提供了非常多有价值的参考素材，例如popfan在留言中写道：“用户体验可以参考一些实验心理学的案例和量化方法。” psyduck提到：“觉得最主要的是找到有效度的可测量的变量,推荐一本书《用户体验度量》,里面有比较详细的方法和案例。”感谢热心的网友们。

二是研究中对实验的控制需要更加严格。在碳酸饮料会的分享过程中，大家对研究中实验的控制非常关注。而无论是在研究中，还是在实际的工作中，对于实验所需用户的筛选、实验所需辅助产品的选择，以及实验场地的选取等都是至关重要的。这需要在后续的研究中更加注意。

三是研究方法的实际运用需更加完善。在碳酸饮料会的分享过程中，大家讨论最为激烈的是方法如何运用于实践。以手机为例的以行为为中心的量化方法研究，在后期的数据处理中将实验的的整个任务（可划分为3个子任务）作为一个主体处理。尽管在实验中我们尽量控制不同任务转换间所造成的误差，但误差无法避免，势必会对后期的数据产生一定的影响。后续的研究中我们会更加合理的、充分的安排资源，将结合以任务为中心的量化方法对以行为为中心的量化方法做深入的分析。

◎ 研究的意义

对于研究的意义，很多人在质疑。博客上有人留言说：“有时间扯一堆没用的，还不如赶紧解决一下淘宝在Firefox上的使用问题！‘已买到的宝贝’ 历史查询非常差劲儿！……”yeeshao在留言中更是一针见血的指出：“遗憾的是看上去比较成熟完备的部分有新瓶装老酒的感觉，而全新未解的领域仍然点到即止完全没有突破。”

的确，与实际的工作相比，学校中的研究是耗时耗力的，而结果也往往是不能广泛被运用的。但是我们相信，所有的创新都是在摸索中进行的，或许下一次的成功就是建立在这一次的尝试的基础上的。在后续的研究中，我将认真考虑大家所给予的建议，紧密结合目前所从事的互联网行业，结合实践来完善用户体验的量化方法，以获取通用的用户体验量化模型为终极目标。

最后再次感谢所有的热心人士所给予的批评、质疑与建议！同时，希望更多的朋友们如果对这个研究感兴趣，不妨坚持下去。

三：后记

请关注我们，我们会将“用户体验量化的方法研究”坚持到底。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果抓虾

Feed enhanced by Better Feed from Ozh

用Engagement衡量用户活跃度

seasun — Mon, 21 Jun 2010 13:28:09 +0000

Engagement（参与度）是一个特殊的度量，Avinash认为Engagement不应该作为网站分析的一个度量，它更像是不愿意去寻求衡量网站是否成功的真正指标时使用的一个借口。他列举了Engagement存在的几个缺陷：

Engagement对于不同网站而言是不同的，它不是一个统一的度量，难以用一个统一的标准去定义它；

Engagement更多的是从定性的角度来定义的，很多用户参与行为不能很好地量化，因此难以准确地度量；

没有一个评判标准，对于一个网站而言用户参与度到底多少算是好；

因为没有标准的定义，存在不固定性，因此不能作为衡量网站整体表现的参考指标。

所以，我们可以认为Engagement是一个非标准化的度量（Non-standard Metric）。但绕开Avinash所提及的那些误区之后，也许Engagement也并非一无是处，至少它可以作为网站自身的分析指标，衡量用户的活跃度。

如何合理地定义Engagement

如果你要用Engagement来衡量网站用户的活跃度，并且把它作为一个长期的指标进行趋势分析，那么首先在定义时必须确定那些被归为 Engagement的行为是相对固定的，在短期内不会发生变化。如对于一个论坛而言，“发帖”和“跟帖”行为是持续不变的交互行为，这些可以作为识别用户是否参与的标准；而网站中的一个活动按钮或推广链接则不能作为识别Engagement的标准，因为推广活动一般是有期限的，在下线后用户的Engagement就会相应的降低，这样就会导致Engagement的不稳定性，也就失去了分析的意义（或者你只是为了单独分析该次推广活动的用户参与度，那另当别论）。

这里先举两个例子，显示电子商务网站定义Engagement的例子：

用户的注册行为；

用户放入购物车或购买行为；

用户的售前和售后的反馈行为；

用户对商品的评价。

再来看一下微博中可以定义为Engagement的一些行为：

用户注册行为；

发布新微博或转发微博；

发表对微博评论；

关注新的用户。

可以看到电子商务网站的Engagement的定义与微博大相径庭，这也是为什么说Engagement是一个非标准化的度量的原因，网站间无法比较各自 Engagement的优劣。所以Engagement应该作为网站内部分析指标，只用于衡量网站本身用户的活跃度变化趋势。

即使是一个网站的Engagement也有不同的定义方法，比如我也可以在微博的Engagement定义中加入“收藏微博”的动作，所以我的建议是对于Engagement的定义，一个网站应该在一开始就形成一个标准，如果网站的性质没有发生大的变化就不要轻易修改定义，不然即使是作为网站自身的评价指标，它也不能很好的发挥作用。

需要注意的是，Engagement只是用户的一系列动作或行为（Actions），并非网站的产出结果（Outcomes）。只能用于衡量网站用户活动的频繁度，进而分析网站用户近期的活跃程度，而不能用于衡量网站的效益。

基于Engagement Index的分析

这里首先推荐一篇Eric T. Peterson在Web Analytics Demystified上的文章——How do you calculate engagement? ，里面提供了关于Engagement的十分全面和精彩的分析。

分析最好结合实例，所以这里还是以我的博客为例，假如我定义我的博客的Engagement包括以下的行为：

用户发表评论；

收藏或分享我的文章；

订阅我的博客或关注我；

停留时间（Time on site）超过3分钟。

首先涉及到数据获取的问题，其实通过点击流+事件追踪，大部分用户的行为还是可以跟踪得到的，这里就不再详细展开了。

接下去就是如何衡量Engagement。衡量Engagement的指标叫做参与度指数（Engagement Index），既然我们已经定义好了Engagement，我们就可以通过一些方法计算Engagement Index。这里建议以Visit（或者叫Session）为单位计算用户一次访问是否Engaged，而不是计算每个Visit中Engage的次数，因为我们无法对某些行为精确定量它的次数，也许发表评论数可以计算次数，但是停留时间的长短就无法用次数来衡量，所以这里统一只判断一个Visit是否发生了上述的任何一类行为，发生则认为这次访问为Engaged，我们可以用一段形象的代码来解释：

1 boolean isEngaged(Visit) {

2 if ( comment || share || feed || follow || time_on_site>=3min )

3 return true;

4 else

5 return false; }

通过调用上面的“函数”我们可以获取到哪些Visits是Engaged Visits，就可以计算出总的Engaged Visits的数量就是Engagement Index的值。但是单纯的一个Engagement Index似乎没有对比的价值，我们可以通过计算跟网站总Visits的比值获取用户的参与率（Engagement Rate）：

Engagement Rate = Engaged Visits / All Visits

也可以用下图来对比Engaged Visits与总Visits的关系：

也可以分析定义Engagement中各类行为发生的比率：

这里需要注意的是这个饼图中Visits的总和并非上面计算得到的Engagement Index，因为一个Visit可能既发表了评论，也订阅的博客，那么这个Visit就会被重复记录到两种行为的比例中。根据Engagement进行细分来源的的分析上面推荐的Eric T. Peterson的文章中已经介绍的非常详细，有兴趣的朋友可以自己去看下。

如果你觉得还意犹未竟，认为那些用户参与的行为并非同等重要的，或许那些订阅了博客的用户或者在博客发表了评论的用户应该显得更加活跃，那么可以给这些行为赋予不同的权重，Sidney的博客中有过相关的介绍——网站分析的最基本度量（8）——Engagement，如果你想让权重显得更加客观和精确，可以使用我之前介绍过的层次分析法（AHP）来计算每个行为的权重，那么Engagement Index就是相应的加权和（定义每个Engaged Visits的数量为E_i，每个Engagement行为的权重为W_i）：

分析Engagement的意义

有时我们需要细分，而有时我们需要将指标进行聚合来评价总体表现。所以建议不要试图使用次数去计算每个Visit的Engagement Index是多少，次数会由于网站设计上的变化（页面布局、交互按钮的设计等方面的变化）及行为实现的多样性（如果你要发条微博，那实现的途径太多了）而呈现不稳定状态，使用Visits来度量的Engagement更具可比性，最总我们只是进行汇总来衡量整个网站的Engagement情况。

那么Engagement对于网站来说到底有什么用呢？这里有个最简单的例子，当一个电子商务网站发现近几天的订单量并无发生显著的变化，但是用户活跃度却大幅上升，原因是某款商品的质量存在问题，大量的用户向网站反馈和抱怨，这时如果网站通过分析Engagement监控着用户的活跃度，那么就可以迅速地发现并作出反应。其实这个例子也说明了对于某些网站来说Engagement越高，网站的绩效不一定越好，两者没有直接的联系。

我们已经步入WEB2.0的时代，用户与网站间的交互更加频繁，网站需要更多活跃用户来增加自身的活力，用户的参与有效地提升了网站与用户之间的信息互通，为网站带来活力的同时也为网站创造着更多的信息，而且很多都是网站本身忽略的或者无法提供的有价值信息，而这些“用户智慧”的注入无疑可以为网站带来更多的关注。

» 本文采用 BY-NC-SA 协议，转载请注明来源：网站数据分析 » 《用 Engagement衡量用户活跃度》

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果抓虾

Feed enhanced by Better Feed from Ozh

搜索引擎优化和用户体验

seasun — Fri, 18 Jun 2010 17:52:35 +0000

在一般情况下，搜索引擎优化与用户体验是相辅相承的，优秀的搜索引擎优化可以提高网站用户的体验，而一般来说网站用户体验比较好的网站，其网站搜索引擎优化的表现一般也不错。不过在实际开发中，搜索引擎优化和用户体验又存在着一些矛盾。

搜索引擎优化和用户体验是“矛盾”的

相信不少做SEO的朋友在和用户体验的同事沟通时会遇到这个问题，谁都有自己的道理。SEO希望这里要增加关键词，那里加粗，这个地方很重要坚持放在头部，放在左边，用户体验部门不高兴了，因此一些公司就取决于谁在公司的话语权大，这显然是不合理的。当然，这里我不得不提一些优化公司，真是放开手脚干，承诺客户除了标题，不更改任何地方，自然把对用户体验的伤害降到最低，他们靠什么？一招就够，狂发外链。

问题的根本不是哪个重要不重要，而是Seoer对用户体验的了解不够，同样用户体验部门同事也一样，在他们眼里，SEO就是“敌人”，就是要增加关键词密度不管用户，就是原本非常好的实现效果需要放弃，比如flash，js，ajax…面对最近越来越多的用户体验字眼，我觉得并不是用户体验取代SEO，或者说大家把重心转移到用户体验，SEO无所谓了，只是用户体验的最近关注度增长要远远大于SEO。

搜索引擎优化和用户体验是“不矛盾”的

SEO的目的是为了从搜索引擎获取更多的流量，用户体验是为了把流量更多的转化。而且目前越来越多的seoer意识到不仅仅需要流量，更需要转化，也就是方向是一致的。而一直有个说法就是，用户体验好的网站搜索引擎也会更加关照。

优秀的SEOer能控制搜索引擎流量的质量，也就是能提高用户体验，比如把绝大部分的keywords都优化到首页，和把关键词均衡的分布，长尾关键词用详细页优化。

优秀的用户体验师能提高网站搜索引擎排名，比如tag，相关链接，电子商务网站中常用的相关商品推荐，一个背包，底部可能会有好几个带着相关关键词的商品，这不给你增加密度了吗？

显然，一味的相互说怎么怎么样，只能说明你不够优秀。

未来的趋势

SEO和用户体验相互的交集越来越多，“门槛”降低，意识增强，相互的影响越来越大。seoer希望带来的流量能最大的有效转化，这样才有意义，才能让seo行业更健康；用户体验师希望能有更多的流量，谁愿意为了一个产品只有100人使用而抓破脑袋谈用户体验，没有用户，哪来的体验？更给我信心的是，堆积关键词等严重影响用户体验的优化手段效果越来越差，单纯为了排名的原创越来越失去价值。

因此，别再你喘我一脚，我咬你一口了，我们是朋友！

© 我想网 Akon 所有 , 2010. | 永久链接 | 1条评论 | 提交到 Google Reader 鲜果抓虾

Feed enhanced by Better Feed from Ozh

9个可用性及Ux陷阱：了解如何避免它们

seasun — Wed, 16 Jun 2010 13:45:32 +0000

随着互联网发展的日渐成熟，但仍有很多存在的问题影响着可用性及用户体验，诸如“设计”。

如果我们想继续保持领先的设计曲线：让客户更为满意、用户更加幸福，我们就必须确保我们及我们的客户都了解这些要点，以及如何解决这些问题。

当我们在设计或开发一个网站的时候，常常碰到的问题都是以下几点：

设计

兼容性

内容

可用性

…当然我也详细您肯定还可以列出更多的，但是还是让我们继续阅读吧。

请记住Jacob Neilsen曾经说过的话：“糟糕的网站就像一个脾气暴躁的推销员。”

1. 难以找到你感兴趣的内容

下面这些知名站点不仅设计陈旧，而且易用性不佳

irs.gov

boink.com

reddit.com

为什么不用更有意义的表单名字?

那几个旋转的骨牌原来是导航…

reddit.com，我喜欢它的概念，但内容太令人受伤。

我们常常在从一个网站查找内容的时候发现困难重重，比如那些政府站点，既然我们都知道内容为王的道理，我们就不应该让用户为了查找一点内容而翻遍成千上万的菜单。

解决方法

简而言之，就是将你认为重要的信息放在容易找到的位置。如果你的站点有海量内容：

将各种内容放在它们应该放的栏目。

让你站点的搜索功能工作正常。

提供清晰的标签和目录。

让重要的内容重点显示。

提供本地化命名。

另外，使用 blur 测试，将你的设计草图做比如 10% 的模糊处理，这样你就能发现那些需要突出显示的内容是否真的突出了，还可以使用 IntuitionHQ.com 一类易用性测试服务。

2. 蹩脚的布局

qq.com

allterrain.co.nz

craigslist.org

典型的中文门户风格

到处都是文字，到处都可以点击

好用吗？有点，好看吗？一点也不。

内容难以查找的另一个原因是布局，将所有的东西放在首页，到处都是 Flash 广告，满眼都是文字，密密麻麻，挨挨挤挤。解决方法是请一个 Web 设计师将你的布局做一个设计。尽管有不少布局蹩脚的新闻站点仍然非常成功，但让它们成功的不是它们挨挨挤挤的布局。

3. 让人摸不着头脑的导航系统

lesailes.hermes.com

billyconnolly.com

pizzacaper.com.au

原来那些橙色的，带问好的竖条是导航用的。

他们说，片图抵千言…

看上去挺漂亮，但 Flash 和 HTML 两个版本对用户来说有什么意义？

人们通常对导航菜单有一个约定俗成的期望，然而我们遇到很多奇怪的导航，常常让我们摸不着头脑。解决方法:

先画个导航菜单草图

让它有点逻辑

找些人问问，他们希望在什么位置找到特定的信息，按他们的说法安排菜单

考虑一下你的站点的目标用户

做易用性测试

使用面包屑导航，并确认前进和后退按钮起作用。

4. 蹩脚的菜单设计

godaddy.com

microsoft.com

vodafone.co.nz

到处都是导航菜单，但什么都找不到。

微软的

最令人关心的价格信息却无处可查。

很多站点的导航菜单布局十分不合理，重要信息被掩埋在很深的菜单下，重要信息需要挖掘很久才能找到，广告和内容搅和在一起，诸如此类。使用分析工具，分析什么内容最受欢迎，用户在哪些页停留时间最长，哪些内容被频繁阅读，将这些内容放在容易被找到的位置。

5. 缺乏进度指示

dell.co.nz

Dell – 看上去并不难

但这些滚动滚到哪里才是头。

很多站点对于用户的操作进度，缺乏指示，或者指示混乱，假如你在进行一个长时间的操作，却不知道后面还剩下多少步，你会很容易半路放弃。

解决方法

人们无非想知道他们目前所在的位置，以及后面还余下多少步，告诉他们就是。

6. 无法反馈信息

facebook.com

sitevalley.com

alexa.com

压根没有信息反馈功能

可以反馈信息，但很难找到

无法找到信息反馈功能

Facebook 或许有理由不提供反馈，它们的用户量太大了，但小规模站点都应该提供用户反馈功能。可以是 Email，反馈表单，或是论坛。

7. 滥用社会媒体网络功能

这样的数字很让人伤心。

虽然，如今每个人和他的狗都有 Facebook, Twitter, Digg, LinkeIn 账户，但99%的人事实上从来不更新他们的内容，如果你在网站上提供了自己的 Twitter 链接，且实时显示自己的跟随数目，如果数字是1或者0，就太丢人了。

8. 太多选项

dell.co.nz

microsoft.com

reddit.com

晕了

这一大堆选项让人头都要炸了

为什么要有这么多选择

选择多未必幸福，如果苹果有什么东西值得我们学习，那就是，人们不必去做过多选择，或许，几个基本的选项已经足够，或许，一个适合我的选项也已经足够。保持简单，让用户少做选择，是良好用户体验的一个重要因素。

9. 工作不正常的链接，按钮与表单

错误的链接，不存在的页面，无法正常工作的表单，诸如此类，对于这类问题，除了测试，还是测试。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果抓虾

Feed enhanced by Better Feed from Ozh

20条女性购物心理助您达成订单

seasun — Thu, 27 May 2010 04:44:11 +0000

说女人的钱好赚，女人买东西冲动，女性商品利润高，男人赚钱女人花…
可是好多电商遇到的问题是，女性用户格外挑剔，女人砍价砍到你想哭，女人磨起来你宁可不想卖了，女性用户更容易八卦得到处说你不好，甚至无理取闹…
有的人觉得女性购物好做，有的人觉得女性购物做起来好难。女人的生意到底怎么做？

在现在众多的电子商务公司里，是否有一个男性掌门人，或者一位男性，是真的可以设身处地的考虑女性的购物心理？男人真的能够了解女人嘛？

以下是个人对女性购物的看法，不代表全部女性，女人心，海底针，你捞不到，我也捞不着；没有太多数据，女人的随意性，无法用太多理性数据分析，凑合看看吧~

一面面俱到，精于计算
女性精于计算，不同于男性。男性会非常直接的计算产品的性价比，而女性则计算得格外细致，几乎面面俱到。包括邮费（是否可以砍邮费或者直接包邮）、商品面料质地与颜色、是否变形或脱色、是否有买赠活动（没有也可以开口要嘛，或者也可以多要一份~）、卖家态度（态度好买东西也会非常爽快，俗称钱花出去至少换个开心）、是否可在某渠道找到优惠券、可否找到组织团购….等等。
女性精于计算，并为此耗费大量精力，虽说为了节省那么点儿钱不值当的，但是女人也常常会乐死不疲，此快乐也许是男人所无法理解的。
而女性的此面面俱到，经常会不经意的在某处发掘出不佳评论，不买；如找不到任何优惠，不买；如不包邮也没赠品，不买；卖家说话稍有不慎，不买…直让卖家叫苦不迭~

ü 服务态度好，可以最大限度降低挑剔率
ü 在合适的位置释放合适的优惠，不可多，不可少
ü 人性化再多一些，营销理念再精神一点儿~
ü 进行全网公关维护

二炫的社会生活本质
常见女性朋友跟人“炫”说，看看我买了这个，今儿这衣服是昨儿某商场买的…或者见女性朋友见另外一人，诶你这鞋在哪儿买的啊，多少钱？诶你用什么睫毛膏啊…
爱炫与互相比较，并不是单纯层面上的虚荣。而是一种社会化的生活本质。想想看，不管一个男人或者是女人，在每天出门前，是不是都要整理一番，不过女人是整理+打扮，多了个步骤而已。男人也无需五十步笑百步。而当你知道今天彻底不用出门也不用见任何人时，也就是生活暂时脱离社会，自然就不会“浓妆淡抹总相宜”了吧~
那么女性在社会中的生活状态与身份，也需要在外表中充分体现，同时，也需要他人在眼神或言语上的外在肯定（尽管有时知道听到的未必就是真实的，但是好听的谁不爱听，哈~）。
女人显示美有两大特点，一是穿的非常简单，以体现自己的自然美与出众；二是讲无数华美的东西集于一身，自己还能压得住，以显示自己的貌美出众。现在看来，仍是后者居多。
在现实生活中炫不够，便在网站上炫，管你是炫身体还是炫身体外的内层皮儿，炫的人总是有人关注的，这种关注的反馈远大于看到各种硬软广告，具体数字米有，但是绝对够远，嘿~朋友或周围的人推荐，特别是已经购买者的推荐，比陌生商家的信任度要高很多；主动去关注的信息是积极正向的，而被动收到的各种促销打折信息只能让人愈发腻烦。

ü 进行“炫”心态类活动
ü “炫”的各种营销手段（此处可略去一篇文章，哈哈~）

三叽叽喳喳的女人世界
爱交流时女人的天性，就跟爱唠叨的媳妇儿，爱啰嗦的母亲一样，你无法阻止她们的交流天性。让女性因为某话题，特别是某消费品进行互动交流，从而导致最终销售，效果比广告投放好很多。如何发起讨论话题，是我们要考虑的事情，再者，就是如何把讨论（论坛中俗称盖楼）引导至正确方向，把已经盖歪的楼“扶正”。

ü 社区公关策划与长期维护
ü 口碑营销

四相信你是女性最纯粹的本质
有一个最明显的男女区别，当一个商家叫卖，某某优惠啦~一拥而上的大部分都是女人。因为男人的第一个反应常常是，骗人的，假的…等等，先以质疑的态度来看待问题，然后让很多事实来证明确定是优惠，才会去买回来（内时候不一定有了）；而女性的第一反应通常是相信你，一拥而上先买下来，然后美滋滋的去炫耀，若发现被骗，会不遗余力的要求退货或者闹（虽然很多在卖的时候都说不给退），闹的不是内几块钱，而是一个心气儿。
所以现在的女人也多少有些改变：1、相信你依旧是相信，买错了上当了也不一定去找，大不了下次不来，也告诉周围的人千万别去（那你可惹麻烦了，这好事不出门，坏事传千里啊）。2或者哪天心气儿一上来，去了不是为了退，就是为了闹垮你，绝对让你叫苦不迭，内时候你给退，人家还不一定干呢~3、心态最好的新时代女性，也会这么做，买了东西，再不去看一样的或者相似的东西，免得自个儿找气受，就觉得自个儿得便宜了一直美美的最好。所以男人若说两句好听的，即便谁都知道是假话，也是受用的，是一个理儿。

ü 做女性市场，打感情仗
ü 别让她算清楚自己里外里都是一个帐

五贪小便宜的精神高度
“贪小便宜吃大亏”对于女人来说，非要到最后吃亏了才想的起来。再说，也不是每次贪小便宜都吃亏吧~买东西怎么都是花钱，砍两块是两块，能要赠品就多要一份，不就是开个口么？叽歪两句，脸皮别那么薄而已。我也有过为了小赠品去买个东西的时候，为了凑买赠额度多买点儿东西的时候，就好像现在很多人为了麦当劳的水杯子去买大号套餐一样嘛~
你可不晓得，如果邮包里放了一个小礼物，是额外没有跟买家说过而主动送的，就算是最破烂的不值钱的没品位的脏兮兮的无法言喻的小玩意儿，都是一个额外的“surprise”，这种精神高度的快乐，怎能降低到物质层面来数据统计呢？

ü 买赠活动真实奏效
ü 不告诉她的神秘小礼物
ü 购买后二次营销的着眼点

六女为悦己者容
“女为悦己者容”，在中国格外奏效。国外大女人新女性较多吧。常常看到国内电视剧中的“深闺怨妇”凄凉般的言语“打扮漂亮给谁看哪”，就可见一斑~
既然为某男容，那么考虑清楚对象，她可能为哪个男人容？别以为仅仅为了爱人啊，那你就把女人想的太狭隘了。为谁容，这个谁，已经包括：家人、长辈、公司同事、老板、玩伴儿、姐妹等等。想清楚这个谁，再来告诉她，买这个，可以让这个谁如何如何即可。

ü 为商品写故事
ü 引起话题
ü 专题策划

七女为己容，新女性
越来越多的女性开始独立，成为新时期女性。此独立可不仅仅是经济独立，而是整体的生活状态与精神状态。她们认为日子是给自己过的，自己开心最好。于是更多的女人开始学会爱自己，懂得自爱的女人才值得被别人爱。
买份礼物给自己，衣服是穿给自己的，鞋子舒服不舒服只有自己最清楚…

ü 为商品写故事
ü 引起话题
ü 专题策划

八体会女人话语背后的情绪
别以为女人说要分手就是真的分手，她就是生气；别以为女人说老子不干了，或者大喊不活啦，她真的会去破罐子破摔？女人打来电话怒气冲冲的要退货你给她顺利退货了就是她最满意的结果？非也
她想展现给你的，不是我要你如何如何，而是，我遇到麻烦了，请你来帮帮我。你要学习理解，女人心口不一，女人的情绪化，女人需要被重视与关怀，女人遇到问题时候的第一反应…
你仅仅需要做的是，在她出现问题的时候，别管她有什么要求，找到问题根源所在，解决这个问题，而非满足她。爱她，并非一定要惯坏她。
就好像她不讲理胡闹时候，你要先安抚她的情绪，之后再来告诉她，对与错的道理；同理，当她要退货而怒气冲冲的时候，让她情绪平静甚至让她开心才是你最重要的工作，之后，你才有机会告诉她，不是产品本身有问题，只是一个小小的使用不当。

ü 客服很重要，特别是售后
ü 让客服更加了解商品，与可能出现的问题包括其解决方案
ü 让客服主动且智慧
ü 如何利用CRM最大限度降低退换货率

九在扎堆儿中寻找归属感
一进商场，很多女人奔到人最多的“花车”，或者干脆去动物园人挤人得开怀大笑，而淘宝也出现搜索的功能之一，按照销量多少来给商品排序，女人，在扎堆儿中寻找归属感。
女人扎堆儿并非全是为了购买，可你却要通过让女人扎堆儿的方式实现购买

ü 让你的网站看起来比较热闹（比如添加销售动态list，此处又可省略一篇文章，哈~）
ü 各种top list，根据情况在合适的位置添加
ü 用某些销售方式激起参与热情（竞价、限时、团购等等）

十善于自欺的智慧
女人喜欢听好听的，喜欢你的恭维，所以你便说男人不坏，女人不爱？所以你便说女人容易欺骗？非也
其实很多时候，女人心里明镜儿的，她什么都知道，她就是不说
日子过得好好的，干吗什么都捅破，干吗为了追个真实对错的所以然，而让自己找不痛快

大条的女人过得会比较舒心，睁一只眼闭一只眼的女人比较聪明，学会忘记得女人比较幸福
1“哎呀我太胖了，这个颜色不适合我”
“你哪里胖，一点儿也不会啊，身材多好”
“我腰多粗啊，有赘肉”
“那才有女人味儿呢，看你的腿多细，这裙子显腿长嘛”
2、传说中的一句话：如果一个女人不漂亮，就夸她身材好；如果身材不好就夸她有气质；如果没气质就夸她可爱；如果不可爱就夸她幽默，如果不幽默就夸她有内涵……
都没有你还可以夸她年轻，年纪大的你还可以说她保养得好。反正总有你能找出的可夸之处

ü 学会增加商品的附加价值
ü 学会赞美买家，在你所能及的各个方面（别玩儿大了啊，适得其反，我可提醒过你，哈哈）

十一服务大于money
低级的商家卖产品，高级的商家卖服务。只是个卖东西的，那就别怪人家追求性价比性价比，你的性无非仅仅是商品质量，而我们要做的，是在性上面添加更多的附加价值，比如很重要的一点，服务。
一个姐妹告诉我，某家spa按摩，两个小时不到80，好便宜；我随后问，环境好嘛？有包间嘛？带洗浴嘛？有男技师嘛？…其实人家卖的商品本质无非是按摩而已，而客人真正去的原因，可能确实很多理由的叠加。那么买家来我们网上，除了看商品本身，还看什么？
让买家在很多小细节上感到满意（客服态度很重要），是把她留住的根本。想用便宜高质量的商品留住客人总是不现实的，一样的东西总有更便宜的卖家，不要让市场形成追求低价的恶性循环。

ü 产品（互联网产品）差异性
ü 提高商品的隐性附加价值
ü 让她感觉备受呵护
ü 打造名牌卖场，等同于打造名牌商品
ü 巧妙利用积分与VIP权限

十二共性与差异性
有的女人最讨厌撞衫，路上遇到跟自己穿一样衣服的女生，能难过一整天，以后再也不穿内件衣服；有的女生为了表示两个人关系好，特地去买一样的衣服来穿；而且大部分女生，两件事儿都干过吧~哈哈，我也不例外
女人是善变的还是复杂搞不透的，其实都不是，挺简单的，就是随性而已，没那么多可分析的为什么，这为什么干吗你不去引导？

共性：
ü 提高客单价（商品搭配，情侣装、亲自系列、姐妹专场等等）
ü 增加活跃新会员（推荐你的身边人加入，此处省略一篇文章）
ü 整对儿商品拆卖（寻找撞衫的有缘人）
差异性：
ü 个性定制的魅力
ü 同样的商品进行不同的搭配
ü 细节决定成败

十三冲动性忠诚度
男性喜欢的网站，互联网产品设计要好，要流畅，要专业，用户体验要出色；女人喜欢的网站，啥都不好米有关系，只要真喜欢这东西，东西的展现图片啊理念啊啥的好，就是想买的话，可以突破无数重围，最终达到购买的目的。是冲动还是是高忠诚度？

ü 做女性市场，图片是王道
ü 无论“色”“情”，缺一不可

十四羡慕还是嫉妒
很少有女人真心的赞美或者承认羡慕另一个女人的，当男人说某女人多好多好的时候，即便是事实，旁边的女人依然会撅起嘴来。男人喜欢有女人味又性感的女人，女人一边穿着裹胸吊带黑丝，一边喜欢春春类型女人。
女人对女人的喜欢与欣赏，你很难说明白是羡慕还是嫉妒。关键问题是，很少有女人真正愿意正视自己内心潜意识中最真实的态度与感受。（JMS表骂我，呜呜呜呜…）

ü 讲女人的故事给女人听
ü 巧妙利用此心理，尺度把握好，小心走火
ü 告诉她，男人喜欢这样的女人

十五善于整合
若说男人比较专注，适合成为某领域大拿，那么女人比较发散，又善于整合。女性高管若非很男性化的强势，则必然有八面玲珑，手段刚柔并济的特点。女人中的强势女人，知道跟什么人说什么话，就好像在什么场合就穿什么衣服一样，既招人喜欢又让你难以招架。只要能够得到最终胜利的结果，她们可以隐忍、包容、迂回，她们进可攻，退可守，进退自如。

ü 转化对立方式（让她的不满情绪变成对你最好的建议）
ü 她们很出色，常常聪明又多金，若能够维护好，则你赚得绝对不是小钱，若不能承受，劝你不做这单生意为妙
ü 她会给你带来更多的大客户
ü VIP 式贴心的谨慎服务
ü 告诉她也告诉你自己，她是你的女王

十六大女人小女人
女人常常愿意充当不仅仅一个角色，在大女人还是小女人间游移不定，是女人们一生摇摆不定的因素。工作中表现强势，遇到问题也可撒娇找人帮忙；花钱出去享受 spa，回家也精心为家人煲汤…很难为一个女人是大女人还是小女人定性，她们自己呢？当然，视心情而定，没任何理由

ü 女性关心的节日或季节的专题营销
ü 女性代言
ü 产品背后代表的生活方式（让她自己来发掘）

十七购物的精神高度与物质高度
蜗居里说的大概是这个意思：不要把女人逛街的快乐，从精神高度降低到物质高度。
男人总是把女人买东西同物质、贪财等等贬义词联系在一起，其实女人逛街的快乐，常常是男人无法体会到的某种精神上的快乐。但是有人将女人逛街跟男人包小三搁一起对比，我不置可否，不予评论。至少女人逛街不伤害别人，小三是伤害家庭的。嗯嗯（跑题）
那么我们作为商家，仅仅满足购物者的物质高度，是多么低的要求啊。想做大，做好，我们就亦需满足购物对女人精神上的高度要求，让她们开心愉悦，并且从中获得某种满足感。

ü 商品本身的附加值
ü 商品-品牌，衍生至生活方式
ü 妙用SNS
ü 全网整合营销，打造品牌价值

十八明星模仿秀
某杂志热推款，某韩剧中的款式，某明星大爱小物等等，只要一搜索这些词儿，就会跳出很多价格不菲的商品。说实话，如果没有这些元素，只看商品本身，真挺一般的，但是女人就好这口儿，你别问我为什么，照葫芦画瓢就好。

ü 与杂志合作，再将其搬至网上做seo
ü 某明星代言,哪怕有个活动能赞助点儿啥，拍俩照片一挂也有噱头（小心版权）
ü 实在不成，找个不那么大牌的模特、美女、网络名人，博客推广下（名人也是包出来的）
ü 买手选品大学问（可省略一篇文章）

十九星座魅力十个女孩子九个热衷星座。很多女孩子见别人没谈几句，就先问问你什么星座呀，然后很抱歉，你就被定性了。不说数字，确有如此证明，做N个专题同时销售同一商品，根据星座列出的专题销售量大于其他。当然，跟专题策划应该也有部分关系。

ü 制作星座专题
ü 买手选品
ü 为商品赋予星座元素
ü 礼品专题很合适

二十别问我为什么，知道我也不告诉你

我写这文章之初还挺美，写得过程中，措辞断句是，越来越心里发慌，实在怕被JMS鄙视。我干嘛要把女性们想什么说出来啊。所以格外删除了好些个东西
实在抱歉，别问我女人为什么这么想，你知道我们这么想就行，照葫芦画瓢的去做就好了
别问我太阳有多高，别问我星星有几颗，有小妞儿说了，女人最大的特点就在于，你根本不知道她在想什么，你可以问千万个为什么，靠理智思维与理论数值也不一定解释得通

谢谢啊，我们真的在太多的时候，凭感觉，而非理性。
别跟我拿数据分析，别跟我说谁对谁错，别跟我说必须如何，非什么不可。就是任性不讲理，就是善变，就是情绪化，就是不理智…可这就是女性，还有女性独有的魅力

你不相信第六感的魅力嘛？因为你没有嘛~哈哈~

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果抓虾

Feed enhanced by Better Feed from Ozh

触摸手势参考指南之第二部分：用户操作

seasun — Thu, 27 May 2010 04:38:32 +0000

第1节：基础操作

切换模式：按压，例：手机解锁

打开：双击，例：打开UC浏览器、手机QQ等

选择：单击，例：比如接电话时单击绿色小电话图标即可

第2节：目标导向的操作

调整：按压并拖拽

删除：拖拽，将目标拖向垃圾箱或屏幕外

复制：单击要复制的目标，然后单击你想复制到的其他地方，将该目标复制

移动：拖拽目标，移动到某处后松手，可使用单手指或多手指

轻弹某目标，让其划动到某区域

按压并单击：一个手指放在目标上，另一个手指单击屏幕其他地方，将目标移动到该处

旋转：两个手指按住屏幕，然后顺时针或逆时针旋转

缩放：捏，两个手指捏到一起可实现缩放功能，也可同时使用5根手指捏到一起

放大：展开，两个手指先捏在一起，之后反方向弹开，实现放大功能，也可以同时使用5根手指展开

调整视角：旋转

调整视野（缩小）：捏，或者双击目标

调整视野（放大）：展开，或者双击目标，一般视野最大化后再次双击，可缩小视野；

显示（隐藏的）功能：单击，比如手机QQ好友分组，单击即打开

按压并单击

双击

单击屏幕特殊角落

列表间移动：比如歌曲列表里移动，想听下一首歌时

两个手指拖拽，或者旋转

第3部分：导航

摇动：用整个手掌拖拽

滚动：拖拽滚动条，可显示更多条目

两个手指拖拽

按压：你有按压实现滚动的例子么？

快速滚动：轻弹，这个用的比较多，比如翻看手机中的照片时

单击，滚动正在进行中时单击屏幕，可实现快速滚动

拖拽：拖拽滚动条实现快速滚动

第4部分：画图操作

接受：用手指画一个对号

剪切：用手指画一个斜杠

寻找帮助：用手指画一个问号

拒绝：用手指画一个“X”

取消：用手指划掉某区域

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果抓虾

Feed enhanced by Better Feed from Ozh

6种提高博客阅读体验的方法

seasun — Thu, 27 May 2010 01:17:15 +0000

博客的阅读体验有很多方面，如果您要建立一个受欢迎的博客，那么，你可能要善待你的读者，提高阅读体验，这样会提高他们再次访问你博客的机会，让他们成为你的博客或网站的常客之一，当然你的网站如果可以注册的话，还可以成为你的注册用户之一，下面我就提供较为实用的提高博客阅读体验的6种方法。

1. 简短明了的博客介绍。

这通常被大家认为是没用的，或者说不必要的，但不然，其实这样可以让访问者可以清楚的知道你的网站或博客的类型。总结一下格式大致为：

第一部分：网站的目标，即网站的主题内容，比如月光博客在刚建站是写的一篇介绍，月光博客，是一个以讨论电脑技术和互联网科技为主的科技博客。月光博客的目标就是什么什么。

第二部分：网站主的介绍，大致的内容就是我是谁，我现在的职业等，当然你也可以更加的详细点。

第三部分：联系方式和网站说明，这一部分是很重要的，这样读者或访问者可以和你联系，提出意见和自己的想法，对于网站说明也是很重要的，比如我不交换链接等。

2.高质量的博文而不是求最多的博文。

我们知道访问者访问你的网站是想从你的网站里面得到他们想得到的东西或信息，他们第一次来访你的网站大部分是通过搜索引擎如谷歌等，才知道有你这么个网站，所以你一定要珍惜这个机会，有时候即使是同一件事，他们已经在别的网站获知了，但是读者更想知道你（网站主）的个人想法，而不是别人说什么，某某网站说了什么，同时有了想法也要记得定时更新哦！如果你每一天或每一周（建议时间不要太长，这样也很难稳住访问者），同时又是发表不同的看法，访问者就会觉得耳目一新，那么你想没用户都难！

3.偶尔能带有娱乐（幽默色彩）性质的方式去陈述同一件事。

比如我会有很长的时间，我在写我的博客，一直在称述单调乏味的东西，这时候你应该考虑网站是不是应该渗透点具有娱乐色彩的元素呢？写出来让自己和访问你的博客的人可接受的，这样的一段时间里面常客也会来不定期的访问，他们不会觉得乏味，因为你总能给他们带来惊喜，一句话，我的建议是时常能以娱乐的性质给用户带来惊喜，陈述于对自己最近发生了的事的想法！

比如：月光是一个主讲技术类博客，但月光会不定期的给读者带来诸如：我最近去了哪里，还带来了自己的近照等，这种方式绝对是能增加自己网站的个性和特色的！

4.思路清晰，让读者在最短时间知道你要说什么。

这其实很简单，就是当读者看到你的博文的时候不要发现错别字或重复的句子，不要把播客写成博客等，我相信这点要求并不高的！

5.每篇博文能做到表达正确，清楚，简单。

你永远应该要明白，博客并不是以网站主或博客主为主角，读者应该是主角，有流量才是王道。我们写出来的文章是给用户看的，是给用户来打分的，所以能以最简单的方式表达我们意思的，就应该最简单的表达，能700字的，我们决不能写到1000字，你应该清楚明白读者的上网时间是有限的！

6.加强和你访问之间的交流。

就是对用户的留言能做到及时的回复或建立一个能时时交流的论坛等，对用户的建议要细心考虑，对于不足的要加以改进！如：我们知道一个软件公司出来一个产品会建立一个论坛，来交流用户的想法，以此改进产品，其实网站也是产品，也需要交流和不断改进，只有这样才有得到永久的“王道”，最后再祝各位网站主流量多多！

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果抓虾

Feed enhanced by Better Feed from Ozh

我想网 » User-behavior

网站可用性测试全过程

用户成长体系设计思考

用户界面设计中“状态”和“动作”的表达

培养用户的使用习惯

用户界面和用户体验的差别

15 个用户体验设计赏析

内容滚动中的运动视差效果

iPhone 的下滑式刷新

随时随地的提示界面

Convertbot 的圆盘式菜单

SlideDeck 的手风琴式导航

Strongbad 的随机回信

Made By Tinder 的主题色选择

Pixelmator

Riot Industries 的导航体验

Web 上的拖放操作

在 线 Photoshop 的照片堆叠界面

随鼠 而动

双滚动面板

基于物理动 力的滚动

至 简的界面

Peter Skillman 浅谈用户体验创新

移动的机遇

简洁，简洁，再简洁

设计上的 3 个 tips

必要的 4 点

写在最后

JS下拉菜单实现与可访问性的思考

如何量化用户体验

什么是用户体验？

目标分析工具的必要性

衡量用户体验

显示你的结果

对你的分析发挥创意

实际应用

故事：用户凭什么跟你走

亚马逊用户体验改善

一篇UI 规范文件

12个由于支付过程不友好导致的客户流失问题

关于用户体验量化的一些事

用Engagement衡量用户活跃度

如何合理地定义Engagement

基于Engagement Index的分析

分析Engagement的意义

搜索引擎优化和用户体验

9个可用性及Ux陷阱：了解如何避免它们

1. 难以找到你感兴趣的内容

2. 蹩脚的布局

3. 让人摸不着头脑的导航系统

4. 蹩脚的菜单设计

5. 缺乏进度指示

6. 无法反馈信息

7. 滥用社会媒体网络功能

8. 太多选项

9. 工作不正常的链接，按钮与表单

20条女性购物心理助您达成订单

触摸手势参考指南之第二部分：用户操作

6种提高博客阅读体验的方法

在线 Photoshop 的照片堆叠界面

随鼠而动

基于物理动力的滚动

至简的界面