一行代码给你的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”出现之前就已经关闭页面了。

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

我最期待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

你的“密码提示、安全提问”怎么用?

大辉提出过一个关于密码提示的“愚蠢设计”的问题。其实,我也非常有同感。而且大辉提到的关于“正确答案其实就是暴露安全隐患”,我很早就认同:想当年QQ刚出“密码保护”功能的时候,为了保护自己的“安全”,我基本上都喜欢在“正确答案”上面做点手脚。然而,最终真的忘记密码了,还真是狼狈,完全记不住。

后来许多审核机制都需要设置一个“安全提问”,对此我起初觉得非常的不自然。一来,填写正确的答案人家迟早会猜到。尤其是那些“大学在哪读的”之类,人家一看我的简历岂不是瞬间就知道了;另一方面,过于复杂的答案,尤其是与问题毫不相关的答案只会给自己造成麻烦。我现在就忘记了自己QQ号码的安全问题:想了将近一年了,也想不起来。QQ丢了还有Facebook和校内、海内,我并不担心。但是,淘宝、支付宝这些关键账号怎么办呢?

后来我想了一个办法:

不论是什么网站,随便选择一个安全问题,但所有的答案保持一致,或者以某种“算法”来转译这个安全提问应用的上下文(Context)。

例如:在taobao.com和alipay.com都注册了账号。安全提问分别是“你的父亲的生日是什么”和“你最喜欢的演员”(这都是随便选的)。然后回答分别是taobaondfqdsrssm和alipaynzxhdyy。这样的规则一方面有很好的保密性,另一方面也不容易忘记。

这只是我的个人经验,你的“密码提示、安全提问”怎么用的呢?

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

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

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

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

用户操作基本模式无非是“单击”、“双击”、“拖拽”、“按键”等等。而许多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号线。在军事博物馆下车,步行至北京西客站,凭票排队上车。当上午我正要出发去广州的时候,突然被“不可抗力”强行告知:“你必须坐飞机,把火车票交出来,我给你飞机票,并且已经叫好送你去机场的车”……很好,很“体贴”。于是,我顺利赶到了首都机场。好不容易找到入口,打听明白登记手续。结果安检时,被告知“没有身份证”无法登机。于是只能眼睁睁看着航班飞走……

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

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

Little Tip – 为Google吹毛求疵

"Using the English-version products of Google is much better than Chinese-version"
"英文版的Google产品中文版的Google产品更好用"

Though we are not taken English as our mother-tongue, and even we make a lot of mistakes when communication with it, some of the Google products in Chinese from Google still drives my go-insane~

I enjoy the Google Analytics very much, and have started my analytics as far from the November of last year(2005) together with my Google Adsense account. And more, Gmail is also a very amazing product! But there are too much misunderstandings in their Chinese version.

In the statistics of Google Analytics-Content Optimization, there are two concept Unique Views and Page Views. Google tells us this:[quote=hint of Google Analytics][/quote] Continue reading “Little Tip – 为Google吹毛求疵”

本周末参加UPA同行北京聚会

活动圆满结束。学到了很多东西,做了大量笔记!受益匪浅~
北京果然是天堂!

嘉宾:
清华美院信息艺术设计系主任教授 – 鲁晓波;
中国设计业十大杰出青年评选办公室主任 – 邢雷
清华大学工业工程系教授 – 饶培伦;
联想研究院用户研究中心经理 – 陈柏鸿;
百度用户体验总监 – 郭宇;
搜狐公司设计经理 – 杨扬;
雅虎欧洲设计师 – 王晓丹;

UPA成员及会员-北京:
应杭艳,UPA 成员
徐小琪,UPA 成员
白鸦,UPA 成员
赛娜,UPA 成员
酚麻,UPA 成员
黄胜山,UPA 成员

都是大牛,可以好好学习知识!~
报名同行:

