数极客首页

提高移动电子商务销售的交互设计模式

进步移动电子商务销售的交互设计方式

译者注:2012年,各大电商巨头以及品牌商的移动

终端订单量都呈现出迅猛增长的态势。人人曾经
看见,移动

电商曾经
来了。那么设计优秀
的移动

购物体验必将能争夺

更多的用户,提升销售额。本文较为全面的引见
了移动

购物流程中各环节的交互设计方式

,供大家参考学习。

原文地址:http://uxdesign.smashingmagazine.com/2012/12/19/boost-your-mobile-e-commerce-sales-with-mobile-design-paerns/

往常

越来越多的人运用
智能手机来替代台式电脑购物和置办

。随着更多的人从电脑转移到移动

设备上置办

产品和效劳
,网站创建

者能够

运用
一些设计方式

以辅佐

快速启动一个移动

电商项目。

良好的移动

购物体验是很重要的。最近的研讨
发现,67%的顾客愿意在设计体验友好的移动

端中止

购物。

设计方式

的益处

在于通知
你其他设计师是怎样
处置

相似

的问题的,而不需求
你重新发明

轮子。这样你设计的网站能够

满足人们因运用
其他网站而产生的预期,并且能够

在这些设计方式

的基础

上思索
更好的设计计划

本文主要专注于为移动

电子商务功用
设计的方式

和办法

,包括以下几个方面:

  • 主页
  • 全站导航
  • 搜索倡议
  • 搜索结果
  • 搜索过滤和排序
  • 产品页面
  • 图片陈列
  • 购物车
  • 运用
    已有账户/访客 结算
  • 表单

本文案例的界面主要选自大型百货批发
商的移动

阅读
器版本,大型批发
商由于产品品类丰厚
愈加
需求
深思熟虑的设计计划

,比如

搜索及搜索结果的过滤与排序。 这些设计方式

同样适用于本地应用。

主页

在移动

端访问时,主页的首要作用是辅佐

用户找到他们想要的东西。常见的方式

有为促销设计的单列规划
以及单栏的链接列表,链接到网站的特征
区域或产品目录页。主页普通
还包含关键词查询、商店位置指引、促销邮件及忠实
度计划

的注册表。

进步移动电子商务销售的交互设计方式

Amazon 和 Macy’s 均混合运用
了促销元素及列表菜单。

进步移动电子商务销售的交互设计方式

Target促销区域比简单的列表占用了更多的屏幕区域但也因而

有更强的视觉冲击力。Threadless 运用
了在本地应用中更常见的仪表盘设计方式

假定

顾客访问网站的目的是为了快速比价,那么简单的列表方式

和搜索功用
会更合适

。假定

他们是想找促销,Target的设计计划

会更好。究竟

采用哪种计划

则需求
你中止

数据挖掘

,剖析

消费者运用
你的网站时的行为。

全站导航

除了运用
主页作为主要的导航中心外,许多网站亦会在其它页面的顶部放置导航菜单。这样顾客不用
回到主页就能够

导航至别的页面。

进步移动电子商务销售的交互设计方式

Lowe’s 的全站导航菜单每一个选项是一个icon。Best Buy的导航采用两栏规划
,选项是按钮的方式
。Lowe’s的菜单掩盖
在内容上,而Best Buy的下拉菜单推进
内容相应下移。

进步移动电子商务销售的交互设计方式

Macy’s 的全站导航菜单包含了二级子菜单的选项。CVS的两栏菜单中每个选项都配了一个icon。这两个案例的菜单均是置于页面顶部。

上面几个案例展示

了几种全站导航的方式。Lowe’s 的设计很简单,并且icon加了视觉效果,内容区置灰融入背景中能够

让用户更专注于导航菜单,即当前的任务上。而CVS两栏的icon设计则显得比较

紊乱

,触摸目的
之间过于接近也会带来许多可用性问题。

搜索倡议

搜索倡议

又称“输入提示”或“自动完成”,指当用户输入字符时显现
可能的搜索目的
。关于
常见的、称号
较长的搜索目的
来说,自动完成能够

大大便当
顾客。但也有一个问题,虚拟键盘容易误操作从而使倡议

的搜索目的
不精确

。显现
常见的“正确”目的
会十分

有效。同时也能够

思索
运用
改进

的自动完成方式

