登录、注册的表单 - UCD大社区

以用户视角出发的表单之旅

Cherry Zhou — 2012-08-19 13:12:04

用户使用发布表单，就像是一次旅行。旅行的目的是否能达到？过程是否让人满意？这些都决定了用户会否再来这里。

一、那么为什么要以用户的视角呢？

作为设计师，你是否遇到过这种情况：

· 我们额外加一个填写项，用来收集用户信息吧；
· 我们的表单之所以复杂，是因为我们希望用户多填写内容，这些内容都是有用是；
· 我们的表单应该在这最重要的一步出现，这样就能让更多的用户看到它…….

作为用户填表单时，你是否这样想？

· 我们填写表单只是为了达到我想要的目的，才不是为了你们收集信息；
· 如果可以，我希望填写更少的信息或者不用填写表单，来达到同样的目的；
· 在我想做A事情的时候，我根本不想看到B表单…….

以上的情境可能有些夸张，但是不可否认的是，有时候我们做表单设计的时候，并没有从用户的角度出发，看他们想要的是什么，而是从我们所在的产品端的角度，让用户去做我们想要他们做的事情。

二、如何以用户视角看post表单？

现在我们把之前的旅行的步骤放到post表单设计中，我们可以得到如下思路：

从中我们可以发现，似乎发布前和发布后这两个流程，比较容易被忽略。而过程中的设计点具体应该如何做呢？作为用户出发看看吧。

三、作为用户出发看表单

思路已经有了，那让我们作为用户出发探索一下post表单吧。

发布前：

作为用户，我会抱着一定目的，来找我需要的工具——post表单。

首先，我要从哪进入表单？

这个问题是针对用户在什么样的情境下会被引导到post表单，看下这个例子吧：

上图的post表单安排在你对网站有个基本认识，并且有意愿联系后出现，而且这样的从属关系让人很容易接受。

上图中的post入口都安排在账号相关的区域，而不是业务相关的区域，没有足够的理由说服用户从此来发布。

然后，它跟我的目的是否相符？

表单的开头应该向用户清楚的传达，该表单是做什么的，是否符合用户的期望，如果不，那么用户应该去哪？

上图的表单很清晰的向用户传达了目的，并提供了快速逃离出口。

图四中一些简要的介绍，会让用户对表单有个大致的认识，对复杂的信息有个心里准备，并且更能确认自己的目的。

而上图个页面，用户一进来印入眼帘的是长篇的规则介绍和各种功能入口，破坏了之前的引导传达给用户的印象，作为新用户的话，很难确认这里就是自己要找的地方。

发布中：

填写表单本身就是一件枯燥的事情，我希望能尽可能减少填写时的痛苦。

第一步，进入表单后，我希望看见干净简洁的页面。（整体感受）

这点虽然不能用数据量化，但是对用户的影响却不容忽视。

上图是改版前后的对比，能很明显的对比出页面的清爽与否，而且在数据上，改版后的也有较为明显的提升。

第二步，填写表单前，我希望较长的表单能够分步骤展现（填写方式）

较长的表单比较容易吓跑用户，而清楚的步骤能够激励用户的填写欲望。但是使用进度条的时候应该注意，是否能起到作用。

下图的表单，把填写信息单独作为一个步骤，用户大部分时间都花在了第二步，其实并没有起到多少简化表单的作用。

第三步，开始填写时，我希望填写的内容一目了然（信息布局）

填写表单时，最好让用户自己知道怎么填，所以信息的布局是否一目了然很重要。这一点主要从一下几个方面体现：

1）信息分类

2）信息排布的顺序

3）优先级的区分

很清楚的传达给用户：基本信息与详细信息的区别；必填与非必填的区别；

再看下面这个例子：产品属性与产品名称等信息没有区分开，而且顺序与优先级也不对，造成用户困扰。

第四步，填写过程中，我希望尽量避免不必要的问题（内容）

从商业的角度来看，当然是用户填的越多越好，但对于用户来说，填写表单只是为了达到他的目的，如果能达到同样的效果，当然是填的越少越好。

以上的例子很好的说明了什么是让用户达到目的的最基本填写。其实上图中的公司信息，注册完成以后有专门的流程让用户填写，没有必要一定要放在注册流程。

第五步，填写时以及填写完，我需要友好的提示和反馈。（引导）

这一点对于用户是否能完成表单填写非常重要。比如说，很多表单以对话的形式与用户交流，以人性化的对话代替机械的告知，会给用户的心理带来些许安慰。

反馈传达出的是“请去做”的意思

反馈传达出的是“错误”的意思

如果你是用户，看到这两种反馈，你的感受会有什么样的区别呢？

发布后：

我想看下我发布的东西是否有问题，有问题的话应该怎么办？

现有的表单是无法在发布后给用户展示效果的，而且发布后直接进入审核，审核结束之前用户是无法修改的，这让很多用户头疼。而且发布后的体验，直接关系到下一次的发布。

四、总结

在作为用户体验了很多优秀的表单设计后，我发现他们的优秀都是有迹可循的：

· 简单明了，让用户很快明白是做什么的
· 能比较顺利的让用户达到目的
· 友好亲切，让人不忍离开
· 不过度强制，不会产生负担
· 最好还能有趣点

但是，换一个思路：达到的目的一样的话，能否不用表单的形式呢？

这或许给我们的设计带来一些启示，其实达到目的的手段有很多种，让用户填写表单只是其中一种，我们设计的时候，可以多发散思路，多为用户着想，或许能发现比表单能快捷有效的方式。

相关话题：登录、注册的表单源地址：http://www.aliued.com/2012/08/18/1072/

简化输入 — 让网页表单更亲切

wyw — 2012-02-10 23:18:57

大部分人不喜欢填表单，因为人们来到网站，主要目的不是填表，而是浏览或者购买。精心设计的表单，使输入变得流畅让人心情愉悦，而糟糕的设计让人扶墙吐血。那怎样才是优秀的表单呢？页面的布局、逻辑组织、视觉样式等都是值得关注的细节，其中简化输入是最近常被提及的，在这里我分享下自己工作中的心得…

1、更高大的输入框

增加输入框高度，加粗字体，可以让网页上的输入框看起来更容易填写和阅读。随着电脑显示器尺寸变大，这样的输入框也显得更大气。

2、添加选取器。

与其让人输入不如提供选择，选取内容只要点几下，就自动填充进输入框，不但可以减少输入障碍，还能预防出错。可以把任何希望的数据做成选取器，比如日期、颜色、地址或者历史记录等等。

举个例子：前面的“对方开户姓名”输入框，需要填写对方的姓名，如果对方名字里有汉字不认识该怎么办呢？于是我们可以加上一个生僻字的选取器，如图：

打开字库，可以根据模糊读音选取汉字填入输入框。另外，姓名输入框有校验，选取完成后不要忘记对输入框内容进行再一次校验。

3、预置文字。

采用预置文字来简化输入经常在手机上看到，现在在网页上也常使用。比如微博上发言的输入框，会保留你上一次未发出的内容，可以重新编辑。

在网上也会看到把“输入提示”与“预置文字”混用。当然，你怎样称呼他们都是可以的，但要明白这是两种交互方式。输入提示的目的是指导填写的，聚焦输入框后文本消失；而预置文字是属于待修改的正式内容，字体样式应与正式输入的样式相同，聚焦后文本是不会消失的。

当表单输入遇到选填与必填难以抉择时，考虑预置文字会是一个不错的折中方案。比如在一个申请付款的表单中，对用户来说主要需填写的是“对方账号”和“付款金额”，付款说明是一个选填项。但对系统来说，又必须采集付款说明，作为交易凭据之一，这个付款说明怎样处理呢？比较下面3个方式，显然复选框的方式不适合，因为用户若不填写我们就无法收集到数据，而输入提示的方式还是需要用户去填写，所以意义也不大。折中了业务和用户两方面，预置“转账”两字还是不错的，不想填写的人完全可以跳过它。

4、设备读取。

摄像头读取、语音输入……最近，各种智能录入方式在手机上甚是流行，网页上也不甘心示弱，纷纷添加了这些功能~还有人脸识别，不知道不久后会不会流行起来呢？

5、设置输入属性。

现在比较靠谱的还是Html5提供的一些表单类型属性。除了限制输入类型之外还有一些有意思的设置。拖放属性，可以从桌面上直接拖进相应的输入框里。在邮箱中拖入附件，若主题为空还可自动填写主题。而range和number属性，可以直接替换掉输入框，对数值输入很有用，在chrome里显示如图：

6、额外输入渐进展开

当遇到需要增加高级或额外的选项时，可以采用即时添加删除的方式。不需要填写时，可以完全忽略，需要填写时点击一下就会显示。

7、利用输入反馈。

除了校验填写是否正确，输入反馈也可以帮助简化用户填写，其中有不少窍门。

比如在手机充值表单里，需要重复输入一遍号码才能确认提交。再重复输入一次，好像认定你肯定会出错。增加了号码归属地的反馈（配合历史记录）可以避免这种让人有点烦躁的方式。

下面这个例子将校验获得的推荐邮政编码填写到输入框中，让电脑变得更聪明一些。推荐的内容减少了思考和填写过程。

在反馈的显示方式上，也值得挑剔一下。比如数值输入框里被输入了字母，格式错误。如果对最简单的提供错误提示不满意，可以试试让输入的字母先显示1秒，然后即被删除，这样比单纯的限制输入类型要更容易理解。另外，还可以自动修改显示格式：号码输入完成后，自动增加空格，可以方便阅读。在需要强调时这样使用还可以提示用户进行检查，但是在普通的输入框中就不需要那么复杂了。

给金额自动补全小数，比如下面的例子服务费是有小数的，自动补全金额的小数，可以消减顾虑，而且挺有趣。

讲到这里，您是否对看似普通的表单设计产生了兴趣呢？输入框是最基础的人机交互，每个人都有不同的理解，以上抛砖引玉，感谢您的阅读，期待更多的分享和探讨！

相关话题：登录、注册的表单源地址：http://uedc.163.com/8957.html

拒绝平庸——浅谈WEB登录页面设计

CDCer — 2012-01-16 21:42:15

用户活跃度是检验产品成功与否的重要指标之一，传统行业的商家极为重视门面的装潢，因为一个好的门面可以聚集人气，招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究，有一定的风水学说道理，更能彰显主人家的身份地位.由此可见，“门面’就如人的脸面之于人的形象一样重要，而WEB的登录页面就相当传统的“门面”。

现在越来越多的大型网站把登录和首页放在一起设计，由此可见登录页面的重要性，一个出彩的登录界面，将提升产品的品质，赋予产品独特的气质，登录界面也是一个发挥情感化设计，提升用户体验，拉近与用户之间距离的兵家必争之地，本文不谈趋势，不讲交互大道理，不涉及技术，就侃侃用户登录页面的一些设计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。

优雅大方
如果说iPad是介于传统电脑和手机之间的产品，那么tumblr则是介于blog和twitter之间的服务。相比twitter，它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖，带来一种全新的视觉体验，安东尼·德·圣-埃克苏佩里曾说过，“完美就是多一点则太多，少一点则太少。” Tumblr的登录页面没有过多的视觉干扰，优雅大方，一切元素的存在都是为了用户更好的登录，登录过程非常流畅。

精致的质感表现
iCloud是苹果公司所提供的云端同步服务，用户有5GB的免费存储空间。负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说：“乔布斯会一个像素一个像素地检查屏幕上的每个细节，确保相关的图像准确对齐。他非常重视细节，细致程度居然达到了像素的层面。如果发现问题，乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求, 细致的纹理，微妙的阴影，精致的质感，完美的细节，金属光泽可以随着鼠标指针移动，底部的图标可以随着分辨率的大小自适应，改变排列方式，确保用户的浏览体验。

iCloud给我们上了很好的一课，有句大家都听过却未必做到的话——细节决定成败，丰富的细节可以提升设计的价值，也是判断一个设计高下的一条很重要的标准之一，精致舒适的质感纹理，给用户一种沉浸式，充满惊喜的登录体验，是一种很棒的表现方式。

小清新的插图
在网页设计中，插图非常具有表现力，它与绘画艺术关系密切。所以大部分设计职位，对手绘能力出众者格外青睐，许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合，具有独特的艺术魅力，从而更具表现力。越来越多的设计师，将插画运用到网页设计中来，生动有趣温情的清新插图，能迅速的抓住用户的眼球，让登录界面的更加具有亲和力，

163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆，有故事的插图与用户建立情感的联系，唤起用户的心灵共鸣，让用户更有归属感。

Vimeo是一家提供高清视频存放服务的网站，在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。

人文关怀的品牌传达
设计以人为本，以人为本的设计不仅能提高产品的品质，还能提高设计的艺术水平，而登录页面是体现人文关怀，传播品牌理念的绝佳位置。

QQ邮箱登陆页面每一次刷新都能看到不同的内容，或用海子的诗，或用迈克尔.杰克逊的歌词，唤起用户的共鸣，设计手法简洁，主体信息突出，引导清晰，并没有多余的元素，界面中最重要的操作“登录”按钮使用了交通中通行的绿色，而没有使用常用的蓝色，细节设计非常考究，对每个细节都注入人文的关怀。

新浪微博将登录框设计成一条围脖的样式，用户的每一次登录都是一次品牌传达的过程，切合新浪力推的围脖品牌理念，织围脖的概念深入人心。

越来越大的登录框
越来越大的输入框设计，让用户输入起来感到心情舒畅，登录过程非常愉悦，在显示器越来越大的今天，mailchimp大输入框显的霸气十足，并且一反常态的可以看到自己的密码，第一次在WEB登录框里见到这种设计，非常贴心.正是这种不拘一格的设计，让mailchimp从一个内部项目蜕变成一个该公司最成功的商业产品。

简约而不简单
WEB设计的风格越来越趋向于简洁，登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心，从视觉的角度来看，简约的设计是平静的，砍掉了多余的元素，颜色，形状和纹理，不能使用让人眼前一亮的设计元素，只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味，wordpress后台登陆页面采用适当的投影，灰色的巧妙运用，以及出错的抖动提示，让整个登录页面简约而不简单.堪称典范。

随着互联网的高速发展，移动互联网的到来，WEB设计越来越呈现多元化。尽管一个好的设计并代表产品就一定会成功，但却能为产品加分，为产品注入设计DNA，创造独特的风格和视觉感受，好了，今天就先侃到这，作为用户使用的入口，希望这篇小文可以让大家对登录页面重视起来，设计出更多精彩的登录页面。

相关话题：登录、注册的表单源地址：http://cdc.tencent.com/?p=5037

表单交互设计之二——校验思考

S++ — 2012-01-04 13:03:03

你是否经常碰到在填写表单时，提交无数次却还是无法通过校验的情况；或者你是否在为不知道填写中哪里出现错误而抓狂；再或者你是否碰到过当你填写了一大堆信息，之后点击按钮提交时，校验报错的同时，你发现你所填写的所有的信息都被清空；或者你还碰到过很多很多校验当中出现的问题，那么我们现在就开始进行表单校验设计的思考。

那校验有哪些情况呢？

1、 READY？

提到校验，我们往往会联系到提交表单后出现的错误提示类信息，但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系。

此类提示信息能够帮助用户在填写表单前，降低出错的可能性。它出现的形式分为以下几类：

a) 简要提示——有如：icon，icon+文字，文字，暗提示。

出现情况：一般提示信息比较简短，能够让用户一目了然的记住，并且不干扰表单的填写项。

alipay.com付款页面

alibaba.com注册

b) 复杂提示——以缩略信息或icon来显示，通过点击和hover进行查看。

出现情况：提示信息内容较多，需要用户仔细阅读，并且无法简单记忆，直接全部显示会影响整个表单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层，蒙板，或者跳转新页面等情况。

taobao.com机票登机人填写页

ctrip.com机票登机人填写页

c) 限制操作——在表单填写前，对某些需要填写或者操作项会有一些disabled的状态，只有当某些条件被激活用户才能进行操作。

