关于可用性表单编码和设计的小贴士

2015-04-11  来源:本站原创  分类:产品  人气:2 

备注: 关于label和tag,在中文中都翻译成标签,而下文中出现的标签,都是对label的翻译,比如”用户名”+输入框, 这里的”用户名”项在英文中是label,约定翻译为标签

页面表单已经是web设计中讨论最多的元素,已经超过10年了.我们无法避免.Call-to-action(一般翻译为”行动呼吁”,”行动号召”,但是都觉得不理想.译者注)的方式通常会将用户引导到表单页;付费需要使用表单;用户注册或订阅需要使用表单-表单的使用是不会停止的.

尽管在HTML中,把表单拼凑到一块相当容易,但是对于可用的,友好的表单来说,编码,制作样式和设计是很难的.在网站的转变中,对于成功转化率,表单始终扮演着很重要的角色,下面的小贴士和文章末尾处提供的源码,应该会对制作和编码页面表单的开发者提供有价值的信息.

两列 VS 一列

这个取决于表单的内容,不过当表单内容相当简单时,通常尽量避免两列布局.

下面是一个很好的简单表单的例子,它将每个标签(label)都放到相关表单元素的上方

关于可用性表单编码和设计的小贴士

这种表单布局的好处有哪些,仅仅是为了反对两列布局?首先,表单的元素具有更大的空间,可以满足今后对于文案的修改.两列布局的表单在这点上会有限制,甚至可能需要重构整个表单部分才能满足调整的需求.另外一个好处就是看上去不杂乱,在每个标签部分不会有大量的空白,所以很容易阅读并且很容易将标签与输入框联系起来.另外,每个成对的标签/输入框的背景色可以让表单从视觉上看更吸引人.

作为对比,让我们看看下面这个两列布局的表单

关于可用性表单编码和设计的小贴士

尤其是因为左对齐的文字和不明显的颜色,这个表单不具备上一个例子中那种干净的视觉效果.事实上,在标签和输入框之间的垂直空白多少会分散人的注意力,误认为里面包含了很多个部分,而实际上一个简单的表单在视觉上应该表现的像一个整体.

但是使用两列布局来完成一个清晰的,有条理的效果也不是不可能的,正如下面展示的例子Chapters Indigo Books

关于可用性表单编码和设计的小贴士


清晰有条理的两列布局表单

因此,尽管表单的布局没有明确的规定,但是仍存在有效的原则:包括简单的表单避免使用两列布局;如果使用两列布局则应该让标签右对齐.

让交验的反馈信息在一行中显示

最近Luke WroblewskiA List Apart中写了一篇关于表单交验的反馈信息放到一行显示的文章.其中提到

当使用交验信息显示在一行时,我们的测试者(完成的)更快,成功率更高,犯错更少,而且更满意

jQuery Inline Form Validation, Because Validation is a Mess这篇教程一步一步的介绍了如何使用jQuery在信息较多的表单中将反馈信息显示在一行.

关于可用性表单编码和设计的小贴士

另外一篇文章:Really Easy Field Validation

关于可用性表单编码和设计的小贴士

Dexagogo提供了一个可以将你的表单交验信息显示在一行的简单的脚本.演示中的例子不是最好的,不过你完全可以按照你需要的来自定义.脚本中使用了Scriptaculous来实现的渐入渐出的效果.

组织有关联的输入框

在一个较长的表单中,为了增加可用性,你可能会受到一些限制,但是将关联的输入框组织到一起,将表单分割并用可控的视觉化组件表现出来,可以使表单不那么吓人.这样,表单可以让人感觉更容易填写,即使填写它可能跟填写没有组织的表单花费的时间一样.

为了将关联的表单组织起来,使用<fieldset>和可选<legend>元素,正如下面的代码一样

