提高转化率!9个新人容易中枪的表单设计问题 - 优设网 - UISDC

提高转化率!9个新人容易中枪的表单设计问题

2016/04/21 11125评论区

9-form-design-issues-1

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

千万美金的教训

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

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

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

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

IBM Bluemix 试用注册

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

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

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

Call to Action 按钮范例

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

Call to Action 按钮范例2

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

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

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

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

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

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

5. 没有适时提供协助

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

6. 过长的下拉式选单

有些问题我们会使用下拉式选单来处理,像是币别、国籍…等等,然而如果塞了几十甚至上百个选项进去,其实一点都不好点选,简直在考验人们的耐心?;蛐砜梢钥悸怯锰峁┧蜒肮δ艿南吕窖〉?,当用户输入一些内容时便即时进行筛选,快速又方便。

drop down

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

7. 不明确的错误讯息

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

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

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

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

字段标题和输入提示

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

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

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

「优设人物专访系列」

1、曾任腾讯大粤网设计主管的跨域达人:《优设访谈!腾讯设计师米田的设计之道与成长之路》

2、没有听过冯叔的设计师不是好设计师:《优设访谈!著名设计师冯铁的设计思考与经验之谈》

3、前端重构视觉交互无一不精的设计师:《优设访谈!腾讯高级交互设计师C7210的十年设计路》

4、非议不断前行不止,用心的设计团队:《优设访谈!国内知名设计团队专访之滴滴DISIGN》

5、前网易现阿里写的书是交互领域必读:《优设访谈!阿里交互设计专家刘津的设计管理之路》

6、职业路径最为清晰的科班交互设计师:《优设访谈!LBE安全大师产品总监晓生的职场进阶之路》

7、能靠脸吃饭偏偏不的设计界「鹿晗」:《优设访谈!阿里资深设计师的自学设计之路》

8、300多人的百度设计团队该如何运转:《优设访谈!国内知名设计团队专访之百度大UE》

9、百度上海团队负责人的非科班设计师:《优设访谈!百度设计大咖JJ YING的自学成才之路》

10、他带的学生已经是国内的设计大咖了:《优设访谈!灰昼:从非科班生到首席美术总监的15年设计路》

11、设计的产品有几亿人在用的非科班生:《优设访谈!腾讯电脑管家视觉负责人张晓翔的UI自学之路》

12、英雄联盟穿越火线天天爱消除都有他:《优设访谈!腾讯游戏Tgideas团队设计总监李若凡的十年设计路》

原文地址:conversionlab.co

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网ag亚游集团“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.offshoring-digest.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.offshoring-digest.com/9-form-design-issues

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 用户体验设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里