10个设计可用购物车的提示

WebDesignerDepot员工 经过 WDD员工  |  2009年4月06日


我们生活中的日常任务正在通过技术彻底改变。技术有助于简化的一项任务是购物:在商店购买产品的任务并不方便 网上购物.

考虑到这一点,关注越来越重要 电子商务网站的可用性.

当客户想购买产品时,他们希望流程快速简便,没有任何麻烦。

以下是10个帮助您创建的提示 可用的电子商务结账和购物车.

 

1.完整页和迷你推车

购物车经常有两种形式,一个全功能的购物车包含在自己的页面内和一个“mini”购物车,通常位于侧边栏,或页面上方折叠。 最好的做法是包括两者.

迷你购物车 在一个小区域内显示信息’离开其他布局。这是一个可用的迷你购物车的一个很好的例子。

选择产品时,物品立即显示在迷你购物车中。继续购物后,详细信息最小化,仅显示了项目数量和总价格。此外,迷你购物车有一个链接,用于查看完整页面购物车。

Laskys.


与之 完整页推车 您可以提供更多的信息和更多的选项而不是迷你购物车。例如,产品详细信息,删除/编辑项目,税款和运输选项等信息都可以包含在完整页面购物车中。下面的完整页面上的示例还在右上角显示迷你购物车。

Action2.

 

2.结帐:逐步或一页

用一个 步骤方法 使Checkout Process易于为客户遵循。查看下面的Apple.com结帐页面。结帐程序以四个不同的步骤执行:登录,计费&运输,付款和最终验证/编辑。

这是一个结构良好的过程,当设计逐步结账时,您当然应该考虑使用类似的东西。


苹果_Checkout1.

除了逐步的过程之外,另一种选择是在单个页面上包含购物车,个人信息和运输/结算/结算信息。

如果完成了良好的布局,这可以很好地工作。以下网站使用良好的单页结帐进程。顶部有一个表,包含购物车,下面的购买信息表格。

realmac_cart1.

 

3.链接从迷你购物车到全职车用图标

在建立购物车时,有舒适的功能会影响客户’s experience. 点击迷你购物车应链接到完整的购物车 一个图标应与迷你购物车一起出现以绘制客户’注意迷你车和这个链接。

以下网站是一个完美的例子。这些按钮处于外语,但购物车图标可以容易地被任何人识别。

iluminejp.

 

4.使结账/添加到购物车按钮显而易见

在设计电子商务结账和购物车时,它’很重要的是包含易于访问的链接,以通过结帐流程指导客户。它’最好使用大明显 纽扣。确保按钮包含清晰清晰可辨的文本,例如‘Add To Cart’ or ‘Continue to checkout’.

下面的按钮风格良好,并直接放置在每个产品的信息下。如果客户可以’t找到结账按钮,他们可以’t buy your product!

波希米亚

 

5.使用基于可读的表布局

在设计一个完整的购物车时,它’总是最好使用基于表的结构。布局应有效地显示信息而不会中断。 使用标准字体并避免使用复杂的背景.

始终肯定会使用强边与单独的细胞,但唐’毗邻边界。购物车表中的信息应该很容易看,而不会分散其他元素,或复杂的造型。

这是一个非常干净的购物车。该表很容易读取,它包含所有必要的元素。更重要的是,请注意图像。 产品的图像使客户成为他们正在购买的良好视觉,这可以帮助客户确认它们确实购买了他们打算的产品。

dbh1


 

6. “Continue Shopping” link

还有一个功能是 “Continue Shopping” 关联。点击后,链接应将客户带回商店和目录。这通常位于完整购物车的桌面下,客户可以轻松找到它。

以下示例显示了“Continue Shopping” and the “Go to Checkout”链接。注意找到这些是多么容易。

线程3.

 

7.避免太多的领域

那里’对于平均消费者而言,没有什么比不得不填写形式的不必要的输入字段。你希望结账过程尽可能简单,因为如果客户没有找到方便,他们很可能不会再次从网站上购买。

