15个提高电子商务销售额的移动设计技巧

你知道吗 所有电子商务流量的55% 现在在移动设备上?


是的,所有浏览购物网站的人中有一半以上在手机或平板电脑上.

但是,这里有个问题: 前50名零售商中的46% 仍然没有响应式的移动网站。因此,即使所有购物流量的一半发生在移动设备上,也有一半的零售商没有为此设置。这意味着一半的购物者正在捏,缩放和扭曲他们的手机以正常访问网站.

因此,我们同意,一个快速响应,引人入胜的移动网站至关重要。但这仅仅是开始。就像桌面网站一样,您可以调整和优化您的移动网站,从而进一步提高销售量。就是这样:

1.简单性

在如此小的屏幕上工作总是很棘手。这就是为什么简单是您的首要目标。对于电子商务网站而言,这尤其困难,因为有太多内容可供选择。如何在不占用小屏幕空间的情况下推广所有产品?

“简单”

查看ETQ如何在其移动网站上显示其鞋子范围。简单而美丽。他们已将大部分屏幕空间完全腾出,以使其产品占据中心位置。甚至选择了调色板以匹配其产品范围。它使整个站点具有简单,凝聚力的感觉。即使屏幕很小,也感觉很宽敞.

2.考虑一下拇指!

立即尝试握住您的智能手机。在屏幕上移动拇指,感受最舒适自然的位置。每个人的拇指大小都不同,但是下面的这张图通常适用于大多数人:

拇指追踪

考虑到这一点,您不想在顶部放置任何按钮或必要组件。只保留标题。将所有可滚动的内容和按钮置于中间,以便轻松舒适地进行访问。 (别忘了考虑惯用左撇子的人!翻转上面的图片以查看左撇子的工作原理).

3.…尤其是大拇指

除了拇指“触及”,您还应该考虑“拇指大”。我们都使用了移动网站,您必须在其中单击最小的链接。困难而令人沮丧,对吧?一般规则是选择比您认为必要的更大的元素.

“大

Hobbycraft的移动网站就是一个很好的例子。首先,他们的大图片链接使大手笔变得超级容易。但是,请查看其顶部的图标(“商店,帐户,购物篮”)。它们比您通常期望的要大得多。 Hobbycraft正在考虑大拇指,所以您也应该.

4.汉堡导航菜单

过去十二个月中最受欢迎的设计趋势之一是“汉堡”菜单。您可以在上面的Hobbycraft网站上看​​到一个示例。这三行看起来像一个汉堡包–单击它,然后展开整个导航菜单.

传统标题导航没有空间,只会使屏幕混乱。相反,选择扩大导航。在这里可以找到一个很好的平衡。它应该整洁且不碍事。但是,同时,它应该很明显并且易于点击.

如果您提供许多产品和类别,请使用展开的菜单来简化操作。不要担心会占用整个屏幕空间。看一下Argos如何在下面显示其扩展菜单.

IMG_3663

5.选择大字体

一个小的移动屏幕迫使我们对所使用的字体进行深入思考。没有小巧精致的字体。相反,请考虑简单,大胆和大。通常,无衬线字体更简洁一些(即Ariel比Times New Roman更好).

71950dee059b803c4a7caa30dce8f5bf

请记住,此决定还将迫使您更仔细地选择副本和措辞。利用这个机会来简化和优化您的副本。尝试尽可能简单明了地传达您的信息。简短点。使它活泼。这不仅可以改善您的移动设计,还可以改善您的整个业务.

6.使用“智能搜索”

人们讨厌在移动设备上使用微小的搜索表单。它迫使我们进行放大,单击搜索框,然后使用漂亮的键盘键入内容。错误很容易造成挫败感.

为了改善用户体验,请使用“智能搜索”框。当您单击该框时,设计应自动重新聚焦,以便搜索框充满整个屏幕。然后,确保它具有预测性搜索,因此用户只需要输入前几个字母.

您可以在Europcar的网站上看到它的运行情况。客户开始输入“ Norw”,然后网站会自动建议其在各个Norwich分支机构。简单.

IMG_4331

7.简化您的注册和购买表格

我们谈论了很多有关使您的注册和购买表格尽可能简单快捷的事情。这是用户体验设计策略的关键部分。在这里,电子商务网站也会因过于复杂而损失多达60%的转化。如果他们已经开始该过程,那么就已经说服了客户。失去销售或注册的唯一方法是让事情变得太困难.

同样,尝试限制必要的键入量。使用预测类型框并启用自动填充选项。例如,使用滚动工具让用户选择出生日期选项。我们知道,购买表格通常需要一些信息。但是,有一种方法可以使此过程更简单.

查看Firebox如何使用数字系统向用户显示过程中还剩下什么阶段。 UX设计的一个关键技巧是让用户知道他们在哪里。作为客户,我们想知道我们的期望,而Firebox会做到这一点.

img_1292-博客半

8.最多三层

