优秀的体验 - UCD大社区

产品需要合适自己的设计

白鸦 — 2008-07-26 22:54:27

上图左侧是电梯里的飘柔广告。
把洗发水的广告做成一面镜子的创意着实很棒。设计者清楚的知道：”在镜子上做广告更适合自己的品牌性质”。
不过，从上图中不难看出：由于劣质的制作，这面镜子的实际呈现效果严重变形，镜面本身的做工非常粗糙，结果该广告对品牌本身反倒有了负面影响。（别以为那是哈哈镜，他就是个劣质的镜子）。
好创意就这样被糟蹋了，看来设计不只需要创意。

上图是前不久在HCII酒会发现的一个”酒杯托”。
这个酒杯托造价低廉，使用灵活，可以非常方便的卡在餐盘上。在这种酒会里使用起来非常方便，无须一手拿盘一手拿酒杯。
不过，因为酒杯比餐盘高，所以这个东西只有餐盘拿在手里时才适用，放在桌上的时候不行。（上面这张图是我拿着拍的）

上图是白鸦的爱驾，右下角是它可以拆下来的车座。
这个小车的座子可以很方便的调节，拆卸。设计及实现成本都非常之低，但作用很大：
1、因为它很小巧可以满足全家所有人骑它的需求(当然不能是”一起”)，上至60岁的母亲，下至几岁的小朋友。所以，它”调节座位高度”的需求很大。
2、在充满和谐的北京，这样的自行车你根本不敢让它离开你的视线超过2分钟。哪怕你花了近百元买个”很结实”的锁。
所以，去沃尔玛的时候可以把它锁在电线杆上，同时拆下车座随身携带。一个字：”真强”。

上图是在豆瓣小组里，发言前和发言后的页面变化。
有人说”这种做法让用户麻烦了”，我说：”这种麻烦很好”。
大多数情况下连续回复的需求很小，连续回复的人多是些”灌水者”。往往设计这样一个小小的”挫折”就能少看到很多的”灌水”。
当然，防君子不防小人。如果你的产品很差，来的人都是激情灌水者，怎么搞他们还都一样会照灌不误。

上图是宜家网站的客服机器人。
这个机器人很有意思，把一项常见技术很好的融合入了宜家的服务当中，发挥了很大的价值。
而且他的技术实现很不错，我测试了50个左右的常见问题，98%都很好的回答上来。
机器人的弹出窗口和网页之间配合的也很好，比如，当我问”你们北京的店铺在那里？”他会自动将网站切换到北京宜家店的介绍页面，并在告诉我答案的同时提示我网站上已经列出来了北京宜家的店面介绍和说明；当我问”你们那里有没有可以折叠放在床上的电脑桌”，它就会把界面切换到这种桌子的搜索结果页。
当然，我认为这个机器人搞个弹出页面还不如直接出现在窗口的侧边栏或者用固定位置的层更好。

不只是这个机器人，整个宜家网站的导航设计是目前我见过的”类电子商务”网站中最好的。非常值得研究和学习，建议有时间的人多去看看。

体会：

1、我从来不赞成所谓的”设计规则”，因为任何设计的基础一定要先是”给什么样的人设计”"使用的场景是什么”。
所以设计根本不会有什么”万金油”。

2、所有的产品都有自己核心和重点，所有人都清楚：并非产品的每一个点我们都能完美的设计出来，不可能没有取舍。
这不仅仅是因为时间和精力问题，正如绘画一样有些渲染性的地方只需要适度”虚化”。
那么设计之处必须考虑清楚”服务的重点核心是什么”。比如，宜家很清楚他们网站的服务重点是”完美的导购体验”。

合适自己的设计才是最好的设计。

相关话题：优秀的体验源地址：http://ucdchina.com/blog/?p=268

几点闪光

Ami — 2008-07-26 22:51:19

出错，也能莞尔一笑～
遇到出错页面经常是让人讨厌的事，不过撞见些可爱的页面，有时反而成了种乐趣。个人最喜欢的404页面，是淘宝UED团队blog的那个。
“四零四啊四零四，没找到啊没找到～哇塞，这么偏僻的地方都被你找到了，赶快去淘宝买张彩票吧。”很有针对性，看他们博客的大多都明白啥是404，乐趣也就由之而来。

怪兽扬言说自家的是史上最可爱的404页面，貌似下面给得链接太多了，但是小兽的表情和语言还是很可爱的。

