支付宝实验室 - UCD大社区

矫枉过正的交互设计

shimuuu — 2010-06-10 11:32:25

在从事设计之后，我一直预防自己变成用户的“奴隶”。很不幸，现在的氛围却在把一些设计师变成用户的奴隶。

网志开头的那张图，是我在项目过程中遇到的一个例子。原来的设计是这样的：

看似很小的一个改动，其实能反映出大问题。我在下拉框中放默认选中的工商银行，是因为信用卡还款的用户中工商银行占据了大半壁江山。这样大部分用户就能少操作一次，尽管这里会分散一点他的注意力，也许他会试着点一下下拉框，看看是不是有问题直接把工商银行放出来了。但完全值得，因为这个学习成本很低，用户将从中获利。

过火的设计

由于银行之间的竞争关系，在实际情况中这里不能放某一具体银行。于是我建议默认状态的下拉框什么都不放，如下图：

但交互设计师认为，这里应该设计成网志开篇那张图的样子，也就是下拉框中加上请选择银行这句话，并且用链接色。理由是，让用户知道可点击这个下拉框。于是我哭笑不得。下拉框是标准的原生控件，不仅如此，它是伴随着图形化操作系统一路发展而来，我敢说只要是用过电脑的，没有一个用户不知道下拉框是干什么的，以及它可不可以点击。

在这里加上一个链接色的文字对于让用户点击毫无帮助。下拉框里的空白是让用户明白这里是空的，需要你填写。在用户一眼扫过表单的时候，即定位到哪些是我应该填写的。如果这里放有链接色或者正文色的文字，会有一个这里已经默认填写掉了的感觉；而用户视线定位到这个下拉框的时候，又发现这只不过是句废话。。。

《Don’t make me think》教了我们许多，被很多人奉为圣经，但他全书并没有说需要这么干才是让用户不用费脑筋思考。相反，这么干了，用户才会花时间思考。设计师需要预防这种心态，过于担心用户，会毁了自己的设计，长久以往，则会毁了自己作为设计师的直觉。事实上，不能把用户当傻子来看，这不是真实环境中的情况，用户要比一些设计师想像中聪明得多，而且乐于学习。而易学性，却是现在最被忽视的。

数据研究在交互设计中的应用

shimu — 2010-06-10 11:38:20

交互设计师一大宝贵财富就是他的经验和直觉，在大多数需要对当前设计作出迅速判断的情况中，交互设计师所依赖的就是他的经验和直觉。在互联网的世界中，最有价值的可能就是数据了。google靠数据一举奠定江湖地位；twitter靠数据开始逐渐走向成熟；每一个交互设计师也能用数据来弥补依靠经验和直觉来设计的不足。本篇网志从一个很小的设计案例来描述除了经验和直觉之外，数据研究也可以验证、修正、甚至颠覆设计。

通过经验和直觉产生的设计

上图是这个设计案例的真实环境，来自于青海玉树捐赠页面。这是一个很简单的捐赠表单，用户选择金额，然后点击确定就可提交表单。如图所示，让用户有4个具体金额可以选择，并有一个其他金额可以输入，同时默认选择50元，是按照我的经验和直觉来设计的。我希望大部分用户是认同这个默认金额，并且直接点按钮提交表单的，这样对于大部分用户来说只用一次点击就能完成捐赠。要选择其它三种给定金额的用户，需要两次操作；而要选择四种给定金额之外的用户，则需要三次操作（选择其他金额 > 填写数字 > 点击按钮）。而50、20、10、500这样的金额分布，是我基于对人民币金额的理解以及常规正太分布的想法来设计的，保证中间高，两头小。

经验和直觉可能不靠谱，设计数据监测来验证

以上这些想法绝对有可能不是用户真正操作时所想的。可能大部分用户觉得50块太少了，或者20块和10块无所谓选择哪一个。为了让这个金额更符合用户的期望，减少用户在选择金额时的操作，我在设计之初就和前端同学构思好了在此处添加埋点，监测用户操作的路径，统计出不同选择的占比。

数据监测设计想法是在用户各个操作的地方埋点，用户点击了则会发送一次请求到服务器，具体的设计为：

