小麦的自习教室 » 用户体验

说说啤酒和尿布

小麦 — Fri, 02 Jul 2010 10:25:45 +0000

“先生，我注意到你买了啤酒，请问要不要再来一些尿布？” 如果超市收银员这样问你，你会不会想K人？即使，你知道那个关于啤酒和尿布的故事。

其实原故事是说，发现很多男人周五买尿布，所以超市就把啤酒也摆在尿布旁边。所以刚刚我故意混淆了两个细节：尿布和啤酒的相关性是“单向”的；推荐方式是“隐式”的（摆在一起）而不是“显式”的（口头推荐）。更重要的是，它是针对一个特定目标用户群（已婚有小孩的妻管严男人）的行为。

令人吃惊的是，我看到大多在讲“啤酒和尿布的故事”的地方，都故意忽视了这些细节，转而大谈诸如协同过滤或数据挖掘什么的。恐怕这就是为什么现在很多网站的推荐系统都做得相当糟糕的缘故吧。推荐系统，本质上一种产品，而不是什么技术架构，回归到产品设计的根本原则，才有可能把它做得“有用”，进而“好用”。

我其实也对推荐系统的技术一知半解，不妨抛开那些技术算法，谈几点我认为很重要的设计原则：

一，着眼于“后续期望”。举个例子，假设我在浏览ipad的产品介绍，旁边的相关推荐应该是什么？设想几种答案：A：iphone,ipod；B：ipad皮套等配件；C：不同渠道商的ipad报价；D：仿ipad的其他山寨产品。如果甲同学想买一个时尚电子产品送给女友，乙同学是ipad的狂热粉丝，丙同学还在为ipad的价格犹豫，丁同学只是想要一个电子阅读器，那上面这四个答案都恰好能让他们可以继续多看一些产品。所以，推荐系统是否成功的最关键因素，并非算法实现等技术问题，而是如何洞悉用户的当前行为以及后续期望。

值得一提的是，除了揣测用户本身已有的期望外，为用户创造出一个新的期望也是推荐系统常常做的。比如卖书的网站就经常告诉我，这两本书可以配套买。但这种为用户推荐他原本并不期待的东西，成功率就会低很多，相反可能会打乱用户原本的行为路径。所以要慎重，不能自作聪明弄巧成拙。

二，牢记80-20法则。想用一套算法解决千万用户不同的需求是不可能的，这就要求我们作一些取舍。我有一个绕口的原则是：用最简单的办法顾好大多数人在大多数情况下的最常见需求。我的这个原则的灵感来自于一个叫everything的桌面搜索软件。不管是微软还是google的桌面搜索软件，一开始总是要花很长时间（几个小时）来建索引。但这个everything只用1分钟就能建好整个硬盘的文件索引，很神奇！后来才发现，它只能搜文件名，而不能搜文件内容，而后者正是其他桌面搜索长时间建索引的原因。问题就在于，其实我们绝大多数时候找文件都是在找文件名而非内容，everything正是抓住了这个问题的核心，用20%的精力解决了80%的问题，然后，将剩下20%的问题直接抛弃！

将这个80-20法则用到推荐系统里，是再合适不过的了。你只需要集中精力在最常发生的情况下，用合适的算法找出合适的推荐结果，剩下的结果只要保证“相对过得去”就好。当然，这样做的前提是，你对用户的后续期望很有把握。

三，解决信息焦虑。假设“釜山料理”餐厅介绍页上，相关餐厅列出“港丽茶餐厅”，你会觉得他们相关么？那，“韩膳宫烧烤”呢？会不会觉得后一个明显靠谱很多？其原因是后一个你可以看得出它与“釜山料理”都是韩式烧烤店。但如果你是一个要在人民广场约朋友吃饭的人，“釜山”和“港丽”都恰好在人民广场，而“韩膳宫”其实是在离人民广场很远的徐家汇，那不用说自然“港丽”应该作为你下一个要浏览的餐厅。

