一行代码给你的Blog添加下雪效果

前段时间冷空气突袭的时候,据说郊区密云的雪积得挺厚,但北京城内除了飘了一点小雪粒,毫无动静。应该是气温过高所致,我在慈云寺桥附近拍下的照片可以很好的解释这一点。

不过最近WordPress.com倒是提供了一种让你在Blog下雪的方法(原作者是Scott Schiller),只需要将这行代码加在你Blog的任何位置即可,不需要额外的负担:不用自己维护图片和JavaScript文件(WP.com会帮你出带宽费用,哈哈~)

注意:如果你的Blog不支持JavaScript,则无法使用这一效果,抱歉。

引用代码如下:

http://s1.wordpress.com/wp-content/plugins/snow/snowstorm.js

如果希望拥有像我的Blog这样的效果,即让雪停留在某一固定高度,例如我现在将雪停留在导航栏上,只需要引用我修改后的js即可。为了不影响加载速度,放到</body>前面即可。

所有TES主题用户都可以直接使用这个代码:

var aw_snow_jssrc = '%3Cscript type="text/javascript"';
aw_snow_jssrc += 'src="http://vosforever.app';
aw_snow_jssrc += 'spot.com/static/snow.js"%3E%3C/script%3E';
document.write(unescape(aw_snow_jssrc));

其它主题用户,如果希望改变雪落下的位置,可以使用这个代码:

var customizedHeight = 0;
var aw_snow_jssrc = '%3Cscript type="text/javascript"';
aw_snow_jssrc += 'src="http://vosforever.app';
aw_snow_jssrc += 'spot.com/static/snow.js"%3E%3C/script%3E';
document.write(unescape(aw_snow_jssrc));

同时,你可以根据你的页面导航情况自己定义customizedHeight的值,单位为像素,代表雪停留的位置与页面头部的距离。如果设为0,则落下的雪花会停留在页面最底部。

给页面加上Loading效果最简单实用的办法

虽然现在的GMail已经看不到这个效果,但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了我自己的WordPress主题TES中:

其实我的方法非常简单,也可以说没什么技术含量,甚至还不支持IE6,但据我长期的观察,确实非常实用的。Analytics的统计数据表明,加入了这一效果之后,用户的“平均停留时间”的确有所提高。可见,一个“正在加载”让许多用户都有更多的耐心等待,而不会因为屏幕空白太久而不耐烦地离开。

最近,又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下:

首先,在页面的最上部输出一个Loading文字,比如“正在加载”,用div标签包含,并给它一个id,比如loading:

<body>
  
正在加载

你可以直接放到页面的<body>标签后面,亦可以用script.write输出(如果你有SEO洁癖的话)

然后,在你的样式表中,对这个loading设定一个简单的样式:

#loading{z-index:1;padding:5px 0 5px 9px;
background:#c44;left:0;top:0;width:90px;
color:#fff;position:fixed}

接下来,在你<body>标签闭合之前,将这个loading隐藏掉就可以了。最简单的方法是输出一段<style>标记:

  document.write('#loading{display:none}');
</body>

如果你有jQuery之类的JavaScript库,就更方便了,例如jQuery可以使用:

  $('#loading').hide()
</body>

这样,当页面完全加载完毕之后,loading就隐掉了。

对于WordPress博客,如果你对页面代码没有太苛刻的洁癖,我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端,你的“Loading”会飞快地出现,用户会觉得你的服务器响应非常迅速。然而,如果你从各种不同的域名下先加载几百kb的JavaScript库,估计用户在你的“Loading”出现之前就已经关闭页面了。

最后,希望这个老土的技巧能帮到你:)

官方发布的WordPress用户体验调查报告(PDF)

也许有很多人为WordPress在2.3之后的管理界面跳跃赶到奇怪。的确,从2.5引进了全新的配色设计之后,在2.7又把“上-下”导航换为了“左-右”模式,这让我在使用2.7(SVN版)的初期也感到非常不适应。

不过,今天看到WordPress官方公布了其原因:这次的修改的依据是一次非常专业的用户体验跟踪测试,而且Automattic的用户体验团队为了避免收集到的部分意见可能给整个社区的需求造成“失衡”,聘请了Ball State大学CMD(媒体设计中心)的专家一起进行了两轮(5月和7月)用户体验跟踪测试。

这里可以看到一份非常详细的调查报告。(PDF下载地址,请自行穿墙)

我最近太忙,扫了一眼,截几张有趣的图如下。

Dashboard(管理中心)的用户注意力分析:

发文的用户注意力分析:

