Posts Tagged ‘UI’

网上的超市们

January 18th, 2010

注:本文纯属贴图好玩,无技术含量。

刚去一号店买东西,顺手搜索了几家国外的类似商店,截了些图,just for fun。

 

一号店:

我已经贡献了N百块销售额给他们了,不过每次拿到沉重的箱子的时候,心里都会由衷的感慨一句“这单估计他们又没赚到我钱”。

image

排版上其实看不出是个网上超市,到处都是促销和推荐(看起来和新蛋京东倒是蛮像的),内页图片大,页数多,很多被埋在十几页后的产品不知道能不能见几回天日。——我也没想明白网上超市到底应该怎么摆放产品……

image 

image

一号店让我大爱的地方就是那个Ajax购物车,不管买什么,点击“直接购买”,东西就自动加到了购物车里,页面不刷新——对于每次要买几十个产品来说,这个设计真的让人觉得很舒服。

 

www.leshop.ch,瑞士的“一号店”,去年销售增长2000万瑞士法郎,年销售额达到1亿3千2百万瑞士法郎,4万3千个老用户贡献了90%的销售,这一年内平均每个家庭订购了价值2750瑞士法郎的商品(来源:Exciting Commerce)

image

这个看起来更像超市一些:)

之前看过有人说中国人比较喜欢热闹,所以首页得多点促销活动,外国人比较直接,所以首页最重要的就是搜索和分类……也不知道这种说法有没有根据。

image

image

 

www.mysupermarket.co.uk

这家很好玩,产品图片很有特点,产品本身都贴着图片底部,放在一起看起来就好像整整齐齐摆在货架上一样,蛮有趣的。

image

image

 

www.shopfoodex.com

这位同学用卡通导航

image

 

 www.cobornsdelivers.com

貌似是某老站复活的。

image

列表相当难看啊。

image

 

www.Alice.com

这家比较有趣,一开始先要你选择家里有几口人,几个大人几个小孩之类。

image

然后他会推荐说你可能会需要下列这些类别的产品(香皂、洗发水、卫生纸、牙膏……包罗万象),我们可以多选或者少选些。

image

接下来,每个我们选择的产品类别都会变成一只小鸭子(很聪明啊,看到小鸭子心情比较好,要是看到这么多个输入框想想都很有压力):

image

点击小鸭子,他会问你是要去选择具体产品,还是删除这个类别。

image

选择产品的话,就可以在他家提供的诸多产品中选一个——除了选要什么具体产品之外,还要选说大约几个月就会需要个新的(他到时候会提醒你续订)

image

定好的话,产品就到了我们自己的列表里面。

image

一个个小鸭子都选好的话,一个家庭所需的所有日常用品基本上都齐了——而且是一劳永逸的齐了,不仅仅这次他会按时送货来,等到某样东西快用完的时候他也会自动帮你整理好订单问你要不要续订——下次就不用再挑一次,真是懒人居家必备良品啊。对于Alice来说,一次搞定将来生意、套牢用户,也很合算——这样说起来挺像我之前提到的日用消耗品的自动定期购买

Popularity: 54% [?]

增强现实技术会能解决电子商务商品尺码问题么?(二)

June 18th, 2009

北京,山海关,北戴河归来。

去北京前写了一篇增强现实技术会能解决电子商务商品尺码问题么?,今天又看到了Glass Direct的Video Mirror

videomirror-demo

本质上,就是个增强现实的小程序:

1. 把摄像头的图像左右颠倒,以形成“镜子”效果;

2. 人脸识别(话说感觉她家作出来的效果还不如我大学室友的毕业设计);

3. 把眼镜的模型图像经过计算(你眼睛在哪,在朝哪个方向看……)后叠加到“镜子”里。

image

正面效果:

image

转动脑袋之后的效果:

image

挺有趣的。

我自己玩了一下,感觉还是有几个问题:

1. 要下载一个50多M的软件安装后才能玩,这个会吓跑不少人;

2. 脑袋要离摄像头一定距离(40cm?) 才能玩——对于我这种近视眼来说,摘掉眼镜后看40cm外的图像实在不是非常清楚;

3. 正面的图像融合不错,可是侧面效果做得不是非常好,眼镜的图像常常没有跟上脑袋的转动。

 

不过无论如何,这又是非常有趣的一个进步啊。

Popularity: 4% [?]

