星期四,2010-03-11 at 01:53
本文主要表达的意思是:邮件的设计与网页的设计有着巨大的差别。如果能用文字千万不要用图片;如果要用图片也千万记得把内容加入图片的Alt属性中;如果有可能给一个明确的退订链接。
写这篇文章的直接诱因是今天下午那个巨崩溃的淘宝注册体验(注意,我说的是给我的体验巨差,没有说用户体验!)。电子商务产品的设计中,我们会最频繁的面对的一个模块就是EDM,在这个过程中积累了一些想法,一并记录下来。
系统邮件可以简单分为2类:提醒类(注册提醒、订阅提醒、生日或节日提醒)、EDM(电子邮件营销)。
一、作为提醒类的系统邮件,我个人觉得比较简单,只要把握住:简洁、直接2个要素就足够了。提醒类邮件不需要花哨的修饰,不需要夸张的表达,因为对用户而言他唯一需要的就是知晓邮件的内容同时点击那个他需要的链接就足够了,建议使用文本形式制作。
>>对于发信人:表明身份即可,可以直接使用网站名称。如:Twitter、Flickr Mail
>>对于标题:表明邮件的来处+需要处理的信息类型就足够了。如:kentzhu is now following you on twitter!
>>对于邮件头部:需要有一个固定的头部,一般直接使用网站的LOGO就够了。当然,也看到部分EDM放的是LOGO+网站导航。建议不放,因为提醒邮件的作用在于让用户快速的完成任务,不是推广,区别与EDM邮件。
>>对于邮件内容需要注意:
1) 千万不要使用图片!这点我觉得是跟网页设计最大的区别,网页上设计师都会使用大且带颜色的按钮来吸引用户的视觉注意,但是在邮件设计中恰恰是个巨大的错误!因为,几乎所有的邮件系统在接受邮件的时候都默认不加载图片的。所以,在邮件中最有力的吸引视觉的手法是文字!比如,淘宝的注册提醒邮件,使用了2个巨大的登录按钮,但是,默认的时候图片被屏蔽,于是整个邮件一片空白….
2) 链接地址千万使用明文的!目前主流的提醒邮件链接是一个文字链同时附加一个明文链接地址的做法,也是可以的。因为有的邮件系统可能会过滤文字超链接,所以设置成超链接和明文链接的地址一致的做法可以避免这一点。
3) 如果,你真的要使用图片,那么,请在这个图片上加注"Alt"属性。这样即使图片被屏蔽了也能知道这个图片代表是嘛玩意。比如,Flickr的提醒邮件在这点上就很棒。
>>对于正文:请千万简洁,表述一下这个是什么动作,用户该怎么做就OK了,其他的啰嗦的不要!因为在这个模块里,用户的目标任务是单一的,你需要的是用更单纯的页面来让用户快速的完成这个任务,这就OK了。
>>其他:如果可以请告诉用户如何退订类似的邮件(别学流氓卓越亚马逊!);可以善意的告诉用户请勿直接回复该邮件。
二、EDM邮件对用户而言,用户可能会更关注其内容的丰富性和视觉效果。因此EDM邮件必然无法纯文字,且EDM邮件的主要目的是吸引用户去网站乃至与去购买,所以会更复杂一些。
>>对于标题:务必吸引人。但是前提是要表述清楚内容同时不要过长。
>>对于页面的宽度:建议控制在650px以下。个人比较倾向于使用650px,因为这个宽度不管是对于2栏还是3栏的设计都比较容易布局(刨除10px的间隙,然后再整除一下,很明显这个数字比较容易搞定)。
>>对于页面内容:因为使用图片无可避免,但是,重要的内容请务必使用文字,哪怕是使用了图片也务必给出文字标识!这点上有啊的EDM做的很棒,有啊的EDM页头是LOGO+主导航的模式,LOGO使用了Alt属性,同时主导航是直接实用的文字链接的形式。这样就算整个邮件图片被屏蔽了重要的信息还是可以显示出来。
>>对于图片的使用:建议给每个图片一个固定的宽度和高度及Alt属性标识,同时,注意不要使用背景图片。
>>对于引导:一般的EDM都会在web端留一个源地址,所以,请在你的EDM的明显位置给出一个超链接,“如果图片无法显示请点击这里查看”,这样就算被屏蔽了也能引导部分用户。
>>关于一致性:如果您会定期发送EDM(这句好似废话啊),请注意使用统一的风格,主要是页头和页尾的风格统一。如果,你是有期刊号的请将期刊号和时间也一并加入!
>>关于提醒:请将如何退订、如何联系等必要的内容不吝的放在页面的底部,做个彬彬有礼的推广者。同时,如果您愿意提供退订按钮,请务必试着实现一键退订….
>>一些补充:系统邮件的制作应该随时注意按照邮件的玩法来走,打开速度要快;页面不要过长,建议在2屏内。关于具体内的排版与设计且听下回分解。