在移动网站上“迷路”要容易得多。理想情况下,您要确保您的移动网站只有三层。在时尚电子商务网站上如何运行的示例如下:

  1. 主页:客户选择“类别:女孩”
  2. 客户选择“子类别:鞋子”
  3. 客户点击产品页面.

这是三个简单的发现层。唯一的进一步选择应该是购买页面或注册。尽量避免出现子类别和其他选择的麻烦。与往常一样,保持简单,并始终让用户知道他们的位置.

9.轻松返回首页

一旦您的客户深入三层,请始终为他们提供一种大胆而又简单的方法来返回首页。请记住,在移动网站上容易感到迷路,因此请为用户提供一种轻松的“重置”方式并重新开始.

看看Lush的产品页面。如果您的客户以某种方式在这里导航,他们可能想重新开始。顶部的大号“ LUSH”徽标是返回家乡的简单易懂的标识。无论您在网站上的哪个位置,都始终拥有该锚点,它将带您重新开始.

img_1304-博客半

10.没有捏变焦!

长期以来,移动网站只是其桌面设计的一个副本。这意味着您必须通过捏屏幕来放大。这是一个过时的危险设计趋势,应避免使用。理想情况下,所有内容都应与屏幕成比例。所有字体都应可读而无需放大。所有链接应可单击而无需捏住.

苹果捏缩放

捏法有用时只有一种例外:产品图片。对于客户来说,捏捏和放大产品图片仍然非常有用。他们希望能够在购买前看到每一个小细节.

11.解决“安全”问题

尽管移动电子商务网站的流量巨大,但仍然普遍存在这样的担忧:从移动网站购买商品并不像台式机那样“安全”。当然,从移动设备到平板电脑再到台式机,安全性没有区别。但是一个 2013年研究 显示,近一半的在线购物者在智能手机上购买商品时会感到不太安全。这种担心很可能会扼杀您的转化.

这是一个简单的信任问题。让客户在您的网站上感到更安全是您的工作。理想情况下,您的电子商务网站应该已经具有SSL安全证书。如果没有,请购买一个。这就是为您提供工具栏上黄色小挂锁的功能。在您的移动网站上,确保您尽可能突出显示SSL挂锁.

image18

另一种选择是确保您的客户可以保存产品以备后用或通过电子邮件发送给自己。在某些情况下,以后在台式机上购买时,他们会感到放心.

12.内容堆叠

对于许多人来说,创建移动网站只是意味着在WordPress或Shopify或您使用的任何平台上选择“响应式”主题。虽然这是一个好的开始,但您需要密切注意主题如何自动将您的内容随机播放。不确定我的意思吗?看下面这个图:

15_contentStacking

这就是自适应主题可以自动将您的内容堆叠到平板电脑(左图)或智能手机(右图)的方式。仔细考虑您最重要的内容是什么,并确保它们正确堆叠。例如,在右侧,产品(方框5 –浴池的类型)被迫沿屏幕向下移动。它们甚至可能被推到“折叠”下方.

试用版式和内容堆叠,以确保最重要的内容出现在正确的位置.

13.丢失任何Flash内容

Flash在任何设备上都是相对过时的格式。 (实际上,设计师是 争取一劳永逸地杀死它! 它吞噬了资源,速度很慢,并且是黑客的游乐场。虽然这对台式机网站来说是个坏消息,但在智能手机或平板电脑上则更糟.

大多数移动设备根本不会播放闪存媒体。因此,如果您依靠它进行视频或产品演示,那就摆脱它-您的客户无法在移动设备上看到它。苹果在几年前阻止了它,而安卓在不久之后也紧随其后.

另一种方法是确保您的网站与HTML5兼容(在这里找到更多)并使用YouTube托管任何视频.

14.拥抱局限性!

我曾经说过的许多人对移动网站的局限性感到沮丧。一个简单的事实是:您无能为力!相反,要接受这些限制.

它迫使您做出重要的决定,从而对您的整个业务有所帮助。如何简化我的网站?如何用更少的语言表达我的观点?如何在更小的空间内变得更加精确和引人注目?我应该优先考虑哪个产品?

我坚信,回答这些问题可以使您的业务更强大。只要您提炼自己的主张,就可以使其更有力。这对于一个好的移动网站至关重要.

15.使用Google Analytics(分析)做出设计决策

为手机设计的麻烦在于要考虑的设备太多。您是否为iPad或Android平板电脑优化了布局和设计?您是否针对iPhone 5或iPhone 6进行了优化?或三星银河?

响应式设计意味着它将以不同的方式成型。 Google Analytics(分析)可以在这里为您提供帮助。最新版本的Google Analytics(分析)可让您查看哪些移动设备最常访问您的网站:

移动设备分析跟踪

在这种情况下,iPhone一直是领先的设备。因此,在iPhone上进行所有测试很有意义。优化移动网站时优先考虑顶级设备.

尽管现在移动设备主导着在线购物市场,但移动网站仍然远远落后。半数最大的零售商将它们视为事后想法.

通过进行这些调整和更改,您可以利用这种庞大的流量来在竞争中领先一步.

我很想听听您为优化移动网站所做的工作。有哪些调整为您服务?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map