增强现实技术会能解决电子商务商品尺码问题么?

June 5th, 2009

最近总被问怎么样可以让用户在网站上选择到合适自己尺码的产品(曾经也介绍过几个方法,例如这里,还有这里),也头脑风暴出了一些更成熟的方案,但是本质上都只是小改良,相比现在普遍采用的模式(例如给size chart或者size calculator)没有根本性的突破——或者说,凡是能够产生根本性突破的方法,都需要极大的开发成本,目前也没有资源去实现。

看到www.prioritymail.com的一个做法,觉得相当有想象力,虽然离“解决所有电子商务的尺码问题”还早,但是毕竟是个很有创意的尝试(之前看到的Argumented Reality技术往往都是用在广告和游戏上,感觉用在电子商务上其实蛮合适的)。

1. 模拟现实的交互式导航。

image

进入页面,就会有个喋喋不休的营业员上来和你做介绍(是一段视频),教你怎么做。比较好玩的是:1. 他会根据你的行为作出反应,比如你填表填了很久他就开始东张西望之类;2. 他会指来指去,比如要你看导航栏的时候就会指向自己头上导航栏的位置,很清楚明白。这一步会引导你填写个人信息。

2. 选择合适你邮寄物品大小的纸盒:寄不同大小的东西,所需要的纸盒大小也不一样,怎么判断自己需要多大的盒子呢?常见方法当然是自己来量一下东西的大小,再去网站上看各种盒子大小比较一下,这里用的方法更直观一些。

2.1 打印一张印有他们特殊标志的纸。

image

======== 转载请注明作者Mars,出处www.MarsOpinion.com ======

2.2 打开摄像头,点击“虚拟盒子模拟器”的按钮

image

======== 转载请注明作者Mars,出处www.MarsOpinion.com ======

2.3 摄像头抓取到那个特殊标记,就会以那张纸为基点,在视频中虚拟出一个盒子(你可以自己选择盒子大小)

image

2.3 你把自己要邮寄的产品放到那张纸上,就可以从摄像头里直观地看出需要选择怎样的盒子

image

======== 转载请注明作者Mars,出处www.MarsOpinion.com ======

觉得这个方法很棒,非常直观。

打印一张印有特殊标记的纸,是个很聪明的办法。这样定位也简单,判断角度、距离、尺寸都简单了很多。

对于其他种类商品来说,其实可以用类似的思路,用增强现实的技术,将商品的3维虚拟模型融入到用户身边的环境中,让用户更直观的“看到”商品的大小。

而对于衣服这种需要“试”的产品呢?理想情况当然是通过摄像头直接拍摄到全身就生成3维的模型,然后将衣服“套”在模型上展示给消费者,让她看到穿上新衣的样子。偷懒一点的办法(学习PriorityMail)可以是给老客户没人发一件TShirt,Tshirt上有便于计算机识别和计算尺寸角度的图纹(新顾客的话就还是自己打印几张贴身上吧@__@),让消费者穿上那件衣服之后再来摄像头前试衣服,这样应该算法上会简单不少。

再简单,也是未来的事情了,看谁先做出来吧。

Popularity: 3% [?]

BSO是必须的……

May 10th, 2009

BSO, Bloody Show Off, 赤裸裸血淋淋的炫耀,是必须的。

标题是开玩笑,不过对于E-commerce来说,很重要的一个任务就是:赢得信任,让消费有一个“良好购物体验”的预期。你可以埋头做生意,等着消费者自己发现你的好你的可靠,也可以通过BSO,把那些能够激发信任感的元素用多种方式展现出来。

常见的做法有:把安全认证的标志放得大大的,把网站做精致漂亮些,把大媒体的报告链接放在醒目位置……用意是增强消费者信心,让他们知道这个网站有来头应该不是骗子。

 

然后呢,我们需要Show Off两件事情:

1. 你不是我们唯一的客户,很多很多其他人也在我们这里买东西。

2. 其他客户买完东西都很开心。

 

这个很好理解,两家实体店,一家人潮汹涌然后大家手上都大包小包脸上洋溢幸福笑容,另一家门可罗雀啥也没有,消费者很容易觉得第一家店比较好。——你去不认识的地方吃饭,如果要安心的话,不也是会找一家吃饭人多点的店进去么?

 

具体做法很多,举几个例子:

