用户体验设计实例分析:网页表单设计

原文:http://visitmix.com/Articles/Web-Forms-for-People

作者:Luke Wroblewski

译者:江力

   随着网络的发展,人们通过各种方式使用它。今天,网络购物,跟朋友或者不认识的人聊天,管理银行账户,以及一些日常应用,共享照片或视频,等等。事实上,只要能在线使用的应用基本上都已经有了。

  虽然这些多样化的应用丰富了互联网,但这些任务的完成还需要一些步骤。不管是在线交易验证、评论新文章,还是管理某个应用,WEB表单总会出现在人们的视线中。

  为什么是WEB表单?

  在网页上,WEB表单把用户、信息、WEB产品或者服务连接了起来。它们能促进销售、捕捉用户行为、建立沟通与交流,以及更多。这些重要的交互不仅仅是为了保持业务正常运作,它们也让用户实现了想要达到的目标。那我们为什么不多关注一下WEB表单设计呢?

  也许人们认为WEB表单就是可以出现在任何位置的向用户“采集必要数据”的“一些输入框和提交按钮”。也许他们没有意识到优化WEB表单能获得很多有意义的成果(比如年收入增加300万美元an additional 300 million)。更可能的,他们不过是为了他们自己使用而不是为用户去设计WEB表单。

  它不是数据录入

  没有人真的想去填写一个表单,他们想要的是别的东西:买一本书、注册投票、加入一个论坛。他们不是通过一个WEB表单来练习打字速度的苦工,他们有清晰的目标。不幸的是,许多WEB表单并没有针对用户的实际目标去设计。

  看看在社交网站Brightkite上的这个简单表单。假如把“保持和朋友联系、结识新朋友、寻找新去处”作为宣传广告,他或她只需要注册一个新帐号(图一)。


图一:Brightkite上的注册表单(2008年4月)

  开始注册,用户必须选择一个符合以下条件的用户名:只能是英文字符或数字;3到15个字符长;可以包括下划线;不能有空格;不能是已经存在的用户名。那么这些要求是不是能让人们选择一个最能代表自己的用户名呢?没有,这些只是强制用户去应付网站的安全模块或后台数据结构的系统条件。

  接下来的这组问题更不好开始。Brightkite需要你的Email地址以便发送确认信息。你需要一个至少3个字符长的密码并重复输入一次以防止你胡乱按几个字符给Brightkite。接着,你通过解答加密的验证码和同意网站隐私协议与服务条款证明了你是一个活生生的人。

  与朋友保持联系、结识新朋友和寻找新去处这些功能去哪了?这些才是人们实际上想要的服务,但是这些目标在填写表单时却没有被提及。反而,整个体验过程被Brightkite自己要求的一些信息格式所代替了。

  与Brightkite对照的是tookmark的注册表单(图二),tookmark的功能是给用户发送收藏站点的日常提醒邮件。所有的填写项目直接关联用户的目标:你想你的提醒邮件发送到哪(Email地址)?你想用的收藏夹名称是什么(可爱的昵称)?甚至提交按钮使用的语句都与任务紧密相关:“马上去看看”,点击以后立即跳转至一个虚拟邮箱教用户接下来该如何操作。


图二: tookmark的注册表单(2008年12月)

  填写tookmark的注册表单的整个过程让人感觉正在接近自己的目标,而不是让人感觉把自己的资料按要求交给了一个机构,这是一个重要的区别。当人们觉得他们得到了所想要的东西,他们才会继续下去,如果没有得到,他们就会放弃。

  做出转变

  此时,一些精明的读者会指出以上两个注册表单例子来自两个不同的应用,因此tookmark的这种方式不能套用在Brightkite上,他们会争论有些情况确实是需要收集足够的用户资料以便得到一个有效的帐号。

  在这一点上,为用户设计的WEB表单可以开始做一些转变。与其考虑信息收集和数据库中的用户帐号,不如多想想什么样的信息能让人们用最小的成本和清晰的体验到达目标,这样,他们就不会再问:“为什么要求我填写这些东西”

  不是所有WEB应用都像tookmark,每个应用都有一个目标就是如何跟用户交互。把注意力集中在核心目标能帮助挖掘WEB表单所需要的信息。当你在设计WEB表单时,考虑一下几点:

  1、  这些信息是不是用户想要的(核心目标)?如果不是,用户很可能会对这些要求产生疑问。

  2、 有没有更好的时机来收集这些资料?在用户正在尝试应用的时候向他们收集资料比在他们注册的时候收集更加容易成功。

  3、 有没有一种方法能解释某些信息为什么是必需的?这些要收集的信息应该与用户目标相关联并让他们恢复信心继续后面的过程。

  4、 是否有更好的方法收集所需的信息?当然,WEB表单不是在网上得到用户数据的唯一办法。

  为实现效果,让我们来看看Brightkite重新设计后的用户体验(图三),“与朋友保持联系”这句话放在了页面正前方。体现在网站首页上的主要功能从注册新帐号变成了邀请用户联系他们在Facebook上的朋友。这种一键式流程抛弃了图一所示的笨重注册表单,给人们提供了已经存在的身份和朋友(来自Facebook)。


图三: Brightkite的首页 (2009年11月)

  尽管Brightkite和tookmark是不同的服务,他们都可以避免使用啰嗦的注册表单,通过一些简单的交互来表达他们的服务核心意图,并促使用户快速成功。

  如果我们做的是对的,就几乎不会有任何形式的表单存在,这才是建立WEB表单的本质。

  学习更多的表单设计

  如果你正在寻找让你的WEB应用程序表单变得更好的办法,那么请不要错过在内华达州拉斯维加斯MIX 10举行的卢克弗罗布莱夫斯基的WEB表单设计大会。它将会让你学到能马上使用的最好课程。任何在MIX社区的人都能以15%的折扣价(暗号:FOLUKE15)买到卢克的这本书:Web Form Design: Filling in the Blanks

