传统的产品研发模式大致可以分为:产品调研-架构评估-产品启动-需求分析-产品设计-产品开发-产品发布七大阶段。本人在公司经历过大大小小的项目数以百计,发觉这些阶段一直以来都是以一条直线的形式串行着:从产品调研到产品发布,总是一拖到底。这样的做法对于范围比较大,周期比较长的项目,尤其是用户体验类项目而言,存在较大的弊端:我们很可能在没有足够清楚用户需求的情况下,定制了过多的辅助功能,这样即拉长了项目周期,又无谓的投入了过多的人力,在资源如此宝贵的今天,浪费资源实在太过奢侈,我代表春哥鄙视之…

言归正传,切入今天要谈的话题 —-“产品灰度上线的研发模式”。何谓“灰度上线”,简单点理解就是按产品需求优先级,抽出核心需求,在满足用户基本要求的情况下快速上线,并通过限制流量、白名单等机制进行产品试用,以此收集用户的意见,从而萃取出用户潜在的需求,形成后续更有针对性的设计方案。

和传统研发模式相比,这么做唯一的区别就在于将原先一锅粥式的需求和功能点进行了轻重缓急的排序,并以此将项目从原来的单长线作战转化为多迭代短线循环,让产品的生命周期不再昙花一现。

迭代开发

如此一来,需求分析阶段显得尤为关键,我们必须清晰的将需求按优先级归纳分类为几个序列,如:p1,p2,p3…核心功能和必备的体验在p1序列,辅助功能点和辅助型体验列在p2序列,争执不定的需求点可以放在p3序列。需求排序后,我们可以将项目发布点有序的分成(>2期),第一期只确保主要的核心功能和基础体验快速灰度上线,随后通过用户访谈、产品的tracker&session数据、业务数据等手段分析出用户对产品的真实反应,并以此调整二期需求,该加的加,该砍的砍,做到有的放矢。

有画面有真相,我们就以支付宝个人版三期中提醒代扣项目的研发始末为反例,正视我们现有研发模式中存在的问题:整个项目从产品启动到产品发布历时近3个月之久,发布后却尴尬的发现用户的青睐程度并不高,甚至可以用“门可罗雀”来形容产品使用率之惨淡,当然产品的始作蛹者可以推托怪罪于运营力度不够,也可以感慨产品的身不逢时,但是作为产品的设计者,在用户需求并不明朗,且欠东风的情况下除了核心功能,你完全没必要夹杂过多的辅助功能、体验…试想,在这个项目中,我们采用灰度上线的研发思路,那么这款产品的核心功能上线周期将缩短一倍有余,我们将赢得足够的时间观察用户,并形成相应的运营策略以及产品体验的优化策略。比之将产品一捅到底后奄奄一息,合理的规划迭代研发将使你的产品呈现出更旺盛的生命力,这样才可能撑过你感叹的“身不逢时”。


More »

最近一直在“深山老林”中修炼“支付宝新版收银台”,经历了白板设计,视觉设计,前端开发,前后端联调各个阶段。点点滴滴……

重点谈谈对交互设计的感受吧:个人觉得设计师应该好好的思考一下收银台的设计粒度,在我们不能确定用户是否会遇到某类问题时,不妨放开怀抱,将粒度切的大一些,如果一味的把自己当作用户,患得患失,其结果只会把自己的产品绑成个大粽子,这样很可能导致在不明确具体问题的情况下,设计粒度过细。到后期再想优化,就举步为艰了。

个人非常反对,设计师总是以“我觉得用户可能”,“我觉得用户一定”的论调在设计讨论中去说服需求方,“觉得”只是一种推测,既然不能确定用户会遇到你假设的问题,那为什么不能先把设计粒度切大一些,等产品上线,观察分析用户使用的情况后,再对症下药呢?究其原因,是因为设计师太怕用户受挫,关心则乱下失去了一些设计原则。我想,在不影响用户正常操作的情况下,对于一些假设的受挫场景,不妨放手一试,用户不犯错,你又怎么知道自己的产品问题在哪里呢。知错而改之,总比一辈子都活在自己“觉得”的世界里强。更何况未必错!