最后点击按钮为终点，通过在终点前一次的点击来判断用户不同的路径
用户进入页面后直接点击按钮为默认路径
用户进入页面后操作若干次之后最终选择50元为50路径
用户进入页面后最终选择20元为20路径
用户进入页面后最终选择10元为10路径
用户进入页面后最终选择500元为500路径
用户进入页面后最终选择其他金额为自定义路径

看看数据显示的实际情况

上图是截取了一部分真实数据的结果。由图标可见在捐赠笔数不断增加的几天内，自定义金额一直占据很高的比重，超过40%；默认金额只占据20%左右的比重；整体并不是完全的正太分布，选择500元的足够少，但是选择10块的人占据20%左右。

再结合这段时间内平均捐款金额为80元，可以针对之前的设计做相应的修正，调整金额设置以及默认金额设置。具体的设计调整就不详述了（捐赠平台二期还在开发中，暂不方便放出）。这个案例只是很小的一个点，可以窥见数据研究在交互设计中起到的作用，经验直觉和拿数据说话应该是两手抓，两手都要硬。

再给支付宝的流程优化建议

胖胡斐 — 2010-06-08 10:23:49

据说我至今都在用“老版”的支付宝，而且据说是全部切换的。看来我属于被支付宝遗弃bug命中的个别同学之一。随便吧，白鸦给我的新版好用多了。就当是我翻旧账，写了这么多，给别人看看也不难受。

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

为什么是“再给”？因为我在09年5月提过“支付宝不让我粘贴”的话题，今年2月说过“让我崩溃的支付宝流程”。

说实话，合适的内部流程我没有找到，也不知道是否能有用。但是我知道，在胖胡斐的博客里面写出来，至少，对那些关注用户体验的同学会有帮助，也至少，能和那些标榜自己关注用户体验，甚至打着“体验年”的同学们共勉吧。

事情是这样的，我今天要给一个朋友直接付款，用支付宝。结果发现自己证书需要更新。于是就出现了这样的流程。

在整个流程中，我嘴里骂出了“Kao”、“Cao”和“TMD”三句话，分别在三个旺旺表情的位置。不知大家是否能理解我的心情。
不算输入用户名密码之间的光标切换，我总共需要点25下鼠标左键。
我记得iPod成为经典，是因为Jobs偏执地要求“用户必须在3次点击之内找到要听的歌”，于是就有了那个圈圈。我实在不知道，如果Jobs评价上面的流程，会用什么语言。
没有道理让用户必须手工输入第二次收款帐号，我再重复一遍我的观点，相比我的手指头，我更信任朋友直接发给我的帐号Ctrl-C过来的内容。关于这个请看这里。
判断控件为什么在最后一步？是为了让前面的流程更顺利吗？可是有没有想过这样会让用户再走一边前面的复杂流程？我们走的是问题用户的流程，你看问题不大么？
如果我需要关掉浏览器，再打开一遍，至少我希望我还能登录吧。不好意思不行。那我希望我以前填写的信息还在，至少存在需要付款的交易里面吧，不好意思没有。所有的东西都必须重来一遍。这就真的是TMD了。没办法，为了付钱，我无聊地进行下去。
而且，这还没说，如果我用的是多tab浏览器，如MyIE之类，其他窗口都要关掉，那就更谢特了。
这一切，都是为了“安全”？如果这是我自己做出来的东西，我会跟自己说，不行。

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

意见提完了，建议肯定有的。

照我的想法，做了三个地方的小改，现在的流程会在14次点击之内完成，用户可以节省至少44%的点击和时间。
当然这绝对不是最优的方案，只是我随便排列一下做出来的。我抛砖而已。

判断控件放在前面，可以省掉重复操作。
选择“给亲朋好友付款”不用再点“下一步”了，直接进入。
用户Ctrl-V帐户之后，直接显示收款用户基本信息（你本来要给人家看），用户确认后再进行下一步。其实就是用一个简单直接的方法问用户一句“是这个人吗？”就像银行窗口问出来的那句一样。用户只需要说“是”或“不是”，而不需要再输入一遍。
换句话说，这里的关键确认信息，是“是不是这个人”，而不是“两次输入是否一致”，所以我去掉了。

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

