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

文章描述:漫谈表单设计.

跟你所知的相反,布满漂亮的按钮、颜色和字体,再加上一大把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 tracking, eye tracking, Web analytics and actual complaints made to customer support personnel by disgruntled users.

本文中,我们将为你提供简单实用的指南。这些精心制作的指南,囊括了可用性测试、实地测试、网站跟踪,眼球跟踪、网络分析,甚至还有用户对客服人员的抱怨等诸多方面。

Why Web Form Usability Is Important

表单可用性缘何重要?

The ISO 9241 standard defines website usability as the “effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.” When using a website, users have a particular goal. If designed well, the website will meet that goal and align it with the goals of the organization behind the website. Standing between the user’s goal and the organization’s goals is very often a form, because, despite the advances in human-computer interaction, forms remain the predominant form of interaction for users on the Web. In fact, forms are often considered to be the last and most important stage of the journey to the completion of goals.

ISO 9241标准中对网站可用性的定义是:特定用户在特定环境下,能够快速、有效且满意地完成特定的目标。用户使用网站都是有目标的。 如果设计得好,网站不但会达到用户的目标,还会将其与自身公司的目标联系起来。介乎用户目标和公司目标之间的往往就是表单,因为,尽管人机交互发展迅速,表单仍然是用户与网站交互的主要方式。实际上,表单经常被认作是完成目标的最后也是最重要的一站。

Let’s clarify this last point by discussing the three main uses of forms. As Luke Wroblewski states in his book Web Form Design: Filling in the Blanks, every form exists for one of three main reasons: commerce, community or productivity. The following table translates each of these reasons into the user and business objectives that lie behind them:

让我们通过讨论表单的三个主要作用来阐述下最后这一点。就像Luke Wroblewski在他的《web表单设计:点石成金的艺术》一书中说的一样,每个表单的存在必有如下三个原因之一:商务、社区或效率。下面的表单把这三个原因转化成了其背后的用户目标和公司目标:


Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks.

表单的作用,基于Luke Wroblewski的《web表单设计:点石成金的艺术》。

Thus, the relationship between forms and usability have two aspects:

如此可见,表单和可用性有如下两方面的关系:

1. Forms can make a website usable or unusable, because they stand in the way of the user achieving their goal;

1. 表单可以使网站好用或不好用,因为它们挡在用户达成目标的路上。

2. Forms need to be usable in order to help the user achieve that goal.

2. 为了帮助用户达成目标,表单必须要好用。

This post will focus on the second point, because a usable form will naturally contribute to the overall usability of the website, hence the first aspect.

本文将重点讲述第二点,因为表单好用了,网站的整体可用性自然会提升,也就是上面的第一点。

The Six Components Of Web Forms

表单的六个组成部分

Web forms are a necessity and often a pain point for both designers and users. Over time, users have formed expectations of how a form should look and behave. They typically expect Web forms to have the following six components:

对于设计师和用户来说,表单让人爱恨交加。随着时间的流逝,对于表单的表现形式和操作方式,用户已有了自己的期望。基本上,他们期望表单包含如下六个部分:

1. Labels These tell users what the corresponding input fields mean.

1.标签。告诉用户相应的输入域里应该填什么。

2. Input Fields Input fields enable users to provide feedback. They include text fields, password fields, check boxes, radio buttons, sliders and more.

2.输入域。供用户提供反馈。包括文本输入框、密码输入框、多选框、单选框和滑块等。

3. Actions These are links or buttons that, when pressed by the user, perform an action, such as submitting the form.

3.操作。包括链接和按钮,用户点击后,会执行一项操作,比如提交表单。

4. Help This provides assistance on how to fill out the form.

4.帮助。为填写表单提供帮助。

5. Messages Messages give feedback to the user based on their input. They can be positive (such as indicating that the form was submitted successfully) or negative (“The user name you have selected is already taken”).

5.信息。用户输入内容的反馈信息。可能是肯定的(比如提示表单提交成功),也可能是否定的(“该用户名已被注册”)。

6. Validation These measures ensure that the data submitted by the user conforms to acceptable parameters.

6.验证。确保用户提交的数据符合参数规则。



Skype’s registration form contains all six components.

Skype的注册表单包含了以上六个部分。

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

时间: 2024-08-20 07:24:33

简单实用的网页表单设计:设计用户喜欢的网页表单的相关文章

分享几种比较简单实用的JavaScript tabel切换_javascript技巧

闲着没事,随便写了个简单的JavaScript tabel切换,大家有兴趣的看看,有需要的就拿去吧.废话不说了,大家看代码吧 方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style type="te

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

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

网页表单交互设计细节:表单校验设计的思考

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

网页表单交互设计细节:机票搜素表单的校验

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

设计理论:简单实用又吸引人的简洁标志设计

标志是一种简单的工具,就象铁锤,简单实用.如果一种工具功能太多导致其效用减弱,那就让它保持简单.你并不需要一把有太多装饰的精美铁锤.对于象征符号也是同样的道理,那就是简洁.清晰及优雅.我所说的形态优雅是指那些能够让众多不同的观众发现其视觉中的积极性并让人容易记住.能够让人记住是非常重要的一点.如果标志的形态过于绚目华丽,很难让人过目不忘. 设计一个简洁的标志困难重重,因为我们还要考虑这个标志是否吸引人.简洁的标志能够毫不含糊地传达你的信息.设计一个既简洁又难看的标志很容易,设计一个既简洁又沉闷的

PhotoShop图层样式的妙用网页设计简单实用教程

图层样式是每个设计师都常用的功能,合理巧妙的应用能大大的节省我们的工作时间,提高工作效率, 今天我来分享一下平时工作中对图层样式应用的一点技巧,希望对新手有点帮助,我们的目标:简单实用. 一.按钮篇 在制作页面的按钮时,我们希望保证设计风格的情况下,能够最大程度适应各类修改情况,比如:尺寸,色调,形状的修改等等. 下面来谈谈几种风格按钮的制作方法 网站上最常见的按钮,用图层样式来做也最简单:渐变叠加+投影,没难度. 下面再来一个比较常见,有两明暗双描边的按钮. 分类: PS入门教程

讨论:修改密码的表单设计及用户操作的体验

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

游戏官网我们到底应该设计什么

  为什么游戏官网的构建好像这年从来没变过 ?这是功能使然还是思维惯性?什么才是真正是对的?设计师的工作就是在此框架下在样式上做文章?思考点其实很多, 答案其实也是随环境在一直变化着的.今天的答案,也会成为你明天的束缚.但我认为最重要的还是结论得来的思考过程,能有样的一个沟通机制,一个平台来和业内设计师一起交流思考的过程.按部就班,惯性思维的做设计,可能会让你的思路越做越窄. 就如ideas这期主题----"游戏官网"一样,设计师emily和jason会和大家分享下,他们对于游戏官网现

Hadoop一体机参考设计的实现案例:网新易得Radoop统一计算平台

在目前的信息化社会,越来越多的非结构化和http://www.aliyun.com/zixun/aggregation/13667.html">半结构化数据出现,导致数据量已有原来的TB级别增加到了PB级别.原先单一的关系型数据库也相较原先出现了性能方面的瓶颈.为了应对以上的挑战您需要一种解决方案,它既可以满足高性价比和高可靠性的大容量存储的需求又能利用分布式计算框架和数据库的来解决原有关系型数据库的瓶颈,那网新易得的Radoop解决方案就是您最好的选择! 高价值: 网新易得Radoop设