说了这么多,其实只是想引出一个话题,作为一个优秀的设计师,必须学会“如何均衡用户体验和系统实现”,要知道你设计的是一款产品,你必须对他的未来有一个规划,而这个规划,用户体验和系统实现之间的关系是非常微妙的。常常听到很多设计师再抱怨“我想到个很好的体验改进点子,但是开发告诉我系统实现不了,郁闷!”有没有想过为什么?我想很大一个原因就是因为前期设计粒度过细,到后面瓜就不好切了~~呜呼哀哉!总之一句话:“该有的体验一个也不能少,该有的原则同样不能少!”粒度要怎么切,很有学问,需要在不断的实践中去体会。

说到如何均衡体验和系统实现,不妨拿新老收银台做个比较,个人觉得非常有说服力,我们从老收银台现有问题着手分析一下:


More »

1. 不要让用户先注册再去选商品。

顾客们是来买东西的,不是来填表单的。所以需要确保用户在付款过程中完成了注册,而不是付款前就去注册,也不是让用户把商品放到购物车里之前去注册。注册表单的需要用户花功夫去填,注册过程中还可能有问题,所以这会成为用户顺利完成购物的障碍。

Taget这个网站就是当用户真正要把钱付了的时候,才让他去注册的。

在 购物流程中,把注册这个麻烦往后面移,能使最后购买商品的用户大大增加。用户既然一开始就花了很多时间选购他们想买的东西,那如果在付款的时候因为注册麻 烦而离开,前面选购商品花的时间久白费了。但如果用户还没开始选商品酒让他去注册,这时,他们还没花时间成本,就更容易选择离开。

2. 如果这个商品有货,明确地告诉用户

对商品有的库存数量需要明确地告诉用户。如果商品没货了,要早些让用户知道,避免用户购买时往后操作了好几步才发现原来商品没货了。不仅要在商品介绍页面显示库存数量,在用户搜索商品的结果页面也要显示出来。

Overclockers 在商品列表中,就列出了详细的库存数量信息。

另外,如果某个商品现在缺货,但最近就会进货了,可以提供给用户一个预定的功能,这样不急着买这个商品的用户,过几天来就可以买到了,他也不用担心过一阵子来买时,商品又售空了。

3. 让用户很方便地修改订单

每个人都可能出错,用户有可能在购物车里放错了商品,或者要付款的时候改变主意了。这时,要让用户在付款的过程中能修改他们购买的商品,如果不能修改他们可能就离开了,而能修改的话,就赢得了许多潜在用户。

IconDock 就让用户通过输入框中的数字,很方便地修改购买的数量。

如果用户想把商品从购物车中删掉,不要让他们在输入框中输“0”这个数字来删掉。还是提供“删除”这个链接比较好,通过点“删除”,可以让他们把商品从购物车中删掉,这样修改既快又简单。

4. 在用户操作过程中,提供给他们实时的帮助

因为付款过程需要用户输入信息,而用户很可能在这个过程中碰到问题,这些问题不一定能靠有限的几个界面来解决。这种情况下,提供给用户专业的,一对一得帮助,要比给他们一个宽泛的帮助(比如“常见问题”的页面)好很多,类似“常见问题”的页面不一定能解决用户碰到的问题。

在“戴尔”的购物网站上,用户就可以通过咨询电话和在线客服获得帮助。如果用户在付款过程中碰到了问题,她可以立刻咨询客服获得帮助,问题几分钟内就轻松解决了。

在用户付款过程中,提供在线客服或电话咨询的帮助是个非常好的主意。不过不是所有公司都能负担得起那么多客服成本的,大中型公司可以考虑这个方法,特别是那些网上付款流程比较复杂的公司。

5. 使“返回”按钮充分起到作用

“返回”按钮是网页浏览器中最常用的按钮之一,所以许多用户可能在付款过程中也会经常用到。一些网站不提供返回上一页的功能,当用户点“返回”时,页面会自动重新指向某个页面或是报错,这样会对用户的体验造成负面影响。

Ticketmaster 中,点“返回”按钮出现这样的报错,就会让用户有受挫感。

当 用户点“返回”按钮时,不仅不能老让他们碰到出错提示,而且如果前一页是表单的话,要保存他们之前填的数据并再次显示给他们看。这样用户只需要在原来填的 内容上做修改,而无需重新填写整个表单。的确,有些情况下,用户点“返回”已经为时已晚,比如他点了“确定支付”的按钮。不过别的一些页面都能支持“返 回”按钮的话,既节省了用户时间又减少了他们的挫败感。

