标签归档:tab页签

说说那些商城的导航

简单说,设计就是要解决问题,这是设计的本质与落脚点

电子商务网站的主导航设计是整个网站最最最核心的模块之一。导航需要解决的问题就是,告诉用户如何快速准确的到达他想要去的任何地方。

在所有电子商务网站中,Amazon(注意,不是卓越亚马逊)的导航设计向来是所有电子商务网站学习与仰慕的对象。Amazon的导航在经过数次变迁之后被从顶部挪到了左侧,从横向Tab变成了纵向Tab。Amazon的这种Tab页签式导航,相对与卓越亚马逊的标签列表式导航而言缩短了主导航的高度,在第一屏的时候就能把所有商品大类全部暴露出来,降低了用户的寻找成本。因此,这种模式的导航被越来越多的电子商务网站所接受。

大约在1年前,QQ商城改版,借鉴了Amazon的这种导航模式,同时做了创新式的扩展。QQ商城在每个Tab页签里不仅展示了二级类目,同时还展示了品牌,这使得整个主导航从纵向上进一步缩短同时往横向上扩张。
随后而来的京东商城淘宝商城(扩展有分类推荐与品牌推荐)以及淘宝电器城纷纷相仿并采用了这种扩展式的Tab导航模式。

不过,我觉得这种创新在某些交互细节上有待改进,我们先来看一下QQ商城的主导航截图:QQ商城的这个主导航在Tab页签的标题上显示的形式是“一级分类标题+二级分类推荐”的形式。
从这个表现形式上看,“运动鞋”、“棒球帽”是2个标签,我这么认为是没问题的吧?

我们假设这样的一个场景:你来到QQ商城,很明确的就是想购买“棒球帽”,你肯定是会直接奔去点击“棒球帽”(注意,是点击)。因为这个“棒球帽”长的跟一个标签一模一样,我们之前的Web使用经验告诉我们,标签就意味着是带超链接的,是可以点击的。可是,当你把鼠标移到“棒球帽”这个标签上的时候,你发现,他是个伪娘!
你点击了半天,发现没有反应,你再仔细一看,他引导你打开了整个“运动户外”下的二级分类….这个时候,你的鼠标需要在做一次长途奔袭,去弹出来的弹层里寻找“棒球帽”,当然,你还得小心点别奔袭到界外,不然整个弹层就关闭了,你需要再来一次(图中虚线)。
这个场景里,我们经过几个动作:1、准备点击;2、无数次点击后觉醒;3、鼠标小心翼翼的滑过弹层去寻找;4、点击。
P.s:其实,图中这个例子我们在弹层里也找不到“棒球帽”,因为它被变异成了“运动帽”?

我们再来看京东商城和淘宝电器城(注意,不是淘宝商城)。其实跟QQ商城差不多,只不过样式上做的难看点….当我目标明确的奔着“洗衣机”去的时候,鼠标所到之处弹层出现了一级分类“大家电”下的所有二级类。同时,“洗衣机”、“平板电视”这2个处在Tab页签标题上的推荐二级类被覆盖了。
这个场景里我们经过的动作:1、准备点击;2、发现要点的家伙没了,开始寻找;3、点击

从这个意义上讲,我认为,京东商城和淘宝电器城的这种处理方式要比QQ商城在体验上更好。QQ商城在鼠标Mouse on之后给了我2个道路:点击,拼命的点击、鼠标奔袭到弹层;而京东商城和淘宝商城直接覆盖了之前那2个长的像标签的家伙,我只有一个道路:鼠标奔袭。
有的时候,给用户越少的选择更能让用户集中起来完成目标任务

OK,案例观摩完毕,分析一下为什么会出现上面的问题?
很简单,我觉得就是没有把一个东西做到极致,随心所欲的使用表现层的东西去覆盖了框架层与结构层的事情。展示在Tab页签标题上的那些(洗衣机、平板电视)其实并不是标签,但是,他们在展现上跟标签一模一样(京东使用了灰色字体,说明他们意识到了这不是标签,但是我觉得还不够)。

解决方案?
请参见Amazon的做法。
把那些长得像标签的家伙砍掉,使之不具备标签的属性,换成文字描述就OK了。

最后,几句题外话:
1)不知道京东商城暴露在每个Tab页签标题栏里的那2个二级分类是怎么来的?我仔细看了一下,似乎是程序直接调用而不是经过人工编辑的?如果是让程序来调用这个黄金地段的内容,那就真太可惜了。
2)京东商城在首页左侧主导航里的一级分类都是可以点击的(如数码手机),但是在全部分类页面却变成了不可点击的,Why?
3)QQ商城暴露在每个Tab页签标题栏里的那2个二级分类似乎是经过编辑的,但是这种标签式的展示让我很挫败,比如我想买个棒球帽,结果找了半天只发现个类似的运动帽….
4)最后, 大熊哥主导的淘宝商城在此次主导航比拼中最终胜出!

