移动电子商务网站的产品展示页面和购物车

以下是我参考了Best Buy, Target, Sephora, Moosejaw, Barnes and Noble, Amazon, Sears2Go, Ralph Lauren和 Tickets.com(每个网站都直接链接到它们的移动版本)后的一些关于移动设备网站可用性的建议。

产品页面

虽然你能用任何只能手机接入电子商务网站,但优化过的产品页面通常更易用,如你在下图看到的:

产品描述

当主页去掉图片和多余的导航后,页面就变得更易于手机使用。请始终认清什么内容是对在线购物体验最重要的:

  • 当要决定是否从在线零售商购买商品时,77%的“非常可能购买”的人会被产品信息内容的质量所影响(描述、版权信息、图片和工具)
  • 79%的人在没有完整产品信息时不会或几乎不会购买商品
  • 76%的人认为网站提供的内容并不足以完成产品研究或导致“经常”、“非常频繁”或“有时候会”在线购买商品
  • 当没有足够信息时,72%的用户会去竞争对手那里做进一步的研究

信息来源于e-tailing group,2007

最好的在线商店提供最丰富的产品描述、图片预览、图片缩放、评论,甚至是产品比较工具。当然,把所有这些都放到移动网站上可能不是最优的方案,也可能是不现实的,但请注意那些能代表产品最核心优势的品牌、质地和模式的信息展示。

上图是BestBuy电子商务商店的HDTV产品页面,下图是移动版的商品界面:

列表展示页面">

BestBuy的例子简单明了,但如果移动网站是作为产品研究而用的,那么是否展示的这些信息足够能导致商品被卖掉?用户能理解“HDMI输入、屏幕高宽比、黑色钢琴烤漆机壳”这样的行业术语吗?

用户总是想获得尽可能完美的无缝接入体验。如果你已经用一个可用性很高,内容丰富的传统网站赢得用户的忠诚度,那么使移动设备的体验满足用户的预期也同样重要。

小心那些产品描述段落不以连贯方式显示。Moosejaw在它的新设计(右)中摆脱了冗长且不连贯的描述(左):

老版网站有这样几个问题:HYPN OLV可能是对颜色的描述,但它的意思并不明显。click-to-call和add to cart这两个按钮离的太近了,在触摸屏上很容易点错。在段落底部的Zoom Prod. Image call-to-action看上去并不像一个链接。新网站看上去感觉更像传统的Moosejaw网站,对产品的描述有一贯Moosejaw诡异的风格。click-to-call链接和大图片很容易在触屏上点击。

Target利用了点句来简化表达的信息,使得内容更易于浏览:

你甚至能把产品细节信息通过短信发到自己的手机上。

Sears2Go允许你读取一段产品描述,如果你需要还可以展开显示更多细节。这既给厌恶滚动屏幕的用户带来了便利,也满足了研究者对于详细信息的需求:

Sephora和Sears在产品页面的顶部给出产品评分和评论链接:

小心使用表格,它们经常迫使用户横向滚屏,有时同时在纵向和横向滚屏,像Ralph Lauren在iPhone上表现的:

Moosejaw允许用户展开和收起评论,这最大程度地减少了页面读取的时间:

图片

考虑到当要决定是否从在线零售商购买商品时,77%的“非常可能购买”的人会被包括图片等产品信息内容的质量所影响,所以不应在图片的质量上减少投入。Target、Ralph Lauren和Sears都默认显示大图,而Moosejaw则提供可选的图片显示方式。显然,通过高质量的图片展示,你能获得较高的商品购买率。

按钮布局

对触摸屏用户来说,要避免把“Add to Cart”、 “Add to Wishlist”和“Continue Shopping”等按钮堆积在一起。让各个按钮间保留点空间,或一行一行的摆放他们:

购物车总览

Best Buy、Sephora、Target和Moosejaw只支持在移动端直接结帐。如果是这样的话,这里有一些小贴士:

Ralph Lauren和Sears都允许编辑购物车,Barnes and Noble允许将商品转移到收藏夹中。令人惊讶的是,Amazo没有购物车总览页面,而是直接跳转到登录页面。

Ralph Lauren的购物车总览页面让用户确认数量并高亮强调通过手机购买能免运费。Sear提供运费和自取选项,但当商品不适合自取服务时则不能设置。最出色的功能是相Sears那样在购物车按钮上提供安全购物图标,正如我在上周的多通道2.0在线讨论会上提到的那样,害怕安全性没有保障是用户用手机进行购物的主要障碍。

Tickets.com很有意思。它的商业模式很独特,因为票务购买是有时限的,如果在一定时间内没有完成交易则所购的票仍然会回到库存中。你也几乎看不到在电子商务的结帐页面有验证码,但票务行业相对其他在线零售业通常对于可疑的在线行为更敏感。不幸的是,Tickets.com的验证码很难识别。

下一篇我们将专注于结帐流程和表单设计。

时间: 2025-01-21 17:33:32

移动电子商务网站的产品展示页面和购物车的相关文章

电子商务网站商品信息展示页面设计

