0 条评论 | 19 views

继续看图~~


策划    

0 条评论 | 31 views

margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性,margin是css控制块级元素之间的距离, 它们之间是透明不可见的。

margin属性包含了margin left :距左元素块距离(设置距左内边距) ;margin top:距头顶(上)元素块距离(设置距顶部元素块距离);margin right :距右元素块距离(设置距右元素块距) ;margin bottom :底元素块距离(设置距低(下)元素块距)。其二维构建图可见CSS属性二维图。

margin left用法:margin-left:10px;  这个意思距离左元素块距10像素,可跟百分比如(margin-left:10%;   距离左元素块10%的距离);
margin right用法:margin-right:10px; 这个意思距离右边元素块距10像素,可跟百分比如(margin-right:10%; 距离右边元素块10%的距离);
margin top用法:margin-top:10px; 这个意思距离顶边元素块距10像素,可跟百分比如(margin-top:10%; 距离顶边元素块10%的距离);
margin bottom用法:margin-bottom:10px; 这个意思距离低边元素块距10像素,可跟百分比如(margin-bottom:10%; 距离底边元素块10%的距离);
注意margin中间的链接“ - ”号,设置距离值时用“ : ”并赋予值,并以“ ; ”结束,并且全部用小写半角字母。

如果是左右上下...

查看更多...

策划    

0 条评论 | 211 views

互联网是虚拟的,真实化的虚拟,是湿的,是卖空气的,是讲究制造虚幻氛围的,而绝不是干的。

电商是利用互联网的,是零售商,是被时尚,被媒体,被品牌所领引的。

美国购物社区网站:
http://www.Thisnext.com/
http://www.Stylefeeder.com/
http://www.crowdstorm.co.uk/

法国社会化购物网站:
http://www.wenga.com/
http://www.wikio.co.uk/shopping/
http://www.24h00.fr/


不管是作为媒体的出口,还是购物搜索引擎,还是自我创造内容的社区化网站,Recommend(用户推荐),都作为一项基本功能。获得粘度用户,利用2:8法则。


而这种社区化购物网站的交互功能从技术量级来说,还是有外包可能性的。

策划    

0 条评论 | 86 views

这几天在重新翻看《Don’t make me think》,以前看过,感觉已经快对书中的一些网站设计的原则淡忘了,或者说是忽略了。现在再看这本书,希望自己能够牢记网站设计时不能犯的错误。书中的第一章就是“别让我思考”—我们登录一个网站时,特别是一个陌生的网站时,网页上每项内容都有可能迫使我们停下来,进行不必要的思考。所以网站设计者的目标就是让每一个页面都不言而喻。

看这本书的同时,我也尝试去浏览一些没有访问过的网站。希望能够找到一些实际的例子给自己做参考。昨天第一次访问了麦包包网站,虽然只是浏览了一下首页和几个目录页面,但脑子已经think好几回了。看来要做到“Don’t make me think”还真不容易。于是我尝试着把我访问的过程以及中间不停的思考内容一一还原记录下来,也算是一个Case Study吧。


第一步,登录麦包包首页,我从页面顶部开始扫描,同时脑袋开始迅速转动。。。


 

第二步,由于不太确定顶部的导航会把我导到什么地方去,我决定继续往下看。

第三步,继续滚动鼠标滑轮,看到“按品牌选包”时,我脑袋里的问号更多了。


第四步,基本上把首页浏览完了,我还是不死心,决定回到顶部那个令我思考的导航条再去瞧瞧。这回毫不犹豫地点击了令我最疑惑的“选包”。点击链接,我被带到了一个新的页面。


第五步,尽管充满了疑惑,但我还是点击了“单肩包”。

第六步,再点击“牛皮”加“150-200元”。

最后一步,我点击了顶部导航条上的“品牌”,进入一个新的页面。


 

特别申明,这个只是根据我个人的浏览习惯来观察的,并不代表其他用户的操作习惯和使用方法。同时,我的观点也仅代表我个人的一些想法,不具有普遍的代表性。

分享一些书中关于Don’t make me think的指导原则:

设计者应该尽量做到,当用户看到一个页面时,它就应该是不言而喻,一目了然,自我解释的。

网页上每项内容都有可能迫使我们停下来,进行不必要的思考。常见的罪魁祸首是那些很酷或者自以为很聪明的名字。

另一些问号的来源是那些看起来不太明显的链接和按钮。永远不该让用户花上几微秒去思考某个东西是否能点击。

在互联网上,竞争有时候就在于一个点击的差别,因此如果你得罪了用户,他们会跑到别的地方去。

策划    

0 条评论 | 9 views

  对网店来说,产品页面和付款流程是黄金的页面和流程,关系着用户买不买、付不付款。在网店的设计中,比较常被忽略的是用户注册流程。实际上,用户注册对于购买同样很重要。在《一个网站“按钮”创造价值3亿美元的神话》一文中,海洋科技曾针对网店“登录”与“注册”按钮的设计问题做了专门论述。

  用户注册流程设计的不好,很容易就导致网站用户流失,随之也影响到销量。我们的观点是,必须要让注册流程更顺畅、更简单、对用户的吸引力更大。

  首先,要为用户提供绝妙的加入理由。也就是说,要成功说服新用户注册,网站应一方面提高自己在潜在用户心中的价值估价,同时降低用户加入所需要投入的成本。简单地说就是要让这个(价值与成本)的差值越大越好!在用户注册表单出现的同时,需要显示注册的几点好处。用亚马逊网站举例。在首页顶端有一句话“在此处注册获取个性化推荐”,成功引导用户注册。

  其次,设计使用户感到轻松的注册过程。这也正是我们在之前反复强调的。成功引导用户按下“注册”按钮只是第一步!网站还需要一个让用户觉得轻松舒服的注册体验!如果注册过程是便捷快速的,用户会更倾向于尝试各种其他服务,就算他们并不确定到底会得到什么好处。亚马逊网站的注册/登录页面非常简单,选择新用户登录,直接输入邮箱就可以进入到下一个环节,随后输入用户名和密码就可以了。整个流程的非常简单,同时引导性很强。

  再次,不要让新用户“悬着”。简单的说,就是对新用户提供的指引信息不应该在他们注册后就停止。将新用户抛弃在一个不熟悉的页面或缺乏下一步如何行动的提示只会使用户感到迷惘。因此应想办法向新用户隐形或显性地指导他们下一步可以做什么。亚马逊注册完成后,会马上显示一个个性化推荐页面,不仅让用户能很快进入到购买之中,而且顺便做了商品宣传。

策划    

1 条评论 | 115 views

闲来无事,上新蛋和京东这个两个死对头网站上闲逛,逛嘛总要有些收获的,物质上没有回报,知识总得有的,呵呵。浅说两者用户体验之谈吧。

 

从首页说起看两者页面设计上的差别。

 

京东一级导航条:

点此在新窗口中查看原始图片

 

<!--[if !vml]--><!--[endif]-->

京东的一级导航是按产品种类设置的,4种类别的产品页面与首页并行组成一级导航,能快速帮助用户定位,从通用性上看,没有什么争议,国内大多数B2C网站都是采用这个模式。

 

新蛋一级导航条:

点此在新窗口中查看原始图片
 

<!--[if !vml]--><!--[endif]-->

新蛋的一级导航条是按性质分类设置,首页与品牌专卖,限时抢购,寻宝专区4个不同性质的类别栏目组成一级导航,而6个产品类别作为首页的二级导航。如此的导航栏设置优势是可以丰富内容,缺点是牺牲了用户在产品上定位的效率。

 

评论:新蛋导航条的模式在业界比较罕见,效果鄙人无法得知,我个人比较喜欢京东的。我认为导航条的第一原则是帮助用户能用最小的成本定位到所需的栏目。所以最适合的模式是以产品种类分类的一级导航,这是在国内外通用的。新蛋在二级导航上还有一个小细节:所有分类。鄙人以为之这是一个很用心的设计,因为通过此功能,能更加清楚明白的定位到用户想要的位置,但我很怀疑,有很多用户会去用这个功能,从视觉上讲右边缘的功能不是很显然,从操作成本上,搜索引擎对此功能有很强的代替性,但不管怎么说,这也算是新蛋的用之处。

 