给有啊社区拍一砖

09年5月,有啊社区正式上线。
至此,百度有啊的整个产品线基本排列完毕,搜索、平台、支付、社区4大支柱产品上线,百度的C2C交易体系布局基本成型。做C2C必备社区,这基本上已经成了行规,因为就中国人的网购习惯来看2个重要的因素就是逛、砍,这也是为什么很多人
喜欢去淘宝而不去B2C的原因之一。社区的启动可以直接带动平台的活跃。
不过,有啊社区在产品设计和运营上还是存在一定的问题,今天就给拍上一砖。也许对,也许不对,您且先看着:

不伦不类的导航
有啊社区采用了一个高达105px的导航条,并且为了让头部显得平衡使用了一个通栏的绿条做为一级导航,其余页面宽度为950px。如此高度的导航设计,在所有百度的产品中都是从来没有过的。

仔细再看一下这个社区的导航,先不要着急点,你觉得他是一个tab页签吗(Via)?
很显然,不是!这个导航的做法盗用了tab页签这个概念,做了鼠标触发效果,但是却没有tab现象。
在每个一级导航下都包含有最多6个最少3个的二级栏目,这些栏目应该是有很明显的层级包含关系的。我们可以看到,在视觉上他们的设计师在每个一级栏目之间 划了一道很轻的线来做分隔,但是这种分隔几乎起不到作用。每个用户在打开这个页面的时候第一个感觉会是:“社区首页”这个栏目包含了下面9个子栏目,因为 这10项属于一个视觉层次里(背景颜色一致,灰色)。按照导航设计的基本视觉原则:同属于一个层级的栏目的背景颜色是一致的,也是需要和其他未包含进来的 属性区别的。

我们来比较一下另外一个社区的导航,为什么19楼可以这么放呢?很简单,因为19楼的“公共会所”栏目下面就是包含了和他在同一个视觉层级里的那些子栏目,所以,他可以做成这样,把其他的4个栏目作为一个标签来使用。
而有啊社区里则是每个一级导航都和下面的二级栏目存在明显的层级关系,所以,整体上看, 他的导航很混乱。实际上,这种每个一级栏目下都含有二级子栏目的导航设计,有啊社区完全没有必要采取这种形式。

再看有啊社区的子页面里的导航。假如你现在点进了“消费电子”这个页面。不要思考,你知道怎么以最快的速度回到社区首页吗?;你觉得“全部分类”这个地方,你是点击呢?还是鼠标触发呢?
是的,他们的设计师在帖子分类栏目上面加了一个面包屑导航,呃,如果不许思考的话,你能看到这个地方吗?我问过几个朋友,发给他们这个页面的时候他们都提出了一个疑问“他们没为我设计后退按钮?我怎么回到社区首页?”
也许点击页面左上的logo是回到社区首页的最快方式,那,我怎么从社区回到有啊首页呢?呃,这个,确实没找到地方……
我的感觉是,有啊社区的设计师正好把社区首页的导航和二级页面导航的表现方式搞反了。社区首页的导航不是tab页签,应该用标签的形式,那么就不要搞鼠标触发,直接点击;而二级页面的“全部分类”则是需要一个鼠标触发的。

不一致的头部
不知道他们为什么把“购物车”、“我的收藏”这2个原本一直放在有啊所有页面头部左上角的链接移到了社区搜索框的右边?是感觉搜索这个地方太空了,还是因为有数据显示在社区里这两项的利用率很高?
我没有数据,如果没有其他的特殊原因,我想这个做法是很不友好的,常用的功能应该摆在常用的统一位置上,当用户需要的时候他可以娴熟的在老地方找到他,这种改变是很不友好的。
也有一种可能是,把这2个功能移动到搜索框的右边,同时搜索框左对齐,这样使得搜索框更加突出,以显示百度强大的搜索功能。不过,如果是这样的话,为什么不干脆直接用首页头部那个简单到极致而且强大的搜索设计呢?这种做法只能是让搜索的地位显得反而很尴尬了….

让人郁闷的搜索显示
有啊社区的搜索结果,处理的很简单,直接加载到网页搜索里了。
第一次搜索的时候我以为我点错了按钮(社区的搜索按钮有2个…),再点还是在网页里显示的结果。这个显示有点郁闷,从用户体验上讲这叫“没有告诉用户在什么地方,并且也没有告诉用户怎么回去”,这个太不友好了。百度所有的单一产品搜索都是在自己的频道中进行的,我们可以理解是因为有啊社区刚上线,没有 开发出这个频道,那么,至少在搜索结果的显示上给用户一个友好的提示如何??
这种类似于把google的网页搜索嫁接到个人网站的做法实在让人无法接受,每次点击搜索的时候我都觉得我搜索的不是这个网站的内容而是整个google的内容