总结说的话，我觉得也是三点，大家共勉：

产品设计时，要考虑问题用户的使用流程。问题用户（如没有证书的）都能走顺，才叫真的走顺。好的体验是“玩”出来的。
“安全”不是麻烦客户的借口。真正的安全感，绝不是“城门紧闭”，而是“夜不闭户”。
“因为信任，所以简单”这话虽然有点拧，但确实不错。体现在产品上，应该反过来“因为简单，所以信任”。

最后，我知道，一定会有人说我“说说是容易的”，或者“这些理论谁都会说”。可是，扪心自问，如果是一个谦虚的团队谦逊的人，不会这么说吧。而这，正是一个名声在外的团队或者人，赖以生存的基础。

相关话题：支付宝实验室源地址：http://www.panghufei.com/?p=10204

找茬：支付宝即时到账交易确认付款页面的交互设计

Kimi Huang — 2009-12-26 14:04:13

因为昨天被支付宝强行关闭了“余额支付”，所以一笔钱没有完成付款，刚刚来公司的时候，登录web去付款，体验了一下新设计的“即时到账交易付款确认页面”，我觉得在交互设计上，存在几个问题，找茬一把。

在上图片前，还是要说，这一次的支付宝改版是不错的，最大的优点是更加的专注和简洁。好了。恭维的说完，就开始找茬：

看上图，上面的1，2，3 各自区域，是我眼睛注释的顺序，我先看到1，觉得没有我需要确认的信息，然后看2，也没有看到我需要的信息，然后看到了3，发现25写的很大，而我最需要的，付款给who的信息在最下面，而且字体很小。

我个人觉得在这个地方信息布局有以下几个问题：

确认付款信息，最重要确认的是什么？应该是付给谁，多少钱，这两个信息是最重要的，但是却没有在重要的位置展示。我的建议是，将“收款方”用大号字体写在1号区域，然后还需要包括付款金额。然后是付款时间和理由。后者可以用相对较小的字体。
在确认信息中间，有一个“黄色”的隔断行，设计的初衷是“提醒”，但是这个提醒恰恰形成了视觉上的隔断效果。导致整个确认信息被隔成两个部分，这样对于有效的传递确认信息是不利的，建议这个部分的提醒放到其他位置，比如整体确认信息的右侧等。
另外，在文案上，也存在不少的瑕疵，比如：
- 1号区域的，“付款－ Yy”部分，实际上应该是“付款理由：”Yy是我填入的内容部分，但是看上去很怪怪的，这个字段的说明没有说明清楚。
- 3号区域的，”对方信息“，我觉得更加合适的是“收款方姓名” 和“收款方支付宝帐户” 分开。而不是对方信息。这个地方更加直接的传递会有利于用户的判断。

没有完美的产品，小步快跑是最好的办法了…加油伙计们…

相关话题：支付宝实验室源地址：http://www.kimihome.net/blog/?p=1052

支付宝lab logo设计创意发想

yangye — 2009-11-04 17:11:53

支付宝lab的意思是支付宝实验室，也就是概念产品聚集地，可以让用户快速试用这些新产品。本次支付宝lab logo设计历时一个星期，视觉设计组成员群策群力，从创意发想，初稿试水，到最后的成稿执行都凝聚着每一个成员的智慧。

以下是创意发想阶段的线描草稿

在创意发想阶段，我们共同提出了灯泡，电池，龙舟，瓶子，灯丝，化学，七巧板这几个方案。每一个方案的执行又有几个不同的变形，比如电池的充电方式可以表现成尾部新加电池充电或者将支付宝三个字看成三个电池同时为这三节的正极充电。又如在七巧板方案中，我们出了两套方案，分别是以lab做七巧板和以支付宝这三个字作为七巧板。

以下是根据草稿进一步细化的设计稿

在设计过程中大家都学习到了以下设计技巧和方法：

设计logo时会特别留意缩小后的显示效果（比如龙舟的方案缩小后会看不清楚）；
元素切忌过多堆叠使用（比如七巧板不宜过多，保持七个即可）；
线条不必过于拘泥于原字体，可以根据设计需要灵活变化（比如最终灯丝方案的设计，lab这几个字可以稍微胖一点，流动一点以符合灯泡的造型）；
做到清晰突出重点（例如电池的L表达起来不是很容易显得清晰和突出）。