来减少顾客的输入,用最有效的方式应用
较慢的移动

带宽。

进步移动电子商务销售的交互设计方式

在Office Depot’s Website 的搜索框中输入“d-r-a-f”有几种可能的搜索目的
。而错误输入“d-r-a-g”招致
非用户希冀
的搜索目的
。在运用
虚拟键时不留意

输入目的
相邻的字母是很常见需求
处置

的问题。

假定

设计师无法改善用户误输入的问题,那么最好提供其它的方式让用户能够

从错误的搜索结果抵达
目的
产品页面,如产品目录的下拉列表或是顶级类别的全站导航。网站经理也能够

微调改进

搜索功用
,比如

为“dragt”显现
“draft”的倡议

搜索。

搜索结果

两种移动

电商网站常见的设计方式

:表格和网格方式

。表格方式

每一行展示

商品的缩略图及基本

的相关信息如商品名和价钱
。网格方式

则运用
更大的图片更少的信息。有的网站允许用户在两种方式

中切换。

进步移动电子商务销售的交互设计方式

Zappos 采用网格的方式
展示

较大的商品图,关于
展示

如鞋这类的商品是一种不错的方式。Walgreens 的表格方式

则突出了购物和查找商品的功用

进步移动电子商务销售的交互设计方式

OfficeMax 在大的类目“paper”下让用户选择更细的子分类,然后呈现相应的子分类的商品结果。假定

像“Scissors”这类较少子分类的商品则直接呈现商品结果。

假定

顾客不分明

要找的目的
在复杂的类目层级中属于哪一个类,这种方式

就会有问题。在OfficeMax例子中,假定

顾客要找8.5*11英寸的打印纸,就有可能属于复制&多用处

纸或激光打印纸。一个较好的处置

办法

就是在每个过滤条件下列出对应的子分类,如颜色、尺寸。每4-6周找一些典型用户做测试看看最常见的搜索词和最畅销产品的状况

,你就能够

大约
判别
哪种处置

计划

更好。a/b测试同样能够

判别
哪种计划

能够

带来更多的顾客及更高的置办

转化率。

进步移动电子商务销售的交互设计方式

Gap’s 默许
用表格方式

展示

搜索结果,也提供以网格的方式

查看结果。展示

结果的同时在搜过框保管

搜索词。

假定

在Gap输入“men’s shirts”则找不到搜索结果,亦没有导向“men’s t-shirts”搜索结果的链接。改进

的办法

比如

Gap能够

增加讯问
语句“您是想找?”,Google则处置
的很好,列出可能的搜索目的
“men’s t-shirts”并且呈现相关的搜索结果。

搜索排序

经过
不同的指标将搜索结果排序能够

辅佐

顾客组织信息,如价钱
排序,用户评分排序。常见的排序界面方式

有按钮及选择菜单。

进步移动电子商务销售的交互设计方式

Walmart提供三个选择

的按钮。Seras相似

,采用的分段控件。

进步移动电子商务销售的交互设计方式

J.C.Penney采用定制造

的选择菜单,而Eddie Bauer则用阅读
器默许
的选择菜单。两者均调用了阅读
器自带的选择菜单控件。

Walmart的三个按钮的大小及距离

保证了目的
较好的可点击性,固然

这使得Walmart只能提供三个选择而Sears有四个。Sears的“all”选项,假定

顾客在排序结果中找不到想要的目的
,则能够

快速回到最初的搜索结果页。绝大多数的阅读
器都支持选择菜单控件,而且选择菜单能够

容纳

更多的选项,不过也占用更多的空间,因而

需求
做测试来权衡和评价
这些设计方式

的优缺陷

搜多过滤

过滤允许顾客经过
不同的维度来减少
搜索结果的范围,如颜色,品牌和尺寸。过滤功用
通常给出带有数值的不同维度。常见的过滤界面方式

有选择菜单,下拉列表及可折叠的面板。选择某个维度的一个或多个数值后就能够

过滤结果了。但是
假定

过滤维渡过
多,选择的数值过多就有可能招致
搜索失败及较高的交互本钱

进步移动电子商务销售的交互设计方式

CVS的过滤运用
选择菜单,选择相应选项后会马上更新搜索结果。J.C.Penney运用
下拉列表并且标明对应每项过滤维度的结果数据量
,还允许同时选择多项维度,而要权衡的是顾客要多中止