无法传播的官方博客
百度有啊的官方博客是目前我见过的唯一一个使用摘要输出feed的博客。
使用过RSS的同学都很明白选择摘要输出就意味着你的内容无法被很好的传播。当然,类似新浪博客这样的强制名人博客摘要输出或者标题输出的流氓做法另当别论。
选择摘要输出可以一定程度上的增加点击率,但是也很自然的把自己困在了百度空间这么一个很小的小圈子里,根本没办法让你的内容走的更远。看看官方博客下面的评论就知道了,活脱脱一个明星空间的景象!已经被拉入了百度空间水的不能再水的泥潭里了…..

不顾及用户体验的营销活动
类似抢购这样的社区活动是社区运营中最常见的手法,百度有啊最近也推出了一个“1分钱抢购限量T恤”活动,活动说明里写“所有T恤将于7月27号统一进行快递配送,请购买用户耐心等待”。统一发货,这个做法太不明智了!
既然是百付宝一分钱体验店的活动,就意味着这个活动的参与用户80%是首次接触有啊的用户。这个统一发货的做法是否就会给这些新手用户这么一个感觉,我在 百度有啊买东西,都是需要等购买人数达到一定数量的时候(比如200件),有啊才能统一发货给我。那,这个时间成本对于一个新手买家来说显然是无法接受 的。
快速、低价、方便一直是网购产品的代名词。在运营上看,有啊更应该利用体验来展示和强化这种表现,而不是仅仅用一个低价疯抢来引得每天一大票人在某个特定的时间点去疯点某个页面,搞的倒是像在做压力测试了?
我的建议,不要再搞什么统一发货,也别再让买家耐心等待,新用户的耐心都是非常非常低的!既然已经是活动了,又何必在意那么点开销,分批发货没什么大不了的!

呃,我的砖拍完,下面大家开始拍我吧,如果有不对的地方,欢迎拍砖!

tab式广告模块如何设计?

当有多个窗格的内容且每次只能显示一个窗格,同时各个窗格之间的内容不需要相互参照的时候,可以考虑使用tab式标签来展示。自从亚马逊开了标签的使用先河后各类网站风起使用之,因为它的使用既优化了大量信息的展现同时也很符合日常生活的使用习惯(tab其实就是一个现实生活的隐射)。
于是,在寸土必争的网站首页首屏的位置的大量图片广告的展示形式就非tab式莫属了。搜集了一些tab式广告模块的设计,来探究一下tab式的广告究竟如何展示更好:

1、最常见的形式之一:标签位于图片之上,以数字1,2,3标明,当标签被选中后该标签高亮显示

2、常见形式之二:标签页在右侧,通常为缩略图的形式或者文字链的形式。

3、标签+完整标题的形式

这张来自我朝的
政府门户网站,标签页的标题在整个模块的下方,当标签被选中后以闪亮的形式提示,标题以蓝色文字链的形式展示,提示比较清晰。(PS,为嘛我朝的政府门户站木有favicon呢?)


这张应该属于2的一个变种?把右侧的标签挪到了下面,标签与图片分离,完整的标题+标签的形式 。标题黑色显示,我以为是不可点的,但是实际上人家是可以点的

下面是几个常见形式的拓展:
4、带播放按钮的tab式广告,你可以点击左右2侧的三角切换下一个


5、标签位于右侧,大缩略图+完整标题形式。这张采自沈总的1912.cn当时我就震惊了,这个tab太强大了,和左侧的MM一样大,哇咔咔。

说一些我个人的感受:
1)第一种最常见的形式把标签直接放在图片的上方,可以很充分的利用那个宝贵的模块,AD图片的面积被扩大,视觉冲击有可能提升。
2)第二种形式便于展示其他3个tab的内容,不至于让其他3个AD在第一眼的时候被忽略掉,毕竟有很多用户是连那1.5秒的自动切换时间都不愿意去等的
3)标签+标题的形式特别是第三种的第2个那样的,那个标题时常会被用户忽略掉,相对图片而言下面那个看着不像文字链的文字链确实不能引起用户的注意
4)第四种形式看似是加了酷功能,出发点是想给AD翻页带来习惯,但是那个2个三角恰恰有转移用户注意力的嫌疑,从用户体验上看我觉得并不是很好

不过,话说回来,广告最终是以点击率来论成败的而点击率的绝大半来源是广告的内容。我敢说,上面这些AD中肯定是最后一个的点击率最高,因为那个MM实在太大了太诱人了,嗯,还有那个标题也很诱人…..