注意看到,这位测试志愿者在发文时遗忘了填入Meta Data,转而重新编辑了这篇日志。

据说新的管理界面在新老用户中均赢得了喝彩,而就我目前参与的一个WordPress企业级项目中,已经尝到了2.7版新导航的甜头:更便捷、准确的导航菜单和文章管理系统比横向导航更快。

引导有意义的用户需求,拯救Web产品设计师

昨天和一位来自美国的Google工程师聊到中国市场,彼此交换了很多观点。不过,令我印象最深刻的仍然是这位工程师透露的一条与中国市场关联不太大的信息:日本用户非常热衷于Feedburner这样的服务。我并没有得到进一步的数据,但我越来越相信这个结论:日本文化中对效率的追求和对工作的严谨态度的确会使Feedburner这样的工具类产品受到用户的欢迎。

同时,这条信息也再次佐证了许多人包括我曾经得出的结论:“中国互联网,目前还只是一个娱乐网、八卦网、无聊找事儿网”。

我无意讽刺国人,也不怕被人,只觉得这个结论令我们的许多产品设计处的很尴尬:我们花相当的心血制作的产品,到最后可能落得无人问津。在这样一个劳动力密集的国家,大家根本不关注如何用RSS阅读器来提高信息的质量、可信度和阅读效率,而是在无聊的重复性体力工作之余看看黄色小说、成人笑话之类。不是骇人听闻,分析一下百度和Google的搜索排行榜,看看哪些关键词是最“红”的就可以看出问题了。而据我所知,即便是这些关键词,也是经历了重重的过滤和筛选之后才得出的。

而根据Analytics的数据,我也在自己的博客或者(为平台制作的)小应用中发现,越是无聊找乐的、越是人身攻击的、越是男欢女爱的,就越受欢迎。刚才和好友聊天的时候,还感叹自己不应该当年给自己的搜索数据于朋友门看:大环境就是如此,我却阴差阳错地背了黑锅:)

前几天,kaixin.com被强行拿下,大家都在指责行业环境。我倒觉得,与其挨个在那些SNS里面把陈一舟臭骂一通,到不如真正想办法去改变我们身边的好友,让他们知道,互联网不是一种无聊的发泄工具和八卦渠道。告诉他们,要节约生命。

这几天,和Google的工程师合作,可以确认他们真的很注重用户体验的细节、功能的必要性和阶段性。但也同时为他们感到遗憾:许多不错的工具,根本就没有人会去用。Google在中国的流量,显然和他们的产品、业务能力不成比例。

作为一名Blogger,也希望凭借个人微弱的影响力来呼吁真正互联网行业的产品开发者、设计师们,把这个行业本身的精髓(工具性高效性)传播给周围的人:大学老师可以在让学生在假期尝试利用GMailGTalk的许多特色来进行某一个研讨话题的沟通(邮件中的forwardcc、bcc都有许多用途);关心时事、新闻的人可利用Blog SearchDigg以及各类SNS来检验新闻的真实性并过滤掉一些花边无聊新闻。

当然,引导用户需求也应适可而止,一个简单的例子:如果一个人被脑白金忽悠一次,我们可以想办法救回他;如果一个人被脑白金忽悠了100次还相信这个世界上有长生不老药,我们就应该让他买脑白金买到破产:)

有没有“绝对正确”的设计?

今天有幸去Google参加了某产品的体验研讨,结合目前在WordPress.com项目中所遇到的问题,我忽然想到了这样一个话题“有没有绝对正确的设计?”。

这是一个很有趣的话题,也是一个非常基础的话题。“绝对”本身究竟有多“绝对”,就是一个有趣的问题。

这篇文章里提到的“绝对”首先是有宽容性的。例如,在51.com,“优先兼容IE6”就是“绝对”(后面我会给出一个统计数据);而在一个专门用于下载Firefox插件的网站上,“优先兼容Firefox”就是“绝对”。虽然有人会用Firefox去上51.com、也有人会用IE去看看Firefox的插件,但这些人是可以忽略的,理由如下:

  1. 51.com上基本没有人用Firefox(相信这个比例比qq空间还悬殊)。如果为了几个非活跃的Firefox用户而调整几万用户正在使用的代码,那太不合适。(就如同我们没必要强迫Google.com首页的HTML也遵循最严格的W3C协议一样)
  2. IE用户无法下载Firefox插件并不是一种硬伤。

另一方面,不妨这么理解:衡量一个Web产品设计(无论是“视觉布局”、“动画效果”还是“URL选型”)是否为“绝对正确”,就要看排开这种设计的任意其他选择是否比它更差

