注册表单的规则——读《Patterns for Sign Up &Ramp Up》

06月 26, 2008 – 10:16 pm

 《Patterns for Sign Up &Ramp Up》很早就读完了,之所以今天才写读后感,细细读完了发现,它更为接近吸引注册、提升活跃度的社区构建引导,是一份社区活跃会员度研究的好资料。

既然答应写读后感,就从我的视角来说一点与注册有关的东西,先把整篇资料的骨架分解一下,然后再结合其中观点谈目前的感受。

注册其实是个有点枯燥的任务,《Patterns for Sign Up &Ramp Up》里提到的观点是:

Give the user good reasons to join——乍看起来有点营销的味道,事物的本质不变,但人的情绪是可以扭转的——让用户有充分的理由来注册;

Make the sign-up process feel effortless——改变枯燥令人生厌的感觉,就是我们需要做的努力:让表单或整个注册过程变得轻松省力;

Don’t leave new users hanging——这个观点在整篇资料里的意义侧重于提升活跃度的办法——用户不是完成了注册就完成了使命,了解社区的新事物才是刚刚开始;

Accelerate initial connection-making——如果说活跃度从上一个观点拉开序幕,那么这里就是如何使用户在社区里开始生活,建立联系比如通过自己之前发布的信息来联系好友,真的体验海内存知己,天涯若比邻的感觉。

整篇的骨架结构就是一个循序渐进的行为引导,为facebook的引入会员、维护社区活跃的初始引导,做了详细的注解和指导,可做手册查阅。读后侧重工作的总结,梳理几条注册表单的规则:

I.当表单结构需要多步时,需要注意的是给出清晰的导航
a. 使用进度标尺来告诉用户当前的位置和整个步骤
b. 强调几个步骤中的逻辑联系,比如标明:step1、step2、step3
c. 用有意义的图片或ICON甚至是标题来解释各个步骤
d. 使用简单的语言或第二人称描述行为动作
e. 逻辑步骤最好限制在3步内

II.用户在注册行为中的提示
a. 提示信息(tips)尽量在需要帮助或有前后行为衔接的地方出现
b. 对用户的鼓励应在进程中体现,如每完成一项输入提示一个打勾的图标
c. 尽量避免出现弹出框的警示提醒
d. ICON的出错提示避免用警告的表达,使用户有挫败感
e. 简单易识别的ICON来标记提示、成功、出错的样式
f. 提交表单时如果有出错,过长的表单最好将出错提醒显示在整表头部,指引用户改正

III.关于文案
a. 质量重于数量,一针见血地说出亮点,而非平铺罗列
b. 尽力避免有特殊含义的文案,如果有专属名词请一定要解释清楚,避免用户的困惑
c. 尽力思考文案表面的亮点,什么才最吸引用户,有时“最新”的字样不一定是用户最感兴趣的
d. 在我们以往的项目中多项数据和实践强调证明文案真的很重要

IV.表单的布局
a. 尽量使用对齐的字段、等长的输入框以及一致的视觉样式来减少视觉干扰
b. 尽量控制在一屏内出现3-6个字段和输入框(多用于多步骤的情况)
c. 如果有选填和必填时标明差别
d. 为不同概念的信息归类,尽可能地分开选填和必填

这些表单设计的通用规则,美国Yahoo的LukeW同学对表单做的充分解释也涵盖了它们,都是最为常用的,总结一下给同学们参考,活跃度的引导还是有非常多能深挖的点。这里按下不表,留作后续分解^_^。

 

视觉设计师“寻人启示”

06月 26, 2008 – 3:17 pm

工作地点:杭州

阿里巴巴公司是世界上排名第一的国际贸易和中国本土贸易网络交易市场。我们专注于为来自中国和全世界的中小企业买家和卖家提供高效、可信赖的贸易平台。

我们的国际贸易网站www.alibaba.com 主要针对全球进出口贸易。

阿里巴巴公司,作为阿里巴巴集团的旗舰业务同时也是世界领先的电子商务品牌之一。

