如何设计好移动表单,移动端的长表单应该如何

基于业务需求(常见于B端产品),有时候用户在操作过程中,不可避免的需要填写很多表单。针对于移动端长表单,我们应该如何去正确的设计呢?

Because the form looks good, it’s more inviting for users to fill out. The consistent UI makes this long form coherent; the visual design doesn’t overwhelm. There is a simple and light icon by every field to indicate it’s editable. When you haven’t picked an answer there is just a dash to let you know an answer is missing; it’s a great way to show it. All of the text is thin weight making the text easy to handle as well. It’s a long form, but an easy one to digest.

3.主方案2的设计讨论

主方案2的设计优缺点

优点:与方案三相比不同分组表单之前切换查看信息方便快捷。申请流程的首页简洁,填写信息全部隐藏到下一级界面。

缺点:来回跳转,操作负荷较大,会把用户绕晕。

主方案二

在方案2.0中用户填写完成的分组和未分组填写分组区分不开,将方案2.0进行优化,例如填写完成后,会出现已完成的标签,提示用户已完成和未完成不同的状态(如方案2.1)

When filling out a dating profile there is a lot of information you usually have to input about yourself. OKCupid makes this a little easier for you. Under your profile details page you have the typical fields like how tall are you, what’s your religion and if you like dogs, cats or both. We all know that forms are taboo; they are the black sheep of the internet. However, there are some things you can do to make filling them out easier. The more effortless a form is to fill out the higher success rate of it being completed.

2.主方案1的设计讨论

主方案1的设计优缺点

优点:一个界面将所有表单信息展示出来,如果想查找某些填写的信息也变得更容易,相对于主方案二和三,减少了页面跳转操作和查看。

缺点:基于移动端界面承载能力较弱,一个界面将表单所有展示出来,用户一次性浏览和操作起来压力较大,容易使操作流程失败,导致成功率大大降低。

针对于主方案一,用户完成表单完成后,提交按钮有三种主要的设计方法,一种是提交按钮放在表单最后,一种是提交按钮放在导航栏上。另一种是,提交按钮底部悬浮。如下图所示:

主方案一

方案1.0,如果提交按钮放在表单之后,那么用户的视觉流和操作感觉是一致的,流畅而自然。但是会出现一个问题,用户在输入信息时,键盘调用会遮挡到提交按钮。Android手机上的输入法都可以点击输入法上的按钮将键盘推下去。而iOS 原生输入法没办法推下去,只能点击其他非编辑区域才能推下键盘。这样就显得很麻烦,用户可能会忽略掉提交按钮。

方案1.1解决了提交按钮会被键盘挡住的缺陷,但是视觉流和操作行为错乱,用户在屏幕底部输入完成之后,视觉和手指要返回到底部操作操作。

方案1.2提交按钮底部悬浮,解决了方案1.1的视觉流和操作紊乱的问题,解决了方案1.0提交按钮被隐藏的问题,但是当输入文本,调出键盘时,依旧会被挡住。

底部悬浮按钮

使用底部悬浮按钮的场景是操作按钮非常重要,例如手机淘宝的立即购买和加入购物车。

同时底部悬浮按钮不适用于文本操作类。例如文章说的长表单文本输入。当输入文本,调出键盘时,依旧会被挡住。

底部悬浮按钮适用于非文本输入的使用场景。从手机淘宝、新浪微博可以看出,适用于在界面中非文本输入、提供一个功能入口或者是界面非文本输入的选择信息的确认。

Forms -OKCupid is a free online dating app. It offers opportunities for friendship and networking in addition to dating.

本文大纲:

1.三种主方案

2.主方案1的设计讨论

3.主方案2的设计讨论

4.主方案3的设计讨论

5.总结

在填写约会清单时,你通常需要输入关于你自己的大量信息。OKCupid会让这一切变得更简单。在你的个人详情页,你会面对一些常见填写项,比如你多高,你的宗教信仰以及你是否喜欢猫猫狗狗。我们都知道表单是一种禁忌;是互联网的害群之马。但是,你可以做很多事情来让这一切更容易。写表单写的越轻松,其完成正确率就会更高。

1.三种主方案

针对长表单的设计,按照设计思路的不同,可以分为三种主方案,如下所示:

PS:图中的举例的关键字段仅仅为举例需要。

主方案1:我们常见的设计形式,一个界面将所有表单信息展示出来。

主方案2:将不同的分组表单放在不同的下一级界面,用户填写之后返回。