奉上有啊EDM一枚(故意屏蔽图片)
相关日志
星期三,2010-03-03 at 23:23
本文,我主要想表达的意思是:交互设计师一多半的时间其实是在做逻辑分析,从业务逻辑到产品逻辑的迁移;然后另一部分时间是在做按钮的摆放。(注意,我说的是部分,不是全部!)在这两个过程里需要注意的最重要的问题就是不能懒!
让我们再来重复一下那句关于交互与用户体验之间的关系的论断: 优秀的交互设计应该是用最低成本的交互,最愉悦的满足用户的需求。
那么,什么是最低成本的交互?我的理解,用户需要的时候才出现交互,用户用不到或者不能使用的时候就不出现交互;当用户需要交互的时候如果能二步完成就坚决不搞成三步。用一句通俗的话说就是:看人下菜碟。
在大的层面上,在对产品进行需求分析的时候我们会考虑不同的用户群,他们对一个产品的使用需求和使用方式都是不同的,在这里我们对用户进行了划分。我们把这个思想坚持到交互分析里来,对于不同的用户在不同的使用环境下需要的交互方式也是不一样的。
之前,顺网UED的同学们对用户交互行为的分析提出了“交互表格”的方法:划分2个纬度,页面元素和用户行为。最左边一列是页面可见元素(包括光标);最上面一行,是用户的行为(尽量按操作流程)。中间交叉的为场 景描述。通过这种枚举的方式可以详尽的列出所有可能存在的交互行为,然后我们对每个交互行为再划分出不同的交互方式。
比如:我们要做一个积分商城的积分兑换交互。经过分析、合并,我们知道可能存在这么几个场景:①用户未登录(注册);②用户已经登录,但是积分不足;③用户已登录且积分足够。
下面,我们选2个电子商务方面的代表网站(京东商城VS支付宝)来看一看他们怎么处理的:
京东商城的积分商城页面里,不论你是否登录(注册)、积分是否足够,积分兑换详情页的内容永远保持“一致性”。当未登录点击兑换的时候会跳转到登录页面;当登录后积分不足点击兑换的时候会弹出窗口提示积分不足; 当登录且积分足够的时候,会显示兑换成功。
支付宝的积分商城里对上述问题做了改进,我们看到支付宝的设计师对业务逻辑做了足够的分析:先对用户登录行为做判断;把用户所持有的积分放在了所需积分的下面;积分不足的时候给出提示。
那么,这些足够了吗?不,我觉得还应该有改进空间(京东商城的设计完全不具备交互性,不做分析)。对照“看人下菜碟”的说法,我们来看看哪些是可以改进的。
1、如果用户没有登录(注册),用户是否需要去点击“兑换”OR“评论”按钮?答案是否定的。这个时候用户最需要什么交互?是登录!
当然,这里会存在一个用户是否需要注册的行为?我个人认为,在积分商城这个产品场景里,注册是存在几率很小的行为,完全可以放到登录的引导页面里去。(积分兑换的前提是注册用户,且在网站上发生了用户行为产生过积分才能兑换,就算是注册送积分也是需要先完成整个注册过程的 吧)
2、如果用户登录但积分不足,用户最需要什么交互?了解积分还差多少,如何获得更多的积分。其他的交互行为对这类用户来说都是多余的。
3、 如果用户登录且积分足够,用户最需要什么交互?兑换。这个时候用户是否需要“点评”交互?我觉得不需要,还没有兑换使用,怎么点评?“点评”这个交互行为 应该出现在用户兑换之后再次浏览到这个物品的时候。
下面,是我对积分兑换这个交互模块做的改进。
1、如用用户没有登录(注册):不做用户持有积分判定(当然,也没法判定);不出现“兑换”按钮,他的位置由登录提示取代。
2、如果用户登录但积分不足:做用户持有积分判定,同时提示积分差额;不出现“兑换”按钮,他的位置由积分不足提示取代,可夹塞广告,如何获取积分。
3、如果用户登录且积分充足:做用户积分判定;出现兑换按钮。

