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

文章描述:浅析表单设计:以表单布局与填写交互反馈为例.

表单,主要是负责数据采集的功能,需要访问者自己去填写,如访问者的姓名、邮箱、性别、地址、留言建议、设置密码、管理个人账户等等。时下表单无处不在,成功的表单设计不仅能提高用户的满意度,更能收集更加精确的数据,相反失败的表单设计只会收集到错误杂乱的信息,可能会最终导致潜在用户的流失。

一、组织表单的内容,给用户一个友好的引导

首先要明确的告之用户填的是一个什么性质的表单以及填完后能做些什么?哪些问题是一定要问的?有没有别的途径可以获取用户的资料?大致表单的布局分为三种类型:纵向排列、逐步填写(多页显示)和左右布局。这三种表单的组织形式功能特点,通过不同的使用环境决定它们具体的样式。下面通过一些对应的实例我们来做些具体的分析:

图1

根据Web惯例调查,卸载软件的界面常见组织结构,为纵向排列样式。一般顶部为明确填写表单的目的,再呈现表单的具体问题。在卸载类型的表单中,内容一定要精简,减少用户输入,尽量提供选择题,少问答题,没有必填项。要知道用户是不喜欢填写表单的,尤其是当用户卸载软件后也是没有太多的耐心来填写表单的。如图1的卸载表单纵向内容组织形式,顶部是致辞,明确的说出问这些问题的目的,下面是分组表单内容。这种纵向排版简洁填写的表单组织形式,更利于获取用户的反馈。

图2

图3

图4

图5

在一定情况下,很多问题需要按顺序回答,理解并组织好每个表单的情境能得到最佳答案,如果把表单用对话的形式展现,主题之间自然会出现间断,所以就会需要多个网页把对话变成若干有意义并容易理解的主题。如图2 ——图5 的填写表单多页的展现形式。把表单当成是与特定的人在对话,而不是与一堆数据输入框在对话,每个表单都用不同的情境问题与用户进行交流,这样的实际回答率会更高。

图6

当表单想要搜集更多答案时,可以考虑在表单填完之后提出一些可选的问题,辅助获得更多的答案。表单的标签使用术语需要统一,简洁、单个词,这样的标签要更容易解释清楚。如图6的表单设计,使用左右布局的排版方式,左侧放上必填和重要的表单项,右侧辅助放上可供选择的表单,减少页面表单内容视觉的庞大性,整体界面内容居中排列这种方式也比较美观易读。

二、填写表单的反馈,给用户贴心的引导

为了提高表单的完成率和准确率,设计师会试图避免各种各样的分散因素,并且提供一个清晰明确、简单的web表单。这就是为什么任何视觉效果都需要非常适当地使用的原因。运用视觉手段去解决会出现这样的错误,减少用户的误解。当遇到用户提交数据有错误信息时肿么办?首先要让用户知道发生了错误,错在哪,以及如何纠正。

图7

图8

图7邮箱注册表单页,当用户提交错误信息或发生错误操作时,在其错误旁都会有醒目的红色视觉元素作为指导,很好的解决用户找不到错误在哪的窘态(关于提示错误的元素符号,在处理这块时可能还要考虑到色盲色弱用户群的一个需求,他们是看不出这种强烈的颜色提示的,但是有感叹号这样的提醒元素存在我想也能解决这种双向需求) 。当出现注册用户名相同时,这里用下拉框的样式提示,该地址都是以什么样的结构形式被人注册过,给用户提供想命名同样前置的用户名时后缀如何添加的一些建议性帮助,以及图8填写正确后给予的文字图标反馈。

图9

图10

图9和10的注册表单的两个错误提示样式,当输入成功提示会消失,输入错误或者输入不符合标准都会有相应的不同文字反馈,告知用户发生错误的原因,及时回车修改,避免用户在填完所有的信息后再反馈给用户。

[1] [2]  下一页

时间: 2024-11-01 23:34:52

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

表单设计:以表单布局与填写反馈为例

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

浅析网站表单设计点点滴滴(一)如何更好的引导用户

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 表单,主要是负责数据采集的功能,需要访问者自己去填写,如访问者的姓名.邮箱.性别.地址.留言建议.设置密码.管理个人账户等等.时下表单无处不在,成功的表单设计不仅能提高用户的满意度,更能收集更加精确的数据,相反失败的表单设计只会收集到错误杂乱的信息,可能会最终导致潜在用户的流失. 一.组织表单的内容,给用户一个友好的引导 首先要明确的告之用户

浅析表单设计的点点滴滴

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

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

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

FineReport怎么进行表单设计

  FineReport是一款报表软件,它的报表操作功能是报表软件中的佼佼者.下面小编就为大家进行介绍一下FineReport简单的一些表单设计功能,希望能帮到大家 新建表单点击文件>新建表单,如下图: 拖入组件 如上图所示的效果图,我们可以看到该表单需要有1个下拉框控件,一个文本控件,以及对应的2个标签控件,还需要一个以表格形式显示数据的报表块,此时,我们确定了需要在表单中添加一个报表块,4个控件. 在组件介绍中,我们知道控件即可依附于参数面板组件存在,也可以单独以组件的形式存在,在这里可随意

网页表单输入框设计:精心简化表单输入框

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

你会设计表单吗?网页表单结构设计

网页制作Webjx文章简介:Web表单设计:表单结构. 你是否曾为表单设计感到过沮丧或不知所措呢?接下来三篇文章,希望能彻底改变你的看法,真正爱上Web表单设计.首先感谢Luke Wroblewski的帮助,让我有机会细心品味设计表单的乐趣.总体来说,Web表单主宰着结算.注册和数据输入.每天eBay.Taobao上的大量物品主要通过出售物品(Sell Your Item)表单售出:MySpace.Facebook等超过几亿的用户都是通过Web表单加入网站社区的:YouTube.Youku通过上

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

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

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

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