京东搜索栏:

 

这是京东的搜索栏,搜索栏中有热门搜索提示,搜索栏上方是热门搜索,右边是购物车。热门搜索很突出,对销售由很强的导向作用,右边的购物车很醒目,提示作用非常显著,跟亚马逊的设计如出一辙。

 

新蛋搜索栏:

 

新蛋的导航栏是浅色的,跟二级导航的黄色区分开来。搜索栏中没有文字提示,热门搜索整齐的排在搜索栏的右边,起一个提示的作用。

 

评价:在搜索栏的设置上,我想最大的争议性在于如何看待热门搜索提示与搜索的关系。我以为,逻辑上热门搜索是对搜索的提示补充,也就是说其存在的意义是建立在用户搜索欲望和行为之上的,简单的说是先有搜索,然后才衍生出热门搜索提示,两者结合组成一个行之有效的搜索机制。那么按这个逻辑,显然,我更加认可新蛋的搜索框模式,把热门搜索作为搜索的补充列在搜索框的右边,搜索框的优先级高于热门搜索。我观察了好多电子商务网站,基本上新蛋的模式还是占大多数的,可见其还是行之有效的。


京东的左侧导航栏:

<!--[endif]--> <!--[if !vml]-->

 


点此在新窗口中查看原始图片

这是京东左侧导航栏(一部分),依旧是以产品类别分类,每个大类下分列了几个小类,小类再细化下去则是依靠层展开来实现,很有条理。鼠标在左侧导航栏滑动时,触点的每个链接都会有质感的起伏下且自动展开细化的产品种类,交互体验非常不错,操作上 很流畅。个人认为小类左侧的灰体产品类别提示还是很有用的,直观的帮助用户明白自己想要是应该属于那一类别。

 

新蛋的左侧导航栏:


 

点此在新窗口中查看原始图片

 

点此在新窗口中查看原始图片

这是新蛋的左侧导航栏(一部分),同样是以产品类别来分类,每个大类下分列了几个小类,不同的是,新蛋在小类上分的更细。同样是层展开的方式来显示细化的具体产品类别,但因为本身小类就分的很细,所以层中分类会比京东的来的少。鼠标在左侧导航栏滑动过程中,触点链接通过变色和层展开来实现交互,诉求很清晰。

 

评论:鄙人认为左侧导航栏的首要任务是帮助用户更加快速精确的定位,降低定位繁琐度。那么按这个逻辑,以产品类别来分类设置的左侧导航栏无意是最合适的模式。但这里就涉及一个矛盾,类别越细才能让用户定位成本越低,但网站空间却是有限的,很难平铺装下这么多产品类别。直到层展开的模式出现,这个矛盾才被很好的解决。新蛋和京东都采用了层展开的模式,但不同的是新蛋在小类上分的比较细,使得展开层中产品类别少而清晰,而京东则反之。我个人比较倾向于京东的模式,因为新蛋细化分类本意是为了定位效率,但占用了很大的空间,对于买百货办公设备的人要不断向下寻找定位点,定位成本反而高了,所以我相信其实整体上用户定位成本不会比京东模式有多大的提高。另一点上看,左侧导航如果是在所有页面都保持的话,那还要充分考虑到左侧空间的利用率。

 

京东首页主体位置布局:

 

 

 

 

新蛋首页主体位置布局:点此在新窗口中查看原始图片

 

 

 

 

