有啊、淘宝、拍拍的搜索框设计

由于在进行某产品的策划,特别比较了国内三个知名C2C平台的搜索框设计:

百度有啊

有啊搜索框

淘宝

淘宝搜索框

拍拍

拍拍搜索框

三个C2C平台的搜索差异较大,百度有啊首页的搜索框功能比较丰富,有三个搜索条件,而商品页的搜索框则是恢复到了最简单的“百度一下”。

淘宝首页的搜索框并没有列出产品分类的搜索条件,内页则是与百度有啊一致,有三个搜索条件。

拍拍的搜索无论是首页还是商品页,都偏向简单,首页是商品名跟商品分类两个搜索条件,内页则是个懒得做美工的“简陋”搜索框。

到底平台上的搜索框,该如何针对首页、内页、频道页区别对待,进行更有效的设计呢?

每次体验都不当自己是用户

本文首发于《Blogbus使用笔记》,原文链接:http://onblogbus.blogbus.com/logs/35703662.html

————————全文分割线————————

现在在互联网讨论产品设计,主流基本都是“以用户为中心(UED)”,没有从用户角度出发的设计被认为是不尊重用户的差劲设计。而我最近在撰写的《Blogbus使用笔记》博客则在副标题写上“每次体验都不当自己是用户”。这句话确实有些“非主流”,自然也就有一些同学对此提出疑问与不解。

体验时不把自己当成用户,是为了更接近产品设计者的初衷构思,理解设计意图。不同的设计意图自然有不同的设计方法,我们不能简单的从产品的易用或者美观上来直接对一个产品好坏下结论。例如在某社区发表评论时如果需要插入图片或表情,一共需要点击至少4次鼠标跳转两次页面才能操作成功,而如果只是纯粹的文字评论,操作上则是简单到只需要一次鼠标点击或者干脆纯键盘的CTRL+Enter组合快捷键就能完成。这样的设计,是设计者为了增加贴图的难度,吸引大家更多的使用文字来交流,提高每条评论的平均质量。具体的设计,如下图。这种故意而为之的设计,从用户角度出发很难去发现设计者的意图。

edit

在实际的工作当中,可能会出现人员的变动,甚至产品经理也要换人。这个时候如果新的产品设计师没能很好的了解上一任设计师的设计意图,则很有可能将一些原来故意而为之的好设计,变成盲目听从用户的简单易用却糟糕的设计。例如上面的图片中,新设计师有可能会在输入框旁边直接增加贴图的功能,而贴图操作变得简易之后,可能会使整个社区的文字交流氛围大打折扣。

之前写了《blogbus的后台操作易用性》一文讲述Blogbus后台操作在易用性上不做刻意追求是可以理解并接受的,道理其实就是今天这篇文章的主旨。基本上一个人能够成为产品设计师或者产品经理,都是具备一定的实力功底,尤其是有一定流行度的产品担纲者。尝试理解产品(原)设计者的设计意图,将帮助我们更好的进行产品改进以及新产品的设计。就说最近的鲜果改版,新的产品设计师显然没有对原设计师的设计意图有充分的理解,请看下面这张对比图

new_old_note首先是在旧版当中,可以很清晰的看到用户对收藏文章所添加备注内容,而在新版当中用户的备注内容则被弱化,从样式上来说更像是文章的简要而不是备注;其次,在旧版中,用户展开文章之后,备注内容依然显示,而在新版当中,一打开文章,则备注内容就此消失。不管是从原设计者的角度出发还是从用户角度出发,都是没能充分认识到备注(笔记)功能的重要性。当然,新的设计师也还是有些不错的改进,就是直接显示出了文章的Tag。

新的设计者带来的新设计自然都有其新的意图与优秀之处,然而原设计师的设计构思也理应得到尊重与理解,才能将原有的好设计改进成为优秀的设计,才不至于白白浪费了原有的好设计,才不会出现动辄网站改版就有一大批用户“呼天喊地要死要活”。

博客大巴首页的表现形式如何更好开往下一站

本文首发于《Blogbus使用笔记》,原文链接http://onblogbus.blogbus.com/logs/35531006.html,全文转载如下

——————全文分割线——————

这两天打开电脑的首要事情就是打开www.blogbus.com,刚开始看的时候,没能看明白首页这“早班车”“午班车”“玩物频道”“行者频道”的到底是什么,虽然整个页面看起来是十分的简洁舒适具备美感,可我这多龄网虫就是一时没能看明白。还有十分好奇的是每个频道都有个小标题,后面跟着“[某某]的博客”,点击这个小标题居然又是到一个新页面只显示一小段简介,更是百思不得其解。

