在这篇文章中，我们将规划一个高转换率的移动电子商务网站时，遍历所有的重要步骤。 你要问最重要的问题是：
- 我们是谁建立这个移动网站？
- 我们将如何衡量成功转换？
- 什么样的设计因素会影响移动电子商务的转化率？
- 什么是理想的产品页面？
让我们开始吧。
那么，谁正在我们建立这个手机网站的？
移动客户是谁，我们都在不断学习作为移动应用变得更加广泛和过滤器到日常生活。 要规划一个移动电子商务商店，我们需要把自己在移动客户的心态，了解他们的意图和情绪。
手机使用位置
移动设备是一个生命入侵的设备。 我们用它在各种不同的情况：
- 一边看电视;
- 购物时或在晚上出去;
- 在床上，或在浴室;
- 而吃了一顿（宠物恨我的！）;
- 无聊或守候在我们的办公桌，在火车站或汽车乘客的时候。
在上述每一种情况中，人的心灵会处于不同的状态，并可能会或可能不会在“采购模式。”我们还用手机在一天中的不同时段。
这是如何帮助我们呢？ 嗯，比如说，你可以策略性地放置不同的横幅您的手机电子商务网站，如降价促销，折扣或优惠券，或许提供清晨折扣乘客，同时提供电视晚餐观众别的东西在的主页上晚上（类似“看无聊的肥皂剧？现在抓住一个DVD捆绑！”）。
移动购物者的主要类型
哥伦比亚大学商学院确定的五种类型的移动购物者在展厅和专卖店：剥削者，savvys，价格敏感者，体验者和传统主义者。 我已经走了一步，思考人们如何使用他们的手机在展厅外面来决定是否购买产品。
- 该比较器
该比较器浏览的产品在砖和迫击炮商店，而他们的移动设备上的价格检查。 他们可能会在店内购买，使用网上价格作为谈判筹码。 但是，如果网上报价是足够强大，产品可用，他们将购买他们的电话那里，然后，或当他们回家后。 - 这笔交易的爱人
此人喜欢便宜货，而当他们在店里，他们会找一个在线优惠券，一个Groupon的交易或东西从买在高街的价格拯救他们。 他们不同于他们愿意相信他们所得到特殊处理，在有限的要约或独家推广（想秘密逃逸的独家协议或Booking.com的最低价格保证），该比较器。 - 社交购物者
不断地连接到各种社会渠道，社会的购物者如下名流，行业领袖和品牌上的Instagram，Twitter和Pinterest的，寻找最新的流行趋势，小工具等。 点击通过一切从复古过滤的照片，严重喜欢的衣服，他们只需要购买要准备好周末。 - 时间匆匆过客
此人只需要打发时间，等待某人或某事。 他们冲动买家通常，浏览商店，他们已经知道（指挥交通的一种形式）的最新产品。 他们可能会订阅新闻提要或电子邮件列表，并通过点击直接推动社会渠道了。
所有这些类型的手机购物者有移动电子商务门店很高的期望。
为什么这很重要？ 你需要确保你迎合各种不同类型的购物者谁可能访问移动设备上的存储。 你得找出他们，给他们他们寻求和展示信息的格式，他们习惯使用的选项。 如果没有，你最终会讨厌他们，而不是增加你的客户的底线。
我们如何将测量转换成功？
我们需要定义的成功看起来是什么样的转换。 通常情况下，转换分为以下类别之一：
- 采购
访问者已完成购买交易。 - 社会促进
访问者可以按照你的社会渠道;份额，鸣叫或喜欢你的产品或品牌，写评论，订阅时事通讯，等等 - 完成任务
访问者已经完成了一些任务，无论是玩游戏，填写调查显示，进入一个竞争等。
然后，我们需要给自己订了一些SMART目标 （由Paul J.迈耶所定义）来跟踪和衡量我们的成功。 这些目标也将帮助我们专注于项目，而不是得意忘形过spec’ing或过度设计的网站。 那么，什么是SMART目标？
- S pecific
我们的目标应该是明确的，应该定义我们希望达到的目标。 - M easureable
我们如何来衡量呢？ 通过什么方法？ 我们可以说谁是负责报告这一点，就是他们将报告走得更远。 - 一个 ttainable
如何将这个目标可以实现吗？ 需要做的事情要做到这一点呢？ 我们有没有预算，技术和时间？ - řelevant
这是与我们的整体愿景？ 是市场准备好了吗？ 是我们合适的人这样做呢？ - 吨输入法绑定
如何快速才能实现这一目标？ 我们什么时候开始和结束？
以下是三组，我们已经在过去设定的目标。 这些将直接影响怎么一去有关设计和开发移动电子商务商店。
SMART目标1
- 具体
增加35％的移动电子商务转换。 - 测
在Magento分部销售报告。 - 达到
通过创建一个具有响应性的电子商务商店做到这一点。 - 相应
这符合我们整体转换的目标和目的采用移动技术。 - 时限
网站的推出在三个月内完成它。
SMART目标2
- 具体
通过5英镑增加移动平均订单。 - 测
结合分割销售报告在Magento给日均订单价值。 - 达到
改善向上销售和交叉销售的商品页面，并在购物车推荐配套产品。 - 相应
这符合我们整体转换的目标。 - 时限
在30天内完成这项工作，然后通过不断的测试和迭代改进。
SMART目标3
- 具体
降低跳出率低于56％的顶级类别。 - 测
分析一组时间段在谷歌Analytics（分析）页面访问的报告。 - 达到
改善加载时间低于3G网络在四秒，并提高着陆页面设计。 - 相应
虽然不是直接变换本身，这将提高其他所有的转化率通过保持用户在网站上的时间更长，提高访问的每个用户的页面数。 - 时限
测试超过14天的滚动周期，迭代的设计，直到我们击中目标。
小提示：打印这些目标在一个大的字体大小，并把它们所在的整个团队可以看到他们。 问团队成员的工作将如何有助于共同目标。 如果任务不出力的话，那么质疑它的需要。
哪些设计因素影响移动电子商务转换率？
让我们通过对影响客户如何浏览一个电子商务网站的因素，从移动的角度。
层次结构和导航
空间是在移动的溢价。 我们没有提供大型的菜单供用户浏览多类别的奢侈品。 因此，我们需要优先考虑的主要功能和内容，并提供一个搜索框，这是在一致的位置很方便。 采纳了帆布导航正成为普遍的用户开始了解如何使用它。
Currys的’敏感网站通过提供离线帆布顶级导航，搜索下拉框，即时购物车和帐户访问和存储取景器，所有在一个非常小的空间，仍然是整个客户的全程一贯做这非常好。
当你再向下滚动，标志区消失，五个主菜单项上移，减少了报头所占用的空间，并给访问者所感兴趣的内容优先
贸易可用性和品牌导航加载时间
有时候，你需要做一个权衡。 当我们开发克罗克特和琼斯的移动网站，我们的品牌指导方针和公司的传统和质量信誉使我们更加画报菜单系统，以强化品牌。 我们尝试了5直观的导航方法：
从我们的研究进入了领先的移动电子商务网站，我们认为，在顶部有一个固定的菜单将提供最佳的可用性。 像Currys的那些图标观众的网站克罗克特和琼斯不会是正确的“。 相反，我们使用一个菜单按钮し下降到一个导航列表，与通过一个矩阵菜单加载子页面。 这使我们空间添加图像，给那的外观和感觉的英国遗产。
固定导航比。 非固定式导航
固定导航坐的地方，总是看到他们是否向上或向下滚动用户。 非固定导航是相反的，可见的，只有当用户是在页面的顶部。
基于各大品牌我都跟着电子商务网站，但趋势是固定的导航，我认为这是有道理的。 对于我来说，固定导航的手中夺下来，不得不一路往回滚动到页面顶部找到菜单栏是烦人。 有了固定的导航，你永远只能快速的手指运动远离访问网站的深层部分。 实现这个很容易与MeanMenu jQuery插件或引导的导航条 。
图像和产品摄影
我们都知道，摄影可以使或打破一个网站的外观和感觉。 移动用户希望看到的影像深深吸引他们，激励他们进行购买，无论是度假或锅里。 产品摄影的基础知识是永远重要的位置，所以一定要得到所有的客户需要做出决定的图片。
- 个人拍摄
这是一个镜头的产品处于最佳角度，通常对一个白色的背景。
- 详细拍摄
这是一个特写镜头显示产品的特殊功能或设计的细节 – 例如，拼接的质量，所用的材料，标签或手工制作的细节。
- 拍摄组件
如果它是一个家庭影院系统，然后利用它的各个部分的镜头，包括DVD播放机，音箱，遥控器及配件。
- 360°拍摄
这是一个动画图像组，允许用户通过旋转360°的自旋的乘积。 它通常由36次射门，每10°。 我们用这个梦幻般的效果与上克罗克特和琼斯的网站鞋 。 我们拍摄的EME数字的大360摄影系统 ，然后编写自定义jQuery来控制旋转的效果。
- 组镜头
这通常是用在类别层次或组合产品。 集体照 – 无论是为了一系列的锅或比萨饼，一边喝 – 展示配套产品，并帮助厂商追加销售给客户。
- 在使用拍摄
一个重要但经常被遗忘的镜头是正在使用的产品之一。 例如，衣服看起来平放时比当上一个真人模特表现得非常不同。 这些镜头是理想，可以高度激励顾客购买。
在移动，速度是一个障碍，所以记得要优化图像快速加载，不影响质量。 当然，很多的努力正在投入开发一个响应的图像解决方案 ，但是你采取任何方式只会不如你的摄影。 彼得·克劳福德越过如何“ 提高你的电子商务设计与辉煌的产品照片 。“
活版印刷
想知道如何关闭移动用户很快？ 使他们不得不捏和缩放阅读文字！ 不必放大，使在手机上的文字清晰易读是很烦人的，因此请确保您的字体是可读的，对比，反应迅速，以及间隔。 有技术响应排版 ，我们可以遵循。
我们用一个简单的CSS媒体查询来实现上面的版式的基础上，引导3的断点设备宽度，以确保所有设备的一致性。
@media screen and (max-width: 320px) { .hero h2 { color: white; font-size: 2em; font-weight: 100; font-family: "bebas-neue"; } }
手指友好
所有这些关键的呼吁行动应足够大，以用手指按压。 据“ 手指友好的设计：理想的移动触摸屏目标尺寸 ，“那是约57个像素宽的手指和72个像素宽的拇指。 文章还指出，“这是一致的菲茨定律 ，它说，要达到一个目标的时间较长，如果目标是较小的。 一个小目标用户减慢下来，因为他们要格外注意准确地命中目标。“我会说，我们大多数人都忽略了这个事实了很多年，尤其是我们调整了我们的1024×768的心态。
这是通用于移动电子商务网站的所有领域非常重要的：
- 类别树的导航;
- 搜索按钮和过滤器（需要精确的触摸特别是复选框）;
- 所有按钮，包括“添加到购物车”和“现在安全支付”;
- 表单字段中输入付款和发货的细节;
- 产品图片的缩略图;
- 刷卡，而不是攻左，右箭头的产品照片，。
对比的色彩和光线条件
无论调色板您选择，强烈的反差是刻不容缓的按钮，并呼吁采取行动。 如果一个对象在融合，用户很可能会错过它。
考虑移动用户的照明条件和如何将它们容纳在该网站的外观和感觉。 试试关掉灯，走出去到明亮的阳光下反射灯紧紧地团结在一起，看看你的调色板执行。 您可以调整CSS来解释不同的光线条件与什么被称为轻级别的媒体查询 。
@media (light-level: normal) { p { background: url("texture.jpg"); color: #333 } } @media (light-level: dim) { p { background: #222; color: #ccc } } @media (light-level: washed) { p { background: white; color: black; font-size: 2em; } }
虽然没有浏览器目前支持这些，光级媒体查询是，希望能采纳，因为一旦移动设备真的是在不同的光照条件下使用一个很酷的功能。 这种技术可以提高转化率，在黑暗和明亮的阳光下移动使用。 人们甚至可以想像交换宣传标语为白天和夜间！
提示：不要害怕红色按钮。 转换已经增加了一吨的网站切换到红色的强烈对比。 测试和迭代！
白色的空间和封装
白色的空间让内容喘息的机会，辅助眼流和declutters。 它可以在决定购买时，放松身心的游客。
使用封装提请游客注意的元素，比如一个“添加到购物车”按钮。 创建按钮的容器用对比的背景颜色。 Unbounce做了伟大的工作，解释封装 。
文案
广大客户将向您提供一份他们的产品，类别和通用的页面，因为我们的设计师和开发人员总是不知道该产品，以及我们的客户（希望如此）。 然而，我们确实知道有说服力的措辞，以及如何使用它呼吁采取行动。 例如，“支付安全现在是”更激励和灌输更多的信任不仅仅是“退房”。
龙的描述，可恼人的小屏幕上。 认为“阅读更多”的链接以显示更多的文字，或分裂的描述成几个标签，让移动用户能够翻翻他们正在寻找的信息。
提示：如果您的客户端写产品说明，让他们读克雷格·安德森的“ E 商贸文案：本教程以销售更多 ，“这将遍历编写好的副本的基本知识。
表格
表格大家慢下来。 用户必须停下来想一想在加油吧，提供正确的数据，扫描精度，检查并取消勾选框等。 形式可以是特别麻烦的移动设备上，所以一定要确保你的手指是友好的和清晰的。 记住要使用正确的输入类型（URL，电子邮件，电话等），以便在移动浏览器中显示相应的键盘。
显示给用户他们在结帐过程中的地位，也让他们看到自己的进步，看到了光在隧道的尽头。 德里克·纳尔逊说得好在“ 设计一个更好的移动结帐过程 。“
理想的产品页面
我不认为你所能得到的“完美”的产品页面，因为很多是留给旁观者的眼睛。 然而，Currys的“产品页面变得相当的接近。 让我们把它分解。
Currys的“具有以下属性：
- 明确产品称号，并于企业调色板响应排版;
- 价格对比色，响应排版突出的，是可读高于其他所有的价格信息;
- 行动突出的上述网页上的所有其他环节非常清晰的通话（与简单的形式封装和手指友好）;
- 伟大的摄影，所有用户需要做出购买决策（包括个人，分量和细节镜头）的镜头;
- 简短的描述给人的产品的功能的简要概述;
- 关于产品的研究型客户更详细的信息;
- 指示的可用性，显示何时何地，客户可以得到它（用简单的形式封装）。
总体而言，该页面是很好间距，与20像素的块级元素之间的空白。 企业品牌是存在不使页面变得混乱，而目标渠道得到明确界定。 如果游客有兴趣的产品和价格是正确的，那么他们就没有障碍购买它。
这一切值得吗？
克罗克特和琼斯
该结果克罗克特和琼斯是压倒性的，增加的时间在页，360°照片（我们设定为在谷歌Analytics（分析）转换目标来衡量其有效性）和降低跳出率，为移动用户，我强烈地增加了看法相信是由于内容的质量，图像和视频。 访问过的网页也涨了，这是我的属性的导航布局。 不断扩大的菜单固定在顶部使得它很容易为用户跳来跳去的网站，并找到自己的方式回来，同时坚持品牌的传统。 页面速度肯定会有所改善，但我们不得不与体现品牌的高品质图像的优化平衡，这肯定是我们还在努力。
总结
组建了一个手机电子商务网站，它包括企业管理，设计，开发和营销一个多学科的任务。 无论你的机构的大小，创建一个样板的过程，你可以按照对所有的网站，但你能适应每个项目的具体情况。 在这个过程中的规划阶段，包括以下内容：
- 你是谁设计的（即你的客户）？ 什么是他们的购买习惯，是什么驱使他们购买？
- 放在一起，让您和客户的共同愿景SMART目标。
- 创建一个样式指南，适合于移动设备，包括按键设计，字体大小等等。
- 生成线框，详情所有关键页面（首页，分类页，产品页，搜索和购物车）。
- 将所有的数字资产（摄影，录像及复印件）在一起。
规划以这种方式将帮助您实现一个电子商务网站，是很适合移动优化，这是针对你的客户的客户和覆羽更多的游客到买家。
近期评论