表单设计心得

表单是网页中的重要元素,一个优秀的表单会给用户带来不错的用户体验。经过近期长时间设计表单,我们需要从表单基本层面重新审视表单、理解表单。深刻认识到表单时用户和软件之间最具挑战的交互方式。

1、必填字段不需要标记

我们在设计表单时,大多数时候,或者说大多数做法都会给必填字段加上一个星号*标记,以让用户知道这是必填选项,但实际上必填选项没有太大意义。一份表单,最初始的出发点本来就是要填写完这份表单,标出必填字段并不是一个好的交互,无形之中给用户增添了学习成本,单纯使用(红色的*)星号标注必填字段有一定的学习成本,会让用户有学习负担。针对必填选项,表单选项基本上都是需要填写的,特意的使用某个符号标示此项必填,会显得有些许累赘,完全可以设置选填选项来弥补这一缺陷。

但是不需要标记必填也不是对所有表单都适用。如果大部分字段都必需输入,那么就将可选字段进行标注,如果大部分字段都是可选的,那么就标注必填字段。

关于必填选项这个处理方式,看了一下,腾讯系的很多产品都没有加必填选项标记,如腾讯微博、腾讯微视、QQ号注册等,百度系的百度账号注册也没有必填选项标记,Facebook注册没有必填标记。

2、每一个表单只使用一种按钮类型,或者只提供一个按钮

我们在填写表单的时候都会发现,当选项项增加时,我们就需要增添世间去思考怎么做选择,下决定的时间就会无形之中变长。我们可以在设计表单的时候就避免这个问题,每个表单页面只有一个醒目的按钮,让所有的基本按钮都保持同一风格,主动作按钮突出让用户毫不费力地进行操作。

3、输入框的长度要保持适中

输入框的长度要满足输入的文本的长度,同样也不能让输入框的长度太长。如果有必要,可以增加一个计数器,实时显示用户还可输入的字符数。这种情况针对大段输入框不失为一个好方法。但是对于普通的一句话输入框,只要框的长度适中就好,输入框太长会给用户造成疑惑,我的内容是不是填少了。

4、校验要及时,且提示信息需要突出显示,要友善

对于输入框输入的内容,需要在光标离开的瞬间就进行校验,及时反馈校验结果,不能在填完一整张表单提交时告诉用户第一个输入框输入有错误,这种体验很不好。同时,当填写错误时,要及时在问题区域提示错误,提示信息的位置要醒目准确,让用户一眼看到出错区域,并且提示信息要友善,要告诉用户错误原因,或者给用户提供解决方案入口,不能只孤零零地提示错误,什么都没有,会让用户不知所措。

5、输入框如果有限制,需要给一个示例示范

如果一个输入框要输入手机号,限制为xxx-xxxx-xxxx格式才能被验证,那么就需要在旁边给一个示范。最好的处理方式就是在输入框内加上破折号,让用户直接在破折号之间的空格里输入数字,体验会更好。

6、把相关的部分放在一块

当下时代,信息本就复杂,在填写表单时,人们总会有一种畏惧感,对表单的一种陌生感畏惧感,把相关的内容放在一块,一是可以显得有条理性,二是可以把内容组织得更好,三是可以让用户在填写的过程中顺着一定的思维思考,可以产生更好的用户体验。

7、如果表单过长,可以选择拆分表单

如果表单过长,可以按照内容的相关性将其拆分成多个步骤,就像是把一个很大的任务分解成多个小任务一样,这样用户在填写时才不会有畏惧感,也不容易产生疲劳。同时长表单拆分后可管理性会更好,用户前面填写的表单可以先保存起来,如果用户在填写后面表单的时候遇到计算机故障,不至于所有填入的表单内容全部丢失。但是,如果将一个长表单进行拆分,就需要给用户一个提示,让用户知道当前所处的位置,如2/4页,这样用户就知道完成了多少内容,还剩多少内容未完成,填写起来心里会更有底。

8、如果一个输入框可以满足需求就不要用两个

一个问卷,给标题添加一个logo,这种形式的,完全可以通过标题输入框就能完成,没有必要再添加一个输入框再来添加logo。给表单添加一个描述,可引入图片、链接页面等,通过一个稍简易的编辑框就能搞定所有。

9、表单设计保持一致性

确保表单中的所有输入控件保持一致,用户体验才会保持一致。前面单选用下拉列表二选一,后面单选用单选按钮,表单风格不一样会给用户造成不好的体验。

10、使用恰当的动作顺序

当一个删除操作,确定是主动作操作时,需要强调确定弱化取消。当一个删除操作取消是主动作操作时,需要强调取消弱化确认。根据场景使用恰当的动作顺序。

11、表单提示文案要精简

没有人愿意查看一大段的提示文案,现在的用户浏览网页都是扫的,不再是认真的阅读每一段文字,提示文案一定要做到言简意赅,一目了然。十个字能搞定的绝对不要用十五个字来臃肿一番。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

  • 一. 表单设计的影响与原则 1.1 表单的产生 由内而外,网站根据自身信息存储格式要求,从数据库映射成表单。 由外...
    晓梦蝉君阅读 12,019评论 1 30
  • HTML表单 在HTML中,表单是 ... 之间元素的集合,它们允许访问者输入文本、选择选项、操作对象等等,然后将...
    兰山小亭阅读 3,409评论 2 14
  • 表单是什么? 表单是一个包含表单元素的区域,使用表单标签( )定义。 表单元素是允许用户在表单中输入信息的元素,主...
    Meowmaid阅读 1,391评论 1 7
  • 无论你是做什么产品的,我相信表单设计的需求都是非常常见的,但是也是容易被忽略的。跟以往不同的是,写这篇文章并不是我...
    idatadesign阅读 1,824评论 1 25
  • 本书一共14章,讲了三部分内容:表单结构、表单元素、表单交互。表单是横在用户和企业之间的一道障碍, 没有任何人喜欢...
    2c5994723157阅读 3,187评论 0 16