最惊喜是以前遇到抓虾的服务器迁移。平时撞见类似情况都觉得倒霉，唯有那次真是觉得好玩儿，才有了那篇有趣的体验。

蚂蚁升级时也弄了个，不过就没有抓虾好玩儿啦。

等待的乐趣
如今大家上网多为宽带了，一只小猫走遍互联网的日子成了过去式，页面大多一打开就显示完毕，需要loading的只是些flash或者视频。也许也就新天地的艺术活动会耗费心思做全flash的，但这loading的时间，却已经给了人小小的惊喜。

一张纸，一支小小的铅笔，独自在上面涂鸦了点儿，然后悠悠地停作了你的鼠标指针。等着无聊吧，晃悠了鼠标两下，接着画了呢～再晃、再画，图案渐渐清晰跃然眼前，涂鸦得不亦乐乎，loading完毕还有点意犹未尽的味道。

活动共有三个图案，每次loading随机出现一种，小兔特别尝试多次，都试了一下～:)

小力气，大作用
这是我自己想出来的点儿，用户在网站上做某种交互时，所耗的“力气”有多大？做个操作之前要想多久、整个过程有多少操作、动多少脑筋？所耗的力气小，用户去参与的可能性也就相对来说大些。

国外有人想出ClickComments
增加blog读者的互动，国内有也有了这样的新闻心情评论，似乎还有了新闻的心情排行榜～这随手一点，表达感受，简单的互动让用户更容易参与进来。

除了与网站内容的交互，人与人之间的互动也有简便的办法啦。如果不高兴发个消息什么的，在Facebook里有Poke，在怪兽可以打招呼：

也许每天在互联网上接触大量的信息，也有点懒，不愿意经常留言评论或者频频给人发消息。因此这种小力气的活儿，总是让我很有好感。遇到怪兽口水吧的签名，潜水居多的我也顺手签了一个～第二次去立即发现了好处，签过名的吧，在口水吧的首页就能进去啦～这些小功能，不仅有趣，也能带来便利呢。

不只是模仿
Flickr被和谐了，于是在国内觅个替代。试过了巴巴变，纯粹一个翻版。用到Yupoo，一个小小的细节却让我感到了一种“不只是模仿”的用心——虽然仅仅只是鼠标悬停时一个平滑地展开。

细节的力量
最后，和上次一样来说个生活中的例子，来作为我的总结。一次和BF外出逛街，累了饿了，附近一路上都没看见中意的店，不怎么喜欢PizzaHut，但也就去了。但之后，那家PizzaHut被他喻为“服务最好的匹萨店”。我自己回想，那家店哪里与众不同了呢？文明用语？上菜及时？其实最重要的只是源于这样一个细节：等我们坐下，开始点单时，服务员小姐问道：“请问两位觉得空调的温度合适吗？是否需要来两杯冰水？”那时只是春末初夏，并不热，只是小兔体虚太容易出汗，那时候正在拿着手帕抹汗。我出汗过多的问题，连我妈都不当回事儿，大概就BF和贴心好友才体恤我的不便，但是这家PizzaHut的营业员却想到了。之后他们的表现也中规中矩，由于那个细节带来的良好印象，让我们整体给了他们高分。

一两个出彩或者贴心的细节，也许不能就此决定整个产品/服务的好坏，但细节的力量是可以累积的。回到上文中提到的那家PizzaHut，服务员用语文明、反应即时(后来还要过一杯温水，也是马上就来)、也想到询问甜点是否等餐后再上——再加上那个特别贴心的细节，才造就了他们给人的良好整体印象。因此我始终坚信，用户体验要靠从细节处累积。正是有了每一处的用心，和那些闪光点，才会有真正出色的产品。

相关话题：优秀的体验源地址：http://ucdchina.com/blog/?p=250

那些总是发生的小事（续）

Angela — 2008-07-26 22:49:43

上回说道一些在网站上常常能看到的现象，有人说“感觉有的要求太高了。”可是用户对于产品的感受正是这些点点滴滴所积累起来的。而且，产品对于设计人员来说，简直就等于是自己的亲生儿子/闺女，对自己孩子的关心再仔细都不为过吧？

一个设计良好的界面/产品是不会让用户感觉别扭的。界面永远是一个默默服务的角色，它的最高境界就是让用户忘掉自己。

一个产品设计的从业人员应该具备的基本技能之一就是“职业敏感度”，也就是本能地对“糟糕的设计”感到不爽，同时也要善于发现好产品背后的故事。