UED (User Experience Design) - 用户体验设计。我们设计的界面虽然没有几十亿的流量,但每天的24小时里,在我们网站上都活跃着上百万数量的买家与买家,他们有着白黄棕黑不同的肤色,他们来自全球各个不同的国家及地区,他们有着各自的文化及信仰。我们网上的信息承载全球的贸易,UED就是负责把这些信息呈现给全球的商人。

阿里巴巴的口号是“让天下没有难做的生意” !我们希望全球的商人都没有难用的界面。这个伟大的使命需要你和我们共同完成!

公司站点:www.alibaba.com
团队BLOG: www.aliued.com
团队招聘站点: job.aliued.com

职位描述:

  • 负责阿里巴巴国际站的整体视觉感观,以及网站运营活动的创意和展现。
  • 对页面进行优化,使用户操作更趋于人性化。

职位要求:

  • 不限学历,作品和实力是你最好的证明,当然相关专业高学历者优先。
  • 两年以上设计工作经验。
  • 有扎实的美术功底、良好的创意思维和理解能力;能给出大家都喜欢的视觉设计。
  • 能准确把握商业需求,通过分析和讨论,对线框图做出快速调整,并获得最终认可。
  • 熟练使用Photoshop、Flash、Illustrator或CorelDraw等流行设计软件,清晰的表述界面设计。
  • 熟悉HTML,CSS,JavaScript,能熟练使用CSS搭建符合XHTML标准的页面尤佳。
  • 有很强的分析问题和解决问题的能力; 对视觉设计、色彩有敏锐的观察力及分析能力 。
  • 良好的沟通能力和协调能力,有团队合作精神。认为工程师,项目经理,项目策划人员都是最可爱的人。

如果你就是我们寻找的那个人,请马上联系下面这个邮箱。附上个人作品哦。
Freeman.caoxm@alibaba-inc.com

 

别光盯着设计

06月 24, 2008 – 11:10 pm

别光盯着设计

上周参加了客户培训中心看了看,本想就手上项目的改版听听做培训的同学以及客户的意见,却被做培训的MM拉到一旁诉苦了一番:
“哎呀,用户管理后台怎么又改版了!”
“新注册的用户后台里会员升级的banner哪去了?”
……

我很纳闷,这些项目发布难道他们都不知道?
我:“那Free member的改版知道吗?”
MM:“不知道,什么时候,没有收到邮件?”
汗……
我:“异步上传,你们都知道是什么东西吗?”
MM:“看到过邮件通知,但不太明白做什么用,为什么要改。”
大汗……

回到公司,我查看了一下日常项目发布的邮件。似乎所有的项目在发起的时候都只是在涉及开发的团队、需求方进行沟通。直到项目正式发布了,才会将邮件cc给相关培训人员的主管、客户服务人员。而一些小的需求发布,甚至都没有通知到他们。更别说全国各地那些辛苦的做培训支持的同学们了。

我们每天都坐在办公室里,为了提升网站的可用性,做着这样那样的设计、改造。可我们最终作出的这些设计改进的思想、精髓是否通过我们培训人员,准确的传递过客户了呢?而我们的培训专员,自己又是否真正的理解呢?这次的培训课程让我很惊讶,原来我们的信息传递是比较糟糕的。我们常说要多接触客户,了解他们的想法,听取他们的反馈。虽然公司会通过内部培训、邮件,等形式将我们的项目告知客服人员、培训人员,但信息的传递有着很大的丢失。

后话:目前通过相关各级主管将相关人员增加到项目发布邮件列表中,首先确保相关人员都清楚的了解网站最新动态。不知道你在工作中是否也遇到同样的问题呢?

表单系列·出错字段排行榜

06月 23, 2008 – 7:55 pm

出错字段排行榜 

最近一直忙,我们的注册页面还是在持续优化。今天抽时间分析了下数据,依然以主注册表单为例,对表单里3个区块、9个字段做了个小小出错排行;看看哪个是用户出错最多的字段、都错在哪、便于以后针对性改进。话不多说了,揭榜开始:

