网页注册表单设计原则

  如果你想最大化你的服务所带来的效益,你就必须最大化你网站表单的成功率。仅仅简单的让用户在你网站上注册是不够的,除非你有能够让访问你网站的人一看就映像深刻的点子。为了让服务达到最大化的体现,我们设计师需要提供用户一个良好的用户体验。我们需要邀请用户,为他们描述服务产品有多少好,给他们解释为什么他们需要填那些表单并且暗示他们会因此得到利益的回报。当然,我们也应该做的非常方便让用户来参与。

  但是设计有效的页面表单不是件容易的事情。有个不争的事实就是:没人喜欢填表单——无论是线上还是线下的。因此,作为设计师我们需要找出能够让表单百分百简单、直接甚至无痛苦的正确的设计决策。

  但是怎么样才能准确地找出这些决策?布局上那些链接应该放在表单的什么位置?我们应该怎么设计它?我们应该怎么样高亮标签,应该怎么样排列他们?页面表单设计样式怎么样才符合现代化的网站?我们拿这些问题问我们自己,并且通过实施调查来得到这些结果。

  下面我们介绍一下现在互联网web表单设计样式的调查结果。这些结果是分析了100个拥有和web表单相关流程的网站而得出的。我们决定从注册表单开始。

  注册表单设计调查

  调查的目的主要是提供给那些凭直接来判断有效性的设计师和开发人员参考依据。我们也会介绍一些如何让web表单成为完美的友好用户界面的指导方针。

  我们已经选择了100个和web表单有关的大型网站。这些网站是根据博客搜索和Alexa排名以及搜索引擎中的受欢迎程度等方面去考虑选择的。这些网站直接商业目标的影响普遍和他们的web表单相关,因此在流程中需要指定为高优先级进行设计。尤其注册表单是为解释为什么许多评论表单是来自于社会类型的网站的关键。

  我们关注注册表单是想把更多关键表单单独开来(例如校验表单)。然后我们分别完成每个被选择网站的注册表单并且分析这些表单的设计方法。

  我们在每个表单中利用一个特殊的Email账户和特殊的用户名,为了使调查尽可能地具有广泛性,我们指出29个在设计web表单时会碰到的不同的设计问题和疑问。

  我们将它们分类并试图找出相似的设计方针和设计思路。我们试图从可用性观点上着手,不断关注两者的正面和反面的例子并将他们陈列在调查结果中。

  请注意这个文章不是关于校验表单——那是另外一个讨论的话题,我们把它独立开来看待成一个即将要讨论的文章。我们要感谢Wufoo为我们提供构架来引导我们的调查。

  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应该是我们见过的第二拥挤的web表单。

  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%的用纯文本。

  Large version

  2.5标签对齐

  老实说,我们已经预料到可能对齐是一个很强的趋势 。但是在我们看来,标签对齐的趋势已经不再那么强烈了。

  • 在调查中41%的网站使用标签右对齐  (YouTube, Facebook, Metacafe)
  • 30%的注册表单使用顶端对齐 (Behance.net, Wufoo, Tickspot, DZone)
  • 29%使用的是左对齐 (Digg, Ning, Wykop.pl, 43things, StupZ).

  根据“Matteo Penzo的标签放置研究结果”(1996)和“Luke Wroblewski的发现”(PDF),右对齐能够戏剧性地减少完成时间因为它们几乎不需要眼睛的注视。如果你想要达到相同的目的但是只有一块受实际区域制约的垂直屏幕,标签顶端对齐则会更好一些。还有以防你的表格要求人们扫描标签去了解什么是必须的(不熟悉或者高级的数据),左对齐则是最好的。

  2.6有多少必填区域?

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

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

  2.7有多少可选项?

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

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

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

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

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

  更多的发现

  • 调查结果中18%的注册表单旁边都会有登录表单或者登录连接。(例如, YouTube, Reddit, Digg, Lulu, Metacafe)
  • 78%的注册表单没有用星号或者高光去表示必选框;大多数情况无论星号或者其他形式的高光都不会被使用。
  • 9%的注册表单用流程指示来告诉用户他们进行到哪一步了,并且告诉他们哪些步骤是完成注册的必填项。
  • 85%的站点更喜欢用尽可能简单的web表单。
  • 区域通常都是用空白区来群组和拆分的,有时边框的用途也和空白区一样(22%),还有9%的情况是利用不同的背景色来区分。

  概要

  让我们来为这个web表单设计样式调查的第一部分做一个总结。请记住,我们只考虑注册表单。

  • 注册链接的标题大多数是“sign up”(40%)并且被放在右上角。
  • 注册表单为了避免分散用户的注意力而使用简单的样式。
  • 93%的注册表单是单页表单。
  • 41%的注册表单通过解释注册的优势来吸引用户注册。
  • 62%的输入框标题是通过加粗高亮的。
  • 标签不是都排成一条直线的。
  • 设计师试图不用必填项和可选项。
  • 86%的注册表单更喜欢用垂直布局的表单。

  第二部分的研究结果的翻译会在下周给到大家,敬请期待~(

时间: 2024-07-28 23:23:12

网页注册表单设计原则的相关文章

Web注册表单设计样式的研究(上)

如果你想最大化你的服务所带来的效益,你就必须最大化你网站表单的成功率.仅仅简单的让用户在你网站上注册是不够的,除非你有能够让访问你网站的人一看就映像深刻的点子.为了让服务达到最大化的体现,我们设计师需要提供用户一个良好的用户体验.我们需要邀请用户,为他们描述服务产品有多少好,给他们解释为什么他们需要填那些表单并且暗示他们会因此得到利益的回报.当然,我们也应该做的非常方便让用户来参与. 但是设计有效的页面表单不是件容易的事情.有个不争的事实就是:没人喜欢填表单--无论是线上还是线下的.因此,作为设

网页设计师参考:网页登录表单设计实例

收集了一些好看的网页登录表单设计给大家欣赏

优秀注册表单设计方法及案例分析

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 摘要: 优秀注册表单设计方法及案例分析以下对国内外近20个网站的注册表单进行的分析,并归类总结优秀表单的设计方法.文章最后对其中三个案例进行优化对比. 1. 越少的填写项越好 Site inspire CSS web site award Tumblr De... 优秀注册表单设计方法及案例分析 以下对国内外近20个网站的注册表单进行的分析,

网页用户体验:网页注册表单设计分析

网页制作Webjx文章简介:网站WEB表单的设计本质. 随着网络的发展,人们通过各种方式使用它.今天,网络购物,跟朋友或者不认识的人聊天,管理银行账户,以及一些日常应用,共享照片或视频,等等.事实上,只要能在线使用的应用基本上都已经有了. 虽然这些多样化的应用丰富了互联网,但这些任务的完成还需要一些步骤.不管是在线交易验证.评论新文章,还是管理某个应用,WEB表单总会出现在人们的视线中. 为什么是WEB表单? 在网页上,WEB表单把用户.信息.WEB产品或者服务连接了起来.它们能促进销售.捕捉用

网页表单设计:电商网站注册表单设计为用户提供方便

文章描述:如何设计注册表单. 注册页面是获取用户资料的主要途径,绝对不是越简单越好,设计要从体验上为用户提供方便,而不是降低注册门槛.网页教学网将结合以前看过关于表单设计的文章和自己的一些浅薄经验做一个总结: (以下内容偏向于B2B的网站) 一『注册的需求包括哪些』 注册的需求大概可以分为四个步骤:①用户类型的分类 ②将访客转化为会员 ③获取用户的资料 ④资料完善和增值引导 ①先看看各大网站是如何做用户类型分类这一步的: 京东商城 中国制造网国际站,将选择地区放在第一步,直接通过国内和国外的IP

注册表单设计:修改密码的表单设计及整体体验

文章描述:修改密码的表单设计及整体体验. 2011年岁末先后爆出CSDN.天涯等站点的用户明文密码泄漏,大家纷纷忙着修改密码,不少网站也通过在网页醒目位置发布公告或发送邮件提醒告知用户及时修改自己的密码以确保账户安全.对网站而言,希望用户能够定期主动去修改密码并保证一定的复杂度:但对用户来说,一般不到万不得已,通常不会经常修改密码.同样是表单,注册表单的产品设计大家常讨论,那么修改密码的表单设计及整体体验又是如何? 一.大型门户 1. 网易通行证 表单中的每个输入框均会给出有效性反馈,新密码的复

Web注册表单设计样式的研究(下)

我们把更多关键表单单独开来(例如校验表单)从而关注注册表单.然后我们分别完成每个被选择网站的注册表单并且分析这些表单的设计方法.以下我们介绍这个研究的第二部分--关于100个流行网站web表单的调研结果. 请注意这个文章不是关于校验表单--那是另外一个讨论的话题,我们把它独立开来看待成一个即将要讨论的文章.我们要感谢Wufoo为我们提供构架来引导我们的调查. 3.表单的功能性 在研究的第一部分里,我们已经仔细考虑过注册链接和注册表单的布局和视觉表现形式.但是如果表单不能正常工作的话设计的多漂亮都

怎样将注册表单设计的让尽量多的访问者更愿意完成填写

无论是用于注册.支付还是联络,我们总是需要通过表单来获取用户的信息.不幸的是,在现实当中,总会有很多访问者一见到表单就会立刻点击浏览器上的后退按钮.这里面原因有很多,例如表单篇幅太长.不大友好.不那么值得信任,或是用户还没真正准备好进行交易等等. 这种情况每发生一次,我们就失掉了一个潜在用户. 怎样将表单设计的让尽量多的访问者更愿意完成填写,这是设计师们必须面对的挑战.站在用户的角度,我们可以将问题分为四个方面. 我能得到什么? 一提到"转化",设计师们首先想到的往往是一些相关操作的细

关于儿童网站的web注册表单设计体验

儿童网站是一个特殊的网站类型,设计儿童网站是具有挑战的,因为你要了解儿童的心理活动与习惯.当然一般来说设计师都是成年人.所以本文我们将讨论下怎样设计儿童网站web注册页面(以儿童为中心做体验设计). 我们先来看看儿童的访问网站的一些特点,首先儿童的价值观与认知能力都比较差,所以他们比较厌烦抽象的数字体验,比较喜欢抽象的图片表达.而且作为儿童对于未知比较有好奇心,因此有创意的http://www.aliyun.com/zixun/aggregation/8936.html">视觉效果更容易吸