手机版网站建设中长表单只有这样设计才能留住用户!

2018-01-27 09:46:47
摘要:移动端的应用越来越广泛,用户不再局限于B端产品的需求,网站建设中越来越多的企业选择同步做手机版网站。基于客户业务需求,有时候用户在操作过程中,不可避免的需要填写很多表单,针对于移动端长表单,应该如何设计才能给用户更好的体验呢?
移动端的应用越来越广泛,用户不再局限于B端产品的需求,网站建设中越来越多的企业选择同步做手机版网站。基于客户业务需求,有时候用户在操作过程中,不可避免的需要填写很多表单,针对于移动端长表单,应该如何设计才能给用户更好的体验呢?



移动端网页长表单的设计,按照设计思路的不同,一般有三种主方案,如下所示:



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

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

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

主方案1的设计讨论

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

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

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



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

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

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



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

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

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

主方案2的设计讨论

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

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



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

主方案3的设计讨论

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

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

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



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

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

网站健身中的移动端长表单设计总结分析:

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

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

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

这里分为4种情况:

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



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



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

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

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

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

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

综上,我们在网站建设的过程中总结了很多设计经验,网页设计并非简单的内容组合排版,网页设计需要站在用户的角度思考问题,方便用户,为用户解决问题。更多人性化的体验因素直接影响网页作品的完整度及成熟度。

你觉得这篇文章怎么样?

28

我们立足于合肥面向安徽乃至全国全球市场,我们拥有一支经验丰富、创意独到、团结协作的专业技术团队。我们立志把最好的技术通过最有效、最简单的方式提供给客户,为客户提供最佳的解决方案,我们将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,帮助客户在新经济时代下,把握商机和发展空间,并获得绝对的竞争力!我们专注于高端网站定制、系统开发、商城开发、外贸网站建设、公众号开发、小程序开发、网站优化推广、安全运维等技术领域。是高端定制网站领域著名服务商!

扫描二维码与小二CMS创始人沟通

7*24小时为您服务

小二CMS专注于高端网站定制、系统开发、商城开发、外贸网站建设、公众号开发、小程序开发、网站优化推广、安全运维等技术领域。是高端定制网站领域著名服务商!

本文标题:手机版网站建设中长表单只有这样设计才能留住用户!
免责声明:文章《手机版网站建设中长表单只有这样设计才能留住用户!》来至网络,文章表达观点不代表本站观点,文章版权属于原作者所有,若有侵权,请联系本站站长处理!
—— 小二CMS创始人微信 ——
关于我们

小二CMS专注于高端网站建设服务及定制,拥有丰富的企业网站建站经验。 近年来制作并完成了许多网站建设案例,企业品牌官网、营销型网站的建设、B2C网上商城系统开发、行业门户网站等平台开发,我们还提供了网站的策划、设计、开发、布署、安全等一站式专业的网站建设解决方案。小二CMS致力于研发国内最专业、功能最强大,扩展性能最自由灵活的高端行业通用的网站系统。我们做的不仅仅是网站系统,更多的是成就您的成功!

我们的优势

十一年建站服务经验
服务1800家企业
资深行业分析策划
前沿视觉设计、研发能力
前端代码深度符合SEO优化
千家成功案例

独家源码出售
具有完备的项目管理
完善的售后服务体系
深厚的网络运营经验
时刻新技术领先研发能力
方便二次开发

我们的不同

我们是一个年轻且富有激情的团队,我们沉迷于代码并陶醉在设计之中。我们非设计,不生活;无兄弟,不编程!可年轻并不意味着没有经验。团队成员均来自各顶尖设计公司及软件公司,我们对网站设计及开发驾轻就熟,有着数百个成功案例。我们坚信用心服务,用实力说话!我们的使命:通过我们的努力,让技术改变命运!我们的宗旨:客户第一,品质至上!我们的信念:唯有客户的成功,才是我们的成功!

不忘初心,方得始终
中高端网站定制开发服务商
与我们取得联系

好作品自己会说话,

我们敬畏您给予的点滴信任 !

期待携手合作,请立即咨询我们:
QQ咨询 微信咨询
我们用心,期待您成为我们的客户

微信号:
添加微信好友, 详细咨询相关信息。

复制并跳转微信
19810950281