时间: 2024-12-29 12:08:19

用户体验设计实例分析:网页表单设计的相关文章

网页设计:WEBJX收集优秀的网页表单设计例子

文章描述:30个非常优秀的网页表单设计例子. 网页表单作为访问者与网站所有者主要的沟通途径,确保网页表单比较容易理解和使用起来比较直观成为网页设计的重要目标之一.每个网站都会有适合自己风格的表单,新颖的网页表单设计能吸引用户的注意力,让更多的用户填写反馈信息.在本文中将展示国外一些非常优秀的网页表单设计例子,以供欣赏借鉴. RxBalance Awesome Brian Handley Gowalla Form Spring Buffalo [1] [2] [3] [4] [5]  下一页

网页表单设计中的反馈提示

版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明http://lilong4174.blogbus.com/logs/39063960.html 反馈这个词儿其实是控制论的基本概念,泛指发出的事物返回发出的起始点并产生影响.在信息交互过程(输入输出)中,它是一种界面输出物,用以提醒信息输入者他的操作结果.它有很多种形式,包括界面元素.声音.影像变化和物理位移(如震动)等. 我们这里讨论的反馈仅特指用户对网页表单元素进行操作所得到的可视化的输出信息,为了加强区分避免歧义,我们这里姑

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

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

简单实用的网页表单设计:设计用户喜欢的网页表单

文章描述:漫谈表单设计. 跟你所知的相反,布满漂亮的按钮.颜色和字体,再加上一大把jQuery插件的表单并不一定好用.真的,这么做只能(零散地)体现表单可用性的1/3. In this article, we'll provide practical guidelines that you can easily follow. These guidelines have been crafted from usability testing, field testing, website tra

网页表单设计:表单的布局、填写的交互反馈和创意表单的独特性

文章描述:浅析表单设计:以表单布局与填写交互反馈为例. 表单,主要是负责数据采集的功能,需要访问者自己去填写,如访问者的姓名.邮箱.性别.地址.留言建议.设置密码.管理个人账户等等.时下表单无处不在,成功的表单设计不仅能提高用户的满意度,更能收集更加精确的数据,相反失败的表单设计只会收集到错误杂乱的信息,可能会最终导致潜在用户的流失. 一.组织表单的内容,给用户一个友好的引导 首先要明确的告之用户填的是一个什么性质的表单以及填完后能做些什么?哪些问题是一定要问的?有没有别的途径可以获取用户的资料

网页设计技巧:网页表单设计经验分享

文章描述:关于表单每个设计师都必须知道的10件事. 有很多设计糟糕的表单,不管你是否喜欢他们,表单都是必不可少的.Joe Leech(cxpartners负责用户体验的)将介绍其在表单设计上的一些经验. 估计没有什么比表单更让设计师出气了.表单不一定可以让(设计师)表现创意,还是可以?我们可能需要从做基本的层面,重新审视表单,理解表单--表单是用户和软件之间的对话. 忘掉切换啊,点击什么的,表单是我们数字设计师(我想应该是依赖计算机进行设计的设计人员)将面临的最富有的交互.下一次,你要对付一个表

浅谈网页表单设计

大部分人不喜欢填表单,因为人们来到网站,主要目的不是填表,而是浏览或者购买.精心设计的表单,使输入变得流畅让人心情愉悦,而糟糕的设计让人扶墙吐血.那怎样才是优秀的表单呢?页面的布局.逻辑组织.视觉样式等都是值得关注的细节,其中简化输入是最近常被提及的,在这里我分享下自己工作中的心得- 1. 更高大的输入框 增加输入框高度,加粗字体,可以让网页上的输入框看起来更容易填写和阅读.随着电脑显示器尺寸变大,这样的输入框也显得更大气.   2. 添加选取器. 与其让人输入不如提供选择,选取内容只要点几下,

交互设计实例分析:自然用户界面大胆设计

今天ifanr上有一篇<手势操作(自然用户界面)再探讨>,观点保守,论据不足. Android的菜单确实难用,难以记住界面是否有菜单.Plam将菜单放置在状态栏的左边,保证了触摸屏也能使用菜单,但也有弊端.菜单放在界面左上角,宽28像素,难以点击.请拿出你的手机,右手去点击大屏幕的左上角.要么大拇指伸过去,要么其余四指抬起才能点到左上角,甚为别扭. 弹出的菜单通常要么是无关紧要的功能,要么重要.如果功能无关紧要,那不如将菜单放置在启动程序的第一个界面(主界面),如帮助,当用户需要的时候,完全可

网页设计参考:很不错的15个HTML网页表单设计实例

通过PS我们可以设计出各种样子的表单,不过其中许多最后都需要转成HTML表单页面,在大多数表单中如果不能基于CSS制作的话就无法在很多场合应用.因此网页设计师在设计表单时需要考虑的问题就是如何将其转化为HTML+CSS的页面形式. 虽然HTML无法制作出十分酷的表单,不过也能制作出许多出色的表单页面,本文中的表单都是HTML形式,可以参考这些设计以及HTML页面,同时也能访问相关网站查看这些HTML的写法. Footytube 提示:进入页面后,点击页面顶部的"login"链接,可看到