第一名:province
Province是在那四个有province/State的国家时出现在Location处的字段,国家根据商业需求需要放出这几个国家的区域选项,这样原本上一步没有操作行为的字段:国家,根据IP自动读取,导致人们会自然忽略第一个动作从province/State开始,本月中旬做了一点小改动:在旁边做了文案的提示,选择后消失。

第二名:memberRoleCNBuyer
这个字段是在IP定位为中国时,商业利益需要引导去“I want to Sell”的选择,所以“I want to Buy”没有默认选中,在很多用户在表单填写完提交时会遗漏角色的选择。

第三名:Email
我们的Email字段也是表单中的出错大户,原因有2:1.许多用户对注册表单的使用经验中,有Email字段时会联想赠送邮箱的服务,可能会只填写Email前缀或者填写Email后缀为alibaba.com的情况;2.纯粹的出错,有非法的email格式。

解决方法:在表单里放出这个email是用来登录Alibaba的提示,并且提示例子,告诉用户如何填写才是正确的格式,最重要的是保证不会将其泄露给第三方导致spam。

第四名:passwordConfirm
应填未填或与前面的password不一致

第五名:password
数据显示最多的出错情况:应填未填。这个似乎是让我们比较困惑的地方,为什么会不填呢?

猜测:1.是用户有可能疑惑这个密码是一个新密码呢,还是上一步填写Email邮箱的密码? 2.轻易提交了密码会不会不安全.

这个是历史遗留问题,我们一直没解释清楚引导用户填写密码的原因,但通常人们的习惯密码应该是那样几个固定便于自己记忆的密码,以前我们还有检测密码强度,安全性低的就不能通过,但这对互联网经验不多又上了年纪的用户来说无疑太辛苦,导致表单一直提交不过,搞懂这密码强度的“奥妙”恐怕要比登天还难,所以现在把这个坎去了,看看是否能在提示上还有更优的方案。

第六名:phoneNumber
电话号码也是根据商业需求,同时考虑行动便捷我们设置了国家码、地区码、电话号码的三段分别填写。国家码是根据国家选择后自动读取,看似方便了很多,但为什么也出错呢?都错哪了呢?看了数据我们发现,有的用户会在国家码的输入框里一口气输完全部的号码!很执着!

我们的分析是:tips的提示可能不够显著,如果在移动到每个格子是highlight关键词,比如加粗Country Code/Area Code/Phone Number,会让用户更容易注意;另外,校验框架对于输入框里灰色默认提示,在鼠标行动过后就不再提示,也是导致用户困惑的一种可能。

解决方法:在表单上直接呈现案例,提示用户那个区域该怎么填;值得深入下去的是我们还要在研究一下我们的主流用户,各自的phoneNumber习惯格式。

第七名:校验码
数据显示最多的出错情况也是应填未填,分析原因是在提交表单出错后,需要重新输入验证码,有些用户可能不理解或者忘记。也许我们需要说明输入验证码的原因,或者在出错需要再次键入验证码的时候给用户一个提醒。解决方法:使用了集团统一的校验码图片,图片位置和表单输入框有些出入,另外我们替换了原来那个让人有点迷惑的刷新小图标,直接显示了替换一张新图片的文字link;同时我们把图片放在了输入框上方,方便对照填写。

第八名:Company Name
出错原因还是应填未填,一口气写了那么多,还真有点出汗,没办法,商业需求的必要字段,原因就不多解释了擦擦汗-_-b、小歇一会准备写最后一个字段。

第九名:Last Name
最后一名,值得表扬!老问题,和Phone Number有点类似,数据观察用户喜欢一口气在第一个框里把名字全写了,我们可能没有为有middle name的用户提供一个完整的服务>_<导致他们困惑了。我们能做的是不判断Last Name为必填,空的时候也可以通过,但是便于其他的友好服务比如页眉、邮件等地方,还是希望能够按规则输入完整信息。