<form id="form" action="register.php" method="post">

    <fieldset>
        <legend>Basic Info</legend>
        <div>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" />
        </div>
        <label for="password">Password:</label>
        <input type="text" name="password" id="password" />
        <div>
        <label for="password-confirm">Confirm Password:</label>
        <input type="text" name="password-confirm" id="password-confirm" />
        </div>
    </fieldset>

    <fieldset>
        <legend>Address</legend>
        <label for="address">Address:</label>
        <input type="text" name="address" id="address" />

        <label for="address2">Address (cont"d):</label>
        <input type="text" name="address2" id="address2" />

        <label for="zip">Zip/Postal:</label>
        <input type="text" name="zip" id="zip" />

        <label for="city">City:</label>
        <input type="text" name="city" id="city" />

        <label for="country">Country:</label>
        <input type="text" name="country" id="country" />

    </fieldset>

</form>

<fieldset>默认会带边框,不过可以修改,通常会通过CSS来去掉.下面是单独表单一个例子,它使用<fieldset>和<legend>分割成两个部分

Cosmicsoda Registration Form

关于可用性表单编码和设计的小贴士

不幸的是,<fieldset>的边框在不同的浏览器中表现不一样,所以一般最好的方法是通过css去掉边框并且通过其他的方式建立自定义的边框.不过这也会影响<legend>的效果,因此现在很少看见使用<fieldset>和<legend>和两个HTML元素.但是<fieldset>仍然可以用来组织元素,同时通过自定义边框和标题来实现比较基础的效果.<fieldset>和<legend>元素对表单的易用性还是有额外的帮助的.

必填项的明确标识

表单中通常都会使用与其他文字颜色不一样的星号(*)来表示必填项,这样必填项是较突出的.尽管现在大多数网站包含(必填项)标识,但是其中的一些并没有合理的使用.

关于星号的解释说明文字应该直接放到表单的上面,所以用户在开始填写之前就能看见.有些网站将星号的解释文字放到表单的下方,多少看上去有点像脚注.下面的Elderluxe contact page例子中,星号解释文字的位置就很不好.

关于可用性表单编码和设计的小贴士

上面的例子中有两个问题: 星号的颜色和其他文字一样;解释文字放在了表单的底部.在大部分情况下,单独放一个星号就够了,无需解释的,但是如果你的目标用户不是电脑使用者(computer-savvy),你真的需要在表单的上面加上对于星号的解释.

下面这个来自Office Depot’s registration page的例子展示了将星号的解释文字合理的放置

关于可用性表单编码和设计的小贴士

尽管上面的这个例子也有一些问题(比如标签文字左对齐,字体过小,留白使用的太少),但是它很清晰的标明必填项,并且在用户填写表单之间就解释了星号的含义.这是这个例子中最重要的,前三项不是必填的,因此用户可以很安全的略过它们.

更精美的复选框,单选框,按钮和下拉菜单

表单可以看上去很无趣,尤其是那些下拉菜单,单选框,复选框的样式被大多数浏览器限制,也无法使用CSS单独定制那些元素样式,让各个浏览器显示都一样的效果.幸运的是,有许多JavaScript插件和代码可以允许开发者来使用跨浏览器的,更精美的表单元素.

jQuery Checkbox支持你在表单中加入自定义的复选框和单选框.在这里我没有很特别的在意单选按钮的外观(它们看上去也一点都不像单选框),不过它确实是个可选项.

关于可用性表单编码和设计的小贴士

jQuery Image Combobox是一个完整支持自定义图片(skinnable)的下拉菜单,可以替代浏览器中原有的常用的-丑陋的下拉菜单

关于可用性表单编码和设计的小贴士

Giva Labs mcDropdown jQuery Plug-in是一个直观的,支持键盘的,更容易替代传统的下拉菜单,同时还允许数据嵌套.

关于可用性表单编码和设计的小贴士

当输入框获得焦点时显示提示

复杂的表单一般具有很多不同的输入框,如果显示一些帮助文字,可以让用户填起来更容易.当然,你不想让用户被一个或更多的解释表单文字所湮没。

通过简单的改变,你可以写个JavaScript脚本(或者使用可定制的插件),用类似传统提示的样式显示一个消息,来解释可能产生疑惑的表单元素,或者那种需要要求输入的内容是特殊格式的输入框(比如,只允许用字母和数字组成,并且至少6个字符的用户名)

jQuery Input Floating Hint Box是一个简单的插件,可以在输入框获得焦点时,显示完全可以自定义的浮出提示窗.

关于可用性表单编码和设计的小贴士

DHTML Goodies Form Field Tooltip是另一个对表单中输入内容的交验工具.它会根据表单输入框中的title属性来显示一段帮助文字.

充分的留白

正像前面提到过的,如果表单的元素没有显示以很清晰,友好的方式显示,那么会看上去很丑而且混乱.通常我们认为在网站设计中对留白的使用原则,同样适用于表单,甚至可以一直应用到最小的细节中.

你可以通过以下的方式来改进表单的设计: 在输入框周围增加适当的留白,给元素更大或者更好用的尺寸,或者也可以通过调整CSS中的padding属性来实现输入框内的留白.例如,试着在下面的两个输入框输入些文字.

只是通过调整padding的和尺寸,第二个输入框就有更好用的感觉.当多个文字输入框出现在同一个表单中,这样会让人在整体感觉上产生很大的不同,即使从技术上讲在用户填写表单花费的时间长度上,它并没有产生很大的不同.

同时,这样也能让你在输入框中看到更多字符.尤其是名字输入框,应该为了那些较长的名字提供更大的可见空间.超出的字符,会开始将其他的字符挤出视线,所以最好是有足够的空间来满足那些较长名字的用户,让他们可以更容易的认出错误.通过下面的输入框可以看到较长的名字是如何被截断的.

让你的表单更友好

关于易理解的表单的这个主题可以很容易构成一整篇文章或者更多,但是这有一些小贴士可以确保你的表单更友好并且对于不同的用户来说都可用.

  • 在输入框中都使用title属性,来帮助那些使用屏幕阅读器的用户
  • 如果标签没有围绕在所关联的输入框时,使用for属性来匹配关联的输入框的id.(这样当用户点击label时,焦点也会置入到输入框内.译者注)
  • 通过给每个元素使用tabindex属性来组成一个tab队列(这样键盘使用tab键可以依次切换,译者注)
  • 对于tab队列,使用更大”步长”来增加数字(如使用”10,20,30…”来替代”1,2,3…”),这样将来需要增加时不需要重写所有的tabindex属性
  • 对于复选框和单选框,将标签(label)放到关联元素的后面这样屏幕阅读者访问时,会先读到标签,然后是”复选框”或者”单选框”
  • 使用<optgroup>来组织<select>
  • 使用accesskey属性来支持键盘快捷键

延伸阅读

原文地址: http://www.noupe.com/design/tips-for-coding-and-designing-usable-web-forms.html
本文来自:http://pd4.me/blog/translation/tips-for-coding-and-designing-usable-web-forms/

相关文章
  • 关于可用性表单编码和设计的小贴士 2015-04-11

    备注: 关于label和tag,在中文中都翻译成标签,而下文中出现的标签,都是对label的翻译,比如"用户名"+输入框, 这里的"用户名"项在英文中是label,约定翻译为标签 页面表单已经是web设计中讨论最多的元素,已经超过10年了.我们无法避免.Call-to-action(一般翻译为"行动呼吁","行动号召",但是都觉得不理想.译者注)的方式通常会将用户引导到表单页;付费需要使用表单;用户注册或订阅需要使用表单-表单

  • js控制表单不能输入空格的小例子 2013-10-18

    这篇文章主要介绍了js控制表单不能输入空格的小例子,有需要的朋友可以参考一下 window.onload=function() { var inputs=document.getElementsByTagName("input"); for (var i=0;i<inputs.length; i++) { if(inputs[i].getAttribute("type")=="text") inputs[i].onkeyup=functio

  • 驰骋表单设计器 设计表单案例演示 2013-05-30

    我们以客户提供如下原始的word表单样本,使用驰骋表单设计器制作表单的过程介绍如下:工业设计和创意需求登记表原始表单图 在ccform表单设计器中,设计如下: 驰骋表单设计器,设计表单所见既所得,操作简单功能强大,入门快速. 预览效果: 在ccflow系统中,以"SL表单"呈现的方式如下 ccflow表单设计器,操作简单.界面清新.功能强大.面向业务与技术人员. 下载开源的驰骋家族产品线,请登录http://ccflow.org .

  • ASP.NET MVC 2生成动态表单的一种最简单的思路 2012-03-09

    在BPM.OA等系统中,都会存在一个表单设计器.有些是通过操作gridview来完成一个表单的设计:有些是通过类似VS拖拽的方法完成一个表单的设计.很明显后面一种优越于前面一种.无论是哪种,最后都会产生一些XML之类的表单结构的数据. 这篇文章将讲述,在表单设计器设计好表单之后,在ASP.NET MVC中如何将表单结构的xml转换成实际应用系统中的表单.看下面一个xml文件,我们假设它是由一个表单设计器设计出来的. <?xml version="1.0" encoding=&qu

  • js+css实现增加表单可用性之提示文字 2014-05-29

    平常设计表单的时候,我们会加入一些提示文字,最常见的做法是利用value来设置,下面与大家分享一个实例,感兴趣的朋友可以参考下哈 平常设计表单的时候,我们会加入一些提示文字,比如说在搜索框里,我们会提示"请输入关键字",并在搜索框得到焦点和失去焦点的时候适时的隐藏和显示,最常见的做法是利用value来设置: <form id="search"> <input type="text" id="keyword"

  • Web注册表单设计样式的研究-上部 2014-01-16

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

  • 泛议网络表单可用性规范 2014-03-11

    以下做法与你将读到的内容完全背离,那就是为你的表单点缀漂亮的按钮,颜色以及排版甚至充沛的jQuery插件,这些都无助于可用性.事实上,这么做你只是(通过没有归整过的方式)实现了表单可用性的三分之一. 在这篇文章中,我们将提供便于你执行且切实可行的规范.这些精心编排制作的规范是来源于可用性测试,实施现场测试,网络站点追踪,视线追踪,网页在线分析及客户支持部门获取的客户投诉. 为什么网络表单可用性如此重要 ISO 9241标准将网站可用性定义为"高效,有效地满足特定用户在某个环境中达到特定目的.&q

  • 移动电子商务可用性4:表单和结帐 2014-07-12

    [译文来自:移动电子商务可用性4:表单和结帐 译者:耿人杰 原文:Mobile Commerce Usability:Forms and Checkout 作者:Linda Bustos] 这是此系列的第四部分: 第1部分:网站主页和导航 第2部分:搜索和目录页面 第3部分:产品页面和购物车 第4部分:表单和结帐 以下是我参考了Best Buy, Target, Sephora, Moosejaw, Barnes and Noble, Amazon, Sears2Go, Ralph Lauren

  • Web注册表单设计样式的研究-下部 2014-08-04

    上文回顾:<Web注册表单设计样式的研究-上部> 上周我们已经给大家介绍了我们对于web表单调查研究结果的第一部分.调研的主要目的是提供给凭直接来判断有效性的设计师和开发人员一些理论依据.我们也介绍了一些如何让web表单成为完美的友好用户界面的指导方针. 我们把更多关键表单单独开来(例如校验表单)从而关注注册表单.然后我们分别完成每个被选择网站的注册表单并且分析这些表单的设计方法.以下我们介绍这个研究的第二部分--关于100个流行网站web表单的调研结果. 请注意这个文章不是关于校验表单--那

  • jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法) 2013-12-29

    当jquery ajax在utf-8编码下(页面utf-8,接收utf-8),无任何问题.可以正常post.get,处理页面直接获取正确的内容. 前言: 当jquery ajax在utf-8编码下(页面utf-8,接收utf-8),无任何问题.可以正常post.get,处理页面直接获取正确的内容. 但在以下情况下: GBK -> AJAX POST ->GBK UTF-8 -> AJAX POST ->GBK 后台代码无法获取正确的内容,通常表现为获取到奇怪字符.问号. 经典解决方

  • 轻度设计,轻松填表--关于B2C网站的表单设计 2014-04-11

    以前Vicky曾经就表单设计与大家分享过设计的要点,但是分析的不是很具体,我在这里就对表单设计的用户体验与设计方法进行一些补充,希望对改善B2C网站的表单设计能够有所帮助,下面就对表单设计的注意事项进行一些赘述,与大家共同探讨. 可喜的是,技术的进步与用户体验的改进,B2C网站的表单已经有了极大的改进,比之以前表单令用户使用头疼的问题,如长,乏味,粗暴,无益, 苛求用户, 经常出错等问题,如今的大多数网站的表单已经设计得较短,更透气,让用户互动参与,具有上下文提示,很少出错 ,这对于用户来说是一

  • 表单交互设计之二--校验思考 2014-05-09

    编辑:S++小组 你是否经常碰到在填写表单时,提交无数次却还是无法通过校验的情况:或者你是否在为不知道填写中哪里出现错误而抓狂:再或者你是否碰到过当你填写了一大堆信息,之后点击按钮提交时,校验报错的同时,你发现你所填写的所有的信息都被清空:或者你还碰到过很多很多校验当中出现的问题,那么我们现在就开始进行表单校验设计的思考. 那校验有哪些情况呢? 1. READY? 提到校验,我们往往会联系到提交表单后出现的错误提示类信息,但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系. 此类提示信息

  • 表单交互设计之二--机票搜索的校验思考 2014-05-19

    编辑:S++小组 在前一篇的校验思考中,我们整体概括了一些校验出现的类型,出现的情况,以及校验设计的设计原则与经验.而在具体设计过程中,需要结合产品的业务逻辑,旅游机票预订的全流程,是我碰到过交互逻辑中,相对比较复杂的情况,它的搜索来说也囊括了比较多的输入项,和各种类别的表单控件,因此它的校验情况也相对比较多样化. 我们来探讨下预订机票中的搜索表单 1. 提到校验,我们往往会联系到提交表单后出现的错误提示类信息,但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系.此类提示信息能够帮助用户

  • PHP中上传多个文件的表单设计例子 2014-08-02

    这篇文章主要介绍了PHP中上传多个文件的表单设计例子,本文着重讲解的是表单如何设计,后端处理需要循环$_FILES数组来实现,需要的朋友可以参考下 多个文件上传和单独文件上传的处理方式是一样的,只需要在客户端多提供几个类型为"file"的输入表单,并指定不同的"name"属性值.例如,在下面的代码中,可以让用户同时选择三个本地文件一起上传给服务器,客户端的表单如下所示: <html> <head><title>多个文件上传表单&l

  • 浅析表单设计的点点滴滴 2014-10-19

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

  • Sketch 新手入门: 设计一个登录表单 2015-03-23

    最终效果如图所示: 我会告诉你如何创建一个简单的 artboard,怎么用基本的工具,布尔运算,Inspector面板和图层列表去设计图形.我们会学习如何改变属性,组织图层,导入图片和其他一些方面 Sketch 设计者的工作流程. 1.创建一个 Sketch 面板 第一步 我们先从创建一个新的文档开始.你第一步要做的就是打开 Sketch3,首先要说明的就是Sketch 默认提供给你无限大的canvas,完全不需要担心创建的元素超出了空间. 让我们进行下一步,创建一个画板 artboard,ar

  • 设计表单六种基本类型 2015-04-29

    一.表单概述 表单,在网页中的作用不可小视,主要负责数据采集的功能,比如你可以采集访问者的名字和e-mail地址.调查表.留言簿等等. 1.表单的组成 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处

  • Web表单设计指南:眼动跟踪研究 2013-10-23

    原文:Web form design guidelines: an eyetracking study 作者:Chui Chui Tan 译者:耿人杰 译文来自:http://gengrenjie.com/archives/551 ------------ 全文的分割线 ------------- 表单是网站的重要组成部分.从商业网站的联系到反馈.从注册到交流.从在线银行到搜索都能见到表单在发挥巨大的作用. 什么是我们想要的,我们为什么想要这样 在 cxpartners,我们已经为很多不同的公司

  • 设计表单的标签和输入区 2014-01-01

    重读LukeW的<Web Form Design:Filling in the Blanks>感触很深,除佩服LukeW的钻研精神外,更多的是学习他对设计细节的执着和理解.我把对本书的理解,与工作生活中遇到的实际问题结合起来,作为今后设计工作的指导和规范. 有一些元素,看着很简单,设计起来却很头疼.往往这样的元素都具有一个共同的特点--变化多,表单的设计就是如此.你说见过20.30种以上不同的表单,我并不惊讶,产品需求.风格不同,必然五花八门.当然,换了设计师,表单的样式也可能会不同.然而,不

  • 30个非常时尚的网页联系表单设计优秀示例 2014-01-10

    联系表单是网站最重要的组成部分之一,访客通过联系表单和网站所有者取得联系,反馈信息.新颖的网页表单设计能吸引用户的注意力,让更多的用户填写反馈信息.今天这篇文章和大家分享30个很时尚的网页联系表单设计,一起欣赏(浏览效果的时候需要点击页面的Contact导航到网页表单). 1. Square 1 Media 2. Deda 3. Cplx 4. Cappuccino Digital 5. Create Launch Lead 6. Fore Fathers Group 7. Webfoo Lon