李晓丽,21世纪
Leon, Media
高飞,CNET科技资讯网
谢丽娟,ISAR/同济大学
王宇,mop.com
许飞,qihoo
李健涛(Todd Lee),sohu
李伟(IceShow),sohu
章杰,八乐数码科技有限公司
陈艳,百度
陈仲华,百度
郭奕杉,百度
韩琦,百度
李年福,百度
罗吉,百度
徐宁,百度
徐升,百度
曾凡松,百度
张海龙,百度
乔延枫,北电网络软件工程师
陈振伟,北京大学计算机信息
范皓宇,北京德信无线通讯科技有限公司
孟祥斌,北京服装学院
杨世艳,北京辅龙信息科技有限公司
王超震,北京滚石移动网络有限公司
吳文彬,北京建龍控股公司 信息化部工程師
韩伟光,北京凯信国宇科技有限公司
王小龙,北京科技大学工业设计系 讲师; 北京致翔创新工业设计公司 首席设计师
李异白,北京科诺技术
张广慧,北京科诺技术
束寅,北京联想利泰软件有限公司
霍旭欢,北京灵图软件
郭赛莹,北京灵图软件科技有限公司
林小龙,北京灵图软件科技有限公司
江蕊 ,北京凌云光视数字图像技术有限公司
孙燕燕,北京网连天下信息技术有限公司
马立, 北京伊飒尔界面设计公司/北京邮电大学
陈维, 北京邮电大学
黄福 ,北京邮电大学工业设计
张乐媛,北京邮电大学工业设计
范志鹏,北京宇信易诚科技有限公司
李潇,北京中搜在线软件有限公司
樊旺斌,大连海事大学 中国欧盟可用性中心
许冰华,大连海事大学中国欧盟可用性研究中心
容器, 个人
欧阳继承, 海亿威(北京)信息科技有限公司
安飞, 汉端科技
陈雪, 航天信息
陈志, 皓辰传媒
翟晓玲,皓辰传媒
邹晓可,皓辰传媒
陈嘉, 湖南大学艺术设计
杨若男,湖南大学艺术设计
千鸟, 慧聪
方飞, 建龙钢铁控股有限公司
史辉, 建龙钢铁控股有限公司
吴文彬,建龙钢铁控股有限公司
戚厚利,建龙钢铁控股有限公司
史辉 ,建龙钢铁信息化部
李娜(火星拿拿),金山软件
王邴笛,联众
凌斯 千橡互动集团
马斌, 千橡互动集团人人事业部的product
史骥, 上海音乐学院
肖鹏, 天极
刘春花, 天津工业大学
谢巍 天涯社区北京分公司
孙海涛, 微澜信科
陈伟洁, 新浪
王爱华, 新浪
赵立元 , 新浪
邵丽平 , ”
董进 ,
陈谦, 亿邮
程铁刚, 中国科学院软件研究所
王鹏飞, 中国数码集团
甘露, 中国数码科技股份有限公司
范晓燕, 中华英才
梁上, 中科院科技政策与管理科学研究所
蔡成强, 中企动力
李燕, 中企动力
刘欣盈, 中企动力
王英, 中企动力
杨静, 中企动力
赵岩松, 中企动力
Wei Gao,
黎万强,
陈忆 ,
方舟 ,
孙方 ,
学兵 ,
朱辉龙/Allen,
朱圣斌,
马斌, 千橡互动集团
徐延照, 58com.com
李霞, 自由职业者
付志勇, 清华美院信息艺术设计系
张茫, 清华美院信息艺术设计系
关炎, 清华美院信息艺术设计系
张烈, 清华美院信息艺术设计系
洗枫, 清华美院信息艺术设计系
曹之明 , 新浪
钟大鹏, 利盟
郜寿智, 艾瑞市场咨询
刘镭, 艾瑞市场咨询
刘东方, 艾瑞市场咨询
金建华, Chinaventure投资中国
周军伟, 艾瑞市场咨询
薛元元, Amazon中国
王澍, 北京欣网科科技有限公司
邓小慧, 北京欣网科科技有限公司
刘荣国 , 北京欣网科科技有限公司
李静, 太极软件
孙小娟, 太极软件
张宁, 太极软件
袁小蒙, BenQ
牛聪子, 当当网
刘小平,
孙振, 网友天下
连潇潇, 清华美院
李丹, 雅虎
何忠靖, 雅虎
林宇, 雅虎
屈田, 雅虎
张月 ,雅虎
兰辉 ,雅虎
张俊杰,雅虎
郭丽荣,北京理正软件设计研究院
王晶 ,北京理正软件设计研究院
王磊, 千橡互联(mop)
Ding Qiang, Artron