http://www.uetalk.com Interaction Design can change the world Wed, 21 Oct 2009 08:51:16 +0000 http://backend.userland.com/rss092 en 发现google.com的搜索框变聪明了。google也框计算了么？ （注：非google.cn。请前往 www.google.com/ncr 围观) 话说，用户在google.com搜 “amazon”。 如果只输入“ama”，google没有充分的理由认为你要找“amazon”，因为“amazon”只占可能搜索的6/10； 这时用户又输入了一个“z”，系统经过筛选发现此时“amazon”占到了8/11，超过了某个阈值。于是他开始进一步猜测你的意图，认为你很有可能要找 “amazon”网站，所以把真amazon.com的URL放到你面前，用户核实了URL，点击就直接去amazon.com了。 这招挺赞的。 http://www.uetalk.com/2009/10/smarter-google-search-ba/ 昨天朋友说要在卓越网上买本书，他是第一次在网上购物，真是绝好的测试练习啊！于是在征得同意后，异常兴奋地搬来椅子坐在旁边观察。说要协助他买东西顺便做个小测试，主要看看卓越好不好用，他就很爽快地答应了，朋友真是好人……（下称xu好人） Action：进入百度首页 >> 输入“卓越网”回车 >> 在搜索结果页面向下拖动浏览器滚动条 >> 找到一个“卓越网”点击进去 >> 进入“卓越网”（注：实际打开是一个山寨卓越网，根本不是amazon.cn） 这里，我不得不打断他。或许应该直接帮他进入amazon.cn，但，从搜索引擎进入网站是用户的主要做法之一，而且在此确实影响了用户最自然的任务流程。所以，先来看这个问题。 我：这个网址不对呀，你是怎么点进来的呢？ xu好人：不是这个么？我刚才就是在这点了一下。（指着刚才搜索结果页面的“卓越网”） 我：还有许多别的，为什么要点这个呢？ xu好人：因为这个写着“卓越网”。（原来其他站点写的是“卓越”） 我：为什么不点第一个，而要点下面的呢？ xu好人：第一个不是广告么？（xu好人似乎没意识到baidu推广） 我：…… xu好人：我瞟了一眼有很多图，就觉得是广告，所以就往下拉。（“真卓越”好冤……） <任务最终因为昨天超级慢的网速不得不终止了，不过xu好人答应下次网速快的时候再叫上我> 现在分析一下： 下面这一大块还真有点像…… 同样的问题也会出现在“大量矩阵式排列的分类信息”页面，有篇文章专门对此类信息的排列做过眼动议测试和分析，见打横？打竖？。文中指出：被（设计者）认为比较重要的第一列内容，却往往不会被注意到。该案例原因未明确指出，但个人认为有二： 眼睛最自然最舒服的注视位置是屏幕的中央偏上区域，太靠左的第一列造成眼球转动距离较大。根据万物的最小势能原理，眼球使用最少能量进行浏览，除非被明确引导。 用户没有被事先告知当前内容是按何种顺序排列，因此默认按照最舒服的顺序扫描。 而对于搜索卓越网的案例，只因为他太像广告了，触发了潜意识中对于广告的处理方式—迅速跳过。山寨卓越网跑到第一页的靠前位置，其实与百度无关；但苦心经营的第一条却被忽略了，这似乎需要引起设计师们警觉。做做测试看看，也许会有新的发现呢。 总结： 许多时候，用户没事时间仔细考虑，而是通过一瞬间的意识来判断。页面布局的不合理（指不符合用户在特定情景中的习惯），会造成用户视而不见；而某些看似显眼的大块内容由于惯行所谓的“传统原则”，缺少仔细求证，想当然认为效果很好，就有可能使得用户出现“条盲”，适得其反。 http://www.uetalk.com/2009/09/ue-test-blockblind/ tab的交互行为主要有两种： 1、单击切换页面 2、悬停切换页面 在小块区域的信息展示上，悬停切换的优势在于“快速响应”，并且假设“滑过我就是想看我”，而人眼恰恰可以接受小范围内信息的瞬间变化（反复切换）。但，在大范围区域内，如超过半屏而且信息较多，则人眼将难以在多次瞬间切换的过程中，对大量信息进行快速扫描。 单击切换的优势在于“确定性”，特别是在大块区域上，用户可能更需要一些耐心来阅读，而且这种确定性可以保证以下一点： 用户不必担心由于不小心滑过其他tab而打断当前的阅读。 这种问题在某些“超长悬停切换tab”上更容易显现： 如上图，假如黑色箭头的起始点是光标当前所在位置，而用户此时要去点击箭头指向位置的链接。那么，在光标的直线移动过程中必然会滑过图中的红色方框部分。如果采用悬停切换，则必造成红框所在的tab被激活，从而触发页面切换，打断了用户的动作，这种体验非常之不爽。 不仅最下面的tab如此，只要光标所在位置比较靠前，则大跨度的直线移动都很容易触发其他的tab。 当然，也有安全区域，这取决于“用户兴趣点的位置”与“tab边界”的夹角。如下： 上图蓝色箭头围成的就是当前情形的安全区域，太小了不是么？ 总结，像上面这种"超长竖排tab"，为了避免错误，还是采用单击切换比较好。 http://www.uetalk.com/2009/09/super-long-tabs-problem/ 终于再次认识到：IMS群里，同时发言的人多了，真会变成一锅粥。使用IMS群时，面向某个的交流，有两种做法： 点对点发送讯息：即私聊，或在没有建立好友关系的情况下发送临时消息； 公开喊人：有些时候人们更喜欢在公共场合针对某个人发言，特别是在互联网这种大环境下。群聊，更像是开茶话会，不同的是群聊没法直观地面向某个人。比如某些 调侃的话，对于说话人，群聊的效果会比私聊好一点。为了不私聊又不会造成其他人误解，所以就要喊人，比如“@xxx，你妈喊你回家吃饭！”。而一些IMS 的群设置也可以对关注的词汇取消屏蔽，起到信息过滤的作用。但不方便之处在于，目前的IMS群里，喊人都需要手动。是否可以在账号的交互上加入类似twitter的“回复”功能。 以下是改进： http://www.uetalk.com/2009/09/ims-group-reply/ 读完Nielson的Card Sorting:Pushing Users Beyond Terminology Matches ，写一点体会。 Nielson主要针对信息架构中的信息分类测试方法——卡片分类法，提出实际测试中可能经常出现的问题，并给出了较好的建议。所关注的问题在于：如何提高卡片分类测试的测试效果？卡片分类是信息分类可用性测试中较为理想的方法：让用户主导分类，具体做法是：用户按照自己的思路或直观感觉，把卡片归入已知的或由用户自己新建的类别里，以发现用户对于此类信息的心智模型，并检验事先假设是否直观合理，从而优化信息架构，提高信息浏览或检索的可用性。 Nielson写这篇文章的目的在于说明：卡片分类只是一种科学合理可用性测试方法，但要达到最佳的效果，操作时还需注意几点原则： 不要告诉用户完成任务所需要的具体操作名称； 例如：测试del.icio.us的导入书签功能。如果告诉用户：“你的常用浏览器中收藏了很多书签（bookmarks），你希望能在 del.icio.us中使用它们，现在把它们导入（import）进来。” 更有甚者：“使用导入书签（import bookmarks）命令导入你的浏览器本地收藏夹”。由于事先被告知了“import”和“bookmarks”这两个词，用户可能会直接在页面中扫 描，或者打开几个菜单，试图找到“import”和“bookmarks”字眼，然而这样就无法测试出“import”和“bookmarks”两个单词 的措辞是否合理，是否符合用户心智模型。可能对于一部分用户来说，更习惯用“favor sites”而不是“bookmarks”来表述收藏夹中的网站。所以最好使用类似下面的措辞： “你的常用浏览器中一定有不少收藏，现在完成一些操作，让你在del.icio.us中也可以使用它们。” 这 样，喜欢“favor site”而对“bookmarks”不熟悉的用户可能就会想：“favor site” 在哪？……没有，那页面中出现的这个“bookmarks”是否就是我的“favor site”？此时，如果用户不喜欢尝试，或者不能迅速地把两个单词联系到一起，就有可能完不成任务，“bookmarks”可能就要换成其他什么 词，“import”也一样。正如Nielson所说： “如果你告诉用户该用哪个，他们就永远不能以自然的方式使用软件。只会按照你告诉他们的去做; 而不是他们通常会怎么做。” 因此，测试的时候，不要告诉用户完成任务所需要的具体操作名称。给出这条原则是为了说明卡片分类测试常会遇到的一个问题：关键词匹配。Nielson通过一个case说明：如果对卡片上的关键词设定了某些过度明显的取向，可以大大增加用户分类成功的概率，但这样往往起不到较好的效果。例 如“番茄酱”、“番茄派”、“番茄汉堡”能够很容易地被分到“番茄”类中；而“番茄派”、“草莓派”、“香芋派”则轻易地被分到“派”里。到此有些设计者 就会说：“看，我成功了，因为用户们都分对了类！而且他们分得很快！” 而事实上，这样的分类没有任何挑战性，如果用户想都不想一打眼就能正确分类，那这种测试就没有意义了。“卡片分类不是设计用户界面，是一场关于知识的启发 式演习，用于发现的用户心智模型。” 一般情况下，当设计师对关键词难以取舍、模棱两可，或对专家词汇抱有疑虑的时候才找来用户进行卡片分类测试的。因此，为了优化关键词，我们希望用户能够 “略微驻足思考一下下，而不是简单地尽快完成任务”。当然思考也不能过长，以至无法完成任务。那怎样选择合适的关键词来提高卡片分类的测试效 果？Nielson给出了两点建议： 使用同义词。 使用多组同义词替换测试，或交叉组合测试。如，测试一组同义的动词1，2，3，或同义的名词a，b，c，或在需要组合的时候测试“1+b”,“2+a”等等。多组同义词测试有利于发现用户心中最合适的分类名称。 使用非并行结构。使用一组并行结构的词会人为降低分类难度，例如“购买商品”、“卖出商品”、“查询账单”，由于结构并列，没有干扰因素，使测试用户能够不假思索就正确分类，起不到卡片分类应有的效用。而“我要购买”、“卖出商品”、“账单查询”则拥有非并列结构，增加了一点难度，使得测试用户能够先思考一下具体意义，然后再理性地做出判断。 （对于第二点，起初我的理解与原文有较大偏差。事实上，易用性不是卡片分类测试的重点关注因素，人为降低一点易用性对理性和逻辑的分类是有帮助的，这是此篇文章的主旨。 在此感谢提出质疑的wendy同学，并向之前看过此篇博文的朋友表示歉意！） 总结： 做可用性测试只有保持中立的态度，使用中立的语言，才有可能发现更多潜在的问题； 卡片分类的主要任务是发现用户心智模型，在多组备选条目中找到最佳的表述，并找到正确的分类方式；不是单纯验证设计师分类的正确性，满足成就感。 http://www.uetalk.com/2009/09/how-to-organize-a-better-card-sorting/ ie SUCK! 恐怕接触过css设计的人都会这样讲。曾经无数次为了样式统一而在多个浏览器中来回切换，今天又被一个hover的问题扰得想骂人。最后，下了一个叫ieTester的东西，可以提供ie5.5到ie8的调试环境，就是不太稳定，有时会崩。 [caption id="attachment_208" align="alignnone" width="520" caption="ieTest"][/caption] http://www.uetalk.com/2009/08/ie-suck/ 最近接触到一款比较好用的css工具 — web developer，是Firefox插件。 FF工具栏上的一坨按钮 . web developer 可以使您方便地实时编辑web页面，甚至可以在线分析和修改其他站点的页面（当然，是修改css临时文件）。他使得设计过程一目了然，适合各阶段的css设计师和爱好者，给css初学者带来了福音。 鼠标滑过页面元素，显示对应标签 浏览器中直接编辑当前页面的css,实时更新样式. 显示当前页面的布局顺序 http://www.uetalk.com/2009/08/nice-css-tool-web-developer/ [caption id="attachment_182" align="alignleft" width="154" caption="新版WP的sidebar"][/caption] 终于受不了旧版本里写新日志时的Bug，升级，一定要升级！ 用InstantUpdate插件升级失败：http方式不成功，可能是文件权限的问题；接着尝试Ftp方式，这个比较狠，上来就直接删旧版本的文件，结果中间还是出了错：旧文件删了可新文件还没整好就卡住了。只好手动升级，下载新版本，本地解压，Ftp上传到服务器上，覆盖除了wp-content之外的文件夹，完成。访问admin，提示升级数据库，同意后5秒钟搞定。 新版的wp-admin果然爽了很多，左边的sidebar越看越眼熟，不错，哈哈！ 提示上传目录无权限问题，一是修改上传文件夹的权限为777，如果还是不行那可能就是默认上传文件夹错误，在admin里的“设置—〉其他 ”中设置默认文件夹的路径即可。 http://www.uetalk.com/2009/08/wp_update/ A 2~3months plan for UX books reading. http://www.uetalk.com/2009/08/reading-plan-of-uxbooks/ 刚读了刘老师的这篇文章，颇有感悟。其实交互中对于用户的称谓一直是一个不大不小的问题，多数情况下用比不用好，但“您”和“我”用哪个、在哪用、什么时候用，大家各有各的做法和理由。我非常同意刘老师给出的两点考虑：氛围和页面性质。这都是从大的方面考虑，分析地很透彻。而在这个大前提下，具体实施起来似乎也有点规律可循。这里主要结合这篇文章谈一点自己的想法： 一般说来，类似系统给出的提示和反馈信息，模态或者无模态的，用“您”比较合适，这符合人们“对话”的习惯，要不咋叫“对话框”？ 如果要表述用户发出的动作，而且用在button或link上，比如“买、卖、投诉、举报”等等词汇，用“我”做主语较为合适，像淘宝“我要买”和“我要卖”；但对于这一动作发出之后系统的反馈，就又回到了上面，用“您”。比如，点击了“我要买”之后，新页面中系统给提示“请输入您要购买的数量”，买完后又提示“您已成功购买此件商品”等等。另外，表明所属关系的短语，用在button和link上的，也是用“我”比较好，像“我的购物车”，Google的“我的产品”不能click，但也是所属关系的短语，故也在此列。 下面是一个比较闹心的情况：非明显的提示或反馈（如对话框），非button，非link，就是几段文字，表达用户可能关心的一些事，像“您”的第二张图中这种情形。个人感觉这是一个语言习惯的问题。一般情况下，“我的手推车里有5件商品，我还未付款”，日常生活中这样的话应该是用脑子过的，是不会成文、不会念出来的，所以当看到这句话、心里默念它的时候，是有些别扭的，潜意识会想：我在这自言自语干嘛？是想让我背过么？（记得小时候调皮，大人让默念1000遍“我是个坏小孩，我以后要乖乖……”orz） 其实这里只需要别人告诉我这件事，我知道就行了。相比之下，“您的手推车里有5件商品，您还未付款”就没有这种思维上的一点点混乱。可见，对于比较长的句子，即使是表明所属关系，仍不推荐自言自语，用“您”更好。 至于是否要统一，我觉得只要不影响用户体验，怎么顺溜怎么来。之所以某些页面会混乱，可能是对“您”和“我”的滥用造成的。不是说用的地方不对，而是频率太高。其实像Google这样就可以了，没必要我的产品下面又有“我的gmail”,"我的笔记本"。当然某些需要突出的概念除外，比如google里“地图”和“我的地图”可能是不同的概念，因为您可能使用“地图”但没有建立“我的地图”。而“flickr”，仿佛就是滥用的例子。多数情况下，只需要把用户引领到一种氛围中就行了，不用一直强调个没完。特别是当大量的“我”和大量的“您”出现在同一个页面中的时候，就会发觉自己一边听别人说话，一边还在自言自语， 这样真的会晕。一种解决方法是：少用。用一个“您”一个“我”划清信息区域后，剩下的称谓全去掉。另一种方法是：统一。但也不是说一个站点全改成一样，而是在用户当前所看到的页面中，设计成相对单一的情况，并保持一致的称谓。 写到此的感受：文案影响体验，文案设计很纠结。另外，交互设计成败应该有衡量标准，用“您”“我”比不用更能拉近关系，营造好的气氛，这一点毋庸置疑。但既然已经用了称谓，到底用“您”还是用“我”，造成的影响真的有差别么？选词与最终的转换率（用户转换率、商品成交率等）到底是什么关系？我想，还是从大的方面考虑更容易衡量。那就是：无论采用何种称谓，都是为了营造氛围，只要能营造出合适的氛围，就会引导正的转换率。能想到要去营造氛围并开始去做了，这就靠谱，至于这其中措辞，还是那句话：顺溜就好。 Liuyaping老师的原文见此链接：http://www.justkiddings.com/?p=6 有图有真相 http://www.uetalk.com/2009/07/the-experience-of-youni/