- 浏览: 130271 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
又是好文一篇,虽然说这篇是说付款流程的guideline,但是很多都可以应用到各种注册或者索取用户信息的流程当中,非常值得引起重视。
原文 Fundamental Guidelines Of E-Commerce Checkout Designhttp://www.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/
Introduction:
据调查,有59.8%用户在付款过程中放弃付款操作,因为“很多网购的付款流程都在“QIQANGJIAN”最基本的可用性准则,而他们却恰恰没有注意到因此他们流失了大量可能发生的付款行为。(By Nielsen)”所以在做付款流程的时候,请最先检查这个流程各个角落的可用性问题。
作者Christian Holst在2010年对15个网站进行的可用性测试,观察用户从“放入购物车”到“付款结束”这一步骤碰到的问题,测试中被试们要求用“大声思考”的方式说出他们碰到问题。经过该测试,发现各种可用性问题500多个(其中包括“分散用户注意力的不必要的动画”,“不符合逻辑的流程”,等等)。另一个有意思的发现是,大多数放弃的用户都是在付款流程的最后一步放弃的。
11 guidelines:
本文列出了最应该注意的11点会导致用户放弃付款的痛点:
1.付款流程必须是“直线”流程(点击看大图)
当付款流程不是“直线”的时候,用户就会感到迷惑,他会不明白为什么同样的页面的会看到两次,以为自己操作失误。因此“非直线”的流程成为最容易让用户放弃付款的痛点,一定要尽量避免“步骤中的步骤”这样的问题。
2.对填写框注以必要的说明
因为相比填写其他注册表单,用户会更认真的填写付款表单。用户可能因为不理解某一填写框的内容而放弃付款。所以在填写框后面注以简短的说明文字引导用户填写,对于确保用户付款非常必要的。
反例1)“这里的first是指什么?”
反例2)apple的网站上,用户在填地区编码的地方填写邮政编码(注:美国邮政编码和地区编码不一样)
正例:在填写项后面加入必要的说明,如有可能的话,最好附上例子(如下图)
情景词汇如“继续”,如“返回”,这样的情景词汇会使用户迷惑,“继续什么?”“返回哪儿?”。所以按钮上的文案最好使用清楚明白的词汇。比如“继续购物”,“继续付款”,“返回购物车”等等
4.加强视觉“可信度”
因为这样那样的原因,用户对网上付款的行为都存在很大的顾虑。所以想要促使用户付款,必须先要增强网站的可信度,增加他付款的信心。所以尽可能加入各种各样能让用户觉得“可信,安全”的视觉信息,比如icon,文案,等等。

上面的A/B对比显示,尽管对一个不懂“技术”的用户,B看上去更让人觉得可信。虽然内容完全没有任何变化,就只是因为B在卡信息的地方加入了灰色的底色,安全锁的icons这样的视觉小tips,就获得了更多的信任。
5.避免在付款流程中出现多个使用"apply(应用/确认)"键
当页面中有真正引向“下一步”的按钮时,尽量确保页面中没有其他“apply确认”按钮。

因为这样会使用户迷惑,“我点了apply会发生什么?会去哪儿?”同理产生了会不会发生流程不是直线的问题。所以尽量不要在有最主要的“下一步”按钮的页面,使用apply按钮。
如果需要确认任何信息的话,尽量使用ajax来进行判断。
6.银行卡的到期日期的书写方法严格遵守银行卡上的书写方法
以上4个银行卡到期日期的书写全部不正确。正确的书写方式应该是月份在前,年在后"xx/xx"(xx为数字)。当在月份小于10的情况下,在月份前面加“0”,比如2011年1月到期,写作01/11。写成和卡上一样的好处在于,方便用户检查是否正确书写。
7.填写表格写在一列
反例1)perfume.com“不知道填写哪儿”

在用户填写以上表格时,出现了三种填写方式
- 两列都写(错误)
- 只填写左边的email和右列全部(错误)
- 只填写一列(正确)

大多数用户都“没有看到”右侧的2.是需要填写的一项。
因此,建议所有填写项,都放在一列进行填写。
8.“邮寄账单地址”,“收货地址”,不要让用户写两遍
(注:国外一些国家的确是把“账单”和“收货单”分开的邮寄的。但是这个问题好像在国内不会出现,国内不会邮寄账单)
首先,大部分用户的收货地址和邮寄账单地址都是用户的家庭住址,所以,当你向用户二次询问地址时,不只增加了用户负担,反而提高了用户“写错”的概率。
有网站使用至灰“账单”地址的方法也不好,因为这个时候用户会疑问,为什么会至灰。

反例1)Apple Store使用copy按钮来让用户把收货地址复制到邮寄账单的地址,这也不是一个好方法,因为一旦出错,用户需要更改两个地方,有的用户会忘记更改;想起来更改的用户,也不知道只需要点击一下copy按钮就可以把另外的那个地方的错误改正过来。全部用户都是再重新更改了一遍地址。
正确的方法是,使用checkbox来告知用户(如下图)

9.使用“可见”,“可懂”的错误反馈信息
错误反馈信息必须及时的让用户看到,并且让用户理解为什么出错。
反例1)反馈信息在页面的最上方,不能及时被看到

反例2)反馈信息用一个小箭头指出,可视度太低
正确的做法,反馈信息“及时”“可视度高”(如下图)
10.“成为会员/注册用户”应该是可选项
如果非要让用户注册,可以再购买完成后诱导他。
11.不要询问不必要的私人信息
当用户被询问电话号码这样的私人信息时,很多用户产生怀疑放弃而购买。
但是,用户却是很“宽容”的,只要给用户做出解释“为什么需要您的信息”时,用户就会填写。如果可能的话,尽可能将这个“解释”显示在外面,让用户直接看到。