尤其对于一些通用的设计,例如现在WordPress.com对于视频嵌入代码的设计,则也有“绝对正确”可言:把flash.swf?var=5利用.htaccess重写为flash-var-5.swf是“绝对正确”的,无论是在Windows终端还是Linux,无论是用Firefox查看还是Opera或者IE,无论是对于节省带宽、进行SEO还是提供更加易读的代码。把flash-var-5.swf换回flash.swf?var=5都会让效果更差。

找到当前条件下“绝对正确”的设计,尤其是产品的核心功能,往往是设计一个优秀产品的关键。因为:对内,它会大幅降低同事间意见不一导致的沟通成本;对外,它能收获最大的功效。

我很喜欢王建硕的《Youtube成功的秘诀》。文章中所提到的“简”,也是大多数产品的“绝对正确”的设计。尤其当需求逐渐复杂化、设计师的经验越来越丰富、可供开发者选择的技术方案越来越多样时,我们往往容易忽略这些本质的“绝对正确”:我们往往陷入一个功能究竟是使用Flash和PHP交互好,还是使用Silverlight和.NET架构好;或者我们往往为“这个红色的按钮到底是放在左边好,还是放在右边好、是用深红色好,还是用浅红色好”这样的问题而争执不休。但最终“绝对正确”的设计也许是“我们只需要简单的AJAX就能完成这种交互”,以及“我们根本不需要放置这样一个按钮”。

附,我在awflasher.com下开发的一些App所检测到的51.com用户的IE版本分布:

我最期待Google Analytics(谷歌分析)的两大功能

Google Analytics是我最喜爱的流量统计系统。尤其是它多样化、多渠道的统计报告以及多维度对比功能几乎找不出竞争对手。网络上,大多数人也是对Analytics好评如潮。不过,正因为我对它太喜爱,以至于也让我因它始终未能实现期待的两大功能而感到深深地遗憾:

第一,不支持基于img标签的统计

现在Google Analytics的统计模式是基于JavaScript技术的。而这项技术很多人/场合是无法使用的。这就需要基于img标签的统计作为补偿。

img的统计支持一旦开放,我认为Analytics这一产品将不再是个人站长的专利。那些经常在SNS社区内活跃的用户也能通过嵌入一张图片来获知他们的资料页面究竟被多少人访问;而我也能利用这一点更加清晰地洞悉自己博客RSS的阅读情况。目前,我已经使用了GetClicky来做到这一点,但遗憾地是,GetClicky的统计报告还是比不上Analytics的优雅。

第二,无API供调用

对于中小型原创内容网站来说,流量分析并不仅仅是管理员自娱自乐的“后花园”。作为这类网站的管理者,我们更加希望这些经过系统分析之后的宝贵数据能再次直接反馈于用户

例如,如果要统计awflasher.com这个博客里的“每周最多评论文章”、“每月最多浏览文章”,在Analytics的后台得到这些数据易如反掌。然而,这些数据只能在静静地躺在后台里被查看,无法为我博客的读者所知晓。如果换用其他的本地统计插件(例如基于服务器端技术的统计),又恐怕系统负载太大。

当然,这只是一个简单的例子。对于一个能请得起10-20人撰稿人团队的网站来说,真要获取“每周最多评论”之类的数据,即使人肉复制Analytics的结果,也可维护。但如果要结合更多的智能统计反馈动态地改善网站的用户体验,那就只能依靠Analytics的API了。我一直期待能有这样的场景:

例如,我可能需要获知,“通过Google搜索某特定关键词而来到我博客的Firefox的用户他们最喜欢点击侧边栏的什么链接”、“通过豆瓣九点访问过来的IE用户他们是否会点击导航条上的某一个链接”这些复杂的信息来进一步完善用户体验:我可以对那些使用Firefox的老手们隐去“什么是RSS订阅”;也可以让那些对“Firefox”不感兴趣的IE用户完全不被导航上“Firefox”这个分类所打扰。

然而遗憾地是,这些想法,都依赖于Analytics的API来实现。虽然曾有一位英国的工程师通过Analytics自身的邮件报告发给Google Groups再以Yahoo Pipes去抓内容实现了类似的需求,但这弯子实在是绕得大了点。而且经过Pipes那么一绕,GFW的阴影仍然笼罩在我的心中。

总之,默默地期望着Analytics能补充这两项功能,为众人所用。

WordCamp中国:WordPress用户体验改善与SEO的演讲文档