所谓功夫不负有心人,我每次体验都不当自己是用户,于是我在多次的点击之后终于弄明白这一切都是怎么个一回事了。目前首页左侧的格式基本是如此。

[某天] [早/午]班车

    [某频道]

[某标题]-[某人博客]

     [简介]

[某频道]

[某标题]-[某人博客]

    [简介]

基本上就是以时间作为班车的单位,一天就两班车,早午两班,晚上不上班。而每班车上面都有四个频道,大概也就相当于普通班车上面一排有4个座位(也就是4列),每列座位可以有一篇文章的简介,附带这篇文章作者的博客链接。这种排版思路跟杂志出版十分的接近,同样是选择少数优秀的文章经过精美的排版推送给读者。可能是Blogbus内部的某工作人员是杂志社出身,这大概也是Blogbus会做《城客》的原因(本人猜测猜测)。

说回到Blogbus这种首页的内容表现兴式,且不说好坏,我尽管说说我个人的选择方案。我会让日期重新回归时间属性,让原先的“频道”变成一辆“大巴”,在一天内可以有多班“大巴”“驶过”首页,每辆“豪华”大巴上面只乘载少数(1~3)名乘客(有客即走),落实到实处,就是下面的表现形式:

[某天]

[玩物班车]

[某标题A]-[某人博客A]

     [简介A]

[某标题B]-[某人博客B]

     [简介C]

[行者班车]

[某标题]-[某人博客]

     [简介]

在上面这种表现形式中,每天会有多辆班车,每辆班车都有其特色,专门搭载不同的乘客,而每名乘客(博客)会带着自己的车票(文章标题),在车上描述自己的内心世界(简介)。

事实上我也不能肯定我说描述的表现形式会带给用户(读者)更好的体验,但现有的表现形式还是十分值得在设计上再琢磨琢磨的。我们在公车站等大巴时,车子都是从左边开往右边,那么在宽屏横行的时代,我们是否可以让首页不是从使用右侧滚动条从上滚到下,而是使用底部滚动条从左滚到右,就像一辆个人传媒早班车从我们眼前开往下一站……

鲜果新版测试反馈

本文写于2009年1月15日,收到鲜果内部人员的邀请参与了鲜果网的新版内部测试。文章在鲜果发布新版预告当天(18日)进行了重新编辑,回答部分是鲜果某设计人员所做的回答。

1.无意于怀疑或否定鲜果设计师于产品经理的精心设计,但忍不住提出一个问题,就是这个“首页”(beta.xianguo.com)是要做什么的?

鲜果首先应该是作为一款阅读器出现在这个互联网世界中,当然我们应该允许其接下来的发展中有新的定位或者索性没有定位,所以就这个新的首页,很想听听鲜果产品经理和设计师们对此是如何构思的,愿闻高见。

个人意见是为何首页不是原先的阅读器?

回1:这里就是想给用户一个进入各处使用鲜果的信息引导。关于进入阅读器,我们保留了原来的可以设置默认首页的操作,用户可以进行个性设置

2.新版首页从整体界面来说,整个界面布局太过中规中矩,没有突出点,一初始不晓得应该先看哪?(这个问题我不敢确定其他人会不会跟我有一样的感觉)

回2:恩,有人也提到这一点,就是没有重点了。呵呵,这是我们忽略了,陷入到自己的需求习惯去了,这两天调整下。

3.我相信大部分鲜果用户借助阅读器提高了阅读量和效率,可是有多少人在鲜果上有比较频繁的社交活动呢?例如发站内短信、相互关注动态、彼此订阅对方的推荐,我虽然没有官方的数据,但猜测除了高端用户(IT人士)外很少人会这么做。可能鲜果网会想在此方面发力,但是新版首页右侧顶部的“推荐好友”则让我十分好奇,就我个人帐号所看到的情况,我根本不认识这些人,也不知道鲜果为何会推荐这些人给我,这让我很困惑。
为何不在这个地方,把“鲜果猜”放出来?这是我喜欢的,但鲜果似乎一直没发力或者没做好的一个功能。

