公司网站改版在紧锣密鼓的进行中,觉得目前这版的注册流程还需要再优化些就抽空搜罗下前人的经验,整合如下:
先来看看helicopter的这篇07年的译文
Adaptive Path的一项研究比较了包括博客平台、社交网络、社区及其他四类、共20家2.0公司的注册页面在以下几方面的表现:
• Homepage content 主页内容
• Initial calls to action 吸引注意力的首元素
• Registration flows 注册流程
• Error handling 错误处理
• Finding and inviting friends 寻找、邀请朋友
• New user calls to action 吸引新用户注意力
从所得数据中,他们总结出注册页面的若干模式以及提出四条设计指南。内容太多,无法迅速翻译完毕。详见原文,可免费下载。含大量例子,巨有用!
http://www.adaptivepath.com/ideas/reports/signup/
看下这几条建议:
1. Give the user good reasons to join 为用户提供加入的好理由
To persuade a new user to sign up for a service, a site should strive to increase perceived value while reducing the investment required to join. The strategies in this section focus on motivating users to join by communicating benefit to the user both explicitly and implicitly.
要说服新用户注册,网站应致力于提高可感知价值,同时降低用户加入所需要投入的成本。战略集中于从显性与隐性两方面同时向用户灌输加入的好处,以提供动力。
2. Make the sign-up process feel effortless 设计使用户感到轻松的注册过程
increasing the cost/benefit ratio by making it painless to join. If signing up feels quick and easy, users will be more inclined to try it out, even if they are unsure how it will benefit them.
通过轻松的注册过程,提高成本/效益比例。如果注册过程是便捷快速的,用户会更倾向于尝试各种其他服务,就算他们并不确定到底会得到什么好处。
3. Don’t leave new users hanging 不要悬置新用户
Guidance of new users should not stop once they’ve registered. Dumping new users on an unfamiliar page with no clear calls to action may leave them baffled as to what they should do next. Instead, reward new users with a welcome message and implicit and explicit guidance as to what they can do next.
对新用户提供的指引信息不应在他们注册后就停止。将新用户抛弃在一个不熟悉的页面或缺乏他们下一步该如何行动的指示会使用户感到迷惘。因此应向新用户提供欢迎信息,隐形或显性地指导他们下一步可以做什么。
4. Accelerate initial connection-making 加快初始的联系建立过程
Building an adequate social network is one of the greatest barriers facing users of a new community. Without friends, community-based services lose much of their value. Thus, helping the user to quickly find and add friends en masse is essential to retaining users.
对于新加入某个社区的用户来说,如何建立属于自己的社交网络是最大的障碍。没有好友,基于社区的服务会失却很大价值。因此,帮助用户迅速找到和加朋友是留住用户的关键。
再来看下用户注册细节部分(参考KDUED.COM)
1、简化页面,扫清干扰项
2、注册页面主体宽度小于800像素,利于用户聚焦操作。
3、注册步骤引导使用文字,不要用图片。
4、密码强度提示需提前让用户了解强弱极限度,辅助提示如何设置高强度密码。
5、操作提示语尽量少且简短,并用浅颜色弱化。操作提示语与注册字断垂直排列比平行排列更好。
6、警告语在填写出错后即时触发,不填错不触发。
7、用户已正确填写,给出鼓励提示。
8、验证码简化,全数字或全英文(全大写或全小写),要有即时更换验证码的操作功能。
9、注册提交按钮同时包含同意条款,服务条款重要级别低,可放在按钮下方。
10、注册页面中不设置跳出页面的链接,可用浮层替代。
让我们对照着图示来分析下吧:
1、简化页面,扫清干扰项
用户在注册时,是在进行聚焦操作,我们也不希望在注册完成之前用户被别的元素干扰,导致离开。例如,去掉注册页面的导航及广告等元素,会注册页面更加简洁。
(淘宝注册页顶部)
(Windows Live注册页顶部)
2、注册页面主体宽度小于800像素,利于用户聚焦操作。
先来看下几个用户体验相对较好的网站的注册页面实际宽度统计:
淘宝 width:734px
Yahoo英文站 width:753px
Live width:700px
腾讯 width:750px
从上面这些数据看来,注册页面的总体宽度W < 800px,之所以不统一于网站的其他页面,是考虑到800以内的宽度有利于用户的聚焦操作,如果我们采用用1000左右的宽度,用户在阅读的时候左右扫视内容会产生来回的摇头现象,这并不是我们愿意看到的,因此800以内似乎是目前的理想宽度。
注册步骤引导是图片还是文字?文字下载时间更快
纯文字的淘宝注册步骤引导
使用部分图标的百度注册步骤引导
4、密码强度提示需提前让用户了解强弱极限度,辅助提示如何设置高强度密码。
(腾讯有密码强弱提示这项供用户参考)
淘宝目前没有提供密码强弱提示这项,但给出了“怎样设置安全性高的密码?”这项,遗憾的是当我单击此链接后跳到了一个新的页面。
(Yahoo英文版的两者结合,且没有新页面的跳转,而是利用巧妙地布局默认有条理的给出安全性建议)
5、操作提示语尽量少且简短,并用浅颜色弱化。操作提示语与注册字断垂直排列比平行排列更好。
提示语多少给用户带来的心理暗示
不预设提示语,感觉规则少,简单
预设提示语,感觉应该规则很多,复杂
如果实在有必要预设操作提示语,应尽量简化提示语,参考百度
操作提示语的位置摆放
提示语与注册字段平行排放,好处是:减少页面长度;
坏处是:页面文字较多且密集,给用户以“规则很多”的心理暗示,左右同一行宽度增加,与字段对照阅读时需左右摇头。
与注册字段垂直排列的好处是:阅读时不需要左右摇头、方便对照,操作提示语和字段之间有明确的从属关系,不用像左右平行布局要做对应分辨;操作提示语可占据更宽空间,显得更为简洁。
坏处是:可能导致页面过长
操作提示语的呈现方式
腾讯和淘宝的注册页面看起来刚好相反,可能淘宝更倾向于密码的安全性吧
Google体现的更为明显,注册字段黑体加粗,操作提示部分浅灰体现
大多数网站采用两端向中间靠拢的布局方式,更方便用户聚焦操作
警告语在填写出错后即时触发,对于简短的表单项还可忍受,如果碰到较长较复杂的页面,用户很难再次尝试。
不同的情况,给出不同的提示语,更贴近用户的感受。
8、验证码简化,全数字或全英文(全大写或全小写),要有即时更换验证码的操作功能。
从网站的安全方面考虑,验证码越复杂越安全,从用户体验考虑,验证码越简单越好。
9、注册提交按钮同时包含同意条款,服务条款重要级别低,可放在按钮下方。
蜕变网采用了常见的排列方式,注意此刻注册协议的复选框默认已勾选。
大众点评网将提交按钮和注册协议压缩成了一行排列,最大限度的节约页面长度,尽可能的使整张页面左右两边平衡。
似乎后两者简少了有效内容的长度,腾讯将注册协议放到提交按钮的下方,似乎是不想让注册协议干扰用户,同时有意的加重突出按钮上的确定两个字,似乎一切都那么自然、简单。
淘宝目前没有提供密码强弱提示这项,但给出了“怎样设置安全性高的密码?”这项,遗憾的是当我单击此链接后跳到了一个新的页面。
看完这10项注册细节问题后似乎还需要补充些,多吸纳一些大家的观点:
对于用户陌生的网站,或是竞争激烈的站点(已经有品牌效应的就不说了)
在蜕变网的注册页右侧草图上我用上图中右边部分替换掉左边的部分,因为保护用户的隐私信息是最基本的事情,在这里我选择将站点的优势体现展示出来,同时加深了用户对网站的理解。
再来看下出侧完成后的引导,是否给用户多个选择呢?
这是采自叽歪网的注册成功页面,它给出了用户多种选择。
不同情况不同需求,在简单的注册完成后,并没有采集到我们想要的信息,给用户一个大体的概念(当然这些看起来不是一般的功能按钮),
在这个页面我留了一个“开始蜕变”的按钮,点击后会引导用户进行人生GPS、目标进度进行的过程中同时会收集一些注册时没有采集的但对我们来说很重要的信息。9.18的新版蜕变网是否用到这些,目前不能确定,文字部分是自己整凑的,新版会有新的结构树及文字介绍。
原文地址:http://www.uecss.com/index.php/registration-process-details-optimization-integration/