这里很重要的，其实是要告诉用户“为什么相关”。否则用户就会困惑，从而忽略掉你精心为他推荐的内容。一个很好的例子是网易新闻，在它的相关新闻列表上，都会将它匹配的标签显示出来。比如“与富士康相关的新闻”。

四，始终记得商业目标。做推荐系统的最终目的，是为了商业目标：增加后续转化率？增加总用户数？还是增加成交量？其他产品设计，或许有时候需要牺牲一下眼前的商业利益，来满足用户目标。但推荐系统的商业目标与用户目标的分歧并不大，相反往往更加统一，所以这时候就要特别提醒自己注意商业目标，所有的功夫都要朝那个方向努力。当然一些很基本的用户体验还是要保证的，像在推荐系统里塞广告这种杀鸡取卵的事情还是做不得，呵呵。

在支付宝上给手机充值

小麦 — Sun, 06 Sep 2009 07:15:37 +0000

手机欠费了，懒得下楼。想到支付宝可以给手机充值（事后证明，这个印象是基于对支付宝品牌的信任，而非真的有过这样的经历）。下面是我充值的过程：

1. 在地址栏里输入“alipay.com”（记住，不是zhifubao.com，是“阿里呸”），回车。

2. 首页右下角登录。（我一直搞不清楚，好像我淘宝的用户名是不可以直接用于支付宝登录的。但是我在淘宝付款，它又能直接跳转到我对应的支付宝帐号）

3. 登录后的惯例页面。一定要仔细阅读两个按钮上的文字，然后选“跳过该页面”

4. 成功到达了支付宝神秘的注册用户首页（为什么神秘？我稍后再讲）。心中开始默念“手机充值，手机充值”。抬头看到菜单里有个“充值”。不假思索的就点了。

5. 啊呃。走错了。这是给支付宝账户充值。

6. 然后发现顶上有“生活助手”。想起之前缴电费好像也是在这里面，手机充值也应该是吧。于是，点。

7. 啊哈，到了。果然，右边有“通讯费”。点。

8. 成功到达。选“切换项目>手机费”；选上海、上海；选“中国移动通讯集团上海有限公司”（呃，坦率的说，头一次知道这个公司的正式全名。从移动哪儿都从来没听说过这么正式而完整的名称）。然后….

10.现在是什么情况？？需要填条形码？我是预付费手机啊，我是想来买充值卡号，怎么还要问我要条形码号？

11. 惊慌中，找到顶部的“使用遇到问题”。点。把我带到页面下方的帮助。连看了好几条都不之所云：

12.这不是缴水电费的说明么？抬头再一看，通讯费的页面顶部写的是“公共事业缴费”，而我刚刚点的是它旁边的“使用遇到问题”。好吧，我的错。我以为通讯费上写“使用遇到问题”指的是通讯费页面的使用问题。

13. 无奈中，只能重新再找找看把。四处没发现“首页”的菜单，于是点右上角“支付宝”LOGO，回到首页。愕然发现自己到了登录前的首页：

刚刚的“生活助手”或是“充值”的那个橘色导航条不见了，取而代之的是“立即注册”？我要怎么回到那个页面，那个“我心目中的首页”？

OMG~~~

直到现在我手机也还没充上值。好吧，因为我懒，而且我笨，所以不配使用阿里呸。

“左行右立”的交互设计

小麦 — Sun, 19 Jul 2009 14:04:07 +0000

上海地铁一直在宣传自动扶梯的“左行右立”，即在自动扶梯上靠右站立，把左边让给有急事的人行走。节假日还可以看到一些小朋友在自动扶梯的入口处宣传这个习惯。

我当然还是愿意遵守这个社会公德，但有时候不留神就忘记了。所以最好是能有一个“Don’t make me think”的方法让我在潜意识下就能自动的靠右站立。

下面就是我琢磨出来的方法：

在入口的左边装一个栅门。这样在进入的时候就可以让人自然而然的站在右边了。有几个细节值得注意：

1. 左边的栅门不能过大，我取了比一半稍微小点的宽度，让右边的口看起来更大一些。这样更能让人下意识的往右边走。