常见的是很多网站会在首页展示用户评论,而且往往是正面评论(话说我设计过一个自进化的算法来给正面评论更多展示,不过没有付诸实现)。

image

上面这些评论是放在凡客首页的,非常正面(好像有些过头,感觉上有点假)。

 

另一个网站做得多一点点:

image

不仅告诉把正面评论展示出来,而且展示总的评论数量——炫耀一下“有这么多人在我的店铺里叽叽喳喳多么热闹啊”。

 

但是上面这个例子还是有个缺陷,就是他的评论主要还是针对产品的,而不是针对网站本身的服务。如果你对自己服务确实有信心的话,也可以让消费者主动提交他对整个购物体验的“证词”,然后在首页展示它们,就像这样:

image

如果消费者点击,可以看到更多的“证词”,看到有那么多的粉丝对这家公司的服务满意:

image

 

Anyway,这些还都稍微显得正式了一点,而且消费者也不会那么认真去阅读大段大段文字。Zappos就做了个更好玩一点的东西http://www.zappos.com/map/

image

每当有客户下单,这幅美国地图就会在用户所在的州上弹出一个小图标显示刚刚这个用户购买了什么。打开页面,看着整个地图上,各个商品不断的闪现,马上就会直观的感受到这个网站的人气。

Popularity: 5% [?]

网络购物:衣服多大,衣服多厚?

June 5th, 2008

Grokdotcom.com看来的,说CafePress.com最新的UI:

cafepress_fabrick_thickness

左边图片表示衣服多大,紧身的还是宽松的,

右边图片表明衣料有多厚,

这个设计真是让人一目了然啊。

Popularity: 3% [?]

Before Copy

May 12th, 2008

最近无穷多关于Amazon的消息。

消息多了,分析多了,就想起grokdotcom的Hidden Secrets of the Amazon Shopping Cart,那篇文章记录分析了Amazon的购物车演化历史。

让我印象深刻的,并不是Amazon在细节上不断的优化,而是作者对Amazon去除“You can always remove it later”这行提示的原因的分析。

改动前:

amazon_cart_2

改动后:

amazon_cart_3

改动后,”Add to Shopping Cart”和”Buy now with 1-Click*”这两个按钮变小了,”You can always remove it later”这行提示变得更不明显(从购物按钮上,移到了购物按钮上方),而”Use if you are redeeming a certificate or coupon”这行字则干脆消失了。

作者认为,把“You can always remove it later”这行字从按钮上移除,与其说会让按钮更清楚而提高转化率,不如说更会让消费者疑虑(那时网络购物并不普及)从而降低转化率。他的分析是“Amazon这样做,是一种牺牲转化率的行为”,而原因则是“节省宝贵的展示空间给正在推广期的Amazon Market Place,去掉提示信息、压缩按钮大小之后,Amazon Market Place便可以展示在更上方的地方”(Mars: 我觉得很可能是为了“将Market Place入口在第一屏展示出来”)。

根据作者的一面之词,他很多客户看到Amazon改版之后纷纷跟风也把这些让消费者安心的提示信息从购物按钮上去掉了,然后conversion rate都相应下降。

不论这个分析是否和事实相符,觉得作者的思路很值得赞许。作者得出的结论似乎也无可改动,只能照抄:”Don’t copy what other people do if you aren’t fully aware of the business issues involved.”

Popularity: 1% [?]

稀缺,竞争,遗憾,一个也不能少

May 12th, 2008

看到ucdconcepts(下文中Amazon图片直接引用自该文章,懒得自己截图)谈起了Amazon的Gold BoxLightning Deals,其实本质上就是限时限量特价,和中国新蛋网的限时抢购是一个东东。

Lightning Deals:

2472104721_8322df4eef_o

 

中国新蛋网限时抢购:

timelimited

这种设计,除了给网站增加娱乐性之外,更重要的功能是给消费者制造压迫感,促成订单生成,提高转化率。

上图中新蛋的限时抢购,便利用“52:28:30”形式的时间倒计时,和明确的剩余库存数量,给消费者制造稀缺的感觉(时间——也就是机会的稀缺,加上产品本身数量的稀缺),这种稀缺感本身便可以给顾客形成压力,提高转化。

 

而Amazon,在制造稀缺感方面,就明显的优于中国新蛋:

  • 限时更短(不会长到数百小时之多)
  • 商品价格降幅更明显
  • Deal数量更少
  • 具体库存数未知(只知道百分比),让人更不放心

  