导读:电子商务网站的设计重点在于提高用户的转化率,所以我们在访问某个电子商务网站页面时,总会看到许多其他类型或同类型的推荐商品.这也是设计中经常使用的交叉销售和向上销售.这样做的目的只有一个,尽可能提供用户感兴趣的商品,从而促成更多的销售.因此本文主要讨论如何在不同的页面中设计商品的展示方式,从而能更好的提高用户的专户率. 你注意到了吗,当展示交叉销售和向上销售(cross-sells and upsells)时(译者注:向上销售含义),许多电子商务网站会将用户从正在浏览的网页劫持到他们想推荐的

交互用户体验:电子商务网站的产品分页设计

文章描述:关于网站分页的那点事儿. 本文所描述的分页是指电子商务网站的产品分页,如果想要直接了解本文的精髓,请直接参照下面的附图,不言自明. 电子商务网站的产品分页设计是很小块的设计,绝大多数的网站不会在这里花费什么精力,但是,如果能在细节上做的更贴心一些,对用户的购买体验还是有所提升的,毕竟用户每次购买都会多次使用该功能模块. 首先要说的是,分页是用户普遍接受的产品页面浏览方式,设计也是大同小异,用户的学习成本为零. 现在的电商网站通常选择在产品页的上下部分均放置分页,下面是完整的分页功能,上

电子商务网站购物产品收藏功能设计分析

 注:这是某命题作文的核心部分,省略的部分内容不影响阅读,欢迎拍砖.探讨. 一.为什么要做     收藏,侧重于针对自己有价值或可能有帮助及方便日后快速整理的资料信息所做的一个动作,一件事情.对于网购产品而言,重复购买现象的存在使得收藏成为必然,同时购物网站也需要用户为信用体系提供更多的支持:收藏也是链接供求系统的纽带之一,收藏如何转化成购买将直接影响到购物网站的转化率.     1.收藏的作用与意义:         1)增加用户的黏性:2)为卖家(店铺主)赢得回头客:3)与Tag体系结合便于

求解:怎么不用服务端控件实现产品分类,产品展示页面?

问题描述 求解:怎么不用服务端控件实现产品分类,产品展示页面?服务端控件很简单,无非就是绑定就可以了,但是不用服务端控件的话,除了后台拼代码<table><tr><td>循环取数据</td></tr></table>,再输出到前台,还有什么办法?AJAX接收数据,再动态生成?这样禁用了JS就悲剧了...请教1:还有什么办法吗?请教2:MVC里是怎么实现的? 解决方案 解决方案二: 你不用脚本,你还能怎样,你可以用其他语言脚本,java

B2C电子商务网站的产品图片设计

产品图片对于购物网站的重要性不言而喻,对于网店设计师来说如何才能设计出满足网店需要的图片,这对于设计师的经验要求较高,当然在设计中我们可以参考一些国外的购物网站产品图片,学习与归纳经验对于今后的设计可以起到事半功倍的作用. 1 重要性 在线上销售系统中,目前是很难达到"所见即所得"的产品展示效果,无论提供多少图片,从各个角度.高分辨率,高超的拍摄技巧,或者视频.3D展示等等技术手段,都直接无限接近现实购物的物理真实感受:拿到衣服,用手触摸感受质材,近距离品味设计,试穿等,在线下购物一切

请问网站的产品展示一栏上传后显示不出产品了 怎么解决? 多谢

问题描述 本地测试没问题运行正常都能正常显示上传到空间之后产品展示就不能正常显示了这是网址http://jljianwei.xx108.80data.com/ 解决方案 解决方案二:数据库的存放位置,和读写权限问题.网站是自己的,就去看看.若不是自己的,这个问题你应该联系网站的客服人员.解决方案三:你那6个产品是假的吗?解决方案四:是不是上传后路径不对.

移动电子商务网站表单和结账页面设计

以下是我参考了Best Buy, Target, Sephora, Moosejaw, Barnes and Noble, Amazon, Sears2Go, Ralph Lauren和 Tickets.com(每个网站都直接链接到它们的移动版本)后的一些关于移动设备网站可用性的建议. 表单和结帐处理 就像我在本系列的第三部分产品展示页面和购物车里提到的,Best Buy. Sephora. Target和Moosejaw的新站不支持移动支付.所以在这一部分提到的网站是Barnes and No

移动版本的电子商务网站:搜索和目录页设计

原文:Mobile Commerce Usability:Search and Category Pages 作者:Linda Bustos 译者:耿人杰 ------------ 全文的分割线 ------------- mobile shopping 这是此系列的第二部分: 第1部分:网站主页和导航 第2部分:搜索和目录页面 第3部分:产品页面和购物车 第4部分:表单和结帐 以下是我参考了Best Buy, Target, Sephora, Moosejaw, Barnes and Nobl

实例讲解电子商务网站产品页的优化技巧

电子商务网站而言,最看重的不是流量而是转化率,如果转化率不高,即使流量上万也没什么用.毕竟电子商务类型的网站不可能挂一些类型弹窗.游戏之类的广告吧,这样会影响到用户体验而且对于可信度也没有任何的正面作用.而对电子商务网站的站长来说,针对决定转化率高低的产品页应该如何去优化呢?怎么样优化才能使得产品页不会因为用户体验不好或者其他的因素不全而使得成交单丢失呢?今天笔者以例子来讲解一下电子商务网站产品页的优化技巧. 一.产品图片加上ALT属性 对于大部分的电子商务网站而言,其中产品页主要以图文形式展现