综合以上的这些考量因素最终决定使用灯丝的logo设计（见下图）。该设计创意十足，同时兼具实验室元素，执行结果也显得得十分可爱和清晰。

这只是一个开始，相信UED视觉小组成员经过本次活动能够越来越多的参与到更多创意活动中来。用自己的力量营造UED的创意氛围，也让我们的用户眼前一亮！

相关话题：支付宝实验室源地址：http://ued.alipay.com/?p=1222

支付宝新版

白鸦 — 2009-12-11 16:16:37

新闻：http://tech.163.com/09/1210/16/5Q6GGEGU000915BF.html

采用白名单测试的原因：
1、保证系统运行压力的万无一失（这次不只是全新的UI，更是全新的底层系统）；
2、保证最后真正平民用户使用到经过修缮的版本；（支付宝的业务逻辑过于复杂，很多细致末节可能照顾不到。行业用户反正都要骂的，就让你们先开骂好了，只要骂的对我有好处）。
3、没有任何“病毒”传播的意思，对于支付宝来说也没有这种必要。

要用新版支付宝，请到支付宝官方博客留下你的支付宝账户（回复时的“联系方式”添上支付宝账户，只会被管理员看到不会暴露）。我们需要更多的测试意见和反馈。

相关话题：支付宝实验室源地址：http://uicom.net/blog/?p=854

从支付宝想到的

拖拉 — 2009-12-13 17:56:48

新版支付宝的使用体验非常好，UI非常顺手，逻辑也很易于理解。

而且不论从产品思路上还是从设计上，都进一步脱离了淘宝支付平台的影子，越来越朝着独立第三方支付平台&消费生活平台的方向发展。个人觉得这个路线，靠谱。

这样看的话，只要国家不出手，支付宝会是ali集团最有潜力的一个子公司。在市场上有先发优势，在集团内又有后发优势。

因为后发，所以在架构上就可以有一个比较健康先进的起点，同时在运营上也有专注唯一的思路，非常有精英小团队的气质。B2B不说，就连淘宝也有庞杂之嫌。

ali一直强调不在乎从外面招徕多少牛人（当然挖人的事情也一直在做），而希望在内部有牛人成长起来（比如运营营销方面，淘宝的胡斐是一个例子）。但是说起来，在业界和开发者圈子里都有影响力和声誉的，莫过于支付宝的Fenng和白鸦两位。我相信一个产品团队，能有思路清晰、关注细节、关注用户的专业人士作为精神领袖，好过是一个大忽悠在带队。

不过我这里想讲另一件事。服务产品经常会有一个现象：过度的安全策略（或者说是不成熟的安全策略）反而损害客户。

很典型的例子，是各种软件的正版验证，其实最后没能真的防住盗版，却让正版软件用户的利益受到损害。作为正版软件用户，可能不得不经受如下煎熬：联机验证激活（有一定几率还失败），验证机器码（还可能有次数限制），每次需要插光盘（光盘寿命有限）。只有在周边条件到位（宽带普及）、模式思路成熟的情况下，才会有steam这样面对盗版还很有竞争力的软件平台出现。

再一个典型的例子，是国内的网银，为了所谓的安全，个个都搞ActiveX插件，安全性没能真正得到保障，反而导致IE更加不稳定，同时也限制了用户向其他浏览器和操作系统的迁移。这就是不成熟的产品思路导致的。

最后一个例子，也是国内很多服务的通病，层层防护，设很多验证和问题，最后过几年，用户什么都忘光了，还是要靠人工审核来重置账户。比如支付宝，不知什么时候设的数字证书，系统重装过几百次了，手机号码也早换了，结果要取消手机绑定便需要数字证书，取消数字证书的时候却需要手机验证；比如QQ，谁记得自己9年前设的验证问答？所以所谓的安全方法，未必是对用户最便利的方法，永远都有优化的空间。

新版支付宝完全解析

可能吧 — 2009-12-14 11:44:26