出现情况：当填写项与项之间带有关联性，前面的填写项会影响后面填写项的内容或状态；或当填写项较少，填写项均可以即时校验，就可以将主提交操作项做状态限制。

livestream.com机票登机人填写页

d) 其他提示——填写表单的时候，还有一种比较特殊但又更简单明了的提示，例如：使用图片说明。

出现情况：当填写表单项的提示说明很难用文字清晰表述，这时候可以使用图片，视频等辅助方式来帮助用户快速理解。

alipay.com水电煤缴费页面

2、 ING~

当您浏览完整体的表单，接下来就是进行填写的步骤。在填写的过程中，我们会碰到很多类型的校验，比如：即时校验的友情类提示，即时校验的警示提示，关联性校验的提示。即时的校验也分为三种状态一种是on focus后的帮助提示、输入中的校验、lost focus后的校验。

出现情况：提示信息内容较多，需要用户仔细阅读，并且无法简单记忆，直接全部显示会影响整个表单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层，蒙板，或者跳转新页面等情况

a) 即时校验的友情类提示

即时校验的友情类提示不是提交时无法通过的出错警示，而是给到用户一些更合理的建议或者帮助。

Ctrip.com填写登机人页

（当你选择了儿童票时会提示儿童票的某些特定限制。当你输入的出生日期与你之前选择的购买类型不一致的时候会建议你去购买更合适的类型，但并不强制。）

Buy360.com的注册页

（当onfocus的时候会出现下方帮助提示类信息，当然也有很多网站会做成暗提示。）

163.com的注册页

（当onfocus的时候会出现右边密码的强度，会根据你输入密码的改变而提示你的密码强弱。）

b) 即时校验的警示提示

即时校验的警示提示是属于错误类提示，这类错误会影响表单无法提交。

警示提示类的校验重要级别非常高，因此在颜色和位置上都需要非常明显。有很多网站甚至将出错内容和出错后如何修改的建议都放在了该提示中显示。

163.com的注册页

Buy360.com的注册页

c) 关联性校验

关联性校验是所填写项之间会有相互影响的逻辑关系，后一项的填写是否正确会取决与前几项的填写内容。

Buy360.com的注册页

（设置密码填写项与确认密码填写项不一致时会提示错误。）

招商银行信用卡支付页

携程旅行计划创建页

（旅行计划目的地1和目的地2的时间段有冲突时就会提示错误。）

3、 ACTION！

当您填写完表单，开始触发提交按钮的时候，表单会开始进行表单提交后的校验。目前比较多的有两种，一种是逐条提示，另一种是一次性全部提示。

a) 逐条提示

逐条提示是在提交表单后，虽然有多项错误，但是每次提交只按顺序显示一条错误。逐条告知错误提示，会导致用户改完之后再次提交又需要重复修改，视线流上下来回，不停的修改不停的提交，多次操作才能完成整个表单的过程。

yihaodian.com注册页

b) 一次性全部提示

一次性全部提示是在提交表单时将所有错误全部罗列。

Yahoo.com注册页

Hotels.com预订页

（该网站设计不仅将所有错误一次性全部罗列在填写框右侧，并且提交按钮的hover状态再次将所有错误呈现，点击某项错误会直接锚点跳转至该错误填写区域。）

思考：

出错提示有4个基本原则：即时反馈出错提示，出错提示的位置显示恰当并且明显突出，提示信息内容清晰易懂，一次性显示全部出错提示。

除了这些基本的设计原则，在设计表单的校验中，还会有很多让我很纠结的点，以下罗列一些我个人认为比较好的经验。

1、在设计校验时虽然需要考虑到出错提示的明显突出，但是在实际情况中，会和页面的空间大小和布局相关，需要考虑实际情况来定夺。

2、尽量避免不必要的错误，一是自动喷入值；二是限制型操作；

比如，在身份证填写项中填写了身份证信息时，如果下面还需要填写出生日期，完全可以直接喷入身份证上的出生日期值。

3、有的错误校验会自动修正一些信息，但是这类行为请不要忘记告知用户。

4、友情类提示的校验重要级别永远低于警示类错误校验，在视觉和交互的位置上应该酌情考虑。

5、错误信息出现的位置视觉等效果应该统一，并且在位置上保持在用户可见的范围内。

6、页面自动锚记至出错项处，如果是多条可锚记至第一项，最好还能on focus至出错的填写项。

7、不要轻易清空用户填写的内容。

8、错误提示不仅显示错误点，更可以推荐用户一些正确填写建议。

9、出现了错误提示后，再次on focus至填写项时，不要隐藏错误提示。

相关话题：登录、注册的表单源地址：http://ued.ctrip.com/blog/?p=3047

泛议网络表单可用性规范

密封罐头 — 2011-11-16 21:15:55

转载自：

An Extensive Guide To Web Form Usability

作者：Justin Mifsud

小的水平有限，词不达意，忘见谅～！肯定漏洞百出，请随便耻笑指正～！

泛议网络表单可用性规范

以下做法与你将读到的内容完全背离，那就是为你的表单点缀漂亮的按钮，颜色以及排版甚至充沛的jQuery插件，这些都无助于可用性。事实上，这么做你只是（通过没有归整过的方式）实现了表单可用性的三分之一。

在这篇文章中，我们将提供便于你执行且切实可行的规范。这些精心编排制作的规范是来源于可用性测试，实施现场测试，网络站点追踪，视线追踪，网页在线分析及客户支持部门获取的客户投诉。

为什么网络表单可用性如此重要

ISO 9241标准将网站可用性定义为“高效，有效地满足特定用户在某个环境中达到特定目的。”当使用一个站点时，用户有一个特定目标。如果设计的好，站点会达到这个目标并与站点背后的机构目标一致。表单经常是存在于用户目标以及（站点）机构目标的中间，因为，尽管人机交互不断发展，表单依旧是用户在站点操作的主导样式。事实上，表单经常被认为是完成目标进程中最后和最重要的环节。

让我们通过讨论表单使用的三大主要方式来解释这个观点。就像Luke Wroblewski在他书中（Web Form Design: Filling in the Blanks网络表单设计：填补空白）所陈述的，每个表单都因三大主要原因中的某个要素而存在：商业，社交或者生产力。以下表格将这些要素转换成了原因背后的用户/商业目标：

以上表格内容参考自Luke Wroblewski’s Web Form Design: Filling in the Blanks

综上，表单和可用性的关系有两方面：

1. 表单是用户能否达成使用目标的关键点。

2. 表单应帮助用户便捷地完成目标。

本文关注于第二点，因为一个易用表单会自然而然提升整站使用性，继而关系到第一点。

构成网络表单的6个组成部分：

网络表单是设计师和用户的关键点和纠结点。长久以来，用户已经形成了对表单视觉及操作行为的预期。他们通常希望网络表单有以下6个组成部分：

1. 标签

告诉用户相应输入区域的意思。

2. 输入区域

输入区域让用户可以提出反馈意见。这包含了文字输入区，密码输入区，多选项，单选项，滚动条等等。

3. 行为

是指链接或者按钮，当用户点击，执行一个操作，比如提交表单。

4. 帮助

为如何填写表单提供帮助。

5. 信息

针对用户输入给出反馈。用户会得到确认（比如表单被成功提交的提示）或否定（‘您所输入的用户名已被使用’）。

6. 确认

这些措施保证了将用户提交的数据确认为可接受参数。

Skype的注册表单包含了所有6个部分.

通过三方面实现表单可用性

尽管在布局，功能，意图上存在不同，所有的表单都包含3大部分，就如Caroline Jarrett and Gerry Gaffney在他们书中（Forms That Work: Designing Web Forms for Usability表单实现：为可用性设计表单）所记：

1. 关系

表单建立了用户与（网络平台）机构之间的关系

2. 对话

表单建立起用户与机构之间的对话

3. 外观

基于表单的外观，建立起关系和对话

对于一个易用表单，应该包含这3部分。让我们依次来看，配合方便执行的实用规范，继而理解怎样让表单真正易用。

第一部分：关系

“没有人是孤立的”，17世纪英国诗人，讽刺作家，律师以及牧师John Donne曾经说过。的确，人类因各种关系而丰富，爱慕的，友好的，专业的或商业的。表单的意义在于建立或者提升用户与机构之间的关系。当这部分做糟糕时，关系就会被终结。

有一些显现出的原理需要被牢记心中：

1. 关系建立在信任的基础上

所以在你的表单中建立信任是非常关键的。这可以通过标志，图像，颜色，排版以及文字来实现。用户会切实感受到表单来自一个（可信赖的）坦诚机构。

2. 每种关系都有一个目的

在浪漫缓和的关系中得到愉悦或在商业关系中达到财务盈利目的。问问你自己，你的表单有什么目的？

3. 基于表单名称展现意图

名称会提示用户该表单是关于什么且为什么用户必须填写。

4. 相互了解

就像在某种关系中一样，相互了解对方是非常重要的。充分了解用户且经常考虑你的问题是否恰如其分，是否适时。这会给你的表单灌输一条自然流程。

5. 选择适当的语言并移除多余的文字

了解用户会帮助你选择适当的语言并移除多余文字。它会帮你创建一个可平衡你的需求和用户需求的界面。

6. 不要问超出表单范畴的问题。

在某种关系中，你会对那些问了越界问题的人产生怀疑（排斥）。这种情况同样发生于在线模式。充分考虑相关参与者继而决定什么信息是真正需要的。

7. 行为和表面的突然变更

这会让用户感到不安。同样的，永远不要在表格中或者表格填写的2个步骤中安插突然变更。

了解你的用户。让注册用户方便登录，让新用户方便注册。Debenhams勉强区分开了这2者的不同。

另一方面Amazon为注册用户和新用户简化了流程。

第二部分：对话

一张表单就是一场对话。就像真正的对话，表单承担起了双方的双向沟通，在这里，是指用户和（在线平台背后的）机构。事实上，那些填写了表单的用户是在尝试与机构沟通。

比如，对于社交网络，用户会通过填写表单向他们想加入的机构发出信息。在处理请求时（不管是自动的或是手动的），（站点）机构会（以标签方式）问用户一些问题，比如他们的姓名，邮件地址等等。当接受（或拒绝）的时候，（站点）机构会通知用户结果，至此完成整个对话流程。

至此得到一些有用的规范：

1. 表单是对话不是审问

就像之前提到的，表单是一场对话，不是一场审问。咄咄逼人的标签用词会激怒用户，而且（如果他们并没因此离开）他们可能会给你你想要的答案，而非事实。

2. 标签必须符合逻辑

对应于对话的自然流程，标签必须符合逻辑。比如，当问了用户一大堆其他问题后再来问他的姓名会不会很奇怪？一些相关的复杂问题应该放到表单后端。

3. 组合相关信息

比如个人详情。从一部分问题转到另一部分问题的流程应效仿一场（真正的）对话。

Yahoo的注册表单用紫色标题和细微线条高效群组了相关内容。

Constant Contact群组了相关内容，但它把不同的组分太开，导致用户迷惑。

4. 一次聊一个话题

在一场真正的对话中，每个标签都应该一次只针对一个问题，帮助用户对相应输入区域作出反应。

5. 自然停顿

在对话中的自然停顿是指在哪里安排留白，怎样群组标签，是否要把表单打散成多页。

6. 移除庞杂（元素）

在任何（真正的）对话中，人们都会因背景噪音而抓狂。所以请把可能阻碍用户填写表单的杂乱元素移除，比如横幅或者不必要的导航。

Dropbox提供了一个让注册表单看起来不错的好例子。留白区域看起来不错，而且页面非常整洁。

第三部分：外观

1. 标签

a. 单词VS.句子

如果一个标签的意图易于理解，比如询问姓名或电话号码，那么一两个字就够了。不过为了消除模棱两可的歧义，有时可能需要短语和句子。

Amazon的注册表单使用了完整句子，尽管用单词可能已足够说明问题。

b. 句子样式vs.标题样式

应该用“Name and Surname” 还是 “Name and surname”?

相对于标题样式，句子样式相较之下更便于遵从语法。有一点是肯定的，就是不要全部大写，这会导致表单显得不专业且难以浏览。

想要快速浏览Barnes & Noble注册表的标签有多么困难（它的标签都是大写）？

c. 标签末尾的冒号

一些桌面应用软件和运营中的平台比如Windows的交互规范推崇在表单标签的末尾追加冒号。一些在线表单的设计师仍遵从且坚持这个做法，主要原因是针对一些老的屏幕阅读用户，他们大部分是依靠冒号来标识出某个标签。而一些新近用户是依靠标识（特别是针对标签的标识）。除此以外，对于冒号的偏好是有争议的，如果表单样式保持统一，它是即不提高也不减损表单可用性。

d. 标签对齐方式：顶部对齐vs.左对齐vs.右对齐

与常规建议相反，输入框上方区域也并不总是最利于标签放置的好位置。它是一个让用户快速填写表单的理想组合方式。不过有时候你会想减缓用户阅读速度以求用户更全面地注意到标签细节内容。当然，让一个长表单保持一列，用户便于滚动页面，这比打散信息，组成多列来保证每样东西“错落有致”要好多了。每种对齐方式都有它的优缺点。

时间数据参考自“Matteo Penzo的“Label Placement in Forms” （在表单中放置标签）

（表单不应包含多列。以Makeup Geek的页面为例，很容易就忽视了右边纵列信息（更别说“必填项”注释在尾部））。

2. 输入区域

a. 输入区域种类

根据需求提供相应的输入区域样式。对应用户习惯，每种不同类型的输入框都有自身特性。比如对于单一选择结果使用radio buttons，多选项使用check box。

b. 自定义输入区域

不要创造新的输入区域样式。这在早期Flash站点上非常多见，而且现在死灰复燃了；我见过用jQuery开发的稀奇古怪的输入区设计。简单才往往是最便于使用的。尽可能地将输入区样式向原装HTML样式靠拢。

高亮输入区会让用户疑惑。

c. 限制输入区格式

如果你不得不限制用户输入数据的格式，至少不要使用会惹怒用户的方法。比如，与其在输入框后显示MM/DD/YYYY来提示用户，不如考虑提供3个下拉，或给个日历选取。

d. 必填项vs.可选项

对用户清晰区分不可以被留白的输入框。常规方法是使用星号标注（*）。只要能说明意图，用任何元素都可以，哪怕就是一个星号。

3. 行为

a. 主要行为vs.次要行为

主要行为是指链接和按钮这类完成“最终”功能必不可少的行为，比如“保存”和“提交”。次要行为是指“返回”和“取消”，使用户可以撤销其已经输入的数据。如果点击错误，次要行为基本上会导致非预期结果，所以可能的话尽量使用主要行为。如果不得不使用到次要行为，对应主要行为减弱次要行为的视觉比重。

缺乏明显区别的主次行为会导致失败。看看在St. Louis Community College站点冗长的登记注册表单上的按钮，想象一下万一误操作点了“重设表单”……

b. 命名规范

避免用通用词汇如“提交”命名行为，因为它会让表单显得很平庸。使用描述性的文字和短语，例如“加入LinkedIn”会更好。

尽管可口可乐正确地提升了主要行为按钮的重要性，但它用了泛泛的“提交”作为按钮描述，使用“加入我们”会更有帮助。

4.帮助

a. 表单随同提示

你应该从来没有机会为用户解释怎么填写表单。如果它看起来不像表单或者特别复杂，那么重新设计可能是你唯一的选择。随同提示应该在需要的地方使用，比如解释一下为什么信用卡信息是必填的或者生日信息会被如何使用或关联到“使用期限”。这类信息很容易被忽略，所以要让它言简意赅容易阅读。所以规则是：不要让解释（统算）超过100字。

b. 用户触发和自动帮助

比起在每个输入框下放上提示信息，不如在需要的时候再展现出来。你可以在输入框附近放置一个小图标，当用户需要关于这个区域的帮助可以点击它。更完美的方案是当用户激活输入框要输入数据的时候，自动显示提示。相对于通过JavaScript库比如jQuery来实现，这类效果更常见更容易。