一次点击“apply”。

进步移动电子商务销售的交互设计方式

Kohl’s运用
可折叠的面板(手风琴式面板)来组织选择

的维度,每个面板展开是维度的不同数值选择。Threadless则将一切
维度的数值直接呈往常

一个界面中。每选一个数值,搜索结果即时更新。

直接呈现一切
维度及数值能够

让顾客了如指掌
有哪些选择

的数值选择。采用这种方式

或可折叠的面板方式

取决于你产品的选择

维度的多少。假定

产品的选择

维度多种多样,十分

丰厚
,则需求
不时
尝试来找到最好的设计计划

。你能够

优化那些顾客最经常运用
选择

功用
的产品的界面。

产品页

产品页是电商网站细致
展示

商品的页面。它们常常
包含不止一种设计方式

,如标签,可折叠的面板及图片陈列。两种常见的产品页方式
,一种是包含一切
细致
信息的长页面,一种是嵌有标签或可折叠面板多模块页面,让用户依据

需求
展开不同的信息。

进步移动电子商务销售的交互设计方式

Samsung和Dell均采用渐进式的方式呈现商品,这类商品通常包含大量的细致
信息。Samsung运用
可折叠的面板,Dell运用
标签。

进步移动电子商务销售的交互设计方式

Cobela’s和office Depot均是一个长页面来展示

商品一切
信息。这种方式

运用
时需求
经常上下滚动页面获取信息,但是免去了切换标签和面板的省事

。采用哪种方式

取决于产品的信息量大小以及怎样
有效的组织信息模块。

长页面比逻辑模块分割的页面需求
更多的页面滚动,并且顾客需求
破费

更多努力找到他们需求
的某条细致

信息。在我做的可用性测试中,两种方式

都有用户偏爱,但是很显然
用户运用
分红
逻辑模块的页面更容易。假定

运用
逻辑分块的页面,确保用户点击标签或面板后能够

快速加载相应信息。

最容易的办法

就是一次性加载一切
产品页的信息,包括躲藏
在标签和面板中的信息,以便用户切换时能够

马上显现
。这种办法

益处

是用户断网时依然

能够

继续阅读
,而缺陷
是不论

能否
需求
,一次性要加载一切
的信息,这会增加你的效劳
器担负
,并且耗费

用户更多的数据流量。因而

你需求
权衡。

图片陈列

图片陈列关于
服饰及消费类电子产品来说尤为重要。你或许
不需求
从三个不同的角度看一个扳手,但是关于
衣服、鞋类和高端的智能手机来说图片很重要。常见的设计方式

有可滑动的陈列,双击放大及缩略图。

进步移动电子商务销售的交互设计方式

Palyess运用
可滑动的陈列从不同的角度展示

商品,用户也能够

双击放大查看细节。

进步移动电子商务销售的交互设计方式

Payless的双击放大在屏幕上坚持
几秒后消逝
以保证用户有足够的时间了解

和留意
到怎样
操作。放大查看细节的功用
关于
服饰和鞋类商品很重要。

Dockers(左上)采用图片陈列的方式,双击放大查看细节,同时用户能够

切换不同的颜色。Levi’s(右上)相似

的,多了可选择的不同视角的缩略图。Dockers切换不同颜色时整个页面重新刷新,而Levi’s 则不是。

Levi’s在用户切换不同颜色时坚持
大部分

内容不刷新,乍看会觉得这是更好的用户体验,但理论

上,在同一天的同一时辰
对比

来看,Docker的全页刷新加载要快的多。Levi’s 加载过慢可能是由于除了主图外还要加载刷新五张缩略图,或者有其它的缘由
如网络塞车。每种方式

都有优优势

进步移动电子商务销售的交互设计方式

Samsung 和Dell均运用
图片陈列方式展示

商品。Samsung在可折叠面板中嵌套运用
,而Dell则运用
一个单独的页面展示

Samsung的方式似乎更友好,减少了页面切换。Samsung和Dell均运用
的高分辨率的图片,图片质量关于
用户运用
体验来说是很重要的。Dell的设计优势在于让顾客专注于图片,减少其它内容的干扰。

购物车

购物车通常运用
表格方式

展示

产品。除了必要的置办