2. 栅门要能往里推，而不是往外开。左边是给有急事的人走的。作为有急事的人，会比一般人更用心的观察哪里可以抄近路。如果此时正好右侧有人堵住入口，他会发现左侧的门是可以进去的，便会钻进去。

3. 为什么栅门要设计成斜的呢？可以看看下面的设计：

如果做成平的，从左侧走过来的人会明显感到这个障碍物，从而可能会懒得再绕到右边去，而直接推门进去了。所以这个门应该斜着，至于斜多少度，可能需要对实际情况作可用性测试才能确定。

4. 如果遇到高峰时期，直接把栅门打开靠边，两侧就都可以进入了。

其实呢，并不是说左边就不可以站人，关键是要保证“左行”，也就是说，你不能在左边站着不动，必须往前走。这样有急事的人才不会被你堵住。鉴于此，还可以考虑如下的设计：

解释一下，两侧的灰色是自动扶梯的扶手，通常情况下它是跟自动扶梯运行的速度保持一致的。那如果要不让左边的人站在那里不动，只需要将左边的扶手的速度调快一些，就可以暗示他应该往前走。呵呵。

不过，这一切都有待实际的可用性测试。因为我很怀疑它们会有一些安全性问题。

可恶的盲道

小麦 — Mon, 29 Jun 2009 14:54:25 +0000

标题说的是下面两张图片：

先博君一笑。

可恶之处，其实并不在于有树或障碍物，而在于，既然有树，为什么还要修盲道？如果没有盲道，盲人自然会小心。但这里修了盲道，然后再将盲道引向一个障碍的地方，这就是真正可恶的地方。

OK，说正题吧。百度在07年4月推出了“百度盲道”，同年8月宣布“百度盲道升级”。据百度称，“现在的‘盲道’虽然看上去和百度首页没有太大区别，但是从界面到功能，都更符合盲人的使用习惯”。

所以我们打开HTML源代码，看一下百度盲道的首页（http://dao.baidu.com）究竟在哪些地方与百度首页（http://www.baidu.com）不同：