Skype的注册表单包含了用户触发帮助（上方通过点击问题标识触发的蓝色框）以及自动帮助（建议的用户名）

5. 信息

a. 错误提示

这类信息提示用户出错，常用来防止用户（在出错的情况下）过于深入表单进程。可以通过以下方式来突出错误提示：颜色（通常是红色），熟悉的图像符号（比如一个警示标记），强调突出（通常在表单上方或者错误发生的位置周边），大字体，或者综合使用这些方式。

b. 成功提示

用成功提示来告诉用户他在表单进程中达到了某个有意义的节点。如果表单过于冗长，一个成功提示信息能鼓励用户继续把它填完。就像错误提示，成功提示也应该突出显示。不过它不能阻碍用户的表单进程。

6.确认

a. 只在需要的地方出现

过多的确认和无确认一样糟糕，因为它会让用户疲乏。确认应被限制应用于关键点（比如用户姓名可用性），确保有实际意义的回答（比如不允许年龄超过130）以及给出建设性答案，比如面对有限但长得要用下拉列表来显示的答案（如国家代码的前缀）。

b. 智能默认值

为了保证让用户更快更准确地完成表单，设置智能的默认值。比如，根据用户IP地址预选用户国家。不过得谨慎使用这项功能，因为用户会趋向于就这么放着预先填入的部分（而不做确认）。

Twitter的注册表单使用了自动确认（针对姓名，邮件地址，密码和用户名）以及智能默认值（“保持登录状态”）。

（结论）开始

“结论”这个词用在这里并不确切。让这成为将我所写的内容应用到你自己表单的起点。好消息是关于这一切还有很多可以说，你可以对应每个观点找到充足的资源。为准备开始的你列出以下三本给我写作灵感的书：就像我在开头写的，将调整用户（视觉）界面作为捷径并不能使你的表单实现可用性。我还能多说什么？观点在于你。快动起手来。

扩展阅读

* Forms That Work: Designing Web Forms for Usability, Caroline Jarrett and Gerry Gaffney

* Eyetracking Web Usability, Jakob Nielsen and Kara Pernice

* Web Form Design, Filling in the Blanks, Luke Wroblewski

相关话题：登录、注册的表单源地址：http://ued.ctrip.com/blog/?p=2738

细节思考表单交互设计之必选项思考

S++ — 2011-11-03 10:16:06

每当页面中出现洋洋洒洒的表单，用户就会开始感到头疼，有些用户就会直接选择放弃，而我想讨论的是，如何面对表单时让用户直接注意他们需要填写的必填项，减少不需要的信息的干扰。

必选项是以什么形式出现在现如今的表单中的呢？

1、表单信息的表现类别

下面是一个关于web表单设计的调查报告，这个结果来源于100个令人瞩目的网站。

41%的网站使用标签右对齐（YouTube, Facebook, Metacafe）

30%的注册表单使用顶端对齐（Behance.net, Wufoo, Tickspot, Mixx, DZone）