呼……一口气终于都写完了,注册表单的排行榜都揭晓完毕了。小小的表单想为用户提供更好的帮助,还是需要做更多深入的,以上观点还有不全面的地方欢迎补充和指正,改动后的数据也在继续收集分析进行中,一切都还在路上;希望我们改进的同时,也能为正在做类似工作的同学们,供到一点小小的帮助^_^

汽车以人为本

06月 16, 2008 – 1:35 pm

非常酷的一组广告,大伙欣赏欣赏。
http://www.youtube.com/watch?v=eEfXmWGj7CA

 

再来看看他的拍摄花絮和访谈,强大!
http://www.youtube.com/watch?v=UzDQGxxlq4E

下一个设计明星就是你

06月 14, 2008 – 3:18 pm

阿里巴巴国际站UED团队诚聘交互设计师,用户研究员,视觉设计师,前端开发工程师

具体要求见 http://job.aliued.com/webpage/static/description.html 

交互设计师,请站出来为用户争取利益!

06月 9, 2008 – 4:14 pm

当商业需求与交互设计发生冲突时,交互设计师应代表用户与商业需求PK,为用户争取利益。一个网站,有了好的用户体验才能带来持续增长的PV。对于商业网站来讲,PV的增长也就相应的带动了商业利益的增长。

商业网站要的结果是什么?是杀鸡取卵式的通过欺骗方式来增长PV?还是实实在在的做好用户体验带来持续增长PV呢?

Lucy最近在内部论坛贴过一帖子《执行—结果导向!》,我觉得很有道理:

“——任务是一个执行假象,是因为我们绝大多数的人在实际工作中,当你以为你自己是在执行的时候,其实是在完成任务,而不是执行,因为你没有结果!
我们要懂得一个基本道理:对结果负责,是对我们工作的价值负责;而对任务负责,是对工作的程序负责,完成任务≠结果!”

……

“如果我们要致力于打造一个具有强大执行力的团队,如果你要成为一个优秀的执行型人才,那么请记住,执行永远都只有一个主题:执行是要做结果,而不是完成任务!我们永远都要锁定“结果”这个目标,而不是完成任务这个“程序”,因为“完成任务≠结果”。 ”

从“结果导向”这个角度来看,用户体验与商业利益二者之间并不是矛盾的。他们的目的都是为了获得更好的商业利益。做好用户体验,虽然暂时不会大幅度增加PV,从长远的角度来看,却增加了客户的兴趣提高了客户的回访可能性,提升了粘滞度。

那么我们在浏览网页时见到的情况又是如何呢?
下面是几个比较典型的例子,请从一个用户的角度来想象一下,如果你在遇到到下列的情况还会再去访问那个网站吗?

  1. 第一页极少内容 + 第二页极少内容 + ….. +第n页极少内容(反正是点到后来手酸酸的,就好像听评书,关键时候“啪”一声打断,我们下回讲)
  2. 打开/关闭网页时跳出的广告窗口(在很久很久的记忆中,经常打开一个页面跳出2-3个提示广告窗口的,被人深恶痛绝。还好现在的浏览器都已经加上阻止弹出的功能了。)
  3. 冒充某个软件的消息提示方式的广告引诱用户去点击(小到类似QQ的聊天框,大到windows的提示框,形形色色无奇不有。上次还看到个提示,“发觉你现在还在用老掉牙的ie浏览器!”)
  4. 不断的发垃圾mail,被欺骗一次后别希望用户再会去点你的垃圾mail(曾不小心注册了个垃圾mail,我已按提示退订了n次,结果还是不停的给我发啊发,同志们我痛苦啊!这个该死的垃圾邮件!555~~给我个再阅读他的理由先!)
    ……

用户的体验好比是个刚学习走路的孩子,你应该用心的照顾他,了解他的习惯,慢慢的引导他教育他。而不是恐吓他,欺骗他。

当用户体验不得不妥协于商业利益时候,个人认为,至少要不去妨碍用户现有的利益,或是将对用户利益的损害降低到最低点。(没办法,老大发话了谁敢不听?==!)

良好的代码注释

06月 6, 2008 – 10:24 pm