亚马逊网站,说明了商品的颜色和详细情况,比如精装书/平装书,还提供链接返回查看原商品详细信息。不过他没有提供商品的缩略图。

Oxfam 提供了每件商品的缩略图,让用户能快速浏览。另外,如果用户想确认这个商品是否确实是自己想买的,还可以通过链接返回原商品介绍页面。

6. 提供操作流程的指引

付款通常是一个包括多步操作的流程。这意味着用户完成支付前会经过好几个页面。所以最好加一个操作流程指引,告诉用户他们现在的位置,即他们目前走到付款流程的哪一步,哪个页面上了,以及离完成过程还有哪几步。

苹果网站在所有付款页面上,都放了一个简洁的流程指引。

让用户知道自己在流程中的哪个位置,会给他们一种控制感,从可用性角度来说,这是很有必要的。当然,让用户知道后面还有哪几步操作,就可以完成了也会减少他们的疑惑。这样他们在完成付款前,根据自己的情况和想法,来调整或取消订单的自由度更大。

7.付款界面保持简洁

付款过程和网站上浏览型的网页不同。在付款过程中,用户并没有在购物。这意味着所有的浏览型操作在这里都是多余的,这只会分散用户的注意力,影响他正在完成的任务。设计时,要把那些不需要的元素去掉—比如,商品目录链接,热销商品推荐等,使界面保持简洁。

戴尔网站的付款页面,就没有商品的目录链接,而是让用户把所有注意力放在付款流程上。

有时用户会返回,再买一些商品,再来付款,所以需要提供一个“返回继续购物”的链接。另外,要确保所有指向“下一步”的按钮都大一些,避免用户找不到。

8.不要让用户离开付款流程

用户在付款过程中不要被打断很重要,比如,把用户引到一个和付款不相关的页面。把用户带离开付款流程会有以下两个问题:1)他们会搞不清自己究竟在哪里,甚至有可能付款的页面找不到了 2)他们可能会因为被打断而没有成功完成整个付款流程。

Laskys 网站的付款页面上,当鼠标悬停在某些元素上,会有帮助信息弹出告诉用户相关的功能说明。

不能打断用户付款流程,那么我们要找到一个方法显示不要的信息。如果需要提供一些帮助信息,而这些信息又不适合在当前页面上显示,可以考虑通过浮动窗口或弹出窗口显示。

9.告知用户商品配送时间

线上购物比起实体店购物,有个较大的弊端:用户需要等待几天才能收到购买的商品。所以当用户购买成功后,需要告诉他们大致需要等待的时间。

苹果网站会根据不同用户的订单显示相应的送货时间。

告知用户商品配送时间有以下几个原因:首先,用户要确保快递公司送货上门时,家中有人收快递。其次,这样用户会对货什么时候到有个心理预期,而不用老担心买 的东西怎么还没送到。送货时间显示得越早越好,最好在商品介绍的页面上就显示。这样的话,想购买该商品的用户,就能根据商品送到时间是否能满足需求,来决 定他们是否购买。

10.告诉用户之后会发生什么

当用户完成了商品购买,并点击了最后一步操作的按钮后,接着会出现什么?以“感谢您购买本商品”为结束语。这对用户来说,是一种礼貌的表示,而用户也一定很乐意接受这些体贴的话。

亚马逊网站,在用户付款完成时,就会显示:感谢您购买了此商品,并且告诉用户接下去可以做些什么。

另外,还要告诉用户接着还会发生什么——比如,当商品发货时,他们会收到一封邮件通知。这会消除用户对订单是否真正成功购买的不确定,他们安心。

11.发一封确认邮件

用户可能完成了商品订购并付款了,但其实还没结束。网站需要发一封确认邮件,告知用户购买商品的详细信息和送货到达的时间。这个信息还是很有帮助的,因为这让用户再次确定他们没买错商品,比较安心。

亚马逊网站会在用户付款后,发送关于购买的商品详细信息的邮件,并告诉用户如果买错,如何在商品发货前修改。

如果用户买错了商品,在商品发货前,需要提供给他们重新登陆并返回修改订单的机会。简单的出错,比如选择错了尺寸,颜色,经常会发生,所以网站需要让用户感觉在线上购物既简单又可靠。

