如何提升表单设计的微指引?

在To B的应用程序中,表单是最常见的元素之一,因此要想提升用户体验,应该高度重视用户体验设计技巧,精心的表单设计可以对用户体验和交互效率提升产生很大的积极的影响。

我们在做表单设计的时候,一方面希望我们的表单可以对用户有引导,可以针对用户的操作作出适当的回应,防止他们放弃表单填写;另一方面我们不希望一开始加载大量表单,一下子就把用户吓到,下面是我在项目中做表单设计的一些考虑。

针对如何提升表单设计的引导性主要会考虑以下几个问题:

如何排列体验是最优的?

额外的提示怎么做到恰到好处?

如何减少用户输入次数?

如何鼓励用户继续填写信息?

1、如何排列体验是最优的?

用户在填写表单的时候经常会犹豫不决,所以要尽可能简化表单填写过程,表单设计要遵循内在系统逻辑,符合用户的使用习惯,减少视觉负荷,创建良好的信息层次。

a. 国外的设计研究员mattero penzo做了眼动实验,如果将label放置在input框上面,眼睛扫描表单速度会更快。 

图片1来源于Uxmatters

b. 按照逻辑顺序聚合排列表单,便于用户理解。

图片2 UX Planet的注册页面

图片2 UX Planet的注册页面把birthday表单填写聚合在一起,方便用户理解。

c. 将input框与将要输入的长度匹配,尤其是可能会输入很多信息的输入框大小一定要留够,让用户对将要输入的内容有所预期。

图片3 Salesforce Object界面

图片3 Salesforce Object 表单里面description input框比较大,提醒用户可能会输入比较多的内容。

2、额外的提示怎么做到恰到好处?

为什么需要提示?

Sting TV的数字负责人Yakir Reznik做了A/B测试,在A版本只给用户提供姓名和电话号码表单让用户填写,在B版本中除了给用户提供姓名和电话号码表单,还添加了一个解释,即如果用户需要找回密码,则需要此信息,虽然提示比较长,甚至在移动设备上面还需要额外滚动,但是转换率却提高了11%。所以好的提示对用户的引导性和防止用户放弃有很重要的作用。

在做项目的过程中一般会遇到以下几种提示,每种提示都各有优缺点,大家可以根据自己的实际情况使用提示。

a. 静态提示,在界面上固定显示,不会消失。

优点:始终在界面呈现提示,用户不会错过它,对指导用户操作有重要作用。

缺点:占地方,会让界面不整洁。

建议:如果是特别重要的信息或者是不容易理解的信息,建议采用静态提示。

图片4 Salesforce Object 界面

图片4 Salesforce表单填写有大量静态提示,帮助用户理解自己需要做的任务。

b. 按需显示,当鼠标点击或者悬停在图标“?”、“!”、“i”或者链接上出现提示。

优点:不占用很大区域,还可以指导用户。

缺点:对于不熟悉的用户会错过重要信息。 

建议:如果是对用户填写前作指导,且表单信息容易理解,避免信息过载最好隐藏提示,如果是对用户操作作出反馈,建议预留提示消息空间,且要立即提示最好。

图片5 WIX Login 界面

图片5 针对用户操作作出反馈,提示用户输入错误。

c. 自动出现,当label或者input框获得焦点时,提示自动出现,随着焦点变化而改变。

优点:在需要的时候出现不会有负担,也不会被忽略。

缺点:信息填写完即使不在需要它也会出现。

图片6 Zeplin Login界面

图片6 Usernameinput框获得焦点时,提示自动出现,当焦点在password时提示在password右侧出现,username右侧的提示消失。

d. 自动消失(一般指占位符),输入框提示用占位符,一旦用户焦点在该框,占位符消失。

优点:不占用很大区域,还可以指导用户。

缺点:显示提示信息空间有限;当用户输入一半信息想要看提示的时候是无法显示提示的。

建议:如果提示信息不多建议用占位符。

图片7 Invison 注册界面

3、如何减少用户输入次数?

好的表单设计可以减少用户输入次数,提升工作效率,目前主要从下面几个方面去考虑。

a. 打字交互成本高,尽量用单选或者多选代替,让用户做选择题,减少用户输入。

b. 区分可选和必选字段,必选可以加 * 号,让用户可以集中于必填字段。

图片8

图片8 用 * 号标识出必填字段,但是如果大多数是必填且有大量表单,建议只标识出非必填,如下图9。

图片9

4、如何鼓励用户继续填写信息?

给用户持续的激励,会刺激多巴胺的产生,多巴胺是一种化学奖赏的神经递质,会产生神经系统的兴奋性,所以为让用户可以愉快的完成表单,不中途放弃,要有一些激励设计。

a. 完成过程中提醒用户工作进程,鼓励用户继续填写表单。

图片10 

b. 表单完成之后给用户一些称号激励,给用户设置青铜、白银、黄金、铂金等等级,给用户升级刺激。

图片11 WIX 界面

后面我会讲当表单数量很多时,如何做设计?

以上是自己在做项目的一些个人总结,欢迎大家加我公众号或者知乎专栏交流:西西设计客栈

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

推荐阅读更多精彩内容