基于以上两点，如果你以“用户”的身份去用一个产品后，没觉得任何不爽，那么你就应该换成“设计师”的身份去挖掘这个产品背后的设计──现在我们就来看看另一些总是发生的小事，那些让用户在不知不觉中爱上产品的小事。

第一件：总是很积极。

用户和机器的交互好象是在跳舞，用户动一下，机器响应；机器动一下，用户响应。只有通过这样的你来我往，舞蹈才得以继续。试想一下，如果你往前跨了一步，你的舞伴微笑并适时后退，你的感受是什么呢？可惜的是，这种在软件中被熟练应用的技巧，在网页上总是被忽略。

看看MAC OSX怎么响应用户行为的：

IE的工具条是这样响应的：

有个网站这样提示用户：

第二件：总是主动思考。

“你要找什么？UCD吗？好，让我想想……你经常用的是这个……另外还有一些“文稿”、“文件夹”、“邮件”等等，是你想找的东西吗？……如果都不是的话，我总共找到了717个文件，你要看看吗？……不用了？已经找到了？好的，不客气。”

我没有找到比这个更贴心的服务了，这比我在搜索前不得不选择文件类型、所在硬盘、搜索位置（文件名、标题或正文），不得不输入一些通配符（什么叫通配符？）要聪明得多，我为什么需要知道这些区别呢？。

PS：我很少点击“全部”，因为它找出的东西基本上都是我想要的。

第三件：总是鼓励我。

没错！就是这样！继续！很好！……我们好象羞于当面夸奖别人，但批评总是脱口而出，所以我看到到处都是红叉、惊叹号、红字，却鲜有这样的提示出现：

为什么要吝啬对别人的赞扬呢？

===============

这些产品你可能一直在用，却没有注意到它的妙处。正如前文所述，界面的最高境界就是让用户忘掉自己，这里的几个例子就达到它们的目的了。可惜的是，这样的Web产品实在是太少了。

相关话题：优秀的体验源地址：http://ucdchina.com/blog/?p=231

优秀设计所绽放的魅力（这样的flickr）

Lanx — 2008-07-26 22:46:41

我是Flickr的死忠fans，虽然我很久之前就开始在blog里不遗余力的介绍flickr，可以，一说到优秀的设计，我还是想把那些话再一次的搬出来讲给大家听，因为，flickr真的很棒！

1. 最浪漫的问好。
Flickr每天都会用一种不同国家的语言向您问好！然后对你说：现在你知道怎么用xx语说”你好”了！–这是一种多棒的体验，仿佛一位浪漫的男友，每天都给你送一朵不一样的花，魅力不在于这朵花，而是在于如此浪漫细心的考虑–让我怎能不爱上他？

2. 最搞怪的休站。
网站休站应该不是稀奇事，也见过不少网站好玩的休站公告–Bolglines，zhuaxia……都有挺好玩的休站画面.
抓虾休站截图

bloglines休站截图

可是flickr的休站真是让人觉得搞怪至极。想像一下，一大早醒来，像往常一样打开flickr的链接，赫然蹦出两个大圆圈–flickr休站了！不过您也别闲着，把这两个圈圈填上颜色，传到flickr，就有可能赢得flickr一年的pro帐号–29美刀呢！

虽然休站只持续了几个小时，却收到了不计其数的网友作品，这个活动让大家开心了好几天，以至在很长一段时间里，大家还在网络津津乐道这一极富创意的休站事件。

3. 最贴心的图像处理
Flickr清楚他们的很多用户并不是专业摄影爱好者，他们对于图片处理并不在行，所以，flickr提供了一些特别贴心的图片处理服务。比如：上载图片的过程中，如果图片过大，用户需要花费大量的时间上载，所以，flickr会给出提示：如果你愿意，他们会自动帮你自动调整图片大小。并且，在图片上载完毕后flickr会自动为你生成一批不同大小的缩略图，并且自动帮你锐化这些缩略图，对于那些不会处理图片，而且又端不稳相机的菜鸟来说，这些功能真是非常周到。

4. 最淘气的节日祝福。
Merry Christmas!! 网站有各种方式表达节日祝福，可我还是想说，flickr的方式却总是最出人意料的。很多Ffans都会很在意自己在flickr的explore照片数量–所谓explore，就是当天前500张最受关注的照片–有个专门的链接可以让用户查看他当天的explore数量。到了圣诞节那天，我惊奇的发现我有无数的explore! What a surprise!! 不可能吧！！难不成我一夜成名了？原来，调皮的flickr在那一天把每个用户的每张照片都搬上了explore。