(左:支付宝的积分兑换交互;右:我的修改版本)
当然,这里只是一个简单的交互条件限定,还可能会有更多兑换限制,从而出现更多的交互行为,比如:注册多久的用户对可兑换、实物兑换 的时候填写收货地址,发货时间段(这个很重要!)、可兑换的数量、等等。
对于任何一个Web页面而言,都必须承担着2个功能:顺利的完成本页面的任务、流畅无误的进入下一个任务。对于如何实现这2个功能,我的土方法就是:有的时候我需要强制你专一的完成本页面的任务,不给你回路;如果这个页面上你要完成的任务太多,我可以考虑帮你拆解。
比如,在注册页面除了注册表单什么都不放,什么面包屑导航全部去掉,甚至LOGO也要搞成不可点击的,这些都是为了“强迫”用户完成本页的任务;用户在后台录入产品的时候,可以考虑对产品的属性进行分块,然后把录入页面拆开(当然,你不能无限制的拆分!)….
我个人的感觉是,之所以交互过程被搞的很笼统,大部分原因在于交互设计师很懒。懒的做分析,认为只有流程能走通就OK了,不愿意继续细分;懒的做交互Demo,认为这些给技术说明白就可以了。前几天做某个模块的时候我偷了个小懒,在DEMO里把工商银行写成“工行”,然后在PRD文档里做了详细说明。今天再看测试,好家伙,还是“工行”!搞的我羞愧难当,这个问题的责任完全在设计师本身,设计师懒就不能指望技术勤快!当然,这里还存在一个原型图的制作问题,改日再谈。
PS:为了迎合“微”时代,我以后的博客都会以“本文想表达的意思是….”开头,看完导语如果你有兴趣可继续,如果觉得扯淡可以略过,省的搞到你读着伤脑筋, 我想怎么回复你的评论麻头皮…
相关日志
星期二,2010-03-02 at 16:19
Google推出Google Buzz服务有段时间了。我暗地里观察了一下,口水渐渐散去,板砖慢慢变少。当大家都不怎么说了的时候,也就意味着大多数人都玩过的时候,我想冒个泡说几句。
先说观点:在Twitter上,适合传播(包括造谣);在BUZZ上,适合讨论(包括扯淡)。这是两种在本质上就有着不同的社会化交流方式。
我之前认为,目前无 法定义Twitter到底是什么东东,但是我们都能确定的是,他目前是一个媒体。Twitter的信息是以一种树状的形式展示的,你可以通过 “in reply to”来对某条tweet进行追踪,然后就像爬树一样搞明白这些信息是如何传递的,理清楚这些tweet的对话关系。
当然, 也正是这种信息的传递方式,使得Twitter更利于传播(包括造谣);同时,也让Twitter可以无限的开放,放大。这种信息的传递模式在于时效性短、交互性差。Twitter其实也并不在乎这些,这让Twitter显得更像一个媒体,需要及时的(各种更新方式)大声的(海量的陌生关注者)不断的 (转发,转发)播放就足够了。
BUZZ在目前来看更像一个大的社交平台,一个更加集中的发声器。BUZZ的信息是以一种线性的形式进行展示的,或者说,他更像我们最早时候见到的BBS帖子的信息展示形式。一条Buzz本身就是个信息的母体,往下依次根据回复先后进行排列。
这无疑是适合交流的一种信息流动方式,他并不利于信息的传播。我在BUZZ上开玩笑说要在这里安心的泡MM,当时keso觉得这极度不靠谱,我倒是觉得这没有什么不靠谱,我说的这个需求肯定会实现,当然,不是为了泡妞,而是为了实现信息的局域化传播。
BUZZ允许用户通过同步的方式导入几乎你所有的网络信息,他希望你所有的信息都会在Google上进行汇 集,这是一个伟大的想法。作为一个社交平台,Google以Email作为帐户更有人情味,同时,你越多的信息在BUZZ里汇集,这个社交的口味就更重。 也许,最后,你会发现这里什么都有,你哪都不用去了,只要待在这里就足够了!
当然,目前来看大家都觉得这是个昏招,因为现在的BUZZ就像个大水库。我觉得这不是问题,BUZZ一定会不断的更新他的过滤机制,不断的提供给你各种信息过滤机制,最后你会觉得获得你想要的信息会如此简单。
同时,BUZZ是否会成为水库,这完全取决与你,因为这是一个以你为中心的社交网络,或者说这是个更去中心化的产品。
之前,我说,T字辈门一窝蜂的去做同质化的微博,实际上是个无奈之举,是个最有中国特色的昏招,形式不重要,微博其实还有更多的玩法。
Twitter很轻,实在太轻了,轻到很多时候无法承载我们的想法,那么,为什么不可以让他稍微重一点呢?这样做出来的微博也许会更好玩一点。
目前的微博就像是一个不断高速流动的信息激流,这种爆强的时效性导致我们错过很多高质量的信息(转发并不能解决这个问题);同时很多低质量的信息被保留下来。其实,我们可以找到方式更加好的来对这个激流进行治理,让这个河流里的信息除了以时效性来流动还可以质量高低来游走。
微博应该会有更丰富的对话模式。应该会出现一种类似QQ的临时会话的微博对话模式,当然,不是私信。
最后,搅和一下最近吵的很乱的RT和@的问题。RT不是微博的必备品,选择RT承载的信息传递模式跟你最开始确定的你的微博产品战略有关。
相关日志
星期天,2010-02-21 at 09:17
眼看着房租要到期了,要说到我现在租这房子,那就不得不说一下咱这牛逼的门。
2009年10月的某天,我背包出门,在开门的时候一不留神把那门把 手给压断了….这是继我掰断水龙头之后的又一杰作。住一起的哥们说,你丫这是开碑手还是抓奶龙抓手?
自此以后,我开门开水是小心翼翼啊。
2010 年2月19号晚,在经历了如打仗般的春节假期之后,在车里坐着在高速上憋了10个小时的我到家。因为是一个人回来,于是睡觉的时候我第一次反锁了门(之前 都是住一起那哥们来完成这个事情)。第二天早起后就匆忙锁门出去了。
晚上回来的时候,钥匙捅进去,使劲转到底,确认外面的锁已经打开了,但是,始 终还是打不开们;再次转几遍,再次确认确实是开了;给有钥匙的几个哥们打电话,确认,再次确认屋里没人,还是打不开….
回忆,似乎是因为我早 上没有完全把反锁打开,加之关门过重,可能是把反锁给带上了,无奈,之后叫人来开门….
经过询问发现,110的开锁要比其他开锁公司的贵,遂 找了开锁公司,再一问,这种反锁的锁要开的话只能暴力(撬!),也就是说,开完门就意味着锁报废,再换!!!
自己种的孽缘,就要收这孽果,撬!
等了半小时,师傅到了,熟练的三下五去二,撬完,换锁,500大洋没了…..
这期间,跟师傅聊天:
师傅:你怎么能把门从外面反 锁了呢?
我:我也不知道啊,估计是昨晚反锁了,早上开的时候没开彻底,锁门的时候带门顺带把反锁的锁又给带上了…
师傅:嗯,这也是一 种本事啊!一般人还真不会….
(我瀑布汗!…..)
师傅:你这把手也是我给你换的吧,我看着像我干的活
我:嗯,师傅您还 真没说错!可不是咋地,才换没多久….
师傅:兄弟,我看这样吧,我把我手机告诉你,以后你家门再撬的时候找我方便。
我:靠!师傅,你 这诚心咒我啊,大过年的!
师傅:哈哈,你看啊,你现在把门撬了,换了锁,等你室友回来的时候发现锁打不开,他着急进去的话不还的撬哇,到时候又是 我的生意!
这个他还真没说错,我找了一圈小广告,尽是换空调通下水道的,唯一2个换锁的还被刷了去,110又贵,他们这个是直接原装在门上的,门 是他们装的…
(我成吉思汗….)
换完锁,我发现我身上只有470,没办法,我说那我跟你去取钱吧。
到了楼下,我没看到自 行车,我说,师傅你是骑摩托车来的吗?你去取车,我在超市那等你,那有ATM。
师傅没说话,掏出车钥匙开了楼门口的一个本田的车门,说,上来吧兄 弟,我带你去….
看着那辆本田雅阁,我当场石化!……
车上,师傅跟我说,你这是我今天撬的第9个锁了。不过人家都是回家忘记 带钥匙的,你这牛逼的反锁还真是第一次…..
总结发现:
1、因为这种锁的反锁设计是,转动到一半的时候就会发出响声,我以为 锁上了就没再继续转。实际上是只挂住边,处在卡住状态,推门是可以推开的。早上起来的时候我就直接把们推开了,锁门的时候又使劲的拉了一下,直接把半反锁 状态搞成了锁定…..
2、撬锁开门确实他妈的挣钱!需求还旺盛。开门标价在150以上吧,换锁300左右….防盗门这玩意就像是安全与用 户体验…….