而除了“稀缺”之外,Amazon的表现方式,还可以制造出“竞争”的气氛。

 2473038598_b99a566d09_o

在库存显示方面,Amazon并没有直白地说“还剩N个”,而是说“XX%已经被抢了”,这样就制造了一种竞争的气氛,更容易刺激购物冲动。

  

最后,Amazon会把过期的Deal详细展示出来(原样展示,只是取消购物按钮,并且把XX% Claimed变成灰色,给人一种“错过”、“没有机会了”的印象。而新蛋会仅仅将“库存:0”写出来),让想买却没有下单的用户产生遗憾的感觉。这种感觉将让强化用户对下次Lightning Deals的期待,为将来做铺垫。

2472250169_c17fbe6b27_o

 

把稀缺,竞争和遗憾的感觉都做全,UI的细节上,Amazon确实是典范啊。

虽然写出来好像too simple, sometimes naive,可是这样简单的东西,又有多少网站真的做到了呢。

Popularity: 2% [?]

最简单的B2C电子商务购物流程比较优化

March 13th, 2008

 (原文发表于2008年1月15日至3月10日间,由于服务器故障导致数据丢失,3月13日根据备份数据补发——本文留言信息已完全丢失,图片也被全部删除)

终于忙完这阵子了……

可以来乱写东西了,哈哈。

  

虽然只是很简单看了一下,还是发出来吧(否则太浪费了:S)……

虽然很简单,可还是写了大大的标题:最简单的B2C电子商务购物流程比较优化,以方便搜索引擎兄弟。

加上“最简单”三个字,以表示自己脸皮并不厚: P

  

想象我是一只菜鸟,开始上网站买东西……

  

1. 我在哪儿?

1.1 顶部导航栏视觉变化

www.joyo.com

进入“手机”这个子目录后,手机被高亮显示,而且从跃升到了顶级导航条(本来在“所有21类商品”目录下面),“手机”和“手机品牌”目录层级联系也用视觉很清楚的表达了出来。

 

  

www.newegg.com.cn

进入“电脑硬件”目录后,所在目录被高亮显示(虽然并不清楚)

 

 

www.rayi.cn

进入”小型数码相机”目录,顶部导航栏无变化。

 

  

1.2 面包屑导航

www.newegg.com.cn

进入新蛋产品页面,可以看到很清楚的面包屑导航。

 

没有根据品牌再分类,但是新蛋有一个别家很少提供的功能,就是产品页面有链接到品牌页的链接(制造厂商信息是个链接,可以点击的——要是加下划线就更清楚了)。

 

  

www.rayi.cn

锐意很清楚

 

  

www.360buy.com

京东商城的导航也很清楚。

小问题,“首页 > 商品列表”这两个层级有没有必要显示出来?

 

  

2. 我要搜索东西!

www.newegg.com.cn

导航栏位置显著,方便用户。

默认没有显示分类搜索过滤框。

 

点击“高级搜索”,弹出分类过滤框:

 

  

www.rayi.cn

个人比较喜欢这个,直接把分类过滤提到主页面,比较方便。

 

(图片贴上来才觉得大家怎么都这么喜欢橙色:S)

 

3. 我要筛选,过滤!

www.newegg.com.cn

个人比较喜欢新蛋这种。

1. 提供直接的链接给常见的搜索条件(品牌,价格)

2. 对于复杂的搜索过滤,采用下拉框(而不是选择框)。2.1 选项隐藏,不会被干扰或者吓到;2.2 明确的告诉客户,如果你不拉开下拉框选择,那么这个筛选条件就是“不限”。

 

  

www.rayi.cn

真实的页面上,过滤器长度是下图的几倍,看上去还是挺吓人的。

 

 

4. 我要买东西!

www.rayi.cn

页面信息量比较大,第一眼可能会看不到购物按钮。

 

 

www.newegg.com.cn

够醒目!(虽然很难看#___#)

 

 

 

5. 我的购物车呢?

www.rayi.cn

页面顶部,对有网购经验的人应该没问题。菜鸟可能要找一下子。

 

  

www.newegg.com.cn

页面右部导航栏上方。还好。

表现内容比较丰富,可以很快了解当前商品数量和金额。

 

  

www.joyo.com

页面右部,个人更喜欢这个:)

非常清楚。

 

  

6. 怎么结帐?