这一段时间,我在进行“09帮助中心升级”项目,负责其中的白板和视觉设计,总算和Axure有了第一次的正式会晤。由于之前已经零散地学习过一些Axure的基础教程,也因Axure易用性还是挺高的,在制作大部分白板时,倒也得心应手。可…制作某个页面白板,需要使用Tab页签的时候,我碰到了问题--我不想通过刷新页面来达到效果…于是,我在网上寻求解决方案,找到了一大堆用Axure制作的Tab页签的样例文件和Axure源文件,可对于新手用户来说,理解起来还是有些困难。揣摩一番后,我总算明白了如何制作,现把整个过程整理了一下,希望能对同为新手的朋友有些帮助。(在往下看前,您需对Axure的工作环境有大致的了解,在此,我不对其进行讲解了^_^)

在制作这个教程时,我使用的是Axure RP Pro 5,为了让教程更简单,我们这次制作的Tab只有3个页签,分别为tab 1、tab 2、tab 3。

第1步:

拖动widget面板中的Dynamic Panel控件到线框图工作区中(如图1) ,蓝色区域的大小由我们要制作的Tab页签的大小决定,超出蓝色区域的元素皆不显示。

图1

第2步:

双击动态面板(即蓝色区域)打开一个动态面板状态管理器(Dynamic Panel State Manager)对话框,在对话框中你可以创建、重命名、重新排序、删除和编辑动态面板的状态(如图2)。

图2

为了便于记忆,我们对动态面板状态管理器进行以下编辑(如图3):

a.在Dynamic Panel Label中输入“Tab页签设计”(可依据你的喜好设置,最好能易识别和记忆)

b.单击“state 1”,呈选中状态,点击右侧“Rename”按钮,重命名为“tab 1”

c.在 Add new state的右侧输入框中输入“tab 2”,点击“Add”按钮。重复操作,添加“tab 3”。

图3

第3步:

双击动态面板状态管理器(Dynamic Panel State Manager)中的“tab 1”,在蓝色虚线框内绘制tab 1的页面,效果如图4。

图4

第4步:

a.选中含有“tab1”文字的上圆角矩形框,双击控件交互面板(Annotations&interactions)中的OnMouseEnter(这个教程是通过鼠标的滑动来切换各个页签,如果想通过鼠标点击进行切换,则双击OnClick),弹出交互场景属性面板(Interaction Case Properties),在面板中的step2中勾选Set Panel state(s) to State(s)相应的,会在step3中出现“Set Panel state to State”(如图5)。

图5

b.点击Panel state to State,弹出Set Panel state to state面板,勾选“set Tab页签设计state to state”,此时,step2中出现“Set Tab页签设计 state to tab 1”,单击tab 1,选择要显示的状态,这里选择tab 1。

同理,为含有“tab 2”和“tab 3”的上圆角矩形框添加交互行为,只是在b步骤中单击tab1选择显示状态时,分别选择tab 2、tab 3。效果如图6

图6

第5步:

全选tab1页面,ctrl+c复制。双击“动态Tab页签设计”动态面板,弹出动态面板状态管理器(Dynamic Panel State Manager)对话框,在panel state中双击tab 2,ctrl+v粘贴tab1页面。更改tab1上圆角矩形和tab2上圆角矩形的填充色,并更改内容。效果如图7所示。

图7

第6步:

依据第5步的操作,我们完成tab 3的设置。

第7步:

点击主菜单―Generate->Prototype (F5)或工具栏上的Prototype按钮,在打开的 Configure HTML Prototype对话框中,可以对原型进行配置和生成。配置完毕后,点击Generate按钮生成原型。

完毕,bow~

在用户体验这个行业,经常会听到,可用性可访问性这样专业的名词,但是,事实上在很多产品实现过程里都忽略了这一点!WHY?

举个很简单的例子,用户的注册流程,很多交互设计师在做这块流程设计的时候都无可避免的忽略了部分可用性和可访问性,直白点说,产品的应用场景没有cover全用户群,损害了这部分用户的可用性和访问性。

太抽象?不明白?好,那我们就用户注册流程展开,侃侃流程中用户提交表单的设计。

支付宝注册流程

看上图,这是现有支付宝注册流程中的一块功能,要实现的功能很简单,个人用户直接填写注册信息,是企业用户的话,就先选择企业,再填写注册信息,最后提交表单,完成操作。流程早就发布上线了,看上去很和谐,但是不然……


More »

Page123