回3:鲜果原本确实很少社交方面的功能。其实这次强化好友分享这块,也不是为了SNS而去SNS,是想给用户另一个较好的获取信息的方式,所以增加以人为节点传播信息的渠道。关于“推荐好友”这里我们预设是将分享的信息质量高,分享的这方面积分较高的用户推荐出来,推动人的节点。但匆忙中现在实现的质量还是不很够。。这两天也会调整。关于“鲜果猜”,其实我们也很喜欢啊~!呵呵,只是这个功能其实一直没有做很完备,实际使用效果还不行,所以想真正完善了后再融入。

4.在一个阅读器加好友,对用户来说到底有何价值?
除了原本就认识的好友彼此关注对方的阅读情况之外,两个毫不认识的人为何要在一个阅读器上相互加为好友呢?
为什么我们不很直接的告诉用户:“添加志同道合的好友,帮助我发现更多合我口味的优秀文章

回4:呵呵,对头,就是想达到这样的效果的。可是我们的引导没有做好:P。。。  关于陌生好友这点你说到电子上去了,这句话借鉴下,我看看怎样调整~呵呵

5.右侧下方的“推荐频道
每个频道都会有若干标签,这些标签的样式被设计成了带有方向的导航形状,这个细节应该说是不好的。标签的设计毕竟不是导航,建议将样式改为简单的方框就行,不要带有方向性。

回5:这里的标签样式,其实是想表现这是个标签。。囧。。呵呵,看来也是出现偏差误导了。。现在的标签都是一套样式,渗透在各个地方,我综合琢磨下,看看如何调整~

6.关于热文(beta.xianguo.com/re)
不明白为何现在无法在当前页面直接阅读全文,点击标题都是弹出新页面。虽然我是使用遨游浏览器,有标签页管理,但是在热文阅读中,几篇文章下来我就要弹出几个新标签页,再去关闭几个标签页。且不说多了操作,耗费了多余的重复加载,就说对阅读者的心理影响,阅读过程中出现页面的切换,是非常破坏阅读连贯性的。
我举个比较夸张点的例子:
在图书馆看杂志,你一页一页的往下翻(操作成本类似电脑操作上的鼠标滚轮)不会觉得有太大困难,也很随意轻松,你看10来篇文章大概也就是翻个7、8页(在鼠标上滚7、8次轮)。但是如果你现在看10来篇文章却要不断的去换7、8本杂志(打开新页面,之后还得关掉页面),阅读完之后再放回原处,估计读者会有点不太乐意吧。

回6:恩,这里确实存在这个问题。不过从最终页再切回到热文,再进入其他文章,再切回热文,用户同样会浪费不少时间。所以当初考虑这个问题的时候参考的是一个惯例,同级别的,比如从热文点击好友分享,就会原地跳转;不同级别的就采用弹出新页面的方式了。

8.“好友分享”这次特地放在的顶部的导航,大概是鲜果想要重视社交方面了,这个暂且不讨论。
说说好友分享的页面,每个条目都跟热文的一样,给出了标题、来源、摘要等等。这里想说的是,是否有必要输出摘要??
我们阅读一个未展开的简单条目,要判断其是否可读可以从标题跟摘要还有来源来判断,尤其是摘要更加能够让我们清楚文章的质量,摘要帮助我们过滤文章。但是既然是好友分享,其实就已经经过了一层过滤了,所以我建议好友分享页面,不必要输出摘要,可以给一个更长一点的好友分享列表。

回8:恩,这个说的非常好!确实是,我们对这点没有深入思考了。。、我好好琢磨琢磨。。。

PS:既然鲜果帐号能跟饭否、叽歪等服务绑定,其实也可以考虑在好友分享中将微博客的若干条最新信息放出来。呵~可能做着做着就是一个friendfeed了~

回PS:呵呵,其实只要用户有这样的需求,我们也是可以考虑的。只是近期是没时间考察和进行了~

分享、推荐、收藏行为在产品设计中的理解与应用

受邀参与鲜果网的内测,与鲜果某设计MM的聊天时我提出了3个问题

  • 用户A看到一篇文章,他希望朋友B也能来看看,这个属于“分享”还是“推荐”?还是有个交集?
  • 用户C看到一篇文章,认为写得精彩绝伦,希望能以后继续再看多一遍,这个动作是“收藏”还是“推荐”,还是有个交集?
  • 用户E看到一个新闻类的文章,是跟朋友F的工作相关的,想F也看一看,这个动作是“分享”还是“推荐”?