很有幸作为WordCamp Beijing的演讲嘉宾,与大家一同分享我在WordPress用户体验方面所积累的经验。遗憾的是,现场的网络接入非常不好,导致我无法演示在awflasher.com上的实例。我只能尽力“望梅”,但似乎很难“止渴”。这里再次致以最真诚的歉意。另外,据说还有部分Blogger认为我讲的内容不够复杂、高级,这里也感到非常抱歉,因为到场的高手也许不多。更欢迎留言一同切磋复杂和高级的问题。

好在接下来在咖啡厅的闲聊,与很多WordPress用户一对一地分享了彼此的经验,也得知大家对我的优化比较感兴趣,这里就来分享一下我的Presentation:

(由于在Slideshare上传的版本出了故障,大家请看Google和Authorstream的两个版本)

在Google的版本暂时去掉了(因为有用户反应在Reader中会导致页面自动跳转,这种体验太糟糕了)

在AuthorStream的版本:

http://www.authorstream.com/player.swf?p=awflasher-89082-wordcamp-china-presentation-wordpress-ppt-science-technology-powerpoint

“邪恶”的获益方式 – 培养用户习惯

抛开产品体验不谈,培养用户习惯是一种(某种意义上)“邪恶”的获益方式。这里我们不讨论复杂的理论,举几个简单的例子大家就明白了。

先看看热恋中的情侣:情人之间都已经习惯了对方的各种特性、行为,从说话的方式、两人之间的暗语到作息时间、情绪的发泄,甚至到牙膏和避孕套的品牌!很多时候,我们经常看到,一些热恋中的人分手之后很快就复合了。原因就是他们已经无法适应没有彼此的生活。

交互产品设计也是一样:让你的用户习惯你的产品交互方式,能在相当一段时间内,对竞争对手和后来者确立一种致命的优势。

用户操作基本模式无非是“单击”、“双击”、“拖拽”、“按键”等等。而许多Web(B/S)产品,包括C/S产品甚至普通的软件、操作系统在对这方面都确立了自己的“门派”:

Digg.com引入了“单击Digg”模式。当越来越多的人开始关注Digg的时候,全美国的人似乎在自己的Blog上放了一个“Digg Me”的图标。恨不得连08年的总统大选,也要走Digg模式。而Digg则更将这种模式应用到新闻评论中(Digg for comments)。这些Digg用户在看其他新闻网站评论的时候,如果找不到Digg图标,他甚至会把这篇文章Digg到Digg.com再来Digg:)

回到十多年前,如果不是Windows 3.0中那个Mouse Tutorial(当时只有640×480的分辨率,256种颜色,而我却为这个简单的动画教程彻底折服),我想,“双击”这个词根本就不会被人们所知晓,也不会有DoubleClick这个公司。越来越多的人无法适应没有双击的操作系统,哪怕是Windows本身在98(似乎是这个版本)加入了“Web式单击执行模式”,仍然有很多人觉得这种改变是荒谬的:当需要执行某一个应用程序的时候,他们的手甚至已经不能进行“单击”这个动作了。

当然,有些时候,这些用户的行为也许会衍变为“强迫症”。但作为运营者来说,他们肯定会不遗余力地让你继续强迫下去(Kevin Rose要偷笑了)。

题外话:

如同粉丝的用户体验一样,用户习惯是一把双刃剑。有一些更邪恶的“习惯培养”:如远古就存在的“赌博系统”,同样是引导用户,进入某一种习惯的轮回。(关于“系统”两个字我为什么要加粗,好好看看这里,建议打印出来看!)

总之,作为一个优秀的、有良知的产品设计师,唯一能做好的,是培养自己手中产品的良性的用户习惯。最近接二连三发生的一些事情告诉我,由商业或者其他不可抗力所造成的,对于另类、邪恶的用户习惯(习惯性欺诈)的培养、引导,不是一个产品设计者所力所能及的:用你的良知和“强大”叫板,最终只能被干掉。

粉丝的用户体验 – 彪悍而悲壮

在这个世界上,没什么比粉丝(Fans,有人又叫它“烦死”)更狂热的了。

粉丝往往有两种:

  1. 生理上的G点被激活而不可自拔
    多见于对帅哥靓女的崇拜。新浪博客首页有不少。忍不住说一下,这方面李宇春和郭敬明特别牛逼。为了不被口水淹死,我就不列举更多的了。
  2. 精神上的G点被激活而不可自拔
    高级一点如罗永浩、王小峰以及他们周围的那帮文艺青年;中级一点的如广大文艺Blogger们,比如来自牛博网的一些牛人们;而再低级一点的如本人的某些娱乐化文章。