将输入字段的数量保持为最小值,将类似的输入字段放入组中,并为每个部分提供标题。适当的空白空间也将有助于使表格感觉更具组织。

以下形式最小,并包含少量输入字段。

Deckpeck.

 

8.提供大量帮助元素

那里 are many places that 帮助元素 应包含在购物车和结账过程中。

在购物车中,包括 快速提示 关于如何最好地使用购物车’S功能并解释结账过程。购物车中的标签和结账表格可以使用 工具提示.

在结帐页面上,您可以包含 示例文本 关于应该包括在每个输入字段中以及特定计费信息的示例,例如显示信用卡背面的CVD号码的图像。

在下面的表单中,输入字段具有解释性示例文本,中间列包含其他有用信息。


线程2.

 

9.给予视觉支持

视觉支持可以是从图表到简单图标的任何内容。显示信用卡上帐号的位置的图像可通过输入计费信息的过程帮助客户帮助客户。 支持文本的图标 有助于使表单更容易扫描。

以下图像显示非常方便 单击并拖车。购物车图标的图像告诉客户,他们可以将物品拖入购物车。推车还有一个标签上面说“Drag Stuff Here.”

神经

 

10.始终包含验证页面

任何结账过程的最重要的特征肯定是一个 验证和编辑页面 作为最后一步。通常客户想确认他们正在购买正确的物品。每个良好的结账过程都有这个功能作为客户在通过付款过程提交之前审查他或她的订单的最后机会。

在“验证”页面上,您应该在表中包含有关产品中的所有信息,类似于完整页结帐。客户应该能够取消他们的订单,或者能够使用“Continue Shopping”链接添加更多项目。让按钮完成此过程非常明显,消除即使是最轻微的混乱。

 

展示可用的推车和结账

iCondock.– 该网站具有非常可用和便捷的购物车。您所要做的就是单击并将项目拖到面板中。它自动计算总数,是一个非常快速的购物解决方案。

iCondock.


MEDIPLIMPLE.– 这是一个非常好的定价表,其中包含明显的结账按钮,展示位置良好。

mt2


早期学习中心– 该网站具有出色的全推车,迷你购物车,以及使用时间线所示的步骤检查程序。

早期学习


ROXY.– 这是一个简单的购物车,它也有一个有用的迷你购物车,它显示了客户的运行总数。

roxy1


米娅& Maggie – 这是一个易于阅读的良好风格的购物车,并包含一个大的结账按钮。

迈阿莫加



米娅& Maggie – 这是MIA的另一个例子&Maggie,这是一个结账页面。此结帐在单个页面上逐步使用步骤过程,这是一个非常聪明和可用的布局。

迈阿摩吉伊22.



亚马逊– 亚马逊是另一个流行的电子商务网站,它使用逐步的进程。

Amazon1.


evel..– 这是一个非常可用而快速的结账,没有太多的表单上的输入字段。另请注意,购物车位于表格之上,这对一些客户来说非常方便。

evel.


设计人类– 完美的单页结账的另一个例子。这个包含一个订单摘要,这可能非常有帮助。整个形式也有许多帮助元素。

dbh2


Bridge55.– 一个很好的购物车,产品的图像。

Bridge55.


宇宙苏打水– 使用迷你购物车和全推车的良好电子商务网站。

Cosmic1.


以防万一– 具有最小数量的字段的良好组织的结账。

以防万一


sh– 一个伟大的迷你购物车,显示一个弹出窗口,其中包含其他信息“Add to Cart” button is clicked.

sh


Wunderbloc.– 灯箱购物车。

Wunderbloc.


富豪南部– 一个好的迷你购物车和组织的全推车。

无聊的


亚极性– 使用迷你和全推车和逐步结账进程。

亚极性


alphaStore.– 桌子结构和带识别购物车图标的迷你购物车。

alphaStore.


Me & Mommy-to-be – 一个美丽风格的推车不是’t在顶部有装饰。

妈妈


由Matt Cronin的WDD完全写的 勺子设计.

哪些提示是在设计在线购物车时最重要的?请与我们分享您的意见。