当你加入到一个项目,相关的CSS文件可能会看得你头昏眼花。时间一长,修改了哪些内容,增加了哪些内容,也都弄不清,维护成本相当的高。正好我们国际站正在进行代码的规范工作。下面的这段代码注释的思路值得借鉴。

通常写法:

#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999;
margin: 3px 0 3px 0;
padding: 3px;
}

注释的代码段:

#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* ADDED Apr. 9, 2008 */
margin: 3px 0 3px 0;
padding: 3px; /* CHANGED Feb. 14, 2008 (Prev. 1px) */
}

上面的代码中,注释了增加代码的时间,修改代码的时间以及修改前的属性值。如果是多人协作,我建议还加上修改者的名称。当然,这样一直写下将带来过多的垃圾代码。需要定期的整理归档,保持文档的时效性。

项目数据分析一

06月 2, 2008 – 8:51 pm

最近在准备一个关于“项目数据方法分享”ppt,在网上搜索一些资料,偶尔看到了“坏人–杨溯”关于这方面一些想法,觉得可以和大家一起分享别人ideas

坏人理解一个分析过程:
1). 对修改前的用户行为分析
2). 修改前的数据取样
3). 修改前的数据分析点
4). 对修改后的数据分析
5). 对数据分析的结果的指导修改

前三部分在项目启动或设计前期完成——找到问题点,提出解决方案,预测项目结果;
后两个部分在项目发布后3,4个星期完成——验证设计方案,找到问题,提出改进方案或经验总结。
但目前我们在项目数据跟踪时总是部前三部也放到项目结束后,失去指导改进的意义,有时只是为了看看比较结果
一种敷衍。其实前三部也相当的重要,其重要性有可能超过后两部。前三部给你提供设计改进的方向和目标,后两部结果很大程度依赖于前面分析结果。
目前还有个现状——孤立去看待每个项目分析;其实每一个现在分析项目都可以是为后面相似项目或相关项目提供一种数据支持,应该时常去review自己分析过的项目,从中找到一些共同点作为个人或团队一种经验和财富。例如运营团队经常分享不同运营设计的数据,但是很少看到他们会找到两个相似推广内容设计去横向比较两种设计或创意等带来的变化,而是比较孤立去分析每个推广,一直缺乏沉淀。

数据很重要
数据很不重要
数据只是数据
重要的是透过数据去发现错误和挖掘潜力。

Outlook,让我无数次栽在删除里

06月 2, 2008 – 2:25 pm

上面这个用红色线框标记的符号大家熟悉吧,出现在各类软件界面里的删除符。

要是有人问你删除用什么图形来表示,我想绝大多数人脑海里呈现的第一印象就是这个叉叉了。

就是这个熟悉的不能再熟悉的图形,让我栽了无数次跟头。

因为只要我一想到删除,大脑就自动指挥眼睛去寻找它的踪迹。

在Outlook通讯簿里,这个图形被很醒目的和“保存并关闭”功能放在左边重要位置里。

 

这里的删除“叉叉”是指删除整个“通讯组列表”,而中间有人物Icon的删除,是指删除这个列表里的某个成员。

当我要删除某个成员时,动作已经远远快于大脑的思考,在我想到这两个不同概念前,手已经帮我作出了选择,让我连后悔的余地都没有,“叉叉”这个图形真正做到了“别让我思考”。

其实在我按这个“叉叉”后,只要跳出一个提醒确认,还是可以避免发生这类惨剧的,但Ooutlook没有。

虽然设计师将两个“删除”在图形上作了区分,但这样的做法还是无法区分它们的不同的,至少第一次使用者还是需要猜测,这个时候文字比图形更能说明问题。

比如:“叉叉”的Icon用“删除通讯组”,“人物”的Icon用“删除成员”,我想这样更容易让人区分和理解。

设计师将一个耳熟能详的图形赋予不同含义后,辅助文字的教育成本往往比图形要低的多,也更能让人理解。毕竟图形赋予每个人的想象空间是无穷尽的。