Web表单设计之注册表单.doc

Web表单设计之注册表单必须面对的问题有：用户不喜欢提交表单。然我们的目的是让用户愿意提交表单。 下面是一个关于web表单设计的调查报告，这个结果来源于100个令人瞩目的网站。 原文地址： /2008/07/04/web-form-design-patterns-sign-up-forms/ /2008/07/08/web-form-design-patterns-sign-up-forms-part-2/ 注册表单设计调查 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, B） 28%仅仅是单纯的注册页面，没有任何附加信息（Pownce, DeviantArt, Dailymotion） 11%告诉用户需要多久时间来填写（Threadless, Newsvine, Wordpress) 很少一部分（6%）网站提到注册过程中所需要填写的信息。一些步骤中会提供一些警告（8%）和示意（6%，例如37signals, Bloglines） 2.3单页表单VS多页表单 调查结果中，93%的表单是单页表单。设计师试图帮助用户尽可能快速和无痛地完成注册流程。只有一些网站利用多页表单把探索用户参数选择结合在注册过程中。 比如，Meebo把一个完整的注册过程整合在一张注册表单中，并且通过一个弹出框的形式为用户提供注册向导。这个表单由6个页面组成，用户通过一些附加信息的选择从而进行他们账户的设置。 2.4输入框标附加信题需要突出吗？ 62%的注册表单用粗体的方式去突出输入框的标题。还有的使用斜体去达到同样的效果