评价:网站的访问用户分为两类,一类是闲逛者,另一类是消费目的非常明确的用户。回归底呕埃现实场景,大家是怎么逛街的?窃以为对于闲逛的用户,他们要么找准自己热爱的品牌逛,要么找热闹的地方逛,这个时候首页内容就对他们很大的引导性,而对于目标明确的用户而言,他们会通过信息检索直达产品页面,大多数时候首页内容会被忽略,所以首页内容对于他们影响不大,反而有时还能促进他们其他方面的消费。毫无疑问,新蛋和京东都认为热卖区和特价区是必要的。我也以为,热卖区和特价区是满足了用户的共性需求,很容易理解,热卖区展示了最受欢迎的产品,购物也是有羊群效应的,卖的越好的东西往往越受人关注喜爱,所以热卖区是一个很好的用户消费入口;而特价区对网购消费者来说也是一个相当敏感的区域,价格上的优惠很能触发这类用户的消费行为。那么新品区是否是必要的呢?首先要考虑谁会对新品感兴趣?显然更多的是对某一品牌有认知度忠诚度的消费群体,他们了解该品牌旗下哪些是旧品,哪些是新品(否则你连旧的产品都不知道,新的又如何认知?),新品对于他们的吸引力是有更高的机会发现他们所喜欢的商品。新蛋和京东的消费群有多大的品牌忠实度?不得而知。但我知道你不可能把每个品牌的新品都展示一遍,所以这个区域注定只能满足小众的需求,在重要性上是低于热卖区和特价区的。如果页面在布局方面有适合该区域的空间存在,且不影响用户体验的基础上,新品区可以加载进去,否则我觉得新蛋简约的布局风格足以。

 

京东的热门评论:

点此在新窗口中查看原始图片
 

查看更多...

策划    

0 条评论 | 13 views

今天消费者网络购物的支出越来越多,可是太多的网站并没有考虑到他们网站和订购流程的易用性,最终导致用户很快就放弃了他们的订购。 这里有10种可以提高你的电子商务网站易用性的方法,可以帮助你最大可能的提高网站的转化率,将用户的"购物篮里的商品"转换为订单。

1. 用email来标识用户(登陆名)

你曾经在网上购物中,用过多少不同的用户名作为账号? 又用过多少不同的emai作为账号? 我敢打赌, 你不仅不同的Email用的很少 ,而且你会发现Email比用户名,更容易记忆。 大多数情况下,用email标识用户比用户名更好。 因为Email容易记忆,更标准,这意味着你不必担心去记忆哪些乱七八糟的字符。他们永远是独一无二的,永远不会像用户名那样出现重名。

2. 将下订单的过程划分成几个大步骤(让用户一次处理一个任务---海带博客)

订购流程通常非常复杂,比较典型的场景可能包括: 用户输入一个配送地址, 选择配送方式, 选择输入支付方式, 最后确认自己的订单。 试图让用户在一个步骤里做完这些事会有问题, 因为用户要输入太多的信息了!

将这些步骤分解,让用户每次能处理一个步骤, 确保每个步骤需要思考和输入的信息相对较少。

举个例子,亚马逊(Amazon.com)将订购流程分解成以下步骤:



3. 告诉用户他们在哪儿,将要去那儿?

(注: 关于网络用户迷失的位置感描述,请参考一书---海带博客)

在你的旅行中, 如果你不知道自己已经走了多远, 或者不知道自己还要走多远, 这难道不是一件糟糕的事情吗? 对用户来说, 当他们试图在线买点什么东西,如果他们不知道最终完成订购还需要多少步骤,他们会倍感挫折。 这就是为什么在订购过程中,告诉用户他在什么位置,而且还需要多少步骤, 是多么重要!


举个例子, Dixons14 显示当前预订步骤,下一步要去的步骤。 作为一种选择,你可以只是在预订步骤中简单的设定步骤号码就可以了,比如: 输入配送地址(步骤1).

4.不要让下订单过程不必要的复杂

令人惊奇的是, 有太多的电子商务网站把他们的订单流程搞的无比复杂,超过他们实际需要的。据个例子, 用户经常被要求按照月份输入他们的信用卡或者借记卡的有效日期(注: 这里意思是必须输入英文的日期,Jan, Feb, March之类的---海带博客),而不是简单的01,02,03等等。 这就强制用户将他们卡片上显示的数字转换成单词,却无法直接输入数字。