主方案3:分步操作,一个界面完成一组表单内容,点击下一步进入下一组表单。

图片 1OKcupid

4.主方案3的设计讨论

Facebook曾针对分步注册与非分步注册做过A/B Test,其结论指出分步注册的转化率远高于非分步注册。由此可见,非分步注册强行减少注册页面,不如适当拉长战线,给用户轻负荷的操作,让用户在不知不觉中完成注册流程。

主方案3的设计优缺点

优点:流程分步操作,相对于方案1,用户操作成功率大幅度提高。

缺点:如果用户操作到了第三步,需要返回第一步确认填写信息的准确性,那么用户需要两次返回。

方案三

用户填写的信息做保存(缓存),用户返回上一步,填写的数据做保留。H5依旧适用,用户填写的数据保存在数据库,用户返回上一步时,同时刷新载入数据库记录的数据。

对于方案3.0和3.1 。下一步按钮不同。究竟采取哪种?方案3.0视觉流和操作流是正常情况,且不存在按钮被键盘挡住,所以方案3.0最佳。

*总结:表单填写对每个人来说都是乏味的;采用一种干净整洁的风格设计表单,会让用户用起来更容易。*

移动端长表单设计总结

主方案1、2和3,都有各自不同的优缺点。

一个交互流程的好坏,一个最重要的标准之一是让用户顺利完成操作流程,保证操作流程的成功率,才能完成用户的目标。以此标准来看,主方案3是最好的。

接下来探讨一个细节问题,就是提交按钮是放在顶部导航栏、信息内容区内还是底部悬浮?

这里分为4种情况:

1.内容区加上操作按钮不被键盘覆盖。建议按钮放在内容区内

1

2.必填的内容未被键盘覆盖,非必填被覆盖,建议操作按钮放在导航栏上,例如朋友圈、QQ空间和新浪微博。

2

3.必填的表单超过一屏,建议按钮放在内容区。

放在导航栏上不行的原因有两个:

a.视觉流错误,从上往下,信息量很大,用户滑动浏览时,会忽略且很难联想点击右上角下一步,行业常见放在导航栏上是因为必填的不超过一屏  ;

b.当必填项过多时,要滑动屏幕才能填完。 把按钮放在右上角的导航栏,当用户还没填写完成,那么在按钮放在导航栏上很容易去点击,这是引导用户犯错。

4.必填超过一屏,且无非文本输入,建议适用底部悬浮。

你认为在设计一款APP时,是否应该重视表单设计的方案?重视表单设计有多重要?

本文来源于一本书《Mobile Design Book》,是在浏览每日新产品时发现的,当在其网站注册了邮箱后,就会每2天发送1个课程邮件,内容摘抄自书中的章节。在此特意进行整理和翻译,留存学习。

Do you think the experience of a form should be something to take into an account when designing an app? How important could it possibly be?

In OKCupid’s case, all of their fields are actually select fields making filling it out much easier for you. The app requires you to pick an answer out of pre-made choices rather than think of one. This takes the cognitive load off from the user, making the form filling easier. The form in itself is aesthetic through its minimal design; it uses subtle shades of gray, good typography and makes good use of whitespace and iconography. The form has it’s own design compared to using the default iOS form design.、

因为表单看起来好看,就有更多用户愿意填写。风格一致的UI元素让表单看起来整齐;视觉设计也不会喧宾夺主。每个表单项都有简单且明亮的图标来表示它可编辑。如果你有个答案没选,就会出现一条短线告诉你有答案没写,用这种显示方式效果很好。所有的文本都是细体字,这样也会让文本更易于识别。表单很长,但也易于理解。

What could a dating app possibly know about filing out form?

表单——OKCupid是一款免费在线约会APP。这款APP提供社交网络和网络约会的功能。

在OKCupid的例子中,所有的表单项都是选择菜单,这样就能使你填写变得更容易。这款APP会让你从预设的选项中进行选择,而不是空想。这样就能减少用户在认知方面的负担,从而让表单填写更容易。表单本身由于其简约的设计而具有美感;从设计上,它采用了细微的灰色投影,良好的排版,以及对留白和图标的充分利用。和iOS默认的表单设计相比,它有它自己的设计风格。

*Take away:Forms are tedious for anyone to fill out; make it easier for the user by giving your forms a clean style.*

还有什么比一款约会APP更能知道如何填写表格?

本文由明仕msyz手机版发布于旅游-环球旅讯,转载请注明出处:如何设计好移动表单,移动端的长表单应该如何

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。