5. flickr love you。
很多web2.0网站都会在自己的logo上加上Beta字样，因为这样是在告诉人家他们还在初级测试阶段，还会不断进步，因此，即便出现一些bug也应该情有可原。最一开始，flickr也是这么做的，在他们的logo上加上Beta字样，可很快，他们的Beta变成了Gamma，再后来，这个Gamma被love you取代了!! Flickr love you!! 这似乎暗示了一个不自信的宣称仍在测试的阶段已经终结。同时，又是一个无止尽时期的开始–因为，flickr爱他的每一位用户，所以他会不断努力做到更好！

这就是flickr–她通过点点滴滴的细节让人们体验到她的无穷魅力。即便在伟大的GFW将她拒于国门之外，也无法阻挡人们对她的热爱。他们依然迷恋她，依然想尽方法一睹她的芳容！

相关话题：优秀的体验 Flickr 源地址：http://ucdchina.com/blog/?p=239

五点参考

千鸟 — 2008-07-26 22:43:58

不系列了，只随便记五个印象比较深的事情。

1. Gtalk的加为好友通知

当用户在IM上加朋友为好友，建立人际关系列表的时候，往往会忽略被加的朋友也必须强制加他自己，而且还要人家实时回应，我就一直在想，凭什么啊？

QQ的方案，Icon以短消息的形式不断闪烁提醒，然后对话框确认；MSN的方案，咣当一下蹦出对话框打断用户。只有Gtalk，用户在被动接受陌生人打扰时，不会被强制接受，当点开面板才能“发现”，并且不影响其他操作。

小小的细节改动，让打扰更温柔，让沟通更礼貌。

2. Gmail的删除撤销

将会产生严重后果的重要操作必须再次确认，看到好多UI规范里边都是这么写的，确实没有错。但给用户的体验不好，尤其是大量数据操作，自己的操作感受：

手一抖就点错
容易忽略之前的确认
常在事情发生之后才反应过来

Gmail的方案正好解决了这几个问题，在发生之后提供反悔途径，而不是在之前反复确认。其实仔细想想，这也符合我们的习惯。

3. 抓虾和Feedburner的量级

超过100表示有点多，100等于是个分水岭。不知道这个数字是怎么来的，反正很符合我自己的习惯，记得最早是见于Google Reader的方案。

以前还替Feedburner考虑过，超过十万会是什么样子，结果不出所料，过了10k就是以k为单位递增。

4. wordpress的日期时间呈现

分成两行，上边是日期，下边是时间，方便用户视线定位到信息起始点，同时规避了列太宽的问题。

5. 抓虾的新功能提示

今天刚刚看到的：

视觉很有亲和力
应该是用PNG透明背景实现的阴影效果
固定在了屏幕右下角

关闭后再也没了，意犹未尽。

相关话题：优秀的体验源地址：http://ucdchina.com/blog/?p=214

这些设计，让网站似个彬彬有礼的绅士。

思域 — 2008-07-26 22:39:08

不可否认，web的用途越来越广。大家在互联网上看资讯/电影、聊天、找朋友/工作、玩游戏、写小说/日志、交易/买卖、听音乐/广播。互联网已经不仅仅是一个窗口，他已经成为我们工作和生活的伙伴。是的，他不是工具，而是伙伴，这些伙伴的数量听说全球已经达到一亿个了，在这些伙伴中，有些对我们很粗鲁，有些待人礼貌。UCD的含义就是“以用户为中心的设计”，那么怎样的网站让用户觉得他友好而且礼貌呢？

第一、礼貌的网站对我感兴趣，并且主动提供帮助。

对用户感兴趣的网站会记住用户，用户的操作记录、使用习惯、个人信息、购买历史等等。网站为什么要记住用户？因为网站在追求用户！来看看这些网站是怎么把我追到手的。

这个网站让我在一万年以后仍然能够知道，我做了这些，而且他还通过我的记录来揣摩我的心思，然后给我惊喜！如果我为我女朋友做了这些，她一定会娇滴滴的说：“你真坏！”

我邮箱里面的好友中，有一万个是C开头的，但是这个邮箱系统在我输入C字母的时候，马上列出我最经常用的，我一下就找到她了。慈禧在皇宫里估计也就这待遇了，太监们天天注意她的习惯，要不然就会忘记自己的脑袋随时会落地。

使用拼音输入法的人，经常会在搜索框中输入同音字，可是google不会怪你，她就像一个温柔美丽的售货员，用甜甜的笑容说：“先生！您是要卫生纸吧？”