29%使用的是标签左对齐（(Digg, Ning, Wykop.pl, 43things, StudiVZ）

2、表单的应用范围

1）注册

2）登陆

3）填写信息（支付，订单填写，个人信息填写等）

4）发布

3、必选项显示形式

1）以*展现形式

a）*在信息标签的左侧

b）*在信息标签和填写信息的右侧

c）*在信息标签和填写信息的当中位置

d）*在信息标签右侧

2）非*必选标志

a）非*icon表现形式

b）无必选项标志（都是必选项）

c）标注非必选项

d）暗提示

4、必选项的深入思考

1）*和非*思考

a）*作为一个用户习惯已经存在了很多年，现在用户只需要看到文本框前面的*就基本知晓其为必选项，有些网站已经将“*为必填项”之类说明文字也直接隐藏了。那么对于这个用户基本不需要太多思考就知晓的图标，对于需要简化用户思考的表单来说确实要优于一些其他的非“*”icon的出现了。

b）有人会疑问一个表单，如果都是必填项，还有必要用*去标志出每个必填项吗？在没有必填项标志的时候，大部分人会有两种不同的理解，一类人会认为，这些均为必填项，而另一类人则会理解为此处均为非必填项，那么在这种情况下，如果标记了必填项可以满足不同人群的思考。

还有人，会疑问在一个表单中大部分项为必填项只有少部分为非必填项时，我们是否可以直接在非必填项旁标志出非必填的标志呢？当一个页面大部分为必填项时，而只有少量非必填项时，非必填项如果做的太弱化会导致整页无法区分必填还是非必填；而如果非必填项做的太过突出的话又反过来突出了页面中需要弱化的信息项，用户反而会去焦点关注在他们可填可不填的项中，有点适得其反。

因此，我还是认为当页面中的表单，无论是全部都是必填项还是大部分必填项，我们还是以“*”标出，这样也能使各类用户都不产生理解性的错误。

当然了，不同情况下的运用当然也有所不同，例如：用户在登陆时的认知，通常用户在登陆时输入项如用户名，密码等信息，而且此些项也基本是必填项，在这种认知的基础上，即使不出现*也不会造成任何理解性问题，那么作为精简原则来说，通常可以去掉*。

c）文本框内必填项暗提示，也是一个比较清晰标志必填项的方式，并且还很节省空间。

但是现在很多网站都在文本框中对文本框填写方式做其他暗提示，这个时候必填项暗提示就相对会被限制使用的范围了。作为必填项暗提示标志，还有两个致命的缺陷就是，当我填写完成时，我并不了解哪些是必填项哪些为非必填项，还有就是对于radiobox、checkbox、下拉框的必填来说也没有很好的解决方案。因此，在使用必填项暗提示时，在表单形式为文本框，并且文本框内无其他暗提示语句的时候也可以使用。

2） *思考

a）用户对于表单的视觉走向

从这张热点图中可以看出，对于表单类别的视觉走向是以左边标签为主向右延展。大部分用户集中在标签位置，通常用户填写顺序也是从上至下的，从左至右，较少用户会选择跳跃式的填写模式。

b）*位置

从上述用户视线流可以看出，*的位置应该在标签附近，并且能够整齐排列（这个可能还需研究）会更一目了然的展示出必填项。

这个时候作为：

标签左对齐的时候，*直接出现在标签前面，明显比较优，但是由于标签左对齐对于表单来说，标签项和填写项位置离开太远，可能会让用户搞不清楚到底哪个标签对应哪个文本框，因此此类标签方式不太赞成出现。

那么标签右对齐的时候，*出现在标签与文本框当中，个人认为相对前一种来说要舒服很多了。不仅使得标签项和*标志和文本框等都离得很近，而且*的位置还可以成一直线对齐。如果*出现在文本框或者其他项的后方，会使得用户不得不跳跃视线，并且他们在填写完成时才意识到哪些是必填哪些非必填。

标签顶对齐，此类方式，经常出现在宽度有限制的时候，也是目前经常看到的表现方式。按照之前的理论来说此类方式为了视线流更好的展示，个人认为标签前面带*会比较好，这样使得*、标签、文本框位置最近，也使得*能成直线展示。

当然还有一类特例，就是表单一行有多个填写项，这种方式*如果位置不当，很容易让人误解*的位置，如下图：

此图中，姓名前的*很容易让人误解为是下拉框出的*。因此这时候*位置如果在标签和文本框当中可以很好的规避此类误解。

虽然目前，我们认为标签右对齐，*出现在标签与文本框当中方式较优，但是也会出现特例，比如当出现radiobox的时候如果*出现在标签和radio当中，那么就会如下图：

总结：必选项是一个很小的展示方式，但其中还是存在很多很多的特殊问题，交互就是让我们思考页面中每个细小的环节，这样才能使用户在整体页面体验中获得最优最快捷的操作方式。当然具体情况还有很多很多，需要我们思考和考虑的地方也有很多，如果大家有很多的想法可以联系我们，让我们更好的充实我们每个blog文章。

连载此篇下期预告：细节思考表单设计之报错提示思考，期待大家关注。

相关话题：登录、注册的表单源地址：http://ued.ctrip.com/blog/?p=2493

由一个登陆框联想到的用户体验改进方法

Reakin — 2011-05-08 23:16:18

下午与部门同学进行话题讨论，关于电子邮件营销中的产品设计，期间的谈话引起一些思考，在这里记录下来。

一个产品的细节

在交流中我举出一些关于电子邮箱输入框的细节问题，例子举得是MobileMe网站me.com的登录输入框的设计。比较下面两张图，会发现变化。

MobileMe默认输入框状态

输入长邮箱地址后的状态

注意到没有，如果输入的邮箱地址长度超过输入框长度的话，网站会自动将邮箱地址的字体大小缩小以适应输入框。这样的处理实现了一个很简单的结果：用户一直能看到自己输入的邮箱地址，减少输入错误。

这个细节从我开始试用mobileme时就注意到，但是现在还没有看到多少人谈论这个设计，同样也没有在其他常用的网站上看到过这样的设计。而我认为，这个细节太TM的赞了。你明白的…

关于用户体验

知乎上有话题讨论用户体验是不是被我们过度放大了，喜欢里面一个回复里说的，小改动也能解决大问题。上面的输入框自适应字体大小调整也是很小的优化，却大大的提升了体验。

好多文章说用户体验都会谈到环节，说每一环节的体验做好了，才能形成整体的体验。很直白的说，我们现在的能力做不到这个，所以我们不去谈整体环节。只希望能在每个影响用户重要行动的小点上，都花上一点时间，琢磨下有没优化提升的可能，那就会越来越好。那也体现了我们是在用心的做产品。

关于学习的态度

我们经常上很多的网站，在使用过程中都会遇到一些让自己舒服或者不舒服的设计、体验。可是当自己去设计网站的时候，那些让自己不舒服的设计也一样会在产品中出现，而让自己舒服的体验也还是只能从别人网站上感受得到。Wow，这里就是有问题的了。

只说反映出来的一点：没有在平时生活中好好学习、借鉴。学习，不是说看着教科书、听着专家学者高谈阔论就是学习。在我们使用任何产品过程中，都可以学到东西。常去思考，为什么这样，为什么不那样；这个产品是哪里触动了我，是哪里打击了我；为什么我就会愿意点这个按钮，为什么那个文案我就不喜欢，等等等等。然后在自己做事的时候，去想想，我是不是该这么做。

然后，我们就进步了。

相关话题：登录、注册的表单源地址：http://www.ixuqiu.com/blog/182

登录框的报错反馈

画为琦画 — 2011-02-08 20:07:34

这里以淘宝的登录界面为主要示例。

先来看一下：

1：淘宝并没有使用“用户名”这个最常见的称呼，而是使用了“账户名”，或许淘宝认为这样称呼更为准确吧，不过大多数用户对此并不会关心。

2输入框里给出提示：可以输入“手机号/会员名/邮箱”，这对于在不同网站拥有不同帐号的用户来说有着很好的提醒作用。比如我，已经忘记了大约三个淘宝账户了。

另外这里有个不得不提的原因：

我分不清淘宝会员和支付宝会员到底有什么不同，你当然可以告诉我淘宝和支付宝是分属于阿里集团下的不同的分公司，抱歉，这不是我关心的，我现在仍然记得，当我理所当然的用我的淘宝账户登录不了支付宝账户时的疑惑、不解还有恼羞成怒。

3.提供记住密码服务，不过时间只有两周，不能选择更长时间。

Ok，回到淘宝登录框。

鼠标点击输入框，输入框边框黄色描边，示意激活，目前很多网站都是这种处理方法。

下面分析一下报错反馈，这个才是重点。

情景1：用户名正确，密码错误。

反馈信息：

1 登录框上部给出提示：

红色框里的提示：您输入的用户名和密码不匹配，这里的措辞严谨，然而并不能有效的告知用户错误产生的准确原因：到底是账户名不对还是密码错误呢？

2 登录框左侧给出补充提示，分析用户可能出现的原因，并给出了一些建议：

3多次出错后需要输入验证码

当用户多次登录不成功时，为了防止用户密码被暴力破解，附加了校验验证码步骤。

而一些网站是在首次登录时就要求输入验证码，相较而言，淘宝这里的处理更人性化一些。注意到一点：淘宝的验证码是数字和大写英文字母的组合，所以没有给出常见的“输入左边图中字符，不区分大小写”这样的提示。不过这里有个小问题，待会分析。（ps：这种字母黏连在一起的的验证码，是破解成功率比低的，貌似google最先使用）

2：用户名错误（不存在的用户名），密码错误。

反馈信息：

1登录框上部给出报错提示：

告诉用户，所输入的账户名并不存在，并且给出“忘记用户名？”的链接，引导用户通过其他途径取回用户名，很贴心。

2左侧同样给出补充提示。

验证码的位置

常见的验证码的位置有两种情况：

验证码图形在输入框左侧（淘宝）

验证码在输入框下面（拍拍）

这样看来没什么问题，但是当输入法为中文时，杯具就出现了：

如上图所示，验证码几乎被输入框完全挡住，很难辨识，解决方法有四种：

1：记住验证码，字不多，难度不大。不过这个得是在发现遮挡验证码后，先删除输入框内的文字，才能重新去记忆验证码。（这是我常用的办法）

2：用鼠标把输入框拖到其他地方。（因为需要手离开键盘去拿鼠标，所以这种方法我极少使用）

上面两种方法都不算是太麻烦，不过是将成本转嫁到用户身上，不知道其他用户怎么想，反正我是用着不太爽。

第三种方法就是像“蓝色”一样，改变验证码的位置：

3：把验证码放在输入框的前面

Google也做了同样的处理，更为贴心的是还配备了残障人士语音识别。赞~

4:强制输入框只能输入英文字符——在验证码仅包括英文和数字的情况下。

以上仅为个人的一点看法，欢迎不同声音的交流讨论。

关于WEB登录注册系统的下午茶

Spark.尚公子 — 2010-12-17 00:38:06

引子

故事发生在一个懒散的午后，笔者发现MSN在登录界面出现的时候，不能修改默认值——也就是说必须完整地输入登录邮箱，看似无可非议的设计——真的是无可非议吗？

全部输入太麻烦，还要按SHIFT+2（输入@），为什么不能让我选择下拉呢？
明明默认显示邮箱是hotmail，我也是hotmail啊，为什么不能直接修改前缀呢？
……

让我们对比下一个比较给力的正面案例——新浪微博。当用户输入第一个字母的时候，系统已经将可能的邮箱直接推荐过来，非常方便。即能减少用户的操作成本，又可以大大降低因错误输入导致的无效反馈，对系统的底层后台无疑也是件幸事。

宏观来看，登录&注册系统是WEB产品对于用户的第一印象，满意度的高低直接决定了产品的竞争力，尤其是在功能逻辑愈发同质化的市场环境中。那么，如何才能设计一款出色的注册/登录系统呢？

一、给用户一个注册/登陆的理由 Give the user good reasons to join

Psychological and economic theories suggest that humans seek to minimize cost and maximize gains.Increasing the perceived benefit/cost ratio increases a person's motivation to engage in the behavior. – B.J.Fogg

首先，在设计系统之初，必须要明确产品本身的价值点（What）。人类大多数的社会活动都是基于利益驱动的，所以，我们必须要清晰地告诉用户，到底能获得什么（获得免费的邮箱？还是拥有和朋友分享照片的平台？）其次，还要告诉用户，如何去做才能获得预期的一切（How），即系统的功能逻辑要明确。

产品能够提供给用户的服务必须直观展示，“卖点”鲜明

二、让整个注册/登录流程玩转起来更轻松 Make the sign－up process feel effortless

落实到具体设计上，可归纳为以下几点：

1、明晰的流程提示（如进度条等），强化引导文案，能让用户知道正在进行的操作流，心中有数。此外，推荐“三步走”流程设计方式，让用户一次只做一件事，简约是一种美德。

2、提示文案要轻松、易懂、准确，不要出现太过强烈的祈使句，如“必须……”、“决不能……”，多采用鼓励性质的文案，引导用户顺利完成注册/登录流程。

3、保留原始数据，这点在之前的文章《WEB设计中的“帮助用户从错误中恢复”》也提过，细节决定用户体验的成败。

4、如果登录/注册系统本身出现在首页，那么需要通过一些小技巧来制造合理的视觉中心，强化系统在信息架构中的比重，赚点击，提高使用转化率。

5、表单设计方面应当简洁清爽（尤其是在设计高级注册信息表单的时候），一屏范围内保持3-6个控件即可，即：Don't ask any question that make users think （丫的别问哪些没有意义的问题。）

6、别忘了注册成功页面的欢迎反馈，这是很容易被忽视的一点，精致的产品能通过亲切的欢迎信息（Welcome）极大地提升用户体验。

下午茶不放糖

除了以上几点，还有两点值得分享，望抛砖引玉。

1、关于验证码

可能是为了防止用户恶意注册（批量级别），国内大多数产品均采用了“验证码”机制，这种方式最恼人的一点就是验证信息的识别性无法保证，扭曲的变形字体无疑给绝大多数用户带来极大的识别成本(有视觉障碍的用户)和操作成本（刷新），遗憾的是目前仍没有比较好的方法来解决这种问题（例如QQ那种单IP限制注册次数的方式只是用一个问题去解决另一个问题）。

2、新型注册系统设计

这种设计是把注册表单直接集成到首页上，而非传统的新页面跳转，节省了用户的操作成本，功能逻辑也更为清晰（如最近很火的Pip.io）。这是否是未来一段时间内的注册系统设计趋势，还有待观察，至少现在看来很值得借鉴。

相关话题：登录、注册的表单源地址：http://blog.jingweb.com/?p=287

上海航空网站注册表单优化方案

千鸟 — 2010-10-10 10:20:28

上午手忙脚乱的定月底到杭州的机票，通过“去哪儿”入口进入到了上海航空网站，居然必须登录后才能预订（绝大多数购票网站游客也可以定）。看在几百块钱的面子上，那就注册吧。

注册表单我一看就乐了，简直就是几天前与用户交互的核心文中观点的真实写照，问题非常典型。看起来就很不好，用起来更是很不便。虽然没有给我造成很大的障碍，但肯定耽搁了不少时间，一点都不轻松愉快。先看如下截图：

这是一道很好的练习题，错误中的经典，考题中的极品，请先自己思考。我直接把我做改进的观点先列出来，有优先级差异，分为“可访问性”和“可用性”两部分，先是可访问性问题列表：

改成单列布局（引导视线）；
分两块区分“帐户信息”和“机票信息”两类字段（区分内容属性）；
各表单控件根据属性定制宽度并分组（“暗示提供了组织答案的有用线索”）；
红色的必填星号提示应该提前而不是置后（让用户优先看到）；
下拉选项文字不应该淡色降级呈现（至少不要比字段名的颜色浅）；
“密码”字段两字中间空格去掉（无需刻意对齐上边的“用户名”）；
“性别”字段改用单选控件无默认值（下拉列表默认“男”也是错误的）；
“出生日期”字段做成点击选择，并右侧日历icon提示（差异化引导）；
“联系地址”字段控件应该使用textarea而不是input（文本区域用来写文字段落）；
“国家”和“城市”字段使用下拉选项，联动并在表现上合并（属性一样）；
“证件类型”和“证件号码”字段在表现上合并（属性一样）；
“联系号码”和“手机号码”字段改成“座机号码”和“手机号码”（表述的含义应该平级）；
“邮编”字段放“联系地址”之下（地址比邮编更重要）；
“注册”按钮放“重置”左侧（优先看到和使用）；

注意，以上仅仅是可访问性问题，因为我还没有使用表单。可用性问题是使用表单之后发现的，我只做了个简单测试，不完全的测试结果列表如下：

点击“检测是否有相同的用户名”后，不能使用是警告窗口告知，能使用则“√”提示。第一应该统一提示效果，第二能使用用绿色字符，不能使用用红色字符。
“密码”字段录入完之后tab进入了“真实姓名”，“证件类型”字段选择后之后tab进入了“出生日期”，都应该用tabindex来做索引。当然，如果单列布局不会有这些问题。
所有错误提示都不应该用警告窗口，最好在各字段之后明确提示。

也许有人会说，这么较真干嘛，你不也顺利订购成功了么，我能成功不代表所有人都成功。在专业角度，作为测试版我没意见，“完成任务”的目标是实现了。但是设计质量呢，这样的作品只能算不及格（此例子设计只做到了两点，第一辅助说明文字降级呈现，第二区分主次操作按钮）。

正好用这个例子就事论事的讨论下单双列布局问题，最常见的双列布局优势理由是“可以节省空间，缩短版面”。理论上如此而已，但双列布局会带来很多无法规避的麻烦，而且事实上表单只要足够明确和清晰，长一点对用户来说关系不大。节省版面也有设计技巧可用，其一减少不必要的字段，其二合并同属性或有关联的字段（如证件类型、证件号码），其三隐藏优先级低的字段（如手机号码、座机号码，应该推荐使用“手机号码”）。

最后，还是看着几百块钱的面子上，花时间写完这篇具有可操作性的优化方案。网络上机票价格变化很快，因为下单流程不畅而影响没有抢到特价票的事情，我经历过两次。希望所有航空网站的工程师改进网站，造福更多网络上的旅客，也为公司创造价值。

相关话题：登录、注册的表单源地址：http://blog.rexsong.com/?p=11514

与用户交互的核心

千鸟 — 2010-09-26 09:13:26

——读《Web表单设计》

“用户互动”是互联网产品不可或缺的关键，而用户互动的入口必然是表单。由此，无处不在的UGC类Web2.0产品内，表单无处不在所凸显的重要性逐渐得到Web设计师重视，并自成知识体系。2008年10月的阅读推荐中列过此书，归入“框架层”范畴之内。

出版社策划赞不绝口，说这本书的写法非常好，她唯一的一本都被人要走了，“光实践不行，得为大家指出支持这些实践幕后的共通性的东西，这样才方便读者举一反三。”仔细揣摩，深以为然。出版社的反馈让我惊异不已，如此“专业”和“窄”的技术领域怎会得到如此追捧？因为，目前国内互联网产品的普遍水准来看，并不需要如此窄而深的设计准则。或者说，好像还没有哪家公司准备投入如此厚重的资源专门“修理”表单（作者介绍自己曾在eBay平台担任“首席用户界面设计师”）。国内设计实力相对较强的淘宝团队，这方面我认为做的也很欠缺（我在淘宝有三钻的买家经验，以及两钻的卖家经验）。

很多内容早已看过，快速浏览了两遍，回忆起很多有趣的故事，自己观点得到别人认同时总是自我感觉良好。如果别人是把观点写入书中那就更好了，如果事情已经过去了三年甚至五年，那就叫好的无法用语言来形容（烂书除外）。

第五章76页“输入框的长度”，谈到“暗示提供了组织大难的有用线索。”此问题在不同场合分别与两位设计师讨论过，我的观点与书中一致，应该根据字段属性定制input长度，为避免看起来太乱，适当分组即可。对方观点也一致，表单中所有input包括textarea长度应该相等，如此能保证全部对齐更好看……是否好看涉及主观因素暂且不论（曾因为此问题与工程师争的面红耳赤，对方拒绝执行并表示不可理喻，我则充分信任自己的经验和美感），也不应该优先考虑，我在想录入QQ号的input与录入URL的input长度对齐的这种表单能好用么？甚至对方提到，客户会直接要求这么改，我严重怀疑验收产品的客户并不是一线直接使用表单的同事。

第六章94页“主动作和次动作”，主次有“别”已经是没有争议的结论，关键是怎么“别”的问题，大家的意见想法创意很多。我曾经有个观点，所有不提交数据的操作都不能用按钮。由此，次操作的“取消(Cancel)、返回(Back)”等都不应该用按钮，直接文本“链接”最好。书中有这样的案例，但很遗憾也没有提出具体详实的差异对比，模糊的说了下结论。曾经也是与很多设计师讨论过，大部分不同意，我也认为这个立论有点欠妥，所以恨恨作罢，现在做设计全部还是用按钮的“取消(Cancel)”。

车轱辘话表扬完，入正题谈谈缺点，个人认为本书总结的知识体系还不是特别清晰，章节组织稍显混乱。以我的实践经验做对比，细节还值得继续深入挖掘。包括各个控件的用途，以及使用范畴这样的基本功，其实是很多设计师所欠缺的。我做过很多表单的优化，比如文本字段input和文本区域textarea的使用场景差异。（如下图）

另外，过于偏向了“定量”方法论，其实我更倾向于了解各位设计师的实践经验和思路，我需要的是“渔”而非“鱼”（但显然“鱼”类书籍的市场反应更好）。也许如此的确能让设计作品更令人信服，但我还是深信“数据”并不能解释一切，因为艺术本身就带有强烈的主观主义。

举个例子，下拉列表select的选项option，小到不能再小的细节。我见过的所有设计都把默认option排到第一，动手改过放到最后，我认为更好，不增加工作量也完全可以形成可操作规范。此问题没有寻求过科学验证，以我做编辑提交成百上千表单的经验来看，这么改肯定没错。重复使用一百遍后，任何微小问题所造成的不悦都会被放大。（如下图）

最后不得不提本书最闪耀的特点——该用色的图片无色，可以用色的文字双色。所有截图，以及做的图片，彩色印刷本可以增色不少，可惜全部黑白。完全不需要用色，而用排版技巧能解决的标题分级，却使用了绿色。结果导致铜版纸印刷并没能在表现效果上得到提升，好处也许让书看起来非常“环保”。

相关话题：登录、注册的表单源地址：http://blog.rexsong.com/?p=6156

注册表单的设计探讨

deadpoet — 2010-09-02 08:56:25

最近读了三本书，全部关于Form设计。如果你觉得Form设计怎么可能写成书，而且没有一行代码，我很理解。两年前当我在Amazon上看到那本Web Form Design时，也是同样的惊讶。学过HCI再回头看终于也能理解了，不过他人的研究还是“刺激”了我，往往在看到他们对细节的关注程度，才会深刻的感到自己做事的粗浅与浮躁。

SitePoint出版的Fancy Form Design
Caroline的Forms that Work
Luke的Web Form Design

对于这三本书，我个人的建议是：无论你是否设计Form，从UCD实践来说，Luke的这本书都是值得一读的（而且现在也有中文版上市）；如果你偏重代码实现，无论是HTML，CSS 还是JavaScript（特别是jQuery），SitePoint出版的这本书能给你很多帮助，对Accessibility的讨论也相当实用；如果你需要设计非常复杂的Form，例如政府机构、企业报表等，无论其是否基于Web，Caroline的书都提供了方法步骤帮助你整理思路，更好地处理大型 Form的设计。

允许我在这篇文章粗略的结合这三本书讨论一点Form设计，一方面是对自己所读内容的小结沉淀，一方面也是希望能分享出来提供思考与讨论；做出这篇文章内容的延伸，在下一篇文章里，将把这几天对105个网站注册Form的一点小小的调查和分析的结果呈现出来，并讨论一些细节。

Form的定义与历史

Wikipedia对Form（广义）的定义是：一份文档，其拥有空间（域），可以针对一系列有相似内容的文档进行填写、选择。

Form的历史有多久？Wikipedia从法律历史的角度追溯到18世纪早期，由Charles Babagge构想出来。出于我国教育里对所有事物都必须有中国人身影出现的深刻影响，在全力挖掘自己脑海里自从高中毕业后就开始退化的历史残渣，终于想到我国古代的“画押”仪式：一系列文本，加上可以按压“指纹”的输入空间，看似完全符合Wikipedia对Form的定义。

Caroline将Form抽象出三项属性。这里以宋代的林冲同学被发配到沧州的画押过程为例：

关系（relationship）：提出问题的组织（北宋王国中央政府）与回答问题的用户（朝廷钦犯宋江）之间的关系；
对话（conversation）：提出的问题（画押人宋江同学的指纹），相关的指导内容（犯罪“事实”，罪名，罪刑，压印处等），以及不同话题的组成方式（不详）；
外观（appearance）：文本的组织方式（猜测是标题居中、正文左对齐？），输入域（按压指纹处）和图形图案的使用（政府官印？）以及色彩的使用（我估计是白纸墨字，质量差点）等。

当然，这三本书以及这篇文章谈到的是Web Form，还不至于需要一位考古学家或者博物学家来探究它的历史。当Tim Berners-Lee在1992年提出首批HTML Tag时Form还不见踪影，直到1995年HTML 2.0时才进入开发者的视野，如果从这一年算，它的年龄可能比我们大多数人都要小很多。

Form的组成（非HTML元素）

Web Form与生活中的纸制Form对比是件很有趣的事情，因为这个过程可以帮助抽象出共同的特征元素。综合这几天的阅读擅自改编为以下“版本”：

在我国轰轰烈烈的伟大拆迁运动中，花了大把银子向政府买地的房地产企业甲方要与无知善良的草民乙方建立某种联系，Form此时做为一种媒介，同时也成为一个建立联系的过程。作为媒介，有组成它的元素：

标题（Title），说明Form的目的，拆！
介绍（introduction），说明甲方的“情况”和想要建立联系的性质，我要拆你房，你不许找我要合理赔偿；
问题（questions），甲方需要对乙方的哪些“情况”进行了解，姓氏名谁，家在何方，同意补偿条款，等等；
输入域（input field），乙方对自己情况的回应区域（钱不够而无其它，不同意；钱不够但有黑社会时常光顾，同意）
注释（notes），例如对问题的说明，法律层面的权责；
行动（action），Form被提交的方法。

说它也是一种建立联系的过程，因为双方需要完成一系列交互：

如果是纸制Form，例如一份街头的市场调查，可能是一位调查人员（甲方）拿着一份调查表与路人（乙方）交谈并记录。调查人员与路人握手，问候，自我介绍（introduction），告知调查目的（Title），路人根据与对方所属组织选择同意（或拒绝），调查人员提问（questions），路人回应，调查人员记录回答（input field），告知相关数据的用途和隐私保护政策（notes），将调查表收起整理归类（action），感谢路人，赠予两张优惠券（也许吧），等等。这个过程中，眼神、表情、语气、肢体语言等等都是交互过程的一部分。

Web Form呢？企业利用互联网向访问者呈现Form，用户扫描（标题、介绍、问题），输入（回答）...鼠标点击（行动），HOORAY！搞定！缺少了什么呢？眼神、表情、语气、肢体语言吗？或许...

语气可以对应Web Form的标题、介绍、问题的用语与组织；

眼神、表情、肢体语言可以对应Web Form的初始视觉呈现，以及交互过程中帮助、错误提示信息的呈现方式。

举个例子，一个在Layout和分组（grouping）上混乱的Web Form就好像一个衣冠不整，无精打采，逻辑混乱调查人员出现在眼前，要么他手里铐着一黑色手提箱，内有百万美钞，钥匙已经交给你，就等着你回答完他的问题；要么，还是用一句“我很忙”搪塞过去吧。

这样或许算我牵强的将Web Form与纸制Form都统一对应起来。

至此大概阐述完毕我对Form的定义、性质和组成。谈谈Web Form的设计吧。

Web Form的设计原则

Luke列出这样的四条原则：

痛苦最小化（Minimize the pain）：没人喜欢Form，他们想要的是完成Form后得到的服务，所以越简洁容易的完成越好；
阐明完成路径（Illustrate a path to completion）：既然目标就是完成填写，那么就尽可能清晰的表明要如何完成这一任务；
考虑情境（Consider the context）：Form不可能独立存在，总有它所处的应用、商业等考虑，它是产品或服务的一部分，就需要融入其中；
确保交流一致（Ensure consistent communication）：虽然Form的发起可能包含各个不同部门自身的考量和需要，但Form必须以一种声音呈现。

Caroline将Form设计建立在Social Exchange Theory上：

规则1：建立信任（Establish trust）:

表明Form是由一个真实存在的组织发布；
简化与该组织的联系方式；
确保Form有明确的目的；
确保Form的设计看起来由专业人员完成；
远离广告；
检查Form能正确工作，杜绝任何缺陷。

规则2：减少社会成本（Reduce social cost）

请求得到用户的回应，而不是要求他们回应；
保持Form的简短容易；
给用户进度提示或标题列表让用户感觉Form在他们的控制之下；
将对用户敏感、私人信息的请求数量最小化；
设计用户确实“能够”回答的问题；
错误提示信息要尊重用户已付出的努力了；
如果用户确实出现错误，尽量保留用户已完成工作。使重新输入的工作量降到最低。

规则3：增加奖励（Increase rewards）

及时、小额的奖励，比延迟、更大的奖励更有效。

Luke和Caroline的思路很大程度上一致而在一些细节上互补。实际上，如果将Form换成交互产品的任何一种，这些原则基本上同样成立。这里我不打算纠结在这些原则上，你可以把这些作为设计时的guideline，尽量使每个细节都能与之对应，然而，真正决定你的设计优劣的，总是最终用户，所以，更重要的，还是了解目标用户，将他们作为核心融入到设计过程中去。

Form设计细节

这篇文章不是三本书的笔记汇总，不会把所有要点都列在这里，否则出版社要和我急了。下面就几个重点方面做一些小结，一来敦促自己审视对内容的理解，二来提供给读者以思考与讨论。

设计Form和设计任何交互产品一样，需要数据的支持，Luke列出了典型的用户数据来源渠道：产品可用性测试；现场调查；客服资源；网站跟踪数据；Eye Tracking；Web惯例，如果你熟悉UCD，对此应该是耳熟能详了。

对于不同类型的测试用户的可信度、测试时的提问等细节，Caroline给出了更详细的阐述，内容较多，而我对其中的一部分内容有所质疑，这里不列举出来，如果你有兴趣，可以参考原书。

Form问题的选择、安排和用语

问题的选择：Luke提出的一个四字原则是Keep（保），Cut（砍），Postpone（延），Explain（释）。简单的说，保留核心问题，砍掉现时非核心问题，延迟问题到合适情境，解释隐私敏感问题。

以注册Form为例，多数网站，特别是Web应用会保留到最简：用户名、密码、邮件，是为用户提供服务的核心数据来源，有些应用会选择继续询问姓名、出生日期等作为可选，但更多的应用会选择延迟到用户自己想要设置个人信息时给出选择。如果你要说哪个更合适？这恐怕就取决于设计师对产品功能、性质的判断，对公司在公众心中信任程度的信心，当然也是和其它各部门交流后，得以决定问题的“合适情境”了。社交类网站从其功能性质来说在注册时询问姓名、出生日期或许可以接受，但例如简单的todo list、在线笔记这种个人应用，可能就没有必要在注册时询问姓名、出生日期之类信息了。

问题的安排：Form的交互过程如前面对其性质的讨论，如同一场对话，需要好的逻辑性，否则，有句成语大概可以形容：语无伦次，所以问题在安排上需要有逻辑性。对于篇幅长的Form，适当的分组、分页有助于逻辑连贯性的表达，就好像对话从一个话题转移到相关联的下一个话题。虽然做交互设计说明你很可能是一个逻辑思维很强的人，但利用用户测试、以及与小组其它成员、同行的交流以理解各个问题之间的联系来辅助自己的设计或许是更好的保证。

问题的用语（wording）：特别是如果设计网上问卷调查之类，问题的提问方式与用语很可能极大的影响数据收集的可信度。设计者与有心理学、社会学背景的小组成员交流合作会是一个好的选择。

Caroline对问题的答案类型有一个分类，我认为值得借鉴：

Slot-in：指的是例如姓名、性别、出生地等大脑里固有的信息；
Gathered：用户需要自己搜集的信息，例如钱包里某张名片上的名字、电邮，电脑上某篇文章的段落等；
Third-party：第三方信息来源，是用户需要从其他人那里得到的信息，例如给对方汇钱时先询问对方的帐号；
Created：用户在看到问题时才“创造”出的答案。

这里没有严格的区分，问题是因人、因情况而异。例如密码、昵称，很可能用户有自己固有的选择，但如果因为安全性、重复等原因被要求提供不一样的选择，那么用户可能就只好走“创作型”道路了。（我再险恶一些，如果用户不幸遭遇严重脑损伤，忘了自己姓甚名谁...）

问题是，这样的区分意义何在？我的答案是，帮助我们在构建Form时更有逻辑性、有根据的思考：

问题类型	对应策略
Slot-in	将问题以最简短形式呈现，例如常见的用户名、密码等，因为这些属于“常驻”大脑信息，过多的解释等反而显得冗余；
Gathered	一些关于信息来源的提示或许能帮助用户，例如信用卡，因为这些一般也属于生活中比较经常接触的信息，通常也无需繁琐的解释或者定义；
Third-party	可能需要以正式的问题形式来解释需要的信息，同样，一些信息来源的帮助或许能帮助用户，另外也需要考虑将相关信息发送到第三方；
Created	可能需要以正式的问题形式呈现，考虑提供帮助信息以协助用户构造答案。

综合起来：

不要把自己想出的问题当作理所当然，一股脑的全放到Form上抛给用户；
无论是问题本身还是相互间的关系都需要有逻辑性；
什么样的问题如何去问？需要为用户提供怎样的支持？我们需要认真思考，也需要用户的反馈。

Form Layout对用户扫描的影响

Luke的书里有很多Eye Tracking实验的结果。关于Label的上对齐、左对齐、右对齐，提交按钮的位置等都有相应的“最佳实践”（Best Practices），我不在这里一一列出，否则出版社又该和我急了。这里把Luke和Caroline的结论结合在一起，做一个简单的小结，“剧透”无罪！

稍微偏题一点，对于Eye Tracking能在多大程度上帮助我们理解用户，这个很难说，至少我还不敢下任何结论。一位HCI教授曾经跟我说的是：what they look at, may not be what they think of。这是一位常年用Eye Tracking分析玩家玩视频游戏的教授（对，没错，研究玩游戏的教授...好吧，我在误导你，实际是通过游戏研究人对事物的“沉浸”现象），所以，在能有机会证实Eye Tracking的作用前，我的观点依然还是Usability Testing,，field observation等来衡量用户的使用，Eye Tracking作为辅助。

好了，抛开Eye Tracking，小结一下Form Layout的作用（下一篇文章或许能更好的阐释这一部分的内容）

上对齐：扫描轨迹标准的垂直向下，所以理论上最快，但垂直占用空间大，不适合问题较多的Form，但对问题长度变化的适应性好。

（图片来源：http://www.flickr.com/photos/rosenfeldmedia/2367264762/）

右对齐：扫描轨迹也是基本垂直向下，所以理论上也很快，垂直占用空间小，对问题长度变化的适应性较差。但如果出现用户需要浏览所有问题时，速度下降。

（图片来源：http://www.flickr.com/photos/rosenfeldmedia/2367264946/）

左对齐：扫描轨迹水平上更多更长，所以较慢，垂直占用空间小，对问题长度变化的适应性较差。但如果出现用户浏览所有问题，速度不会受到影响。

（图片来源：http://www.flickr.com/photos/rosenfeldmedia/2367264266/）

何时用何种对齐方式？

上对齐：问题较少，问题长度可能发生较大变化（如多语言），希望用户迅速完成。如果你的问题全部属于slot-in类型，且数量少，我认为这种方式基本是首选；
右对齐：类似上对齐，但适合问题较多的Form；
左对齐：出现大量用户不熟悉的问题，希望用户花时间思考这些问题；
其它：也有将问题内置于输入框内，以节省水平空间需要，但随着输入框成为焦点，问题会消失。用户可能出现走神或有认知能力上的障碍而遗忘问题的情况，此时问题的消失对用户来说就是灾难。我的建议还是尽量避免这种设计（好吧，CSSKarma给了一个非常奇怪的解决方法，有兴趣的话，你可以看看这个Demo）。

帮助、错误提示和肯定信息

我想有了Caroline对问题类型的分类，应该有很好的依据决定什么问题需要怎样的帮助信息了，需要强调的是，帮助信息不仅要告诉用户如何填写，对于隐私数据也需要告知为何填写，和相关的保护承诺（法律上的）。

大段帮助信息集中在一起不是个好主意，因为我们很容易瞥一眼后迅速跳到第一个输入框去，在网上，“耐心”是个稀罕物，无论是动态还是静态，针对情境的帮助都比懒惰的将大段帮助丢在一堆好得多。

星号（*）基本是默认的“必填”代号，但放在什么位置却有很多方式，Caroline的书中提到Eye Track显示用户很少会注意到输入域右端，而集中在输入域左端，所以，如果你需要标注（*），label和Input之间或许是最好的选择，其次是 Label的左端，最后是输入域的右端：

（酷6注册Form设计，注意星号的位置）

对于星号，我的疑问是Screen Reader无法告知用户它的含义是”必填“，SitePoint的书中提供一种解决方案是：

Username

如何呈现相关信息？我的想法是尽量避免内置于输入框的帮助，让相应问题与帮助信息在视觉上有明确清晰而简单的联系就好，做设计要提醒自己多做减法。

之所以说错误提示信息，是因为有些网站只告诉你出错，不给你提示，当然如果丢给你一句“系统错误”就找不到北了，下面是淘宝的注册Form，绝大多数时候错误提示信息都与错误相关，但还是出现了下面这个情况：

(淘宝注册Form设计)

有一种情况我很反感的是在你输入过程中检测错误，从你开始输入时就看到一个红红的叉放在那里，告诉你：“你错了！”，然后不停的说下去，直到你对了。就好像一个人不停的骂你：笨蛋，笨蛋，笨蛋...直到最后，它说：天哪，你这笨蛋终于碰对了。而实际上你非常清楚自己输入的没错。

任何交互模式都要看具体的应用场景，同样的情况，例如下面这个短信输入框的提示就是非常好的应用（建议BlogBus采用，不要等到我写完了提交时再告知文章“超长”）：

（图片来源：http://aralbalkan.com/687）

作为程序员，无论是后端的PHP，Python，RoR，Java，还是前端的HTML，CSS，JavaScript，都习惯“inside out”视角：我能做到这么酷的功能，用户一边输入，我一边检查，不拿给用户显摆一下简直浪费；可作为设计者，需要“outside in”，再酷的东西，用在不合时宜的地方，那我也只能打110告你“扰民”了。交互的模式网上的收集、总结有很多，但只有真正理解用户、功能和场景，才能把最合适的模式用在最恰当的地方。

除了错误提示，还有肯定信息，或者叫成功信息。作为程序员可能很少考虑“肯定”：你本来就该正确，我干嘛要肯定你？很多网站在注册时都会在输入域失去焦点后检查你的输入，如果符合网站对答案的要求，会在输入域右侧或下方显示一个正确的符号。这实在是很贴心的功能，对用户每一个问题所作出的努力都是一种肯定的鼓励。我的思考是，即使是出错提示信息，是否也能适当的对用户的努力进行鼓励，而不是单方面感受到的沮丧呢？举个例子，唯一用户名，如果用户不幸选择了重复的用户名，错误提示是否能够在提示时肯定用户的选择：虽然该用户名被注册，但确实很“独特”，很“酷”，而我们建议一些同样很“独特”，很 “酷”的用户名（当然，这需要你确实能生成比较“独特”的用户名）。

提交按钮

提交按钮的放置，Luke给了唯一而明确的建议，和输入框（左端）对齐（可参见上面的三幅Eye Tracking例图）。

至于次级按钮，例如重置，如果确实需要，如Luke所建议，最好有机制能够让用户“撤销（undo）”重置的操作。

分页Form的流程设计和干扰因素：

前面提到分页的逻辑性是好的交互设计的基础，就好像从一个话题转向另一个相关话题，不会让人觉得唐突而产生疑惑。这个过程中将其它无关链接、视觉元素甚至整个网站导航从Form所在页面去除是很多注册、支付流程采取的策略，例如Amazon，对于这样的网站，这些关键流程的完成程度最大化是网站成败的关键，而只保留Form相关元素似乎是得到了Amazon实践认可的成功策略。

涉及到分页，那么请从一开始就告诉用户要经历哪些步骤，多长时间，并在每一步告知这一步的内容和在总体进展中的位置（一个反面的例子将在下面一篇文章提到），如果你不能肯定主要步骤中会有分支可选步骤出现，那么就不要一步步的数出来，告诉用户他们在哪个阶段就足够了。

个人化：

个人化（Personalization）即根据用户个人偏好和使用状况，自动完成Form的部分内容填写（所谓Smart Default），比如Amazon会自动把你最常用的信用卡作为购物的支付方式，但同时也保留了让你选择其它信用卡的Form；很多网站根据用户IP自动填写地理信息等。

个人化确实在多数时候方便的了用户，但依然需要考虑保留用户选择的权利。设置默认选项时请多考虑一秒钟，特别是select类型的输入域，作为程序员为了避免用户漏选，习惯设置一个默认选项，可如果你没有把握填写Form的用户绝大多数会选择某一选项，那么最好还是留给用户自己选择（下一篇文章会有具体的讨论）。

Accessibility

Accessibility是最被忽略的设计因素，不过很可惜，我的导师是这个领域的专家，不把这方面拉出来溜一圈总觉得不好意思，所以虽然知道很多设计者基本无视这一方面的存在，认为他们的工作不涉及这一方面，我还是要多说一点。

英国和美国有专门法案（Disability Discrimination Act 1995 UK, Section 508 US），规定政府、社会组织等的网站必须提供Accessibility支持，这是社会无歧视的重要一方面。如果社会中的一群人无法像其他人一样自由无限制的获取公共信息、使用互联网服务，那么就构成歧视。特别是现在很多国家开始考虑，甚至已经将互联网、信息的自由获取作为人权，那么或许有一天这不仅再是歧视，而是赤裸裸的侵犯人权的问题了（为了让你印象深刻，首先要吓到你不是）。

在读HCI时，另一句对我影响很大的语句是：“为Accessibility设计就是为几十年后的自己设计”。或许我们都幸运的没有在任何方面出现生理机能上或认知能力上的缺陷，你也压根不想与残疾人这个社会群体有联系，但我们有一天都会变老，步入老年后，人的感官功能和认知能力都会大幅下降，无论是听觉、视觉、触觉，还是行动能力、认知能力上都会出现问题（更多请参考Web Accessibility for Older Users）：

色彩辨析和敏感度：难以辨析深蓝与黑色，相对蓝色与绿色，老年人对红色和黄色更容易辨识；
瞳孔缩小：使老年人需要更大的亮度，对亮度改变的适应能力也随之下降。60岁老人年的视网膜对光的接收只有20岁年轻人的40%，而到了80岁则迅速下降到15%；
对比敏感度：从40岁开始，在较高空间频率上的对比敏感度开始下降，直到80岁时，只有原来的15%。

如果我们希望几十年后的自己还能有质量的享有各方面的信息和服务，那么我们最好能从现在开始让更多的产品，更多的设计师意识到Accessibility的重要，并为此做出一些努力。

Form的Accessibility是个很有争议的话题，很多建议也是自相矛盾，例如Luke建议在Web Form中为键盘用户使用tabindex属性，而sitepoint的书中认为这没有必要，合理安排元素在HTML中的位置就能保证Tab的顺序。就这一点我的想法与SitePoint类似，良好的HTML结构和语义构造是Accessibility的根本（说到语义，HTML5在我看来最大的贡献就是对这方面的强化）。accessKey属性也有类似的境遇，总的来说，除非你的Form足够复杂且被用户反复使用，否则，我不会考虑遵循Luke的建议，去为Form添加快捷键。

Ajax技术的大规模应用是让Accessibility非常头疼的事情，举个简单的例子，如果一个页面的内容动态更新了，我们肉眼可以看到，但Screen Reader要如何知道更新发生了，而重新阅读页面的相关部分？W3C专门提出了标准试图缓解类似这样的问题：WAI-ARIA，如果你对这方面有兴趣，可以参考Opera开发社区的文章：Introduction to WAI ARIA，读起来自然比W3C的标准有乐趣点。

说到这里，举个我在学习HCI时反复听到的例子，一个典型的在HTML文档里加强Accessibility的举措是为每个加入alt属性，这个属性的值一般会简单的描述图片的性质或内容，很多Screen Reader也会将其读出，所以不要把文件名等无意义的内容留在里面，对于依靠Screen Reader得到信息的用户来说，这些内容的存在还不如你将alt的值留空，如果图片只是装饰性而并不对整体内容有什么影响，同样考虑将alt留空，因为这些可能反而会影响视力有障碍者理解内容。另外，有一个longdesc 属性，指向一个专门描述图片的文档。比如一张大型的图表，你可以专门用一个文档说明这张图表所要显示的数据、关系与重要结论。

当然，要保证Accessibility，最重要的依然是用户测试。你可能拿着一本关于Accessibility的书把网站全部改造一遍，给每个加上一个详细的alt，但这能保证使用Screen Reader的用户顺利的使用你的网站吗？想想上一段谈到的问题。最后只有真正的用户才能评价你的网站是否满足他们的需求，所以，还是别忘了用户测试！

你自己可以做一些类似的测试，对，我没开玩笑，这是我自己尝试过的方法。如果你使用Ubuntu，那么Orca Screen Reader很有可能已经在你的机器上。打开它，然后打开你要测试的页面，闭上眼，或者找你老婆或女友要条丝袜蒙上眼，看看你能否通过Screen Reader顺利的理解页面，找到目标链接？还是像没头苍蝇般在Screen Reader的指导下乱飞（如果你不知道Screen Reader的某些工作机制有多奇怪，可以参考SitePoint那本书中关于legend和fieldset这两个元素的讨论）？这时或许你就会稍许理解生理机能上有障碍的用户在生活上有多不便了，我们应该在尊重他们坚毅和努力的前提下，帮助他们做得更多。

最后，作为文章的结束，提供一点扩展资源供参考：

Luke自己关于Form Design的一篇文章：Web Application Form Design
noupe依然非常耐心翔实的汇总了各种资源告诉你如何设计绝色Form：Beautiful Forms - Design, Style & make it work with PHP & Ajax
Dey Alexander Consulting公司提供的关于Form Design的汇总：Form Design
W3C关于HTML 5中Form元素的标准：4.10 Forms - HTML 5
在线电子书Dive into HTML 5（推荐此书）关于Form的一章：A Form of Madness - Dive into HTML5

To Sign-up or not to Sign-up

deadpoet — 2010-09-02 08:54:33

作为Form的应用，注册是最基本而广泛的形式之一。随着对Form设计相关内容的阅读，收集了105个网站的注册Form，从几个方面进行了一些粗略的数据收集，也记录了一些出现的问题，初衷是为了将书中的内容，与实际生活中的设计对比，这里将一些分析数据，有问题的设计等记录在这里，作为一个学习积累的过程。

Smashing Magazine在两年前做过一份关于注册Form的调查（中文译本：Web表单设计之注册表单），我的调查并没有按照Smashing Magazine的思路进行，完全根据这段时间对Form设计的理解制定的调查计划，虽然一些内容因为时间、精力的原因没能纳入收集的范围，不过这次小范围的调查也能对注册Form的大体状况有所了解了。

这105个网站有如Google，Yahoo，国内门户等大型网站，也有小的Web应用，比如Wufoo这样可能没多少人听说的网站。这些网站的选取完全没有参照Smashing Magazine的100个网站（如有雷同，纯属巧合），没有绝对的选择标准。不用问为什么是105个，当我意识到该停下来时，105就是这个数字了。这其中中文网站40个，非中文网站65个。很遗憾缺少了Facebook、 Foursquare、Tumblr、Posterous这样优秀的网站（测试和截图的两天里恰巧没能翻上大火墙，便宜了在最后时刻替代他们的网站）。而关于Twitter的注册有一个成功的Re-design的案例，没有纳入调查之中，如果有时间会在以后的文章里加以讨论。

如果你要问做这样的调查有什么意义？我给出这样几条理由：

帮助我理解阅读的内容与实际生活中的设计是怎样联系在一起的，验证我所理解的内容，无论是证实还是证伪；
如果把一件东西单独放在眼前，是很难对其做出评价的，它究竟是好还是糟糕？好在哪里？糟糕在哪里？对比往往是发现问题直接而有效的方式。虽然不是站在某一款产品的立场上去研究竞争产品，似乎缺乏目的性，但这个过程确实让我看到更敏感的意识到什么是好的和糟糕的设计；
当然，做一件事情的终级理由还是：it's fun! (for me)。

（没有经过任何处理的原始数据可以通过这条链接得到，所有截图可以在这里下载（7.9M，其中包含了没有纳入统计的网站，如Facebook等），原始截图时间集中在2010年8月22日到28日的一个星期内，所处环境是 Ubuntu下的Opera 10.61（需翻越大火墙的网站截图使用的是Firefox 3.6.8），这样的环境可能非常“小众”，算是我在考验各网站的跨平台跨浏览器支持吧）。

一些简单的统计数据

问题数量

问题数量直接影响用户注册所需要的时间，虽然对于不同类型的网站，对用户数据需求的考虑不同，但我个人所见证的多于6个问题的注册，绝大多数都可以将多余的问题延迟到用户使用服务以后的适当时刻，而不需要延长用户注册时间。虽然有些网站将“多余”问题单独分组，让用户“可选”，好像尊重用户选择，但无论用户是否选择，都必须思考选择与否，这是否是合适的时刻呢？用户注册是为了享用服务，不是为了提交个人数据。

（105个网站问题数量统计）

（40个中文网站问题数量统计）

（65个非中文网站问题数量统计）

105个网站的问题数量算术平均为8个，其中数量为6的网站最多，基本上包括ID、Email、密码、重复密码、验证码和同意服务条款，没有验证码的情况下则可能询问重复Email，或者与服务紧密相关的问题，例如LBS类型网站的所属城市。

中文网站的注册问题数量全部在5个以上，最多的达到24个，算术平均8.4，问题数量为6个网站最多。

非中文网站最少2个注册问题：Email地址，密码，而最多也达到20个，算术平均7.8，问题数量为7个网站最多。

为什么要注册

这个问题似乎很傻。当用户已经到了注册界面，不是已经说明他们有答案了？多数网站似乎也是这么想的。

（为何要注册？）

60个网站没有在注册页面进一步说明注册理由。不过我发现在此时简炼的告诉用户网站的服务宗旨，影响范围，注册后享受的服务，在很大程度上增强了我对网站的信任（别说得天花乱坠就行），特别是如果问题较多或涉及隐私信息时。

Label对齐方式

这大概是个永久的话题，前一篇文章已经有所分析，这里不再重复。

（Label对齐方式）

中文网站的注册Form极度偏好右对齐，即使在问题数目较少的情况下，上对齐这种最适合人眼扫描的对齐方式也很难见到踪影。非中文网站的左对齐和上对齐占了大半比例。当然，这105个网站中对齐方式唯一的另类也是一个中文网站，将在后面“登场”。

提交按钮的对齐方式

从Eye Tracking的结果来看，将按钮与输入域的左端对齐应该是最有效率的。那么这105个网站呢？

（提交按钮对齐方式）

一共出现了6种对齐方式，以输入域左端对齐最多，与理论吻合；其次居中放置是中文网站的偏好，而非中文网站则平衡于居右与居中；最少见的是与label对齐（19楼），和与输入域右端对齐（CNTV英文）。

次级按钮

次级按钮出现的情况很少（13%），绝大多数网站（91/105）都希望你一条路走到黑，剩下14个网站面临一个问题就是当用户真的选择“非主流”，你把他们带向哪里？除去“RESET”选项，最执着的选择是将用户带到“User Account Q&A”（Slashdot）。多数会返回主页。

要冒号吗？

（冒号的选择）

对中文网站的统计来说似乎是：要。从非中文网站来看，似乎是：随你便。我的想法是，无论你怎么选择，保持一致性最重要。

星号与必填/选填

星号作为必填基本是一统天下了，除了英超利物浦的官方网站将其用作可选的标识，而Wikipedia将星号做注释之用。

（必填/选填标示）

过半网站没有任何提示，默认全部问题必须回答，这一点无论中文还是非中文网站基本一致。

采用星号的网站面临另一个问题：星号的位置。前一篇文章里，我认为放置在Label和输入域之间应该是最为合理的，那么实际数据呢？27个采用星号且非上对齐的网站中，14个将星号放置在Label与输入域之间，10个放置在Label的左端，3个放置在输入域的右端。

将星号放在Label左端是很多网站采用的方式，可能是认为按照人的阅读习惯，从左开始阅读Label，然而就像前一篇文章提到的，用户的视觉扫描线集中在输入域的左端，即Label和输入域之间，这个区域或许是这种提示出现的最好区域。

隐私信息

这里我将隐私信息囊括了真实姓名、性别、出生日期等。一半以上注册都不涉及隐私信息，但涉及隐私的注册依然比我想象要多。

动态帮助信息与错误验证提示

32个网站没有任何帮助信息，中文3个，非中文29个；
34个网站提供静态帮助信息，中文18个，非中文16个；
39个网站提供动态帮助信息，中文19个，非中文20个。

似乎中文网站都很热心，93%都提供帮助；非中文网站里有44%十分“冷淡”，不提供帮助信息。

47个网站没有动态错误验证提示，中文6个，非中文41个；
58个网站提供动态错误验证提示，中文34个（20个检测空域），非中文24个（6个检测空域）。

85%的中文网站提供动态错误验证提示，对比仅37%的非中文网站，我国网站技术水平和对用户体贴度大幅领先...真是这样吗？

一些实例

另类的对齐

WSJ中文的注册问题达到17个，在媒体类网站中数量仅次于FT中文，而更恐怖的是，这17个问题的对齐方式在105个网站独树一帜：

（WSJ中文对齐方式）

对比一下WSJ日文：

（WSJ日文对齐方式）

虽然并列输入域并不是最优，但比较WSJ中文的设计，后者还是显得专业许多。

请不要忘了Label与输入域的对齐

（电影网注册）

Label未与输入域对齐，帮助信息与Label同字体、同大小，劈头盖脸上来就怀疑你不是人（验证码开头），多好的设计实践啊！

要求平等权利的次级按钮

（VeryCD按钮）

（优酷按钮）

（SpringNote按钮）

（搜狐按钮）

设计的一条原则是对比（Contrast），Luke的书里也专门谈到次级按钮的呈现问题。Non-Designer's Design Book里更有一条亘古不变的呐喊就是：Don't be a wimp！

我还没开始输入呢（搜狐，新浪）

（搜狐密码安全强度）

这是个不大不小的问题。我还没输入密码，为什么就告诉我密码安全度低呢？

（新浪密码安全强度）

相比较，新浪没有出现这个非常细小的区别。请多一份对用户的关怀和对自己产品设计细节的苛刻。

为什么认为我是女的？

（19楼默认选项）

有几个网站默认注册用户的性别为女性，从程序设计来说，select类型的输入域指定一个默认值可以防止出现用户输入为空的验证错误，如果网站绝大多数用户被证明都是女性，那我也算无话可说，但如果不是，那么还是不要让男性用户在此“诧异”的停顿一下为好，性别是个slot-in类型的问题，给用户选择比让他甄别你的默认值，再选择要快而且无意识。

（开心001默认选项）

生日的选择也有类似的情况，我不知道是否有人调查过，当注册时设定一个默认出生日期，是否会让一部分早于这个日期出生的用户停下来感慨自己“老了”（估计十年后遇到了我会这样联想），不是这个网站的主要服务群体了。我所见到的最极端的默认选择大概是下面这个例子：

（Academic Earth令人诧异的默认选项）

默认选项的使用也请基于用户数据的支持。

OICQ？！

（杭州绿城足球俱乐部会员注册）

既然做一件事，那就用心尽力把每个细节都做好，OICQ听上去就像是远古传来的呼唤，谁能记得这是QQ的乳名...

我不同意！

上面提到VeryCD有一个与提交按钮地位平等的次级按钮，这个次级按钮很有意思，如果没猜错它使用JavaScript的history实现的，这大概是Cancel类按钮最简单懒惰的实现了，基本就是对你说哪里来的就回哪里去。

然而VeryCD让人费解的是，无论是主页还是其它页面的注册链接都定义为新建页面：你要注册就会打开新的 Tab、新的窗口，这时候问题来了，没有history！此时这个“不同意”什么作用都没有，你只能眼巴巴的看着。如果你想多实验一下，从VeryCD以外的任何网页直接跳到它的注册页面，点击“不同意”，你又被VeryCD简单粗暴的请出去，谁叫你丫的不按规矩进来！

这到底是注册还是登录？

（Amazon.cn注册/登录）

考察Amazon.cn让我想起两年前注册Amazon.co.uk的莫名。当我的意识里已经把注册和登录区分的非常清楚时，将两者结合在一个界面上，不加区分的使用一个提交按钮处理，只能让我迟疑自己的选择。我实在不解Amazon的设计决策，即使有过注册的经验，我仍然会在这里停顿下来思考自己是否处在正确的位置。

而Amazon.cn也没有让用户闲着，上图中要求提供提供的用户名到下一步时实际上是变成了Email地址。如果Amazon.cn真的要与总部的设计亦步亦趋，那至少这一步该跟上吧！

（Amazon.com注册/登录）

另外，joyo，卓越，Amazon.cn，我到底在和什么公司打交道？

即使再牛，也请尊重惯例。设计的“创新”是为了让用户更省心，不是更费心。

呃，第一步...没了？

（天涯社区注册）

天涯的注册页面让我思考了半天，原因就是左上角那个1。我不知道这究竟要经历多少步骤，但从这个页面来说，似乎只需要这一步。然而接着出现了2，告诉我要去邮箱收信，等我通过邮箱打开新的页面见到了3，此时我才明白自己结束了茫然的注册之旅。就好像被人蒙着眼，穿过大厅、走廊，进门，最后，Surprise！

麻烦你告诉我一共多少步，每一步的目的是什么，don't try to surprise me，除非你打算寄给我一张百万美刀支票。

（天涯注册，修改）

入乡随俗

（IBM DeveloperWorks注册）

这里是中国，我们把姓放在名的前面，如果你不打算让我把葛优的那段关于中美姓名论述的台词搬出来，请考虑做点什么。

Retype password有多少种说法？

最后一点，我发现有些帮助和出错提示过于冗余繁复。例如“确认密码”作为Label已经明确了问题，有些设计却要用“请再输一遍密码”，输入域后面还要跟上一段非常冗余的帮助信息说“请再输入一遍您上面输入的密码”，看得抓狂！

将“确认密码”写作“再次确认密码”的Label是否有些奇怪？如果说确认密码是“Re-type password”，那“再次确认密码”就是“Re-Re-type password”...

有些网站使用“重新输入密码”这样的用语，好像不是“确认密码”的意思吧，不是吗？

注册该见鬼了？越来越多非中文网站抛弃了注册，转而使用Twitter、Facebook、Yahoo和Google认证身份。虽然一些网站保留了注册，但也把其作为“old style”，不推荐使用，这样的举动极大方便了用户。国内是否也该做类似这样的事情了呢？QQ？淘宝？

（向注册说再见？）

这种调查其实还有一点重要的内容：同类型网站的对比，同一网站中英文版的对比等。因为还没有整理出数据，我会在以后的文章里介绍。

就此结束两篇对Web Form的讨论，赶在此时分享出来，做为对8月的告别，对9月的第一声招呼。

Cheers, everyone, and have a nice day!

Web表单设计之注册表单

djjian2008 — 2010-07-26 23:15:33

必须面对的问题有：用户不喜欢提交表单。然我们的目的是让用户愿意提交表单。

下面是一个关于web表单设计的调查报告，这个结果来源于100个令人瞩目的网站。

注册表单设计调查

1.表单的安置

1.1注册表单链接的标题是怎么样的？

当用户想要加入某个时，他们会试图寻找“sign-up”，“register”，“join”，“join”，“become a member”或者“creat an account”等这样的短语。用户期望可以通过这些链到注册表单。不幸的是，情况不一定是这样的。

从图表可见，最受欢迎的标题是“Sign up”（40%），接着是“Join”（18%），“Register”（18%）以及“Creat account”（17%），极少数是按钮超大，又闪亮，并且写着“start here”的字样。设计师与其设计并强调服务的功能性还不如试图去表达信息。

1.2注册表单的链接放在哪儿？

当用户第一次访问某个网站，他们会试图找出单独布局块代表的意思。他们的眼睛运动是跳跃的，并且用户试图了解哪个区域是更重要的，他们想要的内容可能被放在什么地方。为了满足用户体验，设计师需要帮助用户直观地知道哪些是在开始使用服务前所需要做的事。

如果用户找不到通往注册表单的链接，他可就不会注册你的服务。因此让链接尽可能地显而易见是最关键的。那么设计师应该把“注册”的链接放在什么地方？根据调查，这个注册链接

59%的网站是放在网站的顶部（其中76%是被放在右上角）
21%的网站是放在首页的突出位置（链接或者表单自己被放在首页上）
9%是被隐藏在顶部“登陆”链接之后（例如：Craigslist）
很少注册链接会被放在侧边栏上（7%-Propeller, Xing），但是4%的站点为用户直接提供服务，只有在用户需要保存设置的时候才需要用户进行注册。

2.表单的设计

2.1需要简化注册表单的样式吗？

当用户点击了注册链接之后，他很有可能想要注册你提供的服务。更重要的是，他并没有点击那些探索更深导航操作的链接或者具有吸引力的广告链接。

因此，设计师尝试去掉所有没必要的详细资料以及不能帮助用户完成表单的描述。常常只是呈现一个logo和表单自身，没有任何的导航操作和附加信息。用户必须尽可能地关注在他要去完成的任务上。任何会分散用户注意力的因素不应该被保留。

设计师经常使用“最小化”的布局来构建注册表单。根据调查，61%的web表单和普遍的页面相比更简单（例如：MovableType, Livejournal, Amazon, Yandex.ru）

从雅虎的注册表单可以看出，访问者只需要填写账户信息即可，没有别的干扰因素去分散用户的注意力。注意表单中的语气和语义都是吸引人的对话式，这既简单又友好。

Flixster是个典型的反面例子，它把表单页面塞得满满的，一点也不尊重它的访问者。注册页面上提供了每种可能的操作导航，并且登陆页面上右边的广告比登陆表单还要突出。Photobucket应该是我们见过的第二拥挤的表单。

2.2需要提供任何附加信息吗？

许多设计师试图通过类似于帮助、信息内容要求甚至是版权申明的附加信息来鼓励访问者主动填写表格。但是它不同于点对点，在大部分例子中注册的好处依然是通过表单来体现。

41%的表单告诉用户注册的好处（MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com）
28%仅仅是单纯的注册页面，没有任何附加信息（Pownce, DeviantArt, Dailymotion）
11%告诉用户需要多久时间来填写（Threadless, Newsvine, Wordpress)
很少一部分（6%）网站提到注册过程中所需要填写的信息。一些步骤中会提供一些警告（8%）和示意（6%，例如37signals, Bloglines）

