HTML5网页设计

产品设计

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

时间:2014-09-10 12:23来自:腾讯ecd作者:user点击:
Kohls使用可折叠的面板(手风琴式面板)来组织筛选的维度,每个面板展开是维度的不同数值选择。Threadless则将所有维度的数值直接呈现在一个界面中。每选一个数值,搜索结果即时更新。 直接呈现所有维度及数值可以

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”按钮很有可能引导顾客偏离购买流程因为这需要顾客付出很多努力。先下单结算再邀请顾客注册会更好。限制顾客结算时的选择可大大提高购买成功率,减少顾客需要做的决定。

表单

表单在移动电商中使用非常频繁,如搜索、支付、注册、使用优惠券及促销码。以下是设计移动端表单时的一些原则:

1.标签置于输入区上方以避免用户放大输入区时标签溢出

2.使用HTML5调用合适的键盘,符合使用情景。如输入邮件地址时调用邮件的输入键盘,输入数字时调用数字键盘。

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

在手机上处理表单的最佳方式就是尽量少的使用它们。你可以调用地理定位功能来帮助顾客填写区号,你可以在顾客结算时自动调用用户以前输入过的信息。记住最好的表单是用户无需完成的。

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

记住表单是帮助顾客在网站上完成购买的。你应该特别留心并且尽可能的减少顾客的交互成本。有时这意味着你需要尝试其它更好的方法。

结论

随着移动电商贡献的销售额越来越高,基于移动浏览器的购物网站提供许多顾客在pc端使用和期待的功能。正如Sterling Brands 和 SmithGeiger 调查显示,移动用户更愿意在友好的网站上购买。

利用已有的设计模式,你可以尝试不同的方法来快速搭建你自己的适用于小屏幕的电商网站。但是不要满足已有的设计模式,将它们作为起点去尝试更多不同的设计方案。并且随着浏览器性能的提升,触屏版的设计可以更多的考虑借鉴本地应用的设计模式。

当前文章地址:http://www.shejicool.com/design/pm/497.html

上一篇:没有了 下一篇:怎样去找到真实的需求
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