作为产品设计人员,对每个订购步骤都要仔细考虑,以使其更简单。 举个例子,预订过程中,所有的输入框都必须用户输入吗?(注: 如果不是必须的,请尽量简化。---海带博客) 。通过不断简化流线化订单流程,你可以将用户订购过程中的体验问题降低到最少。

5. 告知用户通常会产生的疑问的答案

在整个订购流程中,告诉用户通常会遇到的问题和疑问的解决办法是非常重要的。 举个例子,用户通常需要知道他的配送地址最多可允许多长 ?或者当用户需要输入生日的时候,告诉他为什么要收集他的生日信息等等。

仔细走一遍预订流程并在每个步骤问问你自己: 用户可能会有什么疑问? 在屏幕上给予用户提示,并且提供一个超链接到详细的帮助。

举个例子,Markts& Spencers 向用户解释了他们为什么需要输入联系人电话。

6. 高亮必填项

再也没有比填写完一个订单后,却因为没有填写必填项,不得不返回重新填写更令人恼火的事情了。在填写一个订单中, 必须非常清楚标识出哪些项目是必填的,哪些是可选的。 其实很简单,只需要在必填项前加一个“*”。

dabs.com 这点做的非常好,可以参考。

7. 让订购流程可变通。

通过让流程可变通, 用户不仅会感到更多的控制, 而且也不太可能遇到关键性的问题。 据个例子, 一些电子商务网站,当用户输入地址的时候,自动帮助用户查找邮编。这对于哪些非正式的或者新的地址可能会有问题, 因为这种情况下不会为用户返回邮编。 这就意味着,用户不可能简单直接输入地址就可下订单(我自己就碰到好几次这种情况了)。

一个好的例子,CD WOW! 已经将可变通放在了他们的订购流程中, 他们允许用户不用注册直接下订单。这就意味着那些对注册感到不适的用户,仍然可以下订单。

8. 让用户感到放心,安全(注:电子商务产品设计的目标就是容易,安全---海带博客)

很多消费者在线购买东西时,仍然不是100%放心。 他们常常担心提交了信用卡账号,却收不到货。因此努力去缓解用户的担忧,让用户感到放心是非常重要的。仔细考虑用户在订购过程中的每一步可能碰到的疑虑,并对这些疑虑进行说明。

例如Tesco 在他们的订购流程的支付步骤,向用户解释在Tesco购物是安全的。


9. 让用户下订单前再次确认

订购的最后一个步骤通常会让用户确认他们的订单。 用户可以看到订单的清单,包括他们需要支付多少钱,什么时候货送到。他们也可以取消或者提交此订单。最好不要拷贝亚马逊的"Amazon's "1-click" ordering system", 因为这样会让用户在没有检查和确认订单细节情况下,直接提交订单。比如配送地址和送货的费用等等。(注:处理配送地址错误的订单,或者因为配送费用导致退货的问题处理,成本非常高。---海带博客)

在订单提交后,应该显示订单的最终确认信息, 以便让用户知道他的订单是否成功。 订单最终确认信息应该包括:

* The expected delivery date 期望的送货时间
* The order number 订单号
* How to track the order online (if this is possible) 如何在线跟踪订单状态(如果可能)


10. 订单成功后,发一个确认邮件。

一旦用户成功提交订单, 需要立刻给用户发送一个确认邮件。 依据Jakob Nielsen's Alertbox, December 8, 2003, 一个确认邮件应该:


简明扼要


告诉用户他们想要的, 比如: 订单号。


应该象公司客服代表一样。

记住,在线解决问题比致电客服中心成本低得多。在线提示用户,比如告诉用户配送地址应该多长等等,将会大幅度减少客户服务的电话数量。

结论:

本文概述了改进电子商务网站的10个方法, 遵循这些原则不仅让你的电子商务网站更加可用,而且最终也更成功。 当然,通过这些原则,你只能走这么远,这就是为什么进行可用性测试是每个电子商务网站重要部分的原因。 遵循可用性原则并让真实用户进行可用性测试,你会发现你的电子商务网站不仅仅可用,而且更加有效。

策划