2.3单页表单VS多页表单

调查结果中，93%的表单是单页表单。设计师试图帮助用户尽可能快速和无痛地完成注册流程。只有一些网站利用多页表单把探索用户参数选择结合在注册过程中。

比如，Meebo把一个完整的注册过程整合在一张注册表单中，并且通过一个弹出框的形式为用户提供注册向导。这个表单由6个页面组成，用户通过一些附加信息的选择从而进行他们账户的设置。

2.4输入框标附加信题需要突出吗？

62%的注册表单用粗体的方式去突出输入框的标题。还有的使用斜体去达到同样的效果。为了让标签能够更加可见，20%的注册表单用色彩，18%的用纯文本。

2.5标签对齐

41%的网站使用标签右对齐（YouTube, Facebook, Metacafe）
30%的注册表单使用顶端对齐（Behance.net, Wufoo, Tickspot, Mixx, DZone）
29%使用的是左对齐（(Digg, Ning, Wykop.pl, 43things, StudiVZ）

根据“Matteo Penzo的标签放置研究结果（Matteo Penzo’s label placement research）”（1996）和“Luke Wroblewski的发现（Luke Wroblewski’s findings）”（PDF），右对齐由于几乎不需要眼睛的注视，能最大的减少完成的时间。如果你想要达到相同的目的但是只有一块受实际区域制约的垂直屏幕，标签顶端对齐则会更好一些。如果你想让用户了解标签的内容，左对齐则是最好的。

2.6有多少必填区域？

当进行一个调查时，我们已经注意到表单中的必填项越来越少了。几年前，设计师要求访问者填写他们的姓名、地址、城市和个人兴趣，但现在仅仅只需要登录名、密码和确认密码。

我们发现54%的表单要求用户最多填写5个输入框（其中6%的网站在使用服务前根本不需要注册）。34%的表单使用6-8个输入框，然而有12%的网站顶着用户的忍耐度让他们完成超过9个的必填项。

2.7有多少可选项？

和上面发现的类似，我们注意到大多数网站避免可选项并且要求用户在完成注册流程之后补全可选项。其中62%的表单根本就没有可选项，还有98%的表单有少于5个的可选项。

2.8垂直或者水平的安排区域

在这个方面，垂直无阻碍延伸的垂直布局区域是注册表单表现出强大趋势。86%的网站把输入框垂直布局。除此以外，15%的布局更强调利用漂亮且吸引人的视觉设计来让访问者在填写表单时感到更舒适。

Box.net提供了一个简单的垂直布局的输入区域。当用户输入数据的时候，他们的眼睛固定在纵轴输入框左侧的交叉点上。

Mint是一个横向布局的注册表单。当用户输入数据的时候，他们的眼睛需要跳来跳出。

3、表单的功能性

3.1.Hover,active,focus – 使用中的效果?

为了提高表单的完成率，设计师试图避免各种各样的分散因素，并且提供一个清晰明确并且简单的web表单。这就是为什么任何视觉效果需要非常适当地使用的原因。

84%的web表单没有任何种类的hover、active或者focus的效果
16%使用非常细微的鼠标上移的效果

3.2. 帮助，支持，工具技巧：静态还是动态的？

有时候，输入区域的标签不够明确，但是用户却需要足够理解才能提供这些信息。用户名适用哪些字符格式？密码的字符数限制是多少？提供的Email地址会不会自动变成登录名使用？

用户通过建议和技巧的帮助最小化地减少输入框重新考虑的次数。而且，没有比虽然输入的内容看上去完全正确，但是输入框却不接受的情况更恼怒的了。为了避免这个问题，设计师（通常）使用不引人注目但清晰的建议提示。

调查报告中57%的web表单只有 “静态”的帮助提示，这些帮助提示只是之前假定好的一些和用户有关的提示信息；这些提示被明显地放在输入框的旁边。10%的操作提示通常是在一些帮助图标被点击之后或者用户输入信息时才会出现的。

3.3．帮助，支持，操作提示：应该放在什么位置？

当在为用户提供帮助时，一定要确定帮助是简单地提示，并且可以方便地被找到和理解。这是确保用户通过帮助提示不犯错误地完成表单的决定性因素。为了达到这个目标，你需要知道用户希望这些帮助在什么地方出现。所以，这些帮助和提示通常被放在表单的什么位置呢？

如果帮助提示出现的话，它们会出现在…

在输入区域下面（57%）
在输入区域的右侧（26%）
在输入区域的上方（13%）
在输入区域的左侧（4%）

我们注意到提示信息直接放在输入框下方是一个强烈的趋势。通常这类帮助提示会有稍微不同的色彩，大部分情况比主要内容要浅一些。

3.4.输入确认：静态的还是Ajax动态？

去年一整年，很多网站为了和用户进行互动，看上去似乎确实充满了Ajax的应用，但Ajax在流行网站服务中仍然还没有设法达到临界点。令人惊讶的是，我们不能认清Ajax的趋势。用户在输入完所有信息点击提交按钮的“经典”确认技术依然比Javascript的实时确认要来的流行。

根据研究：

30%的表单只在表单顶部显示一条错误信息。（没有提示哪个输入框有问题）
29%的表单会在输入框旁边提示相应的操作帮助（顶部没有提供错误信息）
25%的表单同时使用错误信息和输入框提示。
22%的表单利用Ajax的实时确认来进行提示。
14%利用Javascript的错误提醒。
1%的表单是用系统信息提醒，并且给出“后退”链接。

3.5．错误信息的设计

正如你所看到的，我们已经识别出6种不同类型的错误提示。显而易见，14%的表单仍旧使用Javascript错误窗口来传达问题（例如，YouSendIt, Mail.ru, Newsvine, Clipmarks, Yandex，看下面的截图），然而只有22%使用Ajax确认（通常用来确认用户名的有效性）。当然也显然的是没有一个网站是没有任何确认的。

Newsvine使用Javascript错误窗口来传达问题。

通常设计师试图报告错误的使用方法。a、在点击提交按钮之后显示错误信息；b、在视觉上高光“不正确”的输入框。第一种错误情况通常会作为一条信息在页面的顶部（表单之前）显示出来。第二种情况通常是把错误的输入框的边框色彩和输入的标签进行高光（大部分情况是红色的字体以及红色的背景色）。

有时候设计师合并两种技术并且利用输入区域高光错误信息的方法。例如，看一下Ning结合两种技术的注册表单

通常，红色被用于标示错误；但是在这种情况下就没有必要了。当表单完成时，Tickspot, Mixx.com和Furl使用黄色来表示遇到的问题。

不过，如果有任意一种色彩来表示注册成功的话，它应该就是绿色，97%的网站表示成功的视觉就是用绿色的。

3.6有必要确认Email吗？

只有18%的网站需要确认Email（例如，Odeo, Ning）。我们实在没有任何理由让用户重复输入email地址，毕竟用户能够看到他们输的是什么，因为email地址的区域不像是密码区域那样是以星状显示。

3.7有必要去确认密码吗？

当用户看不到自己所输的内容（他们看到的是以星号代替的）时让他们确认输入感觉上是有理由的。但是很多网站为了缩短完成注册表单的时间而去掉二次确认的步骤。

72%的情况是有必要确认密码的，但是许多例如Facebook，Friendster，LinkedIn, Stumbleupon, Pownce 和 Twitter的网站都不要求确认密码。

3.8. 需要使用校验码吗？

如果校验码去掉的话用户肯定很开心，但是实际上校验码却是必要的，因为网站需要防止垃圾注册软件创建很多垃圾帐户，不然他们需要不停地在数据库中过滤掉这些账户。

根据我们的调查：

52%的网站没有使用校验码。
39%的网站是不能在不刷新页面的情况下实时刷新校验码的，这个实在是在可用性上非常的糟糕的一件事。

但是我们还是不能看清注册表单是否需要校验码的趋势。任何情况下，如果你使用校验码，请确定它是易可读的，或者在不可读的情况用户可以实时刷新校验码的。一些网站没有提供实时刷新校验码的功能，除了Digg，AOL, Slashdot, Google等。Fm倒是能够让校验码变成可以听的，当它很难被识别的时候。

3.9.需要使用取消按钮吗？

当我们在思考设计表单时一些认为会碰到的问题时，我们期望注册表单没有取消按钮，因为毕竟所有选项都已经填写好了，对于用户来讲就没有太大的意义去退出这个表单。然而我们在一定程度上错了。

只有8%的情况使用了取消按钮，这些情况中的一些取消按钮正好出现在“条款和协议”的下面（例如，Zoho Writer）。所以如果用户不同意服务条款，他们会退出这个流程。另一方面，一些服务在注册之前给出了一个支付方案（例如，Crazyegg）。在这种情况下用户选择错了支付方案时他们需要利用取消按钮返回并重新选择另外更好的支付方案。

除此以外：我们还是不明白为什么Dzone要把取消按钮放在注册表单的左侧。

如果使用取消按钮的话，有4%的情况是放在提交按钮的右侧。在这些网站中观察发现，取消和提交按钮没有非常强烈的视觉区别，而且还被挨在一起。从可用性观点上去看，把主要动作和次要动作用视觉区分开来并且用明确的空隙去区别它们是更有意义的。

3.10. 提交按钮的对齐方式

考虑到表单的样式，把提交按钮左对齐、右对齐或者放在中间是有实际意义的。有56%的设计师把提交按钮左对齐，第二位是26%的把按钮居中对齐。

右对齐的提交按钮依然比较流行（17%），但是一般都是起到需要进行下一步操作时的指示作用。在这些情况中提交按钮经常是以“继续”或者“下一步”为标题的。理由是：通常桌面软件中的“下一步”按钮就是放在右侧的。

3.11. 感谢信息

几年前，大多数服务在成功注册之后会提供一个简单，基础的感谢信息（通常还带有一个登录的链接），现在大多数站点都试图去激发用户立刻探索一下他们的服务。
45%的网站要求用户在完成注册之后提供更多的信息，在他们的网站上找到自己的朋友，或者邀请用户的朋友来使用他们的网站。
33%的表单会用友好并具有吸引力的语气指出 “接下来要去地方”（网站功能的探索）。
4%的网站提供了一个基础的“谢谢你”的消息。
2%是直接跳转到首页。

更多的发现

18%的注册表单旁边都会有登录表单或者登录连接。（例如, YouTube, Reddit, Digg, Lulu, Metacafe）
78%的注册表单没有用星号或者高光去表示必选框；大多数情况无论星号或者其他形式的高光都不会被使用。
9%的注册表单用流程指示来告诉用户他们进行到哪一步了，并且告诉他们哪些步骤是完成注册的必填项。
85%的站点更喜欢用尽可能简单的web表单。
区域通常都是用空白区来群组和拆分的，有时边框的用途也和空白区一样（22%），还有9%的情况是利用不同的背景色来区分。
99%的案例中都是用到标签索引（除了Habrahabr）
24%的表单使用谈话式的语气，试图通过标示的对话达到用户所需。在这种环境中通常使用类似“你叫什么？”，“你的Email请告诉我一下？”或者“我想要……”等非正式的语句。
38%的网站宁可毅然选择正式商务的语气，友好地让用户填写所需的信息。（例如，“您的用户名”，“确认密码”等等）
38%的网站使用系统语言，用户被要求“登录”，“用户密码”，“地址”等等。

总结

注册链接的标题大多数是“sign up”（40%）并且被放在右上角。
注册表单为了避免分散用户的注意力而使用简单的样式。
93%的注册表单是单页表单。
41%的注册表单通过解释注册的优势来吸引用户注册。
62%的输入框标题是通过加粗高亮的。
标签不是都排成一条直线的。
设计师试图不用必填项和可选项。
86%的注册表单更喜欢用垂直布局的表单。
注册表单没有任何hover,active或者focus的特效（84%）。
提示和帮助不管是静态（57%）或者动态（33%）都是出现在输入框下方（57%）或者右侧(26%)。
状态确认和动态确认一样流行。当然Ajax不是趋势
82%不需要email确认
72%需要密码确认
校验码可用（48%）可不用（52%）
92%不用取消按钮
提交按钮是左对齐（56%）或者居中对齐（26%）
感谢信息激发用户继续探索网站的服务（45%）

原文地址：

http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/

http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/

网站注册那些事儿

Villiamin — 2010-01-05 22:38:23

前几天光耀童鞋喷了一篇《谈网站注册、登录过程》，今天我们在与小爬童鞋梳理购买流程的时候也谈到了这部分内容。其实注册作为一个网站基本功能再普通不过，但提供不同产品服务的网站对于注册的要求不尽相同，也不是每个网站都有一个体验良好的注册流程。本座在这里简单聊下在不考虑运营指标和商业目的的前提下，基本的注册功能如何设计。

注册页面的信息架构
注册页面的信息架构力求清晰简洁，注册表单作为信息主体，除了logo，帮助信息以及一些必要的返回链接，避免其他一切会干扰注册的信息，全力保障用户专心走完注册流程。

注册表单的设计
1.注册不要有门槛。简单的表单设计让用户易于进入，在之后的服务应用中再进一步挖掘用户信息。
2.用户名：最好将邮件地址作为登录名，当然手机号码更好，方便用户记忆和找回密码，也方便网站用来EDM。个别网站需要再次录入用户名，或许是为了防止用户不小心录入错误的用户名并注册而无法登录。
3.密码：密码字段需要再次录入，这个是惯例不做赘述了。
4.验证码：几乎所有的网站都引入验证码机制防止恶意注册。除了常见的图片验证码，还有很多简易问答验证码也不错。（推荐个很强大的第三方验证码服务提供商http://recaptcha.net/）
5.以上是最基本的信息。如果有其他分类的字段，如个人资料，公司信息等，建议分步处理，这样不会使得表单和页面显得过于冗长。当然需要标明注册分几步以及当前所处步骤。
6.如果网站的服务对象有所不同，可针对不同对象设计不同字段，合理的引导用户选择适合自己身份的表单进行注册。最常见的就是有些B2B类的网站会区分买家注册和卖家注册。
7.能支持openID当然是最好的了。

注册页面的交互
1.字段控制提示。不同网站对字段的控制不同，尽可能在当前描述清楚这个字段所支持的情况。
2.及时验证录入字段信息的合法性。提示用户填入的字段正确或错误，避免整个表单提交后再提示给用户带来的挫折感以及不必要的返回查找。
3.密码的安全性验证。这个对于企业服务，金融等高安全要求的网站尤为重要。密码强度的验证已是通用做法，而twitter注册表单的密码控制就更进一步，他将370个常用组合字母或词汇禁用，使用这些作为密码都会被提示为：“Too obvious”（感兴趣的童鞋可以翻墙访问http://twitter.com/signup查看源代码）
4.验证码的图片或者问题在验证码字段输入框被鼠标触发后再显示，避免之前录入信息消耗了太多时间而引起的验证码过期。
5.所有必填项均符合要求后，“提交”按钮方可点击，否则为置灰不可选。

当然以上所述都只是最基本，如果考虑运营和商业意图就会复杂一些。即使复杂也需要与良好的用户体验有一个完美的平衡，否则注册功能会是网站转化率的G.F.W……

谈网站注册、登录过程

光耀 — 2010-01-04 21:30:43

最近在做网站的注册、登陆、购买、支付等几个重要环节的流程优化和交互稿。这几个环节是与网站信息架构有关且对整个网站至关重要的。我这里讨论注册和登陆两个过程。Billy在这里讲注册的交互细节，推荐阅读。

>>注册过程
1. 尽量简化用户注册时填写的信息。
关于注册的基本逻辑是用户需要填的信息越少，注册转化率越高。如果需要得到更多用户的信息，可以在用户使用网站的过程中逐步获得。比如购买操作时，再要求用户的姓名、电话、地址等信息。其实按照我的思路，我认为用户唯一在注册时需要提供的信息是邮箱。我从来不认为用户名是个有用的字段。

对于用户资料我觉得比较好的体验是：邮箱或者手机号作为登陆名（登陆邮箱可以修改，可参考支付宝），还有支持Openid（虽然它大部分时候是鸡肋）。在用户注册成功后提供给用户一个昵称字段（且昵称也可修改，可参考豆瓣）。

这里分享一个最简单的注册的例子，是国外Enterprise Social Network里做得非常优秀的网站Yammer。Yammer注册页面只有一个邮箱，连输入密码的操作都是放在邮件激活以后的。

2. 用户验证过程可以多元化
绝大多数网站的注册都需要邮箱验证来激活。其实验证信息是可以多元化吧：比如短信验证，通过添加IM robot机器人来验证。百度有啊已经加了短信验证哦。当然这些验证都没有邮件那么有效，作为思路扩展吧。

3. 某些信息应该对用户屏蔽
友商网的注册页面由于历史遗留问题，在注册页面一直存在着2个附加信息，第一是卡号、密码（即Activecode信息），第二个推荐人。在下一版改版，我会强烈推进去掉这两个信息。对于Activecode信息、推荐人其实是可以通过隐藏iframe等方式包含在代码里的。而且推荐人是推荐人用户名还是推荐人姓名？也是含糊不清的。

>>登录过程
首先应该不强迫用户进行登录操作，比如支持游客访问、购买等。
其实是对用户进行基础分级：首次访问网站的新用户，尚未登录的老用户（检验cookie来验证）、已经登录的用户（后续可以对已登录用户再分级，比如普通登录用户、付费用户等）。对于哪类用户展示哪些信息，对于信息架构是很重要的。

那么，在这两个逻辑之后提出几个待讨论的小问题：
1. 首页放登录框、密码框，还是放登陆链接？
2. 登录后的页面应该跳转到哪个页面？我认为目前友商网的这个设计是需要改进的。

相关话题：登录、注册的表单源地址：http://guangyao.org/archives/924

账户注册的8个小贴士

oligan — 2009-12-10 00:15:24

几年前我在排名前87的在线零售站点上都注册了账户。我发现现在是时候重新审视这个问题了，自从大多数的电子商务站点使用账户注册以来，我在每个登记过程中发现至少有一处是可以提高的。

帐户注册的8个小贴士

几年前我在排名前87的在线零售站点上都注册了帐户。我发现现在是时候重新审视这个问题了，自从大多数的电子商务站点使用帐户注册以来，我在每个登记过程中发现至少有一处是可以提高的。

注册表单的可用性贴

注册表单的可用性贴士

1、始终在一个小的表单上声明注册的好处。

在我的研究中，只有14%的零售商利用了这一点。Williams Sonoma就是这么做的一个好例子。

这里是一些建议性的“好处”：

更快捷地结账
保存多个送货地址
保存多个账单选项
个性化的服务
订货跟踪
查看订货历史记录
更快的顾客服务（客户代表能更快地找出客户详细信息）
可以将商品保存到收藏夹
可以将商品保存在购物车
查看返点余额
推荐朋友购买有奖
生日和节日提醒
可以访问合作伙伴的商店（如GAP, Banana Republic, Old Navy, Piper Lime, Athleta）—-（应该类似于战略联盟，一个账户可在多个网站上使用）

2、链接到用户的隐私条款

让用户的隐私条款链接更靠近账户创建表单。在测试站点中几乎没有站点这么做–但我发现Gap做了：

3、使用星号

在必填项旁边使用星号（*）是一种网络惯例。顾客通常不想给你更多信息或者不想填写他们必填信息以外的信息，因此保证他们某些字段是可选的是一个很好的视觉化提示。

把你的星号放在标签旁边，而不是放在较远的右侧输入框后面—更容易看到。

不是这样：

而是这样：

4、解释密码规则

当你在要求顾客提供电子邮件地址和密码时，要在密码前面明确申明密码“规则”（最少字符数，需要的数字值等）

两年前，Neiman Marcus并没有显示密码规则，但现在他们已经改进了：

在我的研究里，有100%的零售商要求了密码，但只有89%的使用了“重复密码”这个输入框。有一个“重复密码”输入框是必要的，这样能很容易地避免当你在不能看见你输入的字符时出现了的输入错误。

5、避免使用安全问题。取而代之的是发一封附有注册详细信息的确认邮件

没人会记得这些问题的，通过Jakob Nielsen的用户测试研究，我们得知顾客非常非常讨厌这些问题。我研究里有20%的零售商问了这些问题。80%则没有。

6、允许顾客去复制账单地址作为运送地址

就像在结账，这样可以节省顾客时间

7、别在没得到允许的情况下发促销信息

“欢迎您之类的邮件”是很好的，并且值得鼓励。如果可以的话，给顾客在24小时内发欢迎邮件。顾客等的时间越长，欢迎的效果就越不明显。

8、让顾客告诉你他们的喜好

为了目标营销使用侧写性数据是十分有效的。适当地使用广告推销，邮件促销能够提高顾客的满意度、忠诚度和转换率。（这点我觉得国内的优衣库就做的不错，哈哈）

Disney Shopping仍旧是我最喜欢的一个范例：

原文

相关话题：登录、注册的表单源地址：http://imnotahippie.cn/?p=91

互联网表单设计之消失的表单

yummy — 2009-08-07 00:27:08

第十四章下一步做什么？

作为电子商务、在线沟通、网站应用工具的关键组成部分，网上表单还未涉及方方面面。但我希望，正如本书提到的，如何设计和管理在线表单仍有很大改进空间。我们不断进步，有更多方法能让我们做得更好。

消失的表单

第十三章列举了循序渐进的表单例子。人们访问采用这种方法的网站，也许根本不会意识到填写表单。相反，他们觉得是在制作电影或者创建家谱。循序渐进方法关注人们要完成的事情，不关注要填写的输入框，有潜力消灭表单。这属于“从外到内”，而不是“从内到外”的思考方式。

动态互动、或类似游戏的互动是隐化表单的另一种方式。举个例子，Uzanto公司的Mind Canvas软件（图14.1）利用游戏启发方法（GEMs），数据收集过程变得有趣。使用Mind Canvas参加市场研究的用户非常享受“填写调查”的过程。

图14.1 http://www.flickr.com/photos/rosenfeldmedia/2367276242
Mind Canvas调查工具中游戏般的启发方法。

除了这些交互方法外，技术解决方案也能推动表单消失。Microsoft的Live ID（以前称为Microsoft Passport）系统和OpenID开源项目均为独立登录解决方案，人们只用一个账号就能登录多个网站。虽然这些方法能消除很多重复注册和在线付款表单，但两者尚未成为明确标准。

相关话题：登录、注册的表单源地址：http://www.yummyux.com/?p=527

表单设计之基于选择的输入（9）

yummy — 2009-07-14 23:05:24

实用指南

我警告过了，基于选择的输入项要考虑很多方面问题，对吗？研究了海量数据，我们学到了什么？

* 如果每个初始选择的额外输入项数量很大，网页级别方式的基于选择的输入项是最佳方案。表单需要两个单独网页，但动态隐藏和显示额外输入项不会迷惑用户，用户也不会怀疑选择是否互斥。

* 垂直和水平选项卡在综合可用性、满意度和眼动指标方面表现都不错，但存在选择互斥问题。哪种方案能解决问题，得到的数据矛盾，所以两种方案都有问题。如果能通过巧妙的互动或视觉设计避开互斥问题，这两个方案就会表现良好。

* 如果初始选项列表较长（4或5个以上），每个选项都带有一套基于选择的输入，可采用下拉列表和视觉分组。

* 如果每个初始选项只有几个额外输入项，单选按钮下方显示或单选按钮内显示是最佳方案。我见过由于过多页面跳跃造成混乱，额外输入项与初始选择之间的关联丧失，所以要谨慎使用。但如果每个选择只有1到3个额外输入项，我会使用单选按钮即时显示。如果可能，应确定使用清晰的视觉联系和过渡。

* 所有非活动选项，或全部选项基本不会是发起者，选项太多，人们马上被搞昏了头，而这些选项与用户目标无关。

* 整体而言，隐藏无关表单控件，除非用户需要，减轻表单对眼睛的压力，用户能迅速填写表单。

* 整体而言，将初始选项及其基于选择的输入靠近显示，所获满意度高。

* 所有情况下，保持初始选项之间的联系清晰。不要让人们看不到顶层初始选择。

* 所有情况下，清晰显示基于选择的输入项和触发器之间的关系。本节中所有例子使用了黄色或灰色背景来显示这种关系。

* 所有情况下，应避免页面跳跃过多，页面跳动会分离基于选择的输入项和初始选项之间的关联。

相关话题：登录、注册的表单源地址：http://www.yummyux.com/?p=511

和“登录”有关的事儿

schiy — 2009-07-12 01:57:49

关于“登录”和“注册”的问题已经被很多设计师和交互设计上写过无数遍了，今天我在登录纳米盘网站时受到打击了所以写下此文。
事情是这样的：

当初租用虚拟主机的时候，为了减轻电子杂志下载时的流量和减少存放杂志所占用的空间，就将电子杂志和其他几个共享的文件放在了纳米盘网站。而纳米盘网站之前有个规定就是每个月至少要登录两次，于是今天想起来了就去登录一下。
可是当我输入用户名和密码后提示我的密码错误，换了好几个常用的密码试过之后还是不行，我忽然想到是不是因为用户名错了？也许是用E-mail来登录呢？
于是点击了“注册”，很显然从图上就能看到确实是要用E-mail做为用户名，但对于不经常登录该网站的我来说，因为应用的少没有形成习惯，也没有特意的记住在这里我要用E-mail做为用户名来登录。最糟糕的就是给我的提示是N个红色醒目的“密码错误！”字样……
纳米盘的登录：

我们再看看鲜果的登录：
按照图中所示，我想我会第一时间输入我的邮箱“iamschiy@gmail.com”，而不是“schiy”。
这种情况比纳米盘的要好，可是还不够。我想应该还存在一部分用户刚开始的时候搞不清楚要在密码栏输入邮箱的密码还是在鲜果的注册密码吧。

接着看看抓虾和豆瓣的登录：
显而易见，用户名和密码两栏都标示的很清楚了，用户在输入邮箱后也不用考虑是输入邮箱本身的密码还是在该网站的注册密码了。

小细节，直接影响用户体验！

相关话题：登录、注册的表单源地址：http://schiy.com/archives/577

登录、注册的表单 - UCD大社区

以用户视角出发的表单之旅

一、那么为什么要以用户的视角呢？

二、如何以用户视角看post表单？

三、作为用户出发看表单

四、总结

简化输入 — 让网页表单更亲切

拒绝平庸——浅谈WEB登录页面设计

表单交互设计之二——校验思考

泛议网络表单可用性规范

细节思考表单交互设计之必选项思考

1、 表单信息的表现类别

2、 表单的应用范围

3、 必选项显示形式

4、 必选项的深入思考

由一个登陆框联想到的用户体验改进方法

登录框的报错反馈

先来看一下：

下面分析一下报错反馈，这个才是重点。

验证码的位置

关于WEB登录注册系统的下午茶

上海航空网站注册表单优化方案

与用户交互的核心

注册表单的设计探讨

Form的定义与历史

Form的组成（非HTML元素）

Web Form的设计原则

Form设计细节

Form问题的选择、安排和用语

Form Layout对用户扫描的影响

帮助、错误提示和肯定信息

提交按钮

分页Form的流程设计和干扰因素：

个人化：

Accessibility

To Sign-up or not to Sign-up

一些简单的统计数据

问题数量

为什么要注册

Label对齐方式

提交按钮的对齐方式

次级按钮

要冒号吗？

星号与必填/选填

隐私信息

动态帮助信息与错误验证提示

一些实例

另类的对齐

请不要忘了Label与输入域的对齐

要求平等权利的次级按钮

我还没开始输入呢（搜狐，新浪）

为什么认为我是女的？

OICQ？！

我不同意！

这到底是注册还是登录？

呃，第一步...没了？

入乡随俗

Retype password有多少种说法？

更多

Web表单设计之注册表单

网站注册那些事儿

谈网站注册、登录过程

账户注册的8个小贴士

注册表单的可用性贴士

互联网表单设计之消失的表单

表单设计之基于选择的输入（9）

和“登录”有关的事儿

1、表单信息的表现类别

2、表单的应用范围

3、必选项显示形式

4、必选项的深入思考