信息外,还提供额外的功用
如修正
订单,保管
订单,添加至珍藏

夹或愿望清单,删除或更改数据量
,选择提货方式,运用
优惠券、折扣券及支付等。用户可经过
网页的顶部或全站导航进入购物车。
进步移动电子商务销售的交互设计方式

Lowe’s(左上)提供了将商品从购物车移除、选择提货方式的功用
。Bed Bath &Beyond(右上)也有移除商品的功用
,可更改商品数据量

进步移动电子商务销售的交互设计方式

Crate&Barrel(左上)提供移除商品、保管
至珍藏

夹、更改数据量
的功用
。同时包括配送信息如价钱
和时间。Payless(右上)也提供相似

的功用

购物车必需求

提供最好的用户体验,由于
顾客在这里离最终
的置办

只差一步了。允许用户无需跳转页面就可更改数据量
、移除商品、运用
优惠券关于
快速流利
的置办

体验来说至关重要。假定

页面承载信息过多,能够

运用
可折叠面板随着用户的需求
渐进的展示

信息。

支付

支付更多的是一个流程而不是方式

。许多电商网站允许用户运用
已有的账户或是访客身份中止

支付结算。关于
已有账户的顾客来说,运用
已有的支付方式和配送信息将大大简化支付流程。

进步移动电子商务销售的交互设计方式

Crutchfield 和Nordstrom均允许用户以访客的身份或已有的账户来结算。两者提供以访客身份结算后再注册账户的功用
,以及更改密码的功用

进步移动电子商务销售的交互设计方式

Amazon在支付页面的首页讯问
顾客的电子邮件地址,并讯问
能否
已有注册账户。这与其pc端网站的做法坚持
分歧
。Target在移动

网页端提供登录、注册及以访客身份结算、更改密码的功用

关于
大多数电商网站来说,允许顾客用已有账户或访客身份支付结算是必需
的。同时,思索
约请
顾客在支付结算完成后注册账户,由于
此时顾客已输入了足够的信息中止

注册。这会大大进步
顾客注册的胜利

率,由于
此时顾客简直

无需再多付出多少努力。

Target的“Create Target.com account”按钮很有可能引导顾客偏离置办

流程由于
这需求
顾客付出很多努力。先下单结算再约请
顾客注册会更好。限制顾客结算时的选择可大大进步
置办

胜利

率,减少顾客需求
做的决议

表单

表单在移动

电商中运用
十分

频繁,如搜索、支付、注册、运用
优惠券及促销码。以下是设计移动

端表单时的一些准绳

  • 标签置于输入区上方以避免

    用户放大输入区时标签溢出

  • 运用
    HTML5调用合适

    的键盘,契合
    运用
    情形
    。如输入邮件地址时调用邮件的输入键盘,输入数字时调用数字键盘。

  • 只在真正必要时才强迫用户输入需求
    的信息。这将大大减少顾客支付流程的障碍

在手机上处置
表单的最佳方式就是尽量少的运用
它们。你能够

调用天文
定位功用
来辅佐

顾客填写区号,你能够

在顾客结算时自动调用用户以前输入过的信息。记住最好的表单是用户无需完成的。

进步移动电子商务销售的交互设计方式

CVS(左上)在用户输入区号时未调用数字键盘。这让用户不得不从多了一步操作,切换键盘。CVS的标签采用左对齐,当用户放大页面时存在标签溢出的问题。Crate&Barrel (右上)的表单则更友好,当用户输入区号时自动调用数字键盘,标签采用顶对齐。

记住表单是辅佐

顾客在网站上完成置办

的。你应该特别留心并且尽可能的减少顾客的交互本钱
。有时这意味着你需求
尝试其它更好的办法

结论

随着移动

电商贡献

的销售额越来越高,基于移动

阅读
器的购物网站提供许多顾客在pc端运用
和等候

的功用
。正如Sterling Brands 和 SmithGeiger 调查显现
,移动

用户更愿意在友好的网站上置办

应用
已有的设计方式

,你能够

尝试不同的办法

来快速搭建你自己

的适用于小屏幕的电商网站。但是不要满足已有的设计方式

,将它们作为起点去尝试更多不同的设计计划

。并且随着阅读
器性能的提升,触屏版的设计能够

更多的思索
自创
本地应用的设计方式

来源:腾讯ecd

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章