9个新人容易中枪的表单设计问题

   在网站中,表单是用户跟我们沟通的主要桥梁。透过表单,用户可以买东西、订阅新文章、更新资料……可以说网站最重要的功能,都是靠表单来完成。然而这个跟顾客打交道的重要环节,我们真的有做好了吗?以下分享的是一些常见的表单设计问题,以及我们可以怎么修正。

  千万美金的教训

  表单设计好,可以差多少?旅游网站 Expedia 曾经分享过一段经验:在他们的订单页面中,部分用户填写了旅游地点、旅馆、付款资讯,并按下“立即购买”后,却并未成功完成交易。经过调查后发现,原来是在姓名字段后面,还有一个非必填的字段“公司”,而部分用户却误以为这是要写“银行”的“公司”名称;更糟的是,用户会在紧接着的地址字段填写银行的地址。当后续在验证信用卡时,如果核对了地址,就会因为填写的并非刷卡人的地址,而导致刷卡失败。他们在新版本中把这个字段移除,猜猜看差了多少?根据他们所述,只是删掉这个字段,就帮他们一年增加1200万美金的收入!就一个选填字段…

  相信大家也认同表单的重要性,然而以下几个问题却仍是十分常见:

  1. 要求用户填写非必要的资讯

  我们有时会要求用户多填写一些资讯,通常是为了后续拿来统计、分析之用,然而这真的是必要的吗?与其干扰用户完成目前最重要的任务,是否可以减少需填写的资料,让用户专心填完?我们或许会认为,把一些字段改成非必填就搞定了,用户可以不必费心写嘛!然而看看前面 Expedia 的例子,其实用户所理解到的资讯,有时会与我们想像的不同。


  要试用 IBM 的新产品,需要填写许多字段,然而这些真的是必须的吗?

  2. 送出表单的主要按钮(Call To Action)不够明显

  填完表单之后,除了送出表单、前往下一页的主要路径之外,通常还有像是取消、上一步之类的次要路径;常见的错误之一,便是让次要路径的按钮太过抢眼。次要路径的按钮或连结,只要找得到即可,不需要过分强调颜色;同时要让主要路径按钮的大小、颜色都能让它容易被找到。


  取消按钮用红色的设计,过于抢眼而可能导致误点


  把主要路径的按钮标示清楚,次要路径找得到即可

  3. 没有说明清楚送出表单可以得到什么价值、又会付出什么成本

  有时候用户放弃填写表单,并不是因为我们的产品不符需求,而是用户花了时间,却仍然搞不清楚到底有哪些费用和风险,又会得到什么;应该要说清楚,或是提供一些选项,让用户来决定。举例来说,用户给了 email 之后会不会收到广告信?大概是什么内容?多常会收到?把话讲清楚,用户比较愿意放心把资料交给我们,用户也不会因为之后收到了意料外的电子报,再愤而把我们加入垃圾信名单。

  而送出表单能得到什么价值?也可以考虑调整 Call To Action 按钮的文案来强调。把最重要、用户最在意的价值直接写出来吧!

  4. 缺乏清楚的导览,告诉用户目前到哪个步骤

  这个表单送出后就是完成订单了吗?就要付钱了吗?不清楚的资讯,会让用户不敢继续下去。在过去访谈的经验中,有些用户是这样说的:“对于陌生的服务,都不敢就这样一直点下去,很怕一不小心就付了钱。”可以考虑提供一个流程、进度图,明确告诉用户现在在哪一步,下一步是什么,还有什么要完成,怎么样回到上一步等等。CTA 也可以用比较明确的文字,来告诉用户现在将要完成什么事情;像是要下单前的按钮,最好不要只写“送出”,可以写“送出订单”会更明确一点。

  5. 没有适时提供协助

  在过程中,用户仍然会对一些细节有所疑问,像是在买东西时,大约什么时候可以收到?我的信用卡号会不会有风险?提供了 Email,是否会收到我不想看到的广告信?可以考虑提供一些常见问答资讯,让用户可以即时解决疑惑。

  6. 过长的下拉式选单

  有些问题我们会使用下拉式选单来处理,像是币别、国籍…等等,然而如果塞了几十甚至上百个选项进去,其实一点都不好点选,简直在考验人们的耐心。或许可以考虑用提供搜寻功能的下拉式选单,当用户输入一些内容时便即时进行筛选,快速又方便。


  Google Analytics 的设定中,选择币别的下拉式选单,可以输入关键字进行搜寻

  7. 不明确的错误讯息

  错误讯息要能让用户明确知道哪个字段填错了,应该怎么改善。常见的错误是,并未指出是哪个字段有错,或者只说了这个字段有错,却没讲是格式错误、数值太大太小、还是应该怎么修正。

  错误讯息必须明确,如果期望资料是以 http 开头,就应该直接说明,只写”输入正确的网址”太模糊

  8. 清楚提示期望用户填写的格式和内容

  在表单中,应该同时标明这个字段的标题(label),以及使用 placeholder 来提供填写提示。如果只有 placeholder,当用户开始填写内容时,placeholder 的内容消失,用户可能无法发现正在写的内容有错误,或是忙别的事情回来后就忘了这是要填什么。


  字段标题和输入提示都是不可或缺的

  9. 没有妥善支持移动设备

  在手机上填写表单一直都是不容易的事,手机上的表单设计也并不容易。必须注意字型和按钮大小、版面配置之外,必须提醒的是,测试时最好实际用手机来填写看看,而不能只用模拟器!因为模拟器虽然可以让我们确认视觉配置上是否正确,但实际用手机填写一遍,才更能感受到实际要花多。

