诗沐的设计博客和作品集。提供网页设计/开发/用户体验咨询/wordpress博客主题设计等服务。记录网页设计&开发教程,发布wordpress主题。

endless posts

Home » blog » 思索

05/26/2010 (52 days ago)in思索

版权声明:本文来自于Shimu design,转载请注明作者信息及原文链接。
Trackback: 数据研究在交互设计中的应用

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

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

form

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

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

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

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

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

看看数据显示的实际情况

statistics

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

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

类似的网志,挑你喜欢的看:

10 Responses(+Share your idea)

  • diyism

    06/10/2010, 12:05

    在用触摸操作的gphone或ipad上, 我相信更多人不愿意按压坚硬的屏幕,
    建议改成触摸进度条式的金额输入方式, 默认指针在80就行了,
    使用鼠标的用户也更愿意这样操作.
    你埋那些点还不如一开始就这么干.

  • 橘左近

    06/10/2010, 13:24

    有一些个人意见
    我觉得没必要给出这4个选项,默认就显示自定义是最直接的,用户捐款是很主动的行为,而且你的数据也证实了使用自定义的人很多。

    如果有必要的话可以在旁边放个平均捐款金额的提示,比如平均捐款金额80元,说不定捐款金额会增加。

  • shimu

    06/10/2010, 15:30

    @diyism 手机上触摸按压并不是弊端,我身边的人包括我自己都习惯。滑块式的操作有利有弊,在这个捐钱的实际环境中,单选框更容易实现,兼容性更好。

    为什么没有一开始就那么干,是因为我没有数据的支持,就我个人经验来说,不能确定这样设置金额是合理的。

  • shimu

    06/10/2010, 15:32

    @橘左近 自定义金额约为40%多,那是否意味着要抛弃剩下的60%用户? 数据反映出,默认一个固定的金额是有用的,至少有20%的用户不用点击。

    自定义比默认多了两次操作,比选择多了一次操作。

  • eric

    06/11/2010, 10:57

    个人反而觉得滑块的操作没有按压来的好,在iphone或者Android上已经很习惯按压了。(PS:页面好黑啊,输入框分不清楚了都)

  • shimu

    06/11/2010, 14:45

    @eric 恩 这个博客主题完全是按照我自己的想象来发挥的。。输入框是难以区分,focus之后就好些,以后再评论就会习惯这个位置了。

  • iefen

    06/12/2010, 09:26

    师母我又来抬杠了。
    啥工作不需要经验和直觉阿?
    累计经验不仅仅发生在当前这个设计上,更需要围绕用户和日常生活中的决策小细节中来积累。

  • shimu

    06/12/2010, 12:12

    @iefen ella说的对!日常生活中的决策小细节,很容易忽略啊。

  • boing

    06/13/2010, 11:43

    1.“选择其他金额 > 填写数字 > 点击按钮”
    是否是当用户将鼠标指针点击文本框的时候可以实现自动选择“其他金额”选项呢?这样可以减少步骤。
    2.“其他金额”占的比例大,是否应该从所输入的金额比例来判断呢?可能大多数人在捐款之前心里已经想好了准备捐多少,而我们设计的选择是否有碍于他们的判断呢?
    2.小弟不才让您见笑,按照自己的想法设计的。
    http://www.ffgg.info/wp-content/uploads/2010/06/form21-300×97.jpg
    http://www.ffgg.info/wp-content/uploads/2010/06/form3-300×97.jpg

  • shimu

    06/13/2010, 12:01

    @boing 你的想法很好!

    1. 点击文本框自动选择其他金额,就是这么做的,但也不能减少选择“其他金额”这个选项的步骤(我是把这个步骤和填写数字分开来看的)。

    2. 我也想这么监控,不过统计起来十分蛮发,很难实现。所以后来还是从数据库里拿出平均值来看了。

leave a comment

* Required (but your email address will never be published)