盼望着，盼望着，东风来了，偶的账号被邀请了…总之我成为受到邀请的50万支付宝用户中的一位，根据白鸦老师的说法，“这部分用户是非常活跃的用户，非常熟悉支付宝各项功能与服务。我们希望能听到更多的声音，包括尖锐的批评。”为了响应这一伟大号召，下面把新版支付宝个人版的主要界面给大家做一个详细的预览，大家可以看看有什么重大的变化。同时我也会指出自己的一些看法。

一、首页

支付宝旧版首页

支付宝个人版首页

新版支付宝个人版的导航条被大幅压缩，比以前更加清晰简洁有条理。

旧版导航条

我要收款

我要收款首页担保交易收款即时到账收款 AA制收款

我要付款

生活助手

交易管理

交易管理首页交易地址管理退款管理红包管理购物券管理评价管理

我的支付宝

我的支付宝首页账户查询充值提现我的账户手机服务电话支付宝手机客户端

安全中心

安全中心首页支付盾数字证书安全检测支付宝信使手机动态口令

商家服务

我的商家服务网站集成支付宝营销工具信贷商家服务套餐商家活动

新版导航条

我的支付宝

首页我的账户支付方式手机服务联系人

消费记录

消费记录充提记录交易评价提醒和代扣

安全中心

安全中心安全产品安全策略安全合作

我的生活助手（右侧）

我要付款我要收款水电煤通讯费信用卡还款送礼金交房租 AA收款担保交易收款更多

导航条右侧的“我的生活助手”

这里我感到很不习惯的一条就是把收款和付款从导航条的一级导航挖走，搞到了右侧。而且“我的生活助手”并不醒目，看上去甚至像是一个广告按钮，当用户习惯性的按这个按钮的时候，突然在指向时就弹出了菜单，当时我吓了一跳，此时鼠标已然按了下去，心想：完了。好在鼠标单击之后菜单还在。这样的体验让人不是很舒服。如果是下拉菜单，就放一个向下的箭头，指示用户指向就可以了。

“更多服务”，点击将跳转到“哇！支付宝”的页面

新版“我的支付宝”首页强化了管理功能。新华社要把地球管起来，支付宝要把人民的钱袋子管起来。跟原来强调充值提现的单纯的账号操作不同，新版强调了支付宝在生活中的应用。当然，你应用得正欢乐呢，突然余额不足，自然而然就去找充值的连接在哪里了，所以说支付宝的改版相当聪明。

页面右侧有一个侧边栏。这个侧边栏始终存在于用户浏览支付宝主要功能的过程中，目的就是提供“立即充值”和“提现”两个按钮。好了，这样就不用在玩得正high的时候担心没处充值了。下面的常见问题会随着页面不同而有所变化。

当访问到某些较宽的页面时，侧边栏会像outlook工具条一样收起。

二、我的支付宝

新版“我的账户”

新版“手机服务”

旧版“手机服务”

新版手机服务的界面比以前要强得多。自从iPhone那个经典的滑块设计上市以来，好多界面都在学习，关键是它确实很有效也很好看。旧版页面有两个UI上说得不太通的地方：在绑定手机状态以后紧跟着就提示用户“您可以申请解除手机绑定”，仿佛在催促用户赶紧取消绑定一样。新版的“解除绑定”提示明显缩水。旧版的“手机基础服务”是必选的，既然是必选的，那为什么还要占这么大地方解释说明呢？解释了我又没的可选。所以新版压缩了这部分，只是给个小提示而已。

新版“联系人”界面

联系人功能以前只有在收款和付款界面会出现和自定义，很不正规。现在这个模块独立出来，以后想绑定淘宝甚至是掏浆糊都不是梦。

三、消费记录

消费记录

充值记录

评价记录

提醒和代扣页面

你可以像操作Google Calendar一样在这个页面新建一条提醒。如果这条提醒真的可以绑定Google Calendar或者Remember the Milk这样的服务就完美了——不过那样一来，安全性没准又不能保证吧。

四、安全中心

安全中心首页

旧版安全中心首页