1. 盲道把标签移到<meta>标签前面，也就是说，两个交换了一下位置。 2. 盲道把原来在底部的JS移到<head>标签里了。 3. 盲道在body标签里增加了属性：text=000000 link=0000cc vlink=0000cc alink=ff6600 4. 百度首页里有一个id=u的div，里面写着“登录”，而盲道则把这个div置空，但仍保留这个空层，以及它的样式 5. 盲道LOGO的img标签里，增加了alt属性，取消了百度首页LOGO里的一个图片映射区 6. 盲道的导航tab里，取消了字和字之间的。但仍然保留a标签上的onclick脚本。整个导航tab的代码位置与百度首页一样，仍在搜索框之前。 7. 搜索框右边，百度首页为“设置”和“高级”，盲道为“帮助”，链接到盲道帮助页面。 8. 盲道，底部icp证的图片和百度首页一样，没有加alt。 这就是所有的改动。除了第5条，我没有在首页看到任何所谓的“从界面到功能，都更符合盲人的使用习惯”。如果说我只是从技术角度来评价，或许不够权威，毕竟我不是盲人，我也没有使用过屏幕阅读器。那请看看“盲道帮助”里推荐的“盲道吧”：<a href="http://tieba.baidu.com/f?kw=%C3%A4%B5%C0" target="_blank">http://tieba.baidu.com/f?kw=%C3%A4%B5%C0</a>，里面有不少盲人的发帖，可以看看他们是如何评价这个产品的。我摘取一条来： “也不能说lz说的一点都不对。我就是个盲人。说实在的，我也没有觉得这个盲道给我们带来了多大的帮助，当然要说没有帮助也是不对的，毕竟在搜索的时候有一些不需要的东西给去掉了。但是我觉得这个不怎么实用。而且有一个最头疼的问题没有解决，我通过盲道进入百度知道想提个问题，可是在注册用户名的时候依然要我们盲人输入图片里显示的验证码，这对我们来说是不可能完成的任务。现在其它网站也是这样，盲人反映的绝大多数都不是主页无法操作，而是验证码的困扰。希望百度能解决这个问题。”（<a href="http://tieba.baidu.com/f?kz=373509925" target="_blank">http://tieba.baidu.com/f?kz=373509925</a>） 坦率的说，我看了这一条之后，心里很难过。这位盲人网友在贴吧里发这个帖子，可以想象有多艰难。他在第5楼发的，也就是说，他必须等阅读器从LOGO开始，读完导航，读完顶部的广告，读完左侧的广告，再读完前面四个帖子的发帖人、IP、帖子内容，最后才能到达底部的输入框，然后输入他的这段文字。 但更让我难过的是，这位网友说到“我通过盲道进入百度知道……”。请大家试试看，从盲道首页，点到盲道导航里的“<a href="http://dao.baidu.com/zhidao.html" target="_blank">知道</a>”，然后再点击里面任何一个分类，你发现你到哪儿了么？你到的页面，和从百度首页的“知道”点进去的分类，没有任何区别，因为它们就是同一个URL！ 盲人网友原本以为从盲道进入，可以到达如百度所说的“更符合盲人的使用习惯”的页面，但发现没有“太多的区别”。可怜的他大概永远都不知道，其实是“根本没有任何区别”。 事实上，盲道除了刚才那个首页，以及几个二级页，是在“dao.baidu.com”下的以外，其后续的跳转，全是到达百度的正常页面。也就是说，盲道这个产品，加起来也不过就是一个dao.baidu.com的域名，一个盲人永远都看不见的盲道LOGO图片，以及几个“优化过的”静态HTML页。为此，百度“在产品开发前期，产品开发专家与技术专家组成专门小组，在中国残联和盲人协会支持与帮助下，做了大量调研工作”。真是互联网界最大的笑话！ 所以，不要跟我讲什么从资源或技术上，无法将百度所有的产品全部调整至盲人版，所以目前只能先做一个盲道的首页。这跟我在文章开头发的两张图有什么区别？你可以不用做盲道，但既然做了盲道，请把盲道做通。否则，这就不只是一个垃圾产品，而更是一个黑心产品了。 当然，无论如何，百度作为互联网的龙头老大，做“百度盲道”的出发点还是要鼓励的（哪怕这些“出发点”只是用来给那些不招聘盲人的各大媒体公关用的）。因此，我还是愿意给出几点建议，希望百度能从此继续改善： 1. 不管是网页搜索、新闻还是知道，无论如何请将其中至少一个产品做到真正的“更符合盲人的习惯”。 具体的优化措施，可以参看我之前写的“<a href="http://www.mikkolee.com/181" target="_blank">可访问性——前端的使命（一）</a>、<a href="http://www.mikkolee.com/191" target="_blank">（二）</a>、<a href="http://www.mikkolee.com/198" target="_blank">（三）</a>”。 2. 将未优化的产品，另开导航说明：这些产品未经盲道优化。 3. 如果说，“百度盲道”是为了“忽悠”盲人更多的使用百度，我倒不反对这个商业考量。但既然已经起了这贪念，不如更贪一些吧：将用户群扩大到所有的“使用障碍人群”，其中包括并不限于： 视觉障碍人士：盲人；弱视；无法辨析细小字体的老年人等等。 行动障碍人士：无法使用鼠标、无法使用键盘打字的人等等。 技术障碍人士：对互联网不熟悉的人，电脑配置极其低的人，带宽极其慢的人，使用非主流浏览器，以及用GPRS上网的手机用户等等。 百度愿意做“盲道”，至少比我所在的公司，以及业内大多数的知名网站，更具有超前的理念和对社会的责任感。那既然选择走出这一步，就请继续走下去吧。毕竟，算到今日，盲道上线也两年了，仍旧是一个域名一张图片加几个HTML，实在有点寒酸。 </article> <article> <h1>可访问性——前端的使命（三）</h1> 小麦 — Sat, 27 Jun 2009 03:05:31 +0000 其实这个系列还没写完，我看到已经被转载了。下次应该写个未完待续。 15. 忽略空白图片（Ignoring spacer images） 一定记得给图片加上alt属性，哪怕它为空。其原因是如果不写alt，有些阅读器会直接把它的文件名或URL读出来。 这让我想起小时候读过，说在发明数字0以前，人们都是用空位来表示的。这样就很不方便啊。所以alt=”"就相当于数字0这个伟大的发明。 16. 使用真实的列表（或者正确的把它们伪装起来） 这一条其实也是在讲如果要用图片作为列表前的icon，最好用CSS。但是没有提到为什么要用<ul>。其实这也是我一直纠结的问题：目前看起来，除了出于“标签语义化”的原教旨主义信仰，没有更好的理由一定要用<ul>或<ol>。盼知情者告知。 17. 为图片提供替换文本（Providing text equivalents for images) 18. 为图片映射提供替换文本（Providing text equivalents for image maps) 这两条同15。 这里我只是想说说两个题外话： a) 到目前这个年代，<map>标签是否还有用？同样的还让我想起<applet>标签。 b) 除了alt，还有两个属性：lowsrc和longdesc。有时间我会来看看目前的浏览器对这两个属性的支持是怎样的。 19. 使用真实的水平分割线（Using real horizontal rules） 它说的是使用<hr>比使用一张装饰用的图片好。（P.S. 原来hr是horizontal rule的缩写哦，hoho）但似乎不用<hr>更好吧。 20. 使用相对字号（Using relative font sizes） 我好想遵守这个规则，但可恶的微软把宋体做得除了12px，更小的字号就不能看。不过现在浏览器都有zoom功能，相对字号或许也不像以前那么迫切需要了吧。不管怎么说，都怪IE！ 21. 使用真实的标题（Using real headers） 除了SEO之外，文中提到，有浏览器是可以专门撷取文中的标题，以提供方便的文内导航。这个功能就类似word里面自动生成目录的方法。 不过有一点值得注意，<h1>标签的使用。它其实是指最能概括本页内容的文字，而不是指看起来在标题的位置的文字（比如网站顶部LOGO）。我之前一直犯一个错误，就是把网站的LOGO作为H1。事实上，比如搜索结果页，很明显“搜索XXX，一共XXX个结果”才应该作为h1标题。 22. 给表单元素加上label标签（labeling form elements） 这里只有一个想和大家讨论的：到底是用id和for来联系，还是直接用label标签把表单元素和文字框起来？你们的习惯是怎样的？ 23. 让所有的内容都可被搜索（Making everything searchable） 这一条是个比较宽泛的产品层面的问题，这里就不作讨论了。 24. 建立可访问性声明（Creating an accessibility statement） 这个蛮好，详情还是建议看原文。我有时间也会做掉。 呼，总算写完啦。再次呼吁，请通读原文：http://www.diveintoaccessibility.org。 接下来就开始批判百度盲道啦~~敬请期待。 </article> <article> <h1>可访问性——前端的使命（二）</h1> 小麦 — Thu, 25 Jun 2009 15:29:21 +0000 继续这个读书笔记吧。 9. 定义键盘快捷键（Defining keyboard shortcuts） 意思就是定义accesskey属性。这个好说。有个关键是如何在浏览器里使用。IE里是“alt+”，并且只是将焦点移过去，要点击需要再按enter；Firefox是“shift+alt+”，按下之后直接触发点击事件。Opera和Chrome还有Safari，我都没试出来，有知情者请告知。 <ins datetime="2009-6-27">感谢<a href="http://www.aoao.org.cn/" target="_blank">aoao</a>提供：Safari 4/mac control+alt+key | /win alt+key Opera Shift+Esc 选key Chrome 3 alt+key </ins> 除了accesskey，其实还有一个更重要的：tabindex。有时候需要改变默认的tabindex顺序，以期得到更便利的体验。举个例子，如下格式的登陆框： 用户名 <input type="text"> <input type="checkbox"> 记住我 密码 <input type="password"> 忘记密码 按照默认的顺序，按下tab键，焦点会依次经过“用户名”、“记住我”、“密码”。但是似乎把“记住我”放在“密码”之后更方便，毕竟不是所有的人都需要使用“记住我”这个按钮，尤其是多次使用这个登陆框的人，他很显然是不喜欢“记住我”。所以应该用tabindex指定如下的顺序：“用户名”、“密码”、“记住我”。 10. 不要打开新窗口（Not opening new windows） 文中的意思是，这样会破坏浏览器的“history”记录，从而使浏览器“后退键”无效。总算知道外国网站很少有新开窗口的缘故了吧，也总算知道为啥XHTML标准要把a标签的target属性取消的缘故了吧。但这个似乎不符合中国用户的习惯，还值得商讨。不过有一些变通的方式可以考虑： a) 页面上给一个选框，选择之后就自动把a标签里的target属性移除，使得所有的链接都在本页打开。 b) 新开窗口并不是到”_blank”，而是到一个指定名字的窗口，比如“new”。这样所有新开的页面都会到同一个窗口里打开，至少在这个窗口里，还是可以使用浏览器的“后退键”的。（提一下，土豆网的视频都是这样的，开到同一个新窗口里）。 11.定义首字母缩略字（Defining acronyms） 先说明一下，其实作者这里对acronym这个词理解不正确。acronym是指单词的首字母合起来成为一个新的可读的单词，这个单词未必是所有字母都大写的，比如Nato（北大西洋公约组织）。所以HTML或是CSS算不上acronym，而 DOS、BASIC这种才算。像HTML或CSS这种，应该叫abbreviation，与其对应的是<abbr>标签，但很遗憾，这个标签IE6上无效。 12. 给你的日历加上抬头（Giving your calendar a real caption） 13. 使用真正的表头（Using real table headers） 14. 为表格提供摘要（Providing a summary for tables） 把这三条合在一起说，就是要正确使用表格。其实表格的使用远比这三条更多，建议大家仔细阅读HTML权威指南。 最后说的是，我这只是一个读书笔记，光看这个是看不明白的，所以建议还是去通读一下原文吧。 </article> <article> <h1>可访问性——前端的使命（一）</h1> 小麦 — Mon, 22 Jun 2009 16:23:56 +0000 事情的缘由是，前两个礼拜打了个“飞的”去北京玩，见了一位在百度做前端的朋友。过去一年以来，这家伙就不停的在鼓动我去他们那个邪恶的公司。当然，见面之后就不能再当面称呼人家是邪恶的公司啦，所以我就找了个理由，说你们那个“<a href="http://dao.baidu.com" target="_blank">百度盲道</a>”做得太垃圾了。他当然就很虚心的问我为什么啦。所以我也只能很心虚的糊弄了几句，说回上海之后详细告诉他。 回来之后，就马上很虚心的翻出一本老旧的电子书——《<a href="http://www.diveintoaccessibility.org/" target="_blank">Dive Into Accessibility</a>》，认认真真的看了一遍。 然后惊奇的发现： 1. 虽然我没看过这本书，但里面讲的大部分，我平日里都有遵守。果然，坚持好习惯是值得表扬的。 2. 网页的可访问性，似乎只能由前端来重视并实现。这点挺可悲，作为可用性的一部分——可访问性，居然只能由技术人员来掌控，这是我不愿意看到的。但反过来，这给前端开发工程师们新增加了一个责任，同时为如何区分优秀的前端增加了一个指标。 好吧，下面我把这本<a href="http://www.diveintoaccessibility.org/" target="_blank">Dive Into Accessibility</a>的内容作一个摘要，看看对于可访问性，应该要注意哪些问题： 1. 标明语言（Identifying your language） 这一条的意思是，加上lang属性，如<html lang="en">。如果其中有一段是其他的语言，就在那一段的标签上加lang属性。这一条我做得不好，以后记得。 2. 构建有意义的页面标题（Constructing meaningful page titles） 有几点值得一提： a) 做页面时，千万不要忘记写title。我见过好多页面的title是“Untitled Document”或“新建页面”，丢脸啊~ b) title到底应该是“小标题”在前呢，还是“大标题”在前？现在的惯例似乎都是“小标题”在前，比如“<a href="http://ent.sina.com.cn" target="_blank">影音娱乐首页_新浪网</a>”。但我个人倒是有个看法，或许大标题在前比较好。这样当我把“新浪网_影音娱乐首页”、“新浪网_新闻中心首页”放入收藏夹时，它们会因为音序排序而呆在一起，而不是散乱在各处。当然这个也不一定，仅供参考。 c) 对于英文的标题，一定要注意尽量不要把The放在title的前面，否则你的网页在收藏夹里就会被排在T开头了。 3. 提供额外的导航辅助（Providing additional navigation aids） 这一条是说要加 <link rel=”home” title=”Home” href=”http://url/of/home/page” /> 这个。这个其实我知道。但是貌似对于页面里这么多链接，要都加上rel和rev属性，有点难度。 4. 先呈现主要内容（Presenting your main content first） 好啦，这就是一条典型的“指望优秀的CSS”的可访问性原则啦。把<div class=”main”>放在<div class=”side”>的前面，其实挺考验CSS技术的。一道著名的题目是：如何让侧栏固定宽度，主栏宽度自适应，同时主栏的HTML要在侧栏的前面。我很想放在我的面试题里，可又觉得是不是太刁难了。但是，无论如何，这道题目很重要！ 5. 用于跳过导航栏的链接（Skipping over navigation links） 很重要！这个在骨灰级网页标准教程《网站重构》里就提到了。只是有一点我比较怀疑，如果把skip link设为display:none，难道不怕被阅读器也忽略掉么？ 6. 安全的使用颜色（Using color safely） 这条其实讲了几个要点： a) 颜色对比要够，否则眼神不好的人看起来费劲 b) 链接的颜色，最好用蓝色（像我比较喜欢用#09c） c) 链接最好有下划线 7. 用“真链接”（Using real links） 意思是，即便这个链接是用于触发Ajax，也要把Ajax代码片段的URL放在href里，好让搜索引擎以及阅读器等等能够爬到。关于此条，请参看<a href="http://www.tudou.com" target="_blank">土豆网</a>首页的“挖土豆”一块。 8. 给链接加“title”属性（Adding titles to links） 这个还用说么，可用性两大重点：a的title和img的alt。 呼~~~先结束这第一回合吧。如果你对可用性感兴趣，可以详细的读一下这本“<a href="http://www.diveintoaccessibility.org/" target="_blank">Dive Into Accessibility</a>”，尤其是前5节。然后可以再去看看那个可恶的“<a href="http://dao.baidu.com" target="_blank">百度盲道</a>”，我接下来会专门用一篇来诅咒这个忽悠障碍人士的无良黑心产品。 </article> <article> <h1>以七宗罪为中心的设计</h1> 小麦 — Mon, 18 May 2009 15:59:40 +0000 （好吧，我最近有点烦UCD这个词，所以用标题调侃一下） 前段时间看到说<a href="http://lifesinger.org/blog/?p=1576" target="_blank">“最具决定意义的三大人性：饥饿、性和懒惰。”</a>不过我觉得也不尽然，比如iPhone，或是魔兽世界，它们迎合了这三大人性么？似乎看不大出来。 我觉得其实著名的七宗罪倒是更为全面： 色欲（Lust） 贪食（Gluttony） 贪婪（Greed） 懒惰（Sloth） 愤怒（Wrath） 妒忌（Envy） 骄傲（Pride） 淘宝网被认为是迎合了懒惰，但其实也不尽然。毕竟要从成千上万的T恤中找出自己喜欢的，并不是一件轻松的事情。而偏偏就有这么多人会花一两个钟头泡在淘宝上慢慢的淘，这满足的或许不是“懒惰”而是“贪婪”吧。 再说魔兽。它很让人惊奇的满足了除贪食之外的其他六个：装备满足妒忌与骄傲，练级满足贪婪，砍怪满足愤怒，交友满足色欲，而网游本身就是在满足懒惰。事实上几乎所有成功的网游都是最全面的覆盖了七宗罪，因此也不难理解网游是互联网中最好赚钱的了。 对于贪食，其实互联网做得并不好，唯一可以想到的也就是大众点评了。如果啥时候有个网站能自动配餐并快递过来，我想它应该会暴红。 </article> <article> <h1>从“Browser”说起</h1> 小麦 — Tue, 11 Nov 2008 16:06:03 +0000 今天回家路上突然想到的。 我们用来看网页的那个软件，叫什么，什么来着？“浏览器”。它是从“Browser”翻译过来的。什么叫“浏览”？躺在床上细细阅读就不算浏览。浏览就是路过报摊看见一本杂志，拿起来随便翻翻，看看有没有好看的内容。这就叫“浏览”。 不知道当初是谁起的这个名字，很妙。为啥不叫“阅读器”，或是“观看器”？因为网页是用“浏览”的~这是网页可用性原则的基础。由此才会衍生出其他的如“Don’t make me think”或“将字数减一半，再把剩下的减一半”之类的可用性准则。 在十几年前，开山鼻祖们就用Browser这个名词告诉我们，网页是用“浏览”的。他们真强！ </article> <article> <h1>网页用户体验的“常识”</h1> 小麦 — Thu, 04 Sep 2008 15:51:53 +0000 我爸今年55岁，在家里没事儿，就喜欢捣腾我给他买的电脑。遇到不懂的就打电话给我，非常勤学好问爱思考。下面是某一次对话： “那个QQ怎么聊天？” “哦，你找到那个企鹅的图标了吗？” “…（2分钟后）找到了，然后呢？” “…打开它。” “怎么打开？” “…把鼠标移到上面，然后点击图标” “左键还是右键？” “左键…” “单击还是双击？” “双击…” “怎么没反应？” “你可能双击得太慢了，要快一点” “哦…还是没反应。” “鼠标变成漏斗了么？” “嗯” “那就是反应，等吧” … 好吧，就到此为止。这其实是一个很有趣的案例。它很直观的揭示了一个道理：其实任何用户体验的评价都是基于用户了解一些很基本的“常识”。而这些“常识”，其实并非是真正的基于本能的常识，而是一些外部获取知识。以至于我爸问出“左键还是右键”“单击还是双击” 的时候，我们会很震惊。事实上，类似的“常识”还有很多。就以Web来说，就可以列举出如下： <ol> <li>“网页”的概念。看一下<a href="=http://baike.baidu.com/view/828.html?wtp=tt">这里</a>，你就明白这个概念对于不上网的人来说其实并非“常识”。将一个Web画面类比成Page是一个很不错的创意。坦率的说，将浏览器里的画面都定义为“网页”是不准确的。比如弹出窗，就不大像是一个“页面”。还有整站Flash的动画，似乎也不能称作是页面。</li> <li>“网址”的概念。事实上，我认为把它叫做“频道”更恰当。因为URL对应网站，跟电视里的频道对应电视台的关系是一样的。可打开网页偏偏要被形象为“访问”网站，所以“地址”这个概念就出来了。</li> <li>“手型”鼠标表示可以点击。这其实是个很另类的“常识”，因为除了网页，没有任何软件、操作系统有这样的惯例。软件里面可以点击的部分，从来不需要将鼠标变成手型。甚至网页本身，按钮其实是可以点击的，但是鼠标移上去之后并没有出现手型。</li> <li>“登录”的概念。这个词本身就很古怪。你要怎么解释登录这个概念？类似的还有“退出”。</li> </ol> 所以，当我们做网页界面的时候，不停的引用这些“惯例”作为支持自己方案的理由，有没有停下来想一下，遵循这些“惯例”，或是说常识，凭什么就一定可以给出良好的用户体验？尤其对我爸这样的“骨灰级菜鸟”用户而言。 最后，作为交互设计师，如果能有一个像我这样的老爸，那将是很大的幸运。 </article> </main></body></html>