时间: 2024-10-30 12:31:05

9个新人容易中枪的表单设计问题的相关文章

网页交互设计参考:漂亮的网页登陆表单设计实例

登录表单是很多网站必备的内容,界面虽然简单,但好的登录表单对于用户体验也十分重要.在设计表单时可能碰到最大的问题是如何将很小的表单框放在页面中,一般每个网站都会将表单设计成符合网站本身的风格,你也可以参考本文中的这些表单设计.能给你的设计一起启发 Mobile Me Straw Poll Scrap Blog 20×200 Acrobat 97 Bottles Twitter The Mattinator Mint Freelance Suite

PHP中常用的表单验证类

PHP动态网页开发中常用的表单验证类 <?php class class_post { //验证是否为指定长度的字母/数字组合 function fun_text1($num1,$num2,$str) { Return (preg_match("/^[a-zA-Z0-9]{".$num1.",".$num2."}$/",$str))?true:false; } //验证是否为指定长度数字 function fun_text2($num1,$

EasyUI中实现form表单提交的示例分享

这里给大家分享的是一段使用EasyUI中实现form表单提交的方法的核心代码,小伙伴们根据自己的需求补全form部分吧,希望大家能够喜欢. 代码如下: $('#form').form({ url : 'test/add.do', onSubmit : function() { parent.$.messager.progress({ title : '提示', text : '数据处理中,请稍后....' }); var gridValid = endEdit();// 子表退出编辑验证 if

Jquery中ajax提交表单几种方法(get、post两种方法)_AJAX相关

在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

select-如何在action的一段代码中读出不同表单的内容,并一一对应?

问题描述 如何在action的一段代码中读出不同表单的内容,并一一对应? 比如说,我在action中,用一个pulbic String select(...)来写, 是不够在里面同时写上6个sql语句吗? 解决方案 用sql中的union,将6个select连起来 string sql = "(select xxx from xxx) union (select yyy from yyy) union(...)" 解决方案二: 楼上的语句是什么意思?求解释

谈谈网页中的表单设计

Don't make users abandon in the first step!--谈谈网页中的表单设计 电子商务网站都会遇到用户常常在付款的最后一步放弃http://www.aliyun.com/zixun/aggregation/17553.html">购买商品(abandon in the last step),也就是常说的"购物车丢弃(shopping cart abandonment)".其实面对网络上越来越多的注册.登录信息的输入,用户常常因为&quo

jsp 修改数据库信息-jsp中用户修改表单信息,从而数据库中相应的字段值也update

问题描述 jsp中用户修改表单信息,从而数据库中相应的字段值也update 点击图片1的"修改密码"按钮,会出现图片二的修改密码的表单.这个修改密码是由用户自己修改的,用户修改密码之后,表"userInfo"中的"userPwdz"字段值就相应变化了.我应该怎么写得到用户修改的密码参数,然后update表呢? 新手求指教,麻烦解答一下,感激万分!!!! 解决方案 sql语句写错了,update好像木有 星号,而且参数好像也不应该这样传进去,一般用

在jsp中提交form表单不能跳转进方法

问题描述 在jsp中提交form表单不能跳转进方法 我用的form表单提交的,jsp里 这样,js是function search(){ var myselec = $('#myselectHidden').val(); $.ajax({ type:'POST', data: {param:"myselec",isAll:"yes",param2:myselec}, url:'outQueryOption', success:function(data){ var

将一个html中的文本表单提交到另一个html上

问题描述 将一个html中的文本表单提交到另一个html上 类似下面的html,提交给show.html, 完后显示出来,纯的html可以实现么 <form action="" method="post"> <div class="field"> This is a brief description of Interim Fix : {# 自动生成的默认错误信息显示 #} {# 会被翻译成:<ul class=&q