到2018年 ,通过手机和平板电脑的年度零售额预计将达到7070亿美元 ,越来越多的消费者正在寻找视觉上引人入胜的在线购物体验 。
设计和开发完美的移动商务体验需要您考虑将这些限制转化为机会。
无论是针对各种屏幕尺寸进行设计还是为消费者提供触摸友好的界面 ,移动设备都给零售商带来了太多挑战。
但是,移动办公面临着一系列挑战。
这是在创建可增强最终客户的移动购物体验的移动商务网站或应用程序时应采用的一组最佳做法:
您要创建一个移动购物网站或应用吗?
1.以移动为先
在设计时,一定要记住移动用户,而不是试图将桌面站点上的所有信息放入移动站点中。
大多数消费者只是浏览主页上的设计和视觉元素,以了解该网站提供的产品。

Jimmy Choo是奢侈鞋类和箱包品牌,它采用简单的布局来显示一个中央图像,然后在其下方列出类别 ,从而使消费者可以轻松浏览首页。
尽管它们包括用于图像的滑块,但是此布局可帮助消费者评估他们期望在网站上找到的产品类型 。
自动轮播已过时
旋转木马违反了这一规则,它会使用小的导航图标(如果有的话)过快移动。
界面设计的关键规则之一是用户需要控制 。
拥挤不堪的移动首页上有太多视觉元素,例如自动轮播,只会使您的消费者进一步困惑。
巴黎圣母大学(Notre Dame University)的一项研究发现,谈到轮播时,首批滑袋占所有点击次数的84%。



大多数消费者觉得这很令人沮丧,因为他们很有可能点击促销图片而只能被带到其他图片上 。
GAP移动网站就是这种情况,在首页的第一可见部分中,有一半以上显示的滑块可在五个不同的报价之间旋转。
如果必须选择图像滑块,请选择不会自动移动的滑块。
这有助于消费者保持对行动计划的关注。
因此, 始终建议使用一个静态图像 。

在这种情况下,它围绕豪华服装,鞋子和配饰展开。
他们特别注意,其中包含的图像可以让消费者知道网站上的期望 。
例如,Anthropologie是一个多渠道的生活方式品牌,采用简单的布局,并以一个突出的形象为中心 。
自定义UI下拉菜单进行导航
由于这种强烈的趋势, 本机下拉菜单不是导航的理想选择 。
大多数消费者更喜欢上下滚动类别列表,以很好地了解他们的选择,即使他们立即找到了他们想要的东西。

由于只有一半的屏幕用于显示可用选项,因此大多数消费者发现很难滚动,扫描和比较可用选项。
例如,百思买(Best Buy)之前就采用了类似的本机UI下拉菜单。
例如,当消费者点击某个特定类别并说“每周交易”时,它将加载一个新页面 ,而不是将其显示在一个小对话框中。
当前的百思买移动网站采用了类似的自定义UI下拉菜单,以为消费者提供更好的选择概览。
另一方面,自定义UI下拉菜单使消费者可以更好地了解其选项。



再说一次,如果您的电子商务网站的父级和同级类别(如Dune London) 较少 ,那么您可以选择逐步披露 (右),以在用户请求时直接在首页上显示同级类别。


2.使用直观的移动UI来增加购买量
很多时候,消费者最终不得不通过遍历所有类别来进行搜索。
原因可能有所不同,从想要比较两种产品到检查以前查看过的产品的某些功能是否与新产品兼容。
消费者通常希望查看以前访问过的产品。


它还鼓励消费者通过确保他们再次寻找产品不会感到麻烦来探索其他项目。
ASOS是一家位于英国的时尚和美容在线商店,通过在其产品页面上显示“最近浏览过”的产品列表,消费者可以轻松地返回到以前访问过的商品(而无需反复单击“返回”按钮)。
保持触摸友好
建议在视觉上将触摸元件的尺寸保持在7×7 mm ,同时将触摸元件之间的隔板保持在2×2 mm的尺寸。
为了使消费者更容易点击,内容中不同触摸元素之间应该有足够的空间 。
由于大多数移动设备的屏幕区域较小,因此通常很难在屏幕上单击确切的元素。
同样重要的是,要使完整的单位可单击 ,同时确保它们不跨越整个视口 。
您还可以参考不同移动平台提供的指南来确定要使用的触摸目标的大小。
3.明智地选择信息架构
这是一个例子。
为避免这种情况,您应该在多个父类别下添加子类别。
当消费者无法找到他们期望的同级类别时,他们通常会得出结论,该网站未销售该特定产品。


这进一步增加了消费者发现他们正在寻找的产品的机会。
例如,亚马逊的移动网站在“手机和平板电脑”和“音频与视频”下都将耳机列为同级产品 。
例如,Dune London移动网站通过包含父类别(例如NEW IN)来帮助频繁访问者,使他们可以快速浏览自上次访问以来已到来的新产品。
将“新”作为单独的父类别包括在产品的最新性可能对消费者的购买决策产生重大影响的行业中特别有用。

再说一次,正如英国在线时装商店Fallen Hero的移动网站上所见,总是最好使用“ New”作为过滤器 ,而不是单独的类别,因为它可以帮助消费者查看特定类别中的新商品。 。

这些客户建议不仅可以使购物者对他们的购买决定更有信心 ,而且可以在他们的心中定义您的品牌 。
其他效果很好的分类技术是“客户收藏夹”,“畅销书”,“销售”等。
它不仅使在线商店能够与竞争对手区分开来,而且还可以帮助他们充分定位自己,以占领这个数十亿美元的市场。
毋庸置疑,移动商务带来了许多机会。
进一步阅读
以下是与开发移动用户体验有关的更多阅读材料:
- 调查:为移动设备设计
- Mobile App Design / Dev:JQuery Mobile入门指南
- 移动屏幕的响应式Web布局:简介,提示和示例
- 改善行动专用网站的7个秘诀
- 移动Web设计:改善可用性的10个技巧
并且,如果您需要灵感或资源,这些链接可能会帮助您:
Nagaraj Nagabhushanam是MobStac (一家M-Commerce平台公司)的产品管理总监 ,该公司通过网站和应用程序为零售商提供一流的移动购物体验。
编者注:这篇文章是由Nagaraj Nagabhushanam为Hongkiat.com撰写的。