B2C表单和购物流程设计要点

 

表单设计的要点:

1. 概述

表单对客户来说是很烦人的,但它对在线处理很重要,让填写表单的过程简单、快速，才能让网站快速获取潜在的利益。

2. 访客的问题

你作为访客,在支付中一般会有哪些问题?

当访客遇到表单时，他们的问题集中在外观、所需信息的合理性，以及安全性这几个方面。在对表单快速瞟一眼以后，他们就会思考以下几个问题：

• 我要从哪开始填？
• 填起来很简单么？
• 填起来很费时间么？
• 整个过程中是不是有很多的步骤？
• 页面安全吗？
• 表单要求的信息量是否合理？

一旦访客开始填写表单，他又会有这样几个问题：

• 这些问题合理么？有必要在这里回答么？
• 我的信息安全么？保密么？
• 我看不懂这个问题，页面上有解释么？
• 我填表时候遇到问题了，怎么获取帮助？
• 当我点击提交按钮的时候后，会怎么样？
• 我还要填多少？

3. 表单特有的问题

• 看起来很麻烦

  一些表单的元素不太友好，比如：徐璈输入信息的文本框过于短小，组成列表的行过于死板，字体又黑又小，以及命令式的语气等。将这些组合到一起，结果使得表单看起来很复杂，页面让人感觉麻烦，难激起访客填写的欲望。

• 贪得无厌

  包含不必要的字段的表单称为贪婪的表单。消灭和压缩可有可无和不必要的字段。

4. 设计要点

对于设计师来说，表单设计注重的是功能性和实用性，而不是花哨和娱乐。

设计表单实际上不是艺术创作，而更多的是解决问题。如何创造一个可使用的表单交互页面，这个页面同时还要很友好、很清晰并且对访客来说好填写，是十分重要的。

删掉不必要的字段.确保整个表单每个字段都有用

1) 把注意力集中在表单区域

让访客越快把注意力放到表单上，他们就越快知道该干什么以及从哪开始。

下面这些方法可以让你的表单脱颖而出：

• 表单的背后设置浅色背景（但要注意保证文本的易读性）
• 在表单周围加上边框
• 表单区域用彩色
• 使用箭头

 

在表单外面使用边框,并对激活的表单进行颜色的强调

 

 

用模特的手势给用户一个指示性的作用,起到强调表单的作用

2)使用干净、简洁的布局

降低表单的复杂度和难度，使表单布局干净简洁。

怎样让表单看起来干净简洁？

• 空间。不管用什么颜色，在表单周围和表单的行间都留下足够的空间，以此来增强可阅读性。
• 去掉没用的元素。表单周围、里面的任何东西都应该有助于表单的完成和提交。

适当的留白,行间距的控制

• 消除字段和标签中的空白。字段和标签中的过多空白会导致用户水平移动视线。把标签和字段放在一起，可以增加两者之间的关联性。
• 文本可读性。 确保访客不用放大镜就能看清楚页面上的文字。12px以上。表单标签以及字段应该选用高对比度且简单的文字。
• 尽量左对齐文本和字段区域。访客一般从左侧来找到一行文本的起始端，右对齐的格式就让人很难定位一行的开始，这会明显增加表单的复杂性。左对齐的表单字段区域更能让人从视觉上掌握整个布局，从而利于快速浏览。

右对齐的表单中,每行文本都不在同一起点上,要读完这些标签眼球要转动很多次.

 

左对齐的时候所有文本都从固定的起点开始,直接向下扫描就可以看完所有的要填项

 

3) 明确指示填写的步骤和进度

如果你的表单填写过程比较长，有没有相应指示，访客会心生厌烦而放弃。

 

4) 提供安全和保密措施

很多访客会不自觉额在页面上寻找“锁”样子的图标，看到“锁”后才会确定链接的可信度。所以在填写私人信息的时候别忘了在表单页面上加一把锁

 

---

 

购物流程设计的要点:

1. 概述

任何电子商务网站都不希望客户在购物流程阶段流失。绝大多数的访客是真的想要购买他们购物车里面的东西的，他们需要的是一个清晰简单、没有任何障碍的付款流程。

2. 结算流程的目的

1. 展示需要购买的条目
2. 收集物流信息并验证
3. 收集账单和付款信息并验证
4. 链接到一个付款接口,接受或处理付款
5. 访客的一般问题

准备阶段的问题

1. 从哪开始?如何结算?
2. 要注册么?
3. 我的密码是什么?
4. 我还在刚才的商店么?
5. 我要用多长时间?

交易过程的问题

1. 安全么?
2. 邮寄费用要多少?
3. 支持那些付款方式?
4. 提交了以后会怎么样?

4. 结算流程的关键要素

结算步骤通常包括的元素

1. 购物车预览
2. 登陆(针对老顾客);
3. 注册(针对新顾客)
4. 账单地址/邮寄地址;
5. 付款信息
6. 付款检查
7. 确认

5. 结算流程特有的问题

安全?

更多的提示客户页面的安全性

6. 设计要点

结算流程通常设计很多个步骤,所以任何设计都必须考虑到整个过程,考虑每个步骤的变化会产生怎么样的影响

使用基本的表单设计要点

1) 结算流程实际上主要包含的是表单,所以回忆一下表单的要点

• 删掉不必要的字段.
• 把注意力集中在表单区域
• 使用干净、简洁的布局
• 明确指示填写的步骤和进度
• 提供安全和保密措施

 

2) 帮助顾客记忆购物车里面的物品

购物时候经常会忘了自己选了那个东西,担心自己误点了尺寸,颜色,需要确认.

 

提醒顾客最好的方式是在购物车中放置每个物品的缩略图,其次,是让物品名称特别醒目,使用有利于阅读的字体.此外,还应该包括所选物品的信息,包括,颜色大小,等等.

3) 区分按钮的优先级

按钮在结算流程中是很重要的角色,帮助用户更新他们的购物车,结算邮费,从一个步骤跳转到下一个步骤.但是如果所有的按钮看起来都是一个样子就容易误读.如果用户本来想结算下价格,但是却看错了按钮不小心清空了购物车,这会非常影响购物体验的.

 

4) 整个结算流程的步骤要清晰

不管整个流程中访客要经历多少步骤,让他们知道还剩下多少步骤会让他们感到更舒适.

5) 尽量减少和优化步骤

 

把以上这些设计要点用在设计B2C网站的购物流程上，能够很好的优化购物车的用户体验，减少用户在购物流程中的困扰，从而真正的达到网站优化的目的。