对此3个问题,我的思考是

  • “推荐”要解决的一个问题是读者对文章的评价,而评价是否会对文章本身产生一个“权重”的影响,以及推荐行为带给用户的后续价值(好处),例如猜测该名读者的兴趣并推送相关内容提高阅读效率
  • “分享”要解决的一个问题是让用户清晰的感知自己的分享是要分享给谁,如果连分享给谁这个问题都糊里糊涂的,那分享有何意义?
  • “收藏”要解决的一个问题是要如何帮助用户收集信息并方便管理

我画了下面这张图来表示“推荐”、“收藏”、“分享”三者关系

stf我认为“推荐”跟“分享”存在大交集,“收藏”是属于不对外的独立行为,图中“收藏”是放在一个独立的房间(空间)内,这个房间有一个门,你可以选择关起门来收藏,或者打开门来收藏,但不管是打开门还是关起门来,你的收藏行为都不会太过影响他人。只有“推荐”跟“分享”才是至于众目睽睽之下。

事实上,“收藏”、“推荐”、“分享”三者的措词在我们这里更多是为了方便讨论以及不引发歧义,而在具体情况下措词应该有所改变,例如在阅读器中,“分享”改成“告诉我的朋友”可能会更加的合适。

上面所做的思考主要是针对阅读器这一产品,其他互动类网站可自行思考并参考。下面我们来看看豆瓣是如何处理“收藏”、“推荐”、“分享”的。

以电影举例,每一部电影的页面都会有“想看”跟“看过”两种收藏行为,我将这理解为一级收藏,而当你点击“想看”或“看过”之后你就可以为其输入标签(tag),这个我称为二级收藏。如果你是“看过”这部电影,你还可以对其进行星级评价,这个星级评价就是“推荐”,从1颗星到5颗星分别表示了5个等级的推荐力度。在豆瓣中,默认情况下你的每次收藏都是一次分享行为,你在豆瓣中的好友会收到你的分享,可是当你勾选了“不让别人知道这次收藏”之后,你的收藏行为就会变得更加纯粹,不会对他人造成任何影响,也就是上图中的“关起门来”。

douban_stf 请点击看大图

 

PS:大四学生求职待业中………………欢迎联系gmail

面具系列(原创)

今日终于回到家中,准备过冬过年~

放上近期所做的面具系列。

用途多样化,自行发挥。

mianjus

豆瓣光箱设计

Think about usability (1)一文中看到作者提出一个关于豆瓣光箱设计的观点,作者Leechael给出了两张图片

上图是豆瓣现有的设计

下图是作者提出的改进建议

作者Leechael在其文章中这样说到:

第二幅图中的目标是不是比第一幅图中的效果更明显、体验也更好?在不仅是有一个条目的页面中,针对一个特定条目进行操作,光箱效果(lightbox)明显不是一个很好的选择

我特地拿别人的文章来讲,很自然的我是要发出不一致的声音。我的观点是豆瓣目前的设计是更好的,当然可以再更好一些,而第二张图片所演示的设计,虽然不错,但在体验上实际并不那么“乌托邦”。

建议提出者Leechael的立足观点是“针对一个特定条目进行操作”的设计,固然从静止的截图看确实如此,但如果从用户完整的操作点击过程来看却不是了。“光箱”从静止状态下是看不出对哪一个指定条目的操作,但用户在操作过程中知道自己刚刚点了什么,“光箱”设计让用户更加专注于当前与接下来的操作,反之这个新提出的建议则可能会让用户在接下来的设计中更容易分心。

交互体验设计之难,就在于交互是个动词,体验设计处理的应该是一个动作,而不是一个静止的平面。交互体验设计之美,也在此处。

一家之言,欢迎引用交流。

wordpress主题:ShowZZB 开放下载

12月19日我的博客就已经使用了自己原创的主题ShowZZB,但由于主题“未经过实践的检验”,不敢轻易开放下载。

今日,在2008年的最后一天,ShowZZB开放下载,欢迎大家使用,使用上有问题也可发Email 跟我联系

模板特色:适合个人品牌展示

使用注意:

1.上传showZZB文件夹到你的博客模板文件夹中(如果是yo2用户请直接上传zip文件)

2.请在你的博客管理后台中新建一个页面标题为“首页”,并将页面模板从“默认模板”改为“ShowZZB”。同样也是新建一个页面,标题为“最新文章”,此页面无须修改模板。

3.在博客管理后台->设置/阅读中,选择首页显示静态文件并通过下拉框选择刚才新建的“首页”,最新日志显示在“最新文章”中。

4.在博客后台自由撰写“首页”页面,可以是个人介绍等等