旧版安全中心的首页和新版一比较，就体现出了明显的失败。比起新版，它看上去更像是一个电子邮件广告。在安全页面这个需要用户很快就看到的页面上用了铺满屏幕，而且没有意义的图片，而且配色还模糊了人们视线的焦点。旧版安全中心的首页还没有任何根据用户实际情况定制的操作。当然那些操作在旧版的“安全检查”页面。新版就像360一样预先检测用户的账号安全程度，并且会把用户可以采取的安全措施放到最醒目的位置。

旧版页面下面的钓鱼网站提示也很搞笑。为什么要把那个写着“https://www.alipay.com”的地址栏做的那么逼真呢？我原来给同班女生指导怎么上QQ的时候，她看到一张网页上的QQ登录框图片，就开始点那图片上面的“登录”，一直点，一直点，一直点……=。=

而且右下角两个“交易安全”的提示也太像是广告条了。总之，新版能解决这些问题还是非常好的。

安全产品

旧版堆放在导航条上的各种安全措施被集中到“安全产品”页面。不知为何好像“手机客户端”那个页面没有了。

安全策略

这是首页安全检测的延伸。相当于360里面的“全面体检”。

安全合作

那个“浏览器检测结果”的小黄条让人眼前一亮。不过按理应该是可以直接读user-agent检测出IE的具体版本的，应该不用让用户手动检测是否有更新。而且这里定义到了微软的官方网站，可是微软的下载中心页面做的有多难看是有目共睹的。用户到了那个页面，能不能找到下载链接都难说。

另外，为什么查木马是瑞星呢，为什么捏……

五、我的生活助手

我的生活助手导航

抛开让人有点晕的导航条不论……作为一个分支频道，为什么不设置“首页”，而要把事实上的首页起个名叫做“其他”呢？都已经“其他”了就很少有人会去关注了。

以下是做的基本一样的所有功能的首页。原来生活缴费的频道采用了tab切换形式，改成现在这样估计是怕以后晋升为变形金刚，功能太多，放不下去。

付款

重申：付款和收款在导航栏上的位置过于隐蔽了。要引导用户形成通过侧边栏寻找收付款链接的习惯，必须做好导引提示。

缴水电煤气费

缴通讯费

信用卡还款

送礼

交房租

收款

担保交易

六、结论

本次改版让我们看到支付宝在细节上的进步。为了保证服务的稳定，可以想象支付宝的UED团队，这支可以说全国最优秀的UED团队之一，每天都为正式版页面上欲说还休的设计缺陷抓狂，累积了那么多细节上的bug，在一个完全的新版里厚积薄发的一口气改掉。希望看到aliUED的成员也来一次裸奔。

本次改版还体现出支付宝在战略上的变化。原来支付宝是委身于淘宝之下的一个附加服务，它成长到今天这么大，很少有人会一开始就估计到。所以我们一开始看到的支付宝页面完全是为了满足最基本的支付需求。但是现在的支付宝，完全是一副我们“生活管家”的姿态，它希望你在日常生活进行跟钱有关的操作时都想起支付宝。相比之下谷歌更像是“女仆”，恭恭敬敬的提醒你：先生小姐，您的邮件来了。我们不一定会心甘情愿的把个人生活托管给谷歌，当然也不会愿意托管给支付宝。虽说现在它们还是不会背叛我们的，但千百年来的经验证明，想在内部搞点儿小动作，管家和女仆是最方便下手的人选。

改版以后的支付宝不叫“新版”，起了个名字叫“个人版”，也就是说还会有家庭基础版、家庭高级版、专业版、企业版和旗舰版什么的（误）。要确认你是个人还是企业，支付宝必须了解有关你的更多信息。支付宝以后也许会根据用户的不同身份而实行更加精确的定位，这样当然也就必须掌握我们更多的隐私。在它日益成为一种标准的时候，我们基本没办法保留自己的信息，否则就无法利用这个平台进行交易。但针对不同用户进行细分，可能还会涉及到用户的兴趣爱好、专业技能、甚至家庭构成啦、性取向啦，等等。这些距离一个支付平台可就有点远了。

支付宝有个口号叫“因为信任，所以简单”。我倒也有个口号，是现成的，希望支付宝能够一直：

不作恶。

相关话题：支付宝实验室源地址：http://www.kenengba.com/post/2099.html