西门庆就这样琢磨着女人的心思，给她们想要的，而且是女人们的男人所不能给的，制造一次次的惊喜，主动出击，如果我是潘金莲，我也会说：“官人我要！”

第二礼貌的网站尊重我

常在水边走的，哪有不湿鞋！我想各位在互联网上混了几年的大虾，被网站粗鲁是常有的事，那样的体验换作是谁都会不爽。他们经常把责任推卸在用户身上，告诉用户这样填是错的，那样的操作不对，他们常常硬性要求用户的行为。这样的网站就让他见鬼去吧！我们来看看下面一些会尊重用户的例子。

虽然我打开网页，出来了一个令我烦恼的窗口，可是幸好他把选择的权杖交给了我。

网站告诉我哪些信息是重要的，必填的。把不重要的信息隐藏了，不想干扰我，他知道我脾气不好！

类似Qzone这些网站不会那么粗鲁，在我点击提交之后他轻轻的把登陆框放在我面前，甜甜的说：“发表评论前需要先确定您的身份”。然后在我登陆之后她把登记册拿走，之前写的东西还在那里安静的等我。

我的朋友，就是因为你这句话我决定继续接收你的邮件！因为你懂得尊重我！

第三礼貌的网站会积极反馈

职场上流行一句话：“老板喜欢做事能够积极反馈的员工。”也许是因为这样老板比较放心吧！作为网站的用户，应该也是如此。试想，当我们点击某一按钮之后，发现页面迟迟不动，一分钟之后突然告诉我操作成功，是不是让人摸不着头脑？我还以为死机了呢。网站要积极的反馈这点其实很重要，不要责怪你的服务器慢、数据太多、带宽不足，无论如何你都应该告诉用户，哪怕是让他们稍等一下。来看看下面的例子。

我能很清楚的知道我在操作之后网页有什么反应

第四礼貌的网站会解决自己的问题

有时候网站会把用户当傻子，网站自身的问题，还责怪用户，给用户一个闭门羹。礼貌的网站是会解决自己的问题，只错能改是真君子，出现错误马上自己解决会受到对方的尊重。
比如常见的网页404错误，有些网站并没有做404跳转页，用户好不容易从搜索引擎或其他网站找到了你的页面，打开之后只是一面白墙，好似某机关的服务窗口，虽然开着，可是窗口里面的公务员翘着腿啃得满地瓜子，当你不存在。404错误，每个网站都会有，可是有些网站却会解决自己的问题，而不是逃避或者置之不理。

第五礼貌的网站灵活应变

对于很多网站，只要出现红色“*”的地方绝对的一夫当关，一项没有正确都不能够点击提交或者下一步，作为网站这样作是为了用户好，无可厚非，可是太死板就会给用户不友好的感觉。所谓的灵活应变其实就是想用户所想，人性化一些，比如下面这个邮箱必填项的例子。

一目了然，不必多言！

第六礼貌的网站让人信任

思域有这样的经历，在某BSP上写日志，写完提交之后告诉我字数超过限制，于是之前的全部白写，我抽烟喝酒拍打键盘。之后我严格按照字数来写，然后提交，居然因为服务器忙导致页面错误，提交再次失败，我上街杀人抢劫放火。后来我学乖了，先在word上先写好，然后再复制到BSP上，可是我写到一般这个世界停电了，发现忘记保存，于是我的世界从此黑暗。我害怕在一些博客系统发文章，因为我担心我辛苦几个小时的东西付之东流，不留一丝痕迹。直到 WordPress的出现，他可以让我随时保存，然后随时关闭页面，下次打开仍然继续。

请注意“保存并继续编辑”“保存”“发布”三个按钮。我爱死他们了，从此不再提心掉胆。

好了！今天先和大家讨论这些。最后补充一点，AlanCooper在他的《交互设计之路》中“什么让软件有礼貌”一章里提到了上面六点，他认为一个礼貌的软件应该具备十四个素质，除了以上六点还包括，礼貌的软件拥有常识、礼貌的软件会预知我的需要、礼貌的软件反应敏捷、礼貌的软件提供有用的信息、礼貌的软件有洞察力、礼貌的软件有自信、礼貌的软件很专注。这里就不再逐一说明了。有兴趣的可以向UCDchina借这本书。

感谢大家百忙中的阅读！

相关话题：优秀的体验源地址：http://ucdchina.com/blog/?p=195