另外有一个有趣的发现,当用户购物的东西越贵时,用户越容易填写他的电话号码,因为他认为“物品贵重,需要留下联系方式以便及时联系到我”。他认为电话号码是“必要信息”。
发表评论
-
什么是完美
2013-05-06 10:58 697什么是完美? 准确满足需求或适应情况需要;这意味着,无论怎 ... -
设计沟通的七条经验
2013-04-07 14:27 791经常有新入职的同学, ... -
字体设计是网页设计的根本
2012-08-07 09:37 698你已寻找这个问题多 ... -
[iA 旧文] 网页设计工作的 95% 在于字体排印
2012-08-07 09:36 714网上 95% 的信息是文字。从逻辑上讲,网页设计师自然应 ... -
A/B测试得出的一些有意思的数据和小tips
2012-07-30 16:16 0原文:The Ultimate Guide To A ... -
伟大的交互界面都来自…… (转)
2012-07-30 15:27 725原文链接:http://apple4.us ... -
Web可用性设计的247条指导方针
2012-07-30 15:13 911原文链接:http://www.userfocus.co ... -
电视广告最有用 banner广告最没用?
2012-07-30 14:53 7731. Harris Interactive的调查 6月 ... -
购物车的丢弃和挽回
2012-07-30 14:44 719购物车丢弃的原因 SeeWhy今年6月3日的帖子“为什 ... -
B2C大点名:国内B2C网站收集
2013-09-10 21:50 7761.综合: http://www.amazon.cn ... -
卓越的Web软件具有下列品质
2012-07-24 11:35 648卓越的Web软件具有下列品质: ---- 确定产 ... -
Alibaba国际站首页改版小结
2012-07-18 12:40 596阿里巴巴国际站(Alibaba.com)是全球最大、最有影响力 ... -
逻辑路径与网格系统
2012-07-17 16:00 0栅格系统: 创建逻辑路径 除了要精确的遵从网格 ... -
用户体验的五层–概念篇
2012-07-16 15:06 833在找实习的过程中,算是有缘吧,交互设计走进了我的视野,不 ... -
50个专业设计图库
2012-06-14 14:02 753每个设计师都需要灵感。这种灵感其实俯拾皆是,理想地说,灵 ... -
美国广告设计实用教程--作品评价指南
2012-05-10 13:09 782最近在看High哥买的《美国广告设计实用教程》, 里面有 ... -
7个开发人员和设计师适用的WEB应用资源
2012-05-08 22:45 551对于开发人员和设计师来说,很多项目和设计都需要有前期的规 ... -
27个网页设计中色彩的使用
2012-05-08 22:38 734互联网上现在有着数不清的网站,公司的、个人的、政府的、公 ... -
30网页设计美丽纹理的启示
2012-05-08 22:37 604每个网站都会给人一种感觉。那种感觉可能是一见倾心,也可能 ... -
世界500强网站
2012-05-03 10:48 1329世界500强网站大多设计精美、大气简洁,视觉很不错,与大家一起 ...
相关推荐
这份2009年的指南旨在帮助企业在选择和评估供应商时,建立一个系统化的评价框架,从而提高整体供应链效率和质量。 **1. 供应商性能评级的重要性** 供应商性能评级对于企业至关重要,因为它能够: - **降低风险**:...
Vipps设计准则 这些准则将帮助您在网站内使用Vipps付款按钮,徽标和标记。 目录 Vipps按钮 ... :thumbs_up: 如果将Vipps按钮放在另一个按钮旁边,请确保Vipps按钮的大小相等或更大。 Vipps徽标和标记 将Vipp
在快速付款系统中,这个按钮通常会触发支付处理流程。 3. **支付网关集成**:HTML页面需要与支付网关(如PayPal、Stripe、Alipay等)进行交互。这通常通过JavaScript或服务器端脚本实现,但HTML中可能会包含隐藏的`...
【安卓iOS毕业设计】是一个涵盖两大主流移动操作系统平台的项目,旨在帮助学生或开发者通过实践完成他们的毕业设计任务。在这一领域,你需要掌握Android和iOS应用开发的基本技能,包括编程语言、开发工具、用户界面...
在开发一个仿美团的App时,我们需要关注的关键知识点涵盖了移动应用设计、用户界面(UI)、用户体验(UX)、后端服务、数据库管理、网络通信等多个领域。以下是对这些知识点的详细说明: 1. **用户注册与登录**: - ...
总之,"支付、钱包应用app ui .sketch"素材包是一个宝贵的资源,能够帮助UI设计师快速构建出专业且用户体验良好的支付和钱包应用界面。通过巧妙利用这些素材,设计师能够节省时间,专注于创新和优化用户体验,从而...
在这个场景下,"checkout"是一个关键的用户体验部分,直接影响到销售转化率。在HTML(超文本标记语言)中,虽然HTML本身并不直接处理服务器端的购物车或结账流程,但它可以作为构建结账页面的基础框架。 HTML是创建...
"Payment-Style-Website"项目聚焦于创建一个用户友好的引导程序,旨在提供一种流畅、安全且直观的支付体验。这个项目的核心目标是通过精心设计的网页布局、交互元素以及有效的信息架构,引导用户顺利完成支付流程。 ...
【支付信息选项卡组件网页模板】是一个专门设计用于处理在线支付流程的网页界面元素,它通过选项卡的形式呈现各种支付相关信息,提供用户友好的交互体验。这种组件在电子商务网站、在线服务订阅平台以及任何形式需要...