粉丝们的用户体验,可以用两个词来形容:

  1. 彪悍
    粉丝们都会誓死捍卫自己的偶像。而且,依照不同的偶像,fans也有不同表现。老罗的fans和郭敬明的fans那绝对是各有千秋的,唯一的共同点可能就是“人挡杀人,佛挡杀佛”。一切顺从的意见都是好的、可取的;一切反对的意见都是错误的谬论。所以基本上没人敢说韩寒的blog用户体验不好,也没人敢说曹颖的Blog用Firefox上不去。
  2. 悲壮
    很悲壮:尤其是非自建站的Blog,劣质的模板,愚钝的留言体验以及铺天盖地的广告……更惨的,就如QQzone了,必须上IE才行。总之有时候我挺想去别人的QQZone留言的,但换到IE,再登录,真的好麻烦……上次看到某Blog的留言需要输入很难辨认的验证码(i、I、L、o、0这些都没去掉),而且还经常弹乱码,速度又巨慢无比,结果几百条留言就那么堆出来了…那几百条留言下,得有多少用户体验失败的骸骨啊。

珍爱生命,远离粉丝。

向“用户习惯”开炮的代价

豆瓣改版,本是一好事,结果却糟来一大批“老用户”的反感。和菜头“三下五除二”,直接把这帮用户归为“垃圾用户”,恨不得一巴掌全给拍死。

也许是随着海内的推出,校内也改了导航。只是,可怜的校内team并没有得和菜头似的“正名”。倒是在讨论区里被绝大多用户批的“一文不值”。随便摘录几条不算太低俗的:

强烈要求换成以前的  别扭死了  校内网不就是方便找老同学和新同学交流吗  就纳闷了 为什么还搞的那么花招  一会这样的一会那样的

快还原成以前的,现在的很不实用,群新鲜事没了,同时首页中“新鲜事”不要显示内容,一大长条难看死了,我没要看什么自己会去看。我们喜欢原来的,请不要瞎改!

我也知道你们是想给我们创造更好的平台,但是这个真的不是适不适应的问题,而是人性化与否的问题。

我们看到,甚至有用户提出了“人性化”三个字……站在校内开发团队的角度来看,改版肯定是有消耗和成本的。这也从侧面佐证,改版最终的目的,肯定是改善用户体验或者创造收益。我相信这一次导航变更,并非为了盈利,而是为了帮用户获得更好的体验。结果没想到“吃力不讨好”,再好的新功能,也被“老用户”的反对给埋没了。

在我看来,最大的障碍,无外乎“用户习惯”。尤其是对于一个用户群相对庞大的产品,任何变更,都会引起许多“老用户”的反对。而这种反对,虽然本质上是“不习惯”,却容易被激化为“不人性化”,甚至“不民主”。这就是“向用户习惯开炮的代价”。用户体验的本质是什么,众说纷纭。不过我个人曾经这么总结过一个等式,用户体验=某个用户为了达成某一任务目标)所花费的代价/过程熟练程度(用户习惯)

大多数时候,我们总是想方设法降低代价”来改善用户体验。却往往忽略了“用户习惯”的影响。举个例子说一下,大家肯定就明白了(为了描述清楚,极端了点):

北京到广州,坐火车24个小时,坐飞机3个小时。我之前经常坐火车,知道应该怎么走:出门上13号线城铁,到西直门换乘2号环线地铁,到复兴门换乘1号线。在军事博物馆下车,步行至北京西客站,凭票排队上车。当上午我正要出发去广州的时候,突然被“不可抗力”强行告知:“你必须坐飞机,把火车票交出来,我给你飞机票,并且已经叫好送你去机场的车”……很好,很“体贴”。于是,我顺利赶到了首都机场。好不容易找到入口,打听明白登记手续。结果安检时,被告知“没有身份证”无法登机。于是只能眼睁睁看着航班飞走……

这个例子里,我是一个普通用户;“不可抗力”就是好心的“开发组改版决策”,而“没带身份证”,则是“用户习惯”(因为坐火车根本不需要身份证)

当然,不能因为“用户习惯”而放弃对更好的“用户体验”的追求。但是,很多时候,我们必须酌情考虑,在具体操作上,要循序渐进并要给用户足够的尊重。和菜头炮轰“垃圾用户”和校内团队对用户抱怨不予理会,我觉得都有些欠妥。然而,豆瓣官方的“我们错了”,几个字,让我对阿北和豆瓣,不由得又添了一丝好感。