十一月 26th, 2009
4 comments »
Protonotes，顾名思义，是由prototype和notes和两个单词组成的合成词，翻译为“原型注释”，之所以加上在线二字，是因为产品团队制作原型时可通过Protonotes官方提供的数据库和自己设定的数据库，把相关的注释文字写进数据库、团队协作查看，让文本注释在线随时随地查看，方便沟通需求的好工具。
使用Protonotes也超级简单，不须下载任何工具，通过网上注册，填写邮箱地址申请团队协作码（groupnumber）。注意查收来自info@protonotes.com的电子邮件，内容一般如下：
Welcome to Protonotes!
Using Protonotes is easy. Your Protonotes group number is EkfN4pUZF8BG. All you need to do is copy and paste the code below into the <head> of any page of your prototype:
<script src=”http://www.protonotes.com/js/protonotes.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var groupnumber=”EkfN4pUZF8BG“;
</script>
……….
这个回复邮件目地是告诉申请人两件事情：
一是团队协作码EkfN4pUZF8BG，这应该是随机并唯一的。任何团队成员共享一个团队协作码，便于统一使用查看；
二是在原型（如axure生成的index.html)插入 <script></script>JS代码段，便于加载Protonotes；
这里要说明的是JS代码段必须插在原型html页面的<head>和</head>之间，并随时保证网络链接通畅。
下面是官方的测试页面和截图 http://www.protonotes.com/test-protonotes-out.html
团队任何成员通过嵌入的Protonotes导航，可以在原型页面任何位置新建、拖曳、查看备份注释标签，并传到Protonotes给用户设定官方数据库，为数据安全隐私起见用户自己也可以设定数据库来同步注释文本。无论如何，团队成员只要通过以下链接都可以查看注释文本（备注：其中groupnumber是都各自不同的，这里是阿石自己申请的）
http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG
如果是自己设定的数据库，Protonotes会在设定数据库完成后分配一个privetedb码，具体查看
http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG&privatedb=SdT68P9ab0yp
AxureRP本身是带有注释功能，但在展示透明效果略差以及缺少注释同步备份功能上，虽然有团队share功能，但在给领导演示、产品展示方面Protonotes有可乘之机～稍微不足的是Protonote不支持中文，中文打注释时会出现乱码。另外我自己利用Protonotes的注释效果，也欢迎各位有兴趣的同学在上面打注释，：）http://www.ashnotes.com/experience/i-dong-game-center/
十一月 5th, 2009
1 comment »
【背景知识】
电子商务在中国各地四处开花，深度运营是任何B2C团队日常工作的必备思想，根据市场策略、产品特征，需要设计师制作各种各样的专题页、促销页，这里同统称“广告页”。
面包屑导航，又叫层级菜单，之所以叫面包屑导航，是起源于格林童话中hansel 和 gretel仍在森林的面包屑踪迹，而防止自己迷路。可用性大师Jakob在起官网 《面包屑导航在主流网上商城广告页的现状》
广告页作为各大网上商城搞活动运营的必备良药，其在网站的层级结构中一般为“首页 > 广告页”的二级模式，为了维护管理，可能还需要“首页 > 专题 > 广告页”等更多层级模式（这一点可在各大网站链接结构可以看出来）。然而广告页作为市场领导宏伟战略的高地、页面设计师肆意发挥艺术才华的自留地，面包屑导航却甚少得到二者的青睐，如：
看到这些主流的网上商城，还有无论是淘宝还是鼎鼎大名的amazon，广告页都没有标识面包屑，让人甚是不解。那不禁让人发问：广告页不需要面包屑导航吗？
【为什么需要面包屑导航?】
Jakob在文章指出，80%美国年度获奖的网站都使用了面包屑导航，而之所以使用，无外基于以下几点：
- 显示用户浏览网站的当前位置
- 一次点击直达网站结构最高级（首页）
- 在用户可用性测试中，用户使用面包屑导航没有发生问题
- 占页面很少位置（潜台词：既然很少，为何不用呢？）
【网上商城广告页是否需要面包屑导航?】
按照Jakob说法，究竟是否使用面包屑导航，起实质是偏重网站结构与还是照顾用户浏览行为问题。试想一个用户刚来一个网站（首页），或才浏览了一个页面，对用户来说“我在哪里并不重要，重要的是网站能给我带来啥”，这时网站结构是主要问题，如何在页面设计中给用户造成很好的逻辑清晰、来回自如的页面效果是用户期望的；而当用户逛了N个页面，从A目录跳到B目录，从公告跳到专题，来来回回，象“hansel 和 gretel迷路”的那样的用户体验感就会产生，此时照顾用户浏览行为就成为主要矛盾，面包屑导航就成了必要。
【小结】
广告页作为一个单独页面，来源路径无外是网上商城首页广告、营销电子邮件、第三方网站广告，在此之前可以说用户浏览前置路径是NULL，用户在此网上的浏览轨迹几乎是零，如何给用户呈现最佳页面效果是主要的，因此“占用空间、破坏美感”的面包屑导航是可以缺失的。但若是方便用户查看历史广告页管理，由于在在“首页>广告页”中加入了“首页>广告列表页>广告页”要给用户呈现列表，此时面包屑导航则不可缺少。
十月 20th, 2009
10 comments »
淘宝今天正式公测它的站内搜索.在“大淘宝”的思路下，之前风传淘宝会推出一款搜索引擎以和百度抗衡，但就现在发布的公测效果来看，淘宝搜索还是面向于淘宝的卖家和买家，而不是所谓的”通用搜索引擎”.也有人称是独立搜索，由于采用的是二级域名，我们依然可以将其称为站内搜索的升级版。由于上次在《谈谈站内搜索》中提到淘宝，通过站内搜索的易用性、信息设计方面对其深入探讨，分享给大家。
1 提升搜索易用性，挖掘技术也很重要
通过比较旧版的淘宝站内搜索，和新的升级版的淘宝站内搜索，会发现一些有趣的事情。例如以“魅族”关键词为例，旧版得出的结果为“在当前分类中共找到“魅族 ”宝贝1394件” ,而在新版中得出的结果为“找到相关宝贝27286件”。由此可见在搜索数量在新版比旧版“挖到”得更多。在精确性的比较上，旧版的搜索原理是在“魅族”其所属分类上进行检索，搜索前几项都是魅族的MP4产品；而在新版中出现的则是人气极高的M8，当然也是“装作用户”的我想要的。因此，在搜索的数量和精确度上，新版提升了原版站内搜索的易用性。另外对比二者的链接也有意思：
以上是以“魅族”为关键词作为搜索案例，能辨析出淘宝搜索的技术转变 ，如果对比于百度的链接，则淘宝的志向可不容小觑。
百度搜索：http://www.baidu.com/s?wd=%F7%C8%D7%E5
2 以用户为中心的信息设计
信息设计是是“人们对信息进行处理的技巧和实践，通过信息设计可以提高人们应用信息的效能”。站内搜索的目地是在纷繁芜杂的商品大海中找到用户心仪的那颗“针”，中间步骤是越少越好，前提是又不能丧失搜索结果的精确性。淘宝站内搜索旧版的搜索结果中首屏一般呈现不是搜索结果，而是杂七杂八的分类、筛选条件、以及淘宝商城的“横插一脚”，整个搜索结果的信息设计没有照顾“用户要看搜索结果”的核心需求，可谓是陷入了泥淖，大大降低了用户查询结果、“寻针”的效率。
新版不同，继承了旧版的布局，在砍掉过多分类、去掉过多筛选、对重要信息字段的信息设计，给人的感觉是清新、简单、易用，用户对搜索核心诉求得到了释放。如以下细节
- B区淘宝推荐类目、将相关搜索的智能推荐提到筛选区的位置之上加以强调，
- C区对人气TAB标签内容中用户关注的销量、运费、价格等信息的设计重视，淘宝商城以icon小图标的形式建议区分，而非以广告栏的形式既节约、有效利用页面区域，又能保证搜索的公正性；
- D区掌柜热卖虽然压缩了旧版的信息展示高度，信息集中、一览无余的同时，还提示卖家做“直通车”的广告，对卖家用户来说这样的信息设计也是个提醒作用。
（阿石备注：据腾讯科技，淘宝高管路鹏称不做竞价排名，要学Google那样在搜索结果右侧推出广告位）
3 对产品质量的谦卑，关注用户反馈
在现在互联网大行于世的“快速发布，逐次迭代”的产品发布模式，产品的变动在所难免，对应的对产品质量缺要求越来越低，在这一点尤其表现在对用户反馈的重视上。在新版淘宝站内搜索底部，一句“搜的不爽？！我要说两句”深获我心。看看淘宝自己认为不足的选项也很有意思，前四项都聚焦与搜索的精确性上，其次才是信息设计，再次是搜索响应速度，无论与否，这都是构成搜索用户体验的要素。
淘宝自从去年屏蔽百度爬虫，到今天的独立发展站内搜索，已经在实质上实践着站内搜索的演化，下一步该如何走？或许百度的框运算也可供其未来发展参考模式，欢迎阅读阿石前面写的《谈谈站内搜索》，敬请指正！
