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

文章描述:关于表单每个设计师都必须知道的10件事.

有很多设计糟糕的表单,不管你是否喜欢他们,表单都是必不可少的。Joe Leech(cxpartners负责用户体验的)将介绍其在表单设计上的一些经验。

估计没有什么比表单更让设计师出气了。表单不一定可以让(设计师)表现创意,还是可以?我们可能需要从做基本的层面,重新审视表单,理解表单——表单是用户和软件之间的对话。

忘掉切换啊,点击什么的,表单是我们数字设计师(我想应该是依赖计算机进行设计的设计人员)将面临的最富有的交互。下一次,你要对付一个表单的时候,不要认为就是要应用好看的CSS效果或是添加漂亮的jQuery特效。表单设计的水是很深的。

我已经做过上百个表单用户测试,为保险公司、假期预订交互设计过一些非常复杂的表单,以及其他很多。可能你最近使用的某个表单就是我设计的。

下面这些经验教训,我希望在我开始设计表单事前先学会之。

1. 不要标记必填字段

你知道小星号(*)就表示必填字段?我已经见过很多次因为这个用户测试失败。作为概念来讲,必填字段没有多大意义,等同离线(这个概念)。对于开发者,这个是很好的,他们提供了一个很好的黑白方式去完成。星号以及必填字段(导致表单完成)失败是因为他是个需要学习的行为。在用户测试中我看到的典型行为是用户在(表单)上面填写表单,结束于某个东西阻止他们时候或者他们碰了某个按钮。

解决方法很简单,可选字段标记,优质用户需要驻足思考是否要填写的字段处标记。

译者注:从原文评论来看,这一段是争议很大的一个地方:是必填字段标记呢还是非必填字段标记?

本文作者语法以及用词上有些怪怪的,加上缺少必要的示例,所以这段译文(虽然中文)理解起来并不顺溜,我个人觉得作者的结论应该是正确与合理的(毕竟做过大量实际用户使用的测试,比设计师或开发者的冥想要靠谱多),但是,在原因的阐述上显得单薄了点,也可能是因为自己(指译者)这方面了解不深。按照作者的解释,单纯使用(红色的*)星号标注必填字段有一定的学习成本,会让用户有学习负担,反而增加出错几率。

“必填选项的概念类似于离线概念”,我想可能意思指:我们平时访问网页,基本上都是处于在线状态(虽然HTML5有离线访问)(我们没有必要专门在页面上弄个符号(eg. ※)表示当前页面在线),因此,对于网页而言,离线这个概念就意义不大;同样的,表单选项基本上都是需要填写的,特意的使用某个符号标示这个必填的也是多此一举没有多大意义的概念。

我们或许过多地站在开发者以及软件测试人员的角度去看待表单设计了,如上面提到的“开发者的黑白方式”,因为我自己也是开发者,所以对于“星号是必填,没有星号选填”很容易理解,但是,实际用户是这种思维习惯,是这样想的吗?软件测试人员也是作为极端作恶用户(非上面提到的优质用户)去使用表单,一些站在自身角度的认知确实会让我们对表单有经久的错误认识。

至于最后的用户表单完成终止我想可能只指:对于大部分正常使用用户,其表单填写行为终止为被动阻止或主动点击按钮。所谓被动阻止,可能包括即时的错误提交;主动点击按钮可能包括点击按钮提交等。为寻找案例,我去了企鹅微博绑定注册页面,发现,其表单所以选项都没有必填字段的提示,所有的必填提示均出现在表单提交之时(即“用户触碰了某个按钮”“某些事件的阻止”),这些都是我比较赞同的——相对比于有些落后(指注册交互)的携程、点评之类,例如携程注册每项都必填,红色星号显然多余;为空必填即时提醒容易中断用户操作,实际是稍稍落后于趋势可以进一步优化的体验。

下面两张截图以腾讯微博注册页面为例分别演示:阻止用户填写表单的事情,以及“不标记必填字段”。

这里所有字段都是必填的

[1] [2] [3] [4]  下一页

时间: 2025-01-21 03:39:38

网页设计技巧:网页表单设计经验分享的相关文章

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

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

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

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

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

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

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

原文:http://visitmix.com/Articles/Web-Forms-for-People 作者:Luke Wroblewski 译者:江力   随着网络的发展,人们通过各种方式使用它.今天,网络购物,跟朋友或者不认识的人聊天,管理银行账户,以及一些日常应用,共享照片或视频,等等.事实上,只要能在线使用的应用基本上都已经有了. 虽然这些多样化的应用丰富了互联网,但这些任务的完成还需要一些步骤.不管是在线交易验证.评论新文章,还是管理某个应用,WEB表单总会出现在人们的视线中. 为什

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

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

浅谈网页表单设计

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

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

文章描述:漫谈表单设计. 跟你所知的相反,布满漂亮的按钮.颜色和字体,再加上一大把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

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

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

网页设计资源:网页表单验证常用代码例子

文章简介:表单验证代码. <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>表单验证</title><script>function $(id) {return document.getElementById(id);}function checkUsername (us