我要做什么,我已经做了什么,还要做什么,我现在在哪……

  

www.rayi.com

很漂亮。

 

  

www.360buy.com

本想用京东商城做反面例子的,结果他们出乎我意料的狠:1. 没登录时候无法使用购物车;2. 登录多次都报错“验证码错误”,猜测是验证码系统出了问题,或者是程序把“用户名或密码错误”误报成了“验证码错误”。

一直觉得京东做事很强……没想明白他们为什么不认真做一下信息系统和网站:S

Popularity: 2% [?]

豆瓣改版风波

November 26th, 2007

主角:豆瓣

事件主干:改版读书生的描述),大量用户反对新版,豆瓣站方妥协,阿北道歉

博客圈比较有意义的讨论:

鲁公子:之前的豆瓣是以item(例如书、电影、音乐)为核心的SNS,群组上线之后豆瓣加强了“人”的的社群化,而这次改版更是进一步将人放到了核心位置,从信息中心转移到了人本中心,item成为了“人”的属性,成为了彻头彻尾的工具。(非原文)

和菜头1:我觉得很奇怪,修改了豆瓣的导航条,是否意味着变更了豆瓣的核心功能?因此,我也弄不明白,这些人到豆瓣是用其中的服务,还是只用导航条的?那么喜欢导航条,不如谁开一个导航条网站,大家天天在里面玩导航条好了。……在一个站点的外在做了一点改变,人们对此的关注程度超过了内在。让我不得不导出一个结论:大概很多人只能用这种方式证明自己的存在。对于站点的发展,对于技术的变更,这些人无从置喙,所以就在导航条,颜色,位置上猛烈发言,证明自己存在,自己很重要。威胁要离开,要另立山头。活脱脱是一出闹剧,让人看了哭笑不得。

和菜头2:反对改版的那些人,你们为豆瓣做出过什么贡献?一些根本没有为豆瓣添加条目、豆列,贡献内容的垃圾用户,凭什么吵啊吵啊吵!一点建设性没有(非原文引用……btw,个人认为和菜头充分起到了越帮越忙的作用,呵呵)

aw:在我看来,最大的障碍,无外乎“用户习惯”。尤其是对于一个用户群相对庞大的产品,任何变更,都会引起许多“老用户”的反对。而这种反对,虽然本质上是“不习惯”,却容易被激化为“不人性化”,甚至“不民主”。这就是“向用户习惯开炮的代价”。用户体验的本质是什么,众说纷纭。不过我个人曾经这么总结过一个等式,用户体验=某个用户为了达成某一任务目标)所花费的代价/过程熟练程度(用户习惯)

麦田:无论当年的天涯,还是现在的豆瓣,“图书”只是引子,大家的目的还是扎堆,闲聊,kill time——当然,每一个身在其中的用户是不会这么看的,他们会认为自己多高雅啊,多有情趣啊,多有意义啊。但是你跳出来,从整个网站的角度看,是的,他们是高雅,他们是有趣,他们是有意义地——扎堆、闲聊、kill time

Robbin:1、升级或新产品上线之前,不仅仅要做好充分的内测,有条件的话要搭建系统进行公测;2、任何时候,都应该重视用户的使用体验,而不应完全从技术角度考虑;3、新功能推出之前,应做好充分的说明,否则会让用户无所适从;4、不要同时推出太多改动,分阶段推出产品的改进效果会更好;(他是转载横戈的)

      

觉得想说的话都被其他人说完了……

UUZone,BlogBus,校内,似乎没有哪个网站大规模改版不引起反弹的。这次豆瓣引起这么过关注和分析,实在是以后做类似事情很好的参考,呵呵。

Popularity: 1% [?]

MSN Space日志消失问题

November 24th, 2007

Valen小朋友询问“我MSN Space日志消失了怎么办?”

症状为:只要某个月日志数量过多(例如超过20篇),它就只会显示最后那些(例如从10月20日至10月30日的日志),月初的日志就看不到了。

  

耗费了我足足十分钟时间……终于找到原因是:

MSN Space自动设置翻页功能,把其他的日志放在第二页,第三页上去了。

问题的根源是:Space的设计师实在是太有才了。

如果你打开浏览某个月份的日志,你会看到:

MSNSpace

然后你会翻了很多很多页……

» Read more: MSN Space日志消失问题

Related Posts with Thumbnails

Popularity: 1% [?]