下载链接:

showzzb.zip

鲜果阅读器中的标签收藏

未命名-1

用户:任意用户

页面:阅读器

情景:想收藏一篇文章,方便日后重新阅读或者使用,添加备注可以更好的识别文章,由于这部分的布局原因,写下一段备注之后我已经迫不及待的要点确定了,却遭遇这个弹窗

建议:实在没必要在这个地方强求用户输入标签了,因为本身就允许无标签、无备注的简单收藏

类似情景举例:在冷饮店有简单的原味雪糕A,也有覆盖了多种水果的雪糕B。由于想吃雪糕B中的奇异果跟草莓,顾客就点了雪糕B,但最后吃剩下香蕉。营业员强行要求顾客把香蕉吃了,理由是顾客自己点的这款雪糕。

 

PS:该文已送至鲜果团队

鲜果:未登陆状态下的登陆与注册设计

"写在前面"的写在前面,下面的内容全部是发送给鲜果团队的邮件,除了部分图片出于排版的原因调整了大小.

写在前面,为了表述清楚,邮件中插入了多幅图片,加载可能费时,还望耐心等候图片加载完毕。以下观点纯属个人建议

————————————————————————————————————

一、 未登陆状态下,打开鲜果首页(http://www.xianguo.com/)可以看到下图

xianguo-1

点击“阅读器”(http://www.xianguo.com/login.php)会自动跳转到http://www.xianguo.com/login.php?rurl=/reader/,如下图,只是一个简单的登陆窗口,连一个“注册”链接都没有,设想潜在新用户这个时候会是什么心情?

xianguo-2

建议:将“阅读器”的链接跳转到http://www.xianguo.com/account.php 的类似页面

———————————————————————————————————

————————————————————————————————————

二、 既然/account.php 可以只有4个输入框就完成注册,那么/register.php为何就需要6个输入框外加9个复选框来完成注册?

xianguo-3 VSxianguo-4

是否需要依靠9个复选框来知道初始注册用户需要哪些资讯并作推荐呢?我们是否可以在9个领域当中各自挑选一个代表RSS源推送给用户,并利用“醒目”的小提示教会这个“新用户”如何删除不需要的订阅源?这个就跟网络游戏中的NPC的道理是一样的,当用户快速完成一些基本操作,也可以获得一定程度的成就感。(Update:鲜果阅读器侧栏列表的右键菜单功能让一切都变得那么容易)

———————————————————————————————

——————————————————————————————

三、 同样是未登陆状态下的首页

对于一个没有丰富实际内容的页面,我们是否需要使用超过一屏的空间来展示“那丁点儿”内容呢,为何不把所有的内容都放在一屏里,并把能去掉的都去掉?就说最底下那个大大的注册按钮,我看了都忍不住要注册,可是却被放在了页面最底下。

下面是我自己修改过的未登陆状态首页图,对比下现有的首页图

xianguo-5 -->图片可放大查看

VS

xianguo-6

我所做的修改主要有以下几个部分:

  • 去除“首页”与“阅读器”两个链接,原因是本身就是首页了,无须多此一举加个“首页”,而登陆状态下的用户打开首页是默认跳到阅读器界面的,所以自然也不需要“阅读器”了。
  • 将“登陆”修改为“登陆进入阅读器”
  • 去除底部“鲜果热文”和“博客榜”等四项,原因是作为不熟悉阅读器的人,这四段文字既不能将阅读器描述清楚也无法激发好奇心
  • 去除“大苹果”图标,这个以前是可以作为博客秀的展示,但后来不晓得鲜果团队为啥取消了博客秀,直接使用一个GIF图片替代,估计是没太多人关注吧,所以我把这个也去掉,免得“浪费地方”。
  • introList这个UL中的“鲜果阅读器”“阅读趋势”“自定义快捷键”三张图片本是很好的展示,却因为hover样式做得不够突出,使得许多人不知道这三个是可以点击的。于是我将这个部分移动了下位置,并且更改了三张图片各自的大小,使其更具吸引效果。同时建议鲜果将这三张图片的hover样式图片在原有基础上加上标题文字。
  • 将注册按钮放在了中间最醒目的位置,并且顺着箭头方向,是鲜果阅读器中原有的一句“好友博客、焦点新闻、股票动态等网址,万千资讯随取所需”。个人认为这句宣传语写得非常优秀~

——————————————————————————————————————

个人观点阐述结束

期待鲜果UI设计师的回复

1 2 3 4 5