Facebook的特别之处是什么?

为什么在facebook交友会更容易?facebook与传统的BSP(Blog Service Provider)到底有什么不同?是因为它有横竖两个导航吗?是因为它有个主人信息的聚合页面吗? Facebook为什么成功?又有哪些不足?Facebook商业上的成功使得它混乱的设计成了皇帝的新装,即使觉得看不懂也不敢去说。让我们拨开网页上那些纷繁的视觉表现,来看看藏在网页背后骨架—信息构架(IA Information Architecture),我们将获得一个全新视角,这种种疑问将迎刃而解。

传统的博客服务提供商(Blog Service Provider,简称BSP),比如:Qzone、新浪博客、网易博客…他们提供的博客服务,不仅仅是为每一位注册用户提供了一个属于自己的blog空间,还有用于bloger间彼此交流的平台。也就是说,信息构架是:个人空间+社区平台。

“个人空间+社区平台”是什么样子的?
一个个的blog彼此独立存在,再由一个社区平台将这些blog聚合一起,通过内容聚合在一起。

左上角的第一个表示主人态,主人可以看到BSP提供的所有服务,其中的B、D、E是他自己已经使用了的。
而下面一个个的是其他人的blog,其他人的blog包含的内容各不相同,有的用了相册,有的用了日志,有的用了视频…目前多数的BSP都是简单的把ABCDEF都简单的呈现给客人,不管主人用不用。
图中右半部分是社区平台,以内容为维度,展示内容,进而展示用户。比如,A代表日志,社区平台上会有个日志栏目,其中展示出很多有意思的日志,要看这篇日志,就到达另外一个人的blog了。交流实现了,所谓平台,价值也就在于此。

Blog原本就是一个个独立的,有了BSP提供blog服务后,才出现了社区平台,让用户能更方便的找到其他人。不仅仅是自己写给别人看,更可以用方便的找到志同道合的人,让众多bloger形成一个社区。

这样的结构有好处:
1.结构清晰。这结构我一说,你就明白了。估计我不说,你也能明白。
2.扩建容易。这是针对BSP来说的。要添加一项新的服务,可以分成两个步骤来进行,在个人blog中提供功能是一步,在社区平台上提供交流是另外一步,如果开发资源有限,可以不必同时做。比如,要提供一个视频服务,可以先在个人空间中提供给每个用户上传、展示视频的功能,暂时社区平台上没有视频方面的聚合内容也没关系,等有精力了再做不迟。

这种“个人+社区平台”模式的缺点:
各个blog之间的沟通比较困难。每个blog都属于个人,要从一个blog进入另外一个blog有两条路:
1. 通过blog中的好友、留言作者名称。我在一个blog中留了言,阅读到这个留言的人就可以通过这个留言的作者名进入我的blog。
2. 页面最上面的类似“进入社区平台”的链接。
这两个渠道的能量都很有限。空间中的好友是主人自己添加的。这个空间主人要是人缘差,没好友,没人留言,那第一条路就没了。“进入社区平台”链接只是个链接,点之前啥都看不到,我干嘛要去点?点了能有啥有意思的?

上面说的这种是传统BSP的信息构架。搞清楚了这个我们再来看另外一种比较新鲜的构架—facebook、myspace…的构架。

facebook的构架和“个人+社区平台”有个显著区别:主人信息是打散到社区平台的各个栏目中,因为这个区别,我在这里姑且给这种构架起个名字—“一体式”。

来看看“一体式”的结构:

既然主人页面中有个“日志”,社区平台也有个“日志”,那就合并成一个好啦。“我自己”就没啦,全部的构架就只剩下一个按内容分类的结构了。因为主人的信息是打散到各个ABCD…栏目中,这就需要给主人一个自己有关所有自己的聚合页面—主人的首页。方便用户查看所有与自己有关的所有信息:

真是页面是这样的:

打开网站中的一个栏目,比如,打开C,会显示为:

真实的网页是这样的:

进入到某一个人的空间中,别人的这个空间也不再是一个独立的小网站了,而是只用右侧来显示某个人的信息。左侧的内容分类导航则固定不变:

真实的网页是这样的:

这种信息构架的好处:
优点一.我自己的信息和别人的信息联系的十分紧密,当我查看我的相册时,直接就看到了其他人相册的一些信息。要了解其他人不再需要跳到单独的社区平台上了。这显然增进了互相的交流,所以在类似facebook这样的网站交友更容易。

优点二.提供了专门给主人的主页,于是可以提供更多专门给主人看的信息:谁最近又上传了照片啦,谁要加我为好友啦,谁又和谁成为好友啦…东家长西家短,可以向主人唠叨很多八卦。这些信息显然也有助于用户之间的沟通。

“一体化”模式的缺点:
缺点一.展示其他人的空间信息变得很受局限。
只有右侧栏可以显示当前空间的内容。当前空间(某个客人空间)的信息不能再做页签式的导航了。也就是说,不能显示成下面这样:

因为在左侧已经出现一套ABCDEF了,再在右侧出现当前空间主人的ACD,就混了,“要看这个人的A栏目内容,到底要点哪个A?”
关于这个主人的信息有很多很多,又不能用页签式的导航,要展现这么多信息自然吃力。当前主人的空间的二级栏目就只能加个“返回首页”的链接了,象下面这样:

这种“返回首页”类型的导航没有明确的展示出当前页面在网站中的位置,用的多了,看着就比较晕了。

缺点二.给主人自己的导航比较混乱。
上面提到需要给主人一个首页,用于显示所有和他相关的信息。除此以外,主人还需要知道别人看自己会是个什么样子。Facebook就给这两个页面分别起名叫:home 和 profile :

看到的效果就是我有两个主页,一个是给我自己用的,另外一个是别人看到的样子。也就是,主人模式首页和客人模式首页。

主人模式或客人模式又有很多共同的功效,比如:有好友在我的相册里写了一条评论,我可以在 home页中查看到,点击后进入相册:

也可以在profile中主动点击进入相册发现这条新评论:

这两个主页再加上上面提到的“返回首页链接而不页签”,实在就是够乱的了。在这里面转经常感觉像是在酒吧中灌下若干喜力后找洗手间的情形:东撞西撞的一眼看到了“洗手间”的牌子走进去就对了。下次再去还是不知道洗手间在什么地方。

对比两类构架:
对比两类比较典型SNS的信息构架模式,可以看出,第一种“个人空间+社区平台”模式,结构简单,但交流不畅。在越来越强调用户间互动的大潮下,这样的结构显得心有余而力不足。第二种 “一体化”模式,个人信息与公共信息浑然一体,在用户交流方法提供了更多的引导,但也是因为这个“浑然一体”,使得导航起来比较痛苦,结构看上去混乱,用起来迷糊。我相信,即便是除去英文这个语言因素,也没有谁敢说自己一上来就能很顺手的使用这个网站,总是得要学一阵子,还不见得能学明白。

互联网产品的交互设计方法(UPA2008讲稿)

目前交互设计在互联网产品中的应用状况
“交互设计可以提高产品可用性。”在国内的互联网行业中,建立在这个认识基础上,交互设计得到了普遍的接受。“产品设计开始的时候应该先交互啊~~”“你这个项目没交互过啊~~”这类的说法越来越多当然是好的信息,但是,交互设计工作到底应该怎么做才能提高产品可用性?通常的互联网产品研发中,交互设计工作是处于没有方法的状况。

理解交互设计
交互设计是一个设计工作。
交互设计是一门技术。
交互设计在目前阶段的主要使命是提高产品可用性。
通过对界面和操作行为的设计提高产品可用性。

互联网产品的特点
1.变化快。
2.质量低。
3.功能操作与信息传达并重。
4.高速创新从而带来的无标准。

那么,互联网产品的交互设计应该怎么做?

互联网产品的交互设计方法分享
经过长期的摸索、体会腾讯互联网产品,我们总结出了几个较为有效的设计方法:
方法一. 自然语言法。设计交互细节的方法。
方法二. 结构图法。设计产品信息构架的方法。
方法三. 任务走查法。对现有产品进行优化的方法,全面普查产品,包括对交互细节和信息构架。

这三个方法的思路,是基于对交互设计工作内容如下的分类:
1. 信息构架
2. 交互细节

但,严格来说,这样的理解是不对的。交互设计工作原本就是“交互细节”工作。另外有信息构架师来解决信息构架的问题。然而,上面提到了互联网产品快的特点,更多的研发步骤显然更容易将研发周期拖的更长,把信息构架工作和交互细节合并起来,减少一个环节,更适应互联网产品的研发特点。
“为什么不把信息构架工作交给产品经理来做呢?”如果说交互设计工作的核心是表达(这个观念,最后还会提到),那么,信息构架和交互细节都是表达的重要手段。信息构架不清楚的产品,怎么谈得到表达的清楚、明确呢。所以,交互设计的工作包含了两部分:信息构架和交互细节。

那么,下面我们就开始具体介绍这三个方法:

方法一. 自然语言法

使用自然的语言来表达页面信息。
这是一个设计界面交互细节的方法。
界面表达的要求是:清晰,明确,简洁,得体。
想象着用面对面的交流来传达信息,再将面对面的传达变为书面表达,再用界面语言翻译书面表达。

除了思路,我们还需要必备的原则、常用的表达方式和具体操作步骤。

页面表达原则:
1. 更少的信息量更好。
2. 结构化更易于理解。
3. 信息的表达应该清楚、明确、直接。
4. 操作可识别。
5. 操作前,结果可预知。
6. 操作时,操作有反馈。
7. 操作后,操作可撤销。
8. 让用户知道身处何地。
9. 避免内容看上去象广告。
10. 不提供多余的功能。
11. 相同的功能,在不同的页面中应保持一致性。
12. 措辞统一。

常用的页面表达方式:
1. 从左到右,从上到下。
2. 大字更突出。
3. 图形更吸引人。
4. 动画会被误认为是广告。
5. 内容逻辑:并列关系;从属关系。
    
6.多项并列的信息用

7.不同的排序方式VS筛选内容

具体操作
第一步. 概括待表达的信息
第二步. 将概括好的信息排序
第三步. 使用界面语言翻译

实例:中信银行卡

第一步. 概括信息:
描述应该是概括的,尽可能简短。例如:
● 您选择了回邮方式办卡,概括解释这个办卡方式。
● 接下来您应该 下载申请表
● 回邮办卡的全过程是这样的…
● 一系列注意事项。

第二步. 排序:
就是上面的顺序,没有变化。
有些时候排序会遇到困难,需要借助界面语言才能准确反应表达顺序。这正是界面设计的价值,它可以胜任一些单纯适用文字表达表达不好的情况。下面的黄钻续费案例中也许你就会遇到类似的问题。遇到这种问题时,记录下排序遇到的问题即可。在翻译过程中问题可能就解决掉了。

第三步. 翻译:

与之前界面对比:
● 开头几句信息顺序需要整理,使上下文关系更清晰。
● 对过程的描述可简化。
● “说明”应更结构化。

这里所说的“与对比界面之前”只是因为之前的需求文档中有相对具象的页面原型,而这并不意味着这里的工作是“优化页面原型”。需求的传达总会有一定的形式,也许是简单的页面原型,也许是一份需求文档。甚至可以更简单。有时相对具象化的信息记录或之前的页面反而会是干扰设计者以明确的思路来设计,尤其需要小心。

我们有了一种成型的方法,但这并不意味着我们设计出的页面就只有一个样子了。实际上不同的设计者使用这个方法会设计出不同的页面。下面这是另外一位设计师给出的思路,或许这是更好的方案:
1. 您选择了回邮方式办卡,概括解释这个办卡方式。
2. 第一步. 下载、填写申请表并回邮给中信
3. 第二步……………………..
4. 第四步……………………..
这样的信息概括和排序页面表现将是什么样子?你可以自己试着画画~~

练习:QQ空间黄钻催费页面

说明:
黄钻贵族是QQ空间中的VIP用户,黄钻贵族用户可以免费适用空间中的装扮,另外还可以享受到日志信纸、超大容量相册等诸多特权。
当用户的黄钻贵族身份即将到期的时候,从QQ聊天主面板上的“我的钱包”提示:“钱包”闪动,点击后用一个490*300px的小窗口告知用户续费的详情。
左侧图片在实际页面中是一个flash动画,若干张图片切换,显示黄钻用户可以装扮出的更好的空间效果。
右侧的续费方式希望在所有的续费方式中选择出两、三种比较常用的方式,直接显示出来(就是现在页面上的“家庭、网吧”两种方式),方便用户。同时提供“支付中心”链接(http://paycenter.qq.com/cgi-bin/showopenservice.cgi?service_type=home),让用户可以在全部续费方式中选择。

请使用上面介绍的自然语言法重新设计这个界面,让信息表达的更高效、清晰、明确。

参考方案
需要表达的信息:
● 某某某,您的黄钻要过期了。
● 黄钻贵族很棒滴~~
● 现在续费黄钻还有额外的优惠。
● 续费方式…

更好的信息:
● 某某某,您的黄钻要过期了。
● 您要是不再是黄钻了,就有XXXXX损失啦~~
● 现在续费黄钻还有额外的优惠。
● 续费方式…

总结“自然语言法”
自然语言法的基本思路是把界面表达转化为自然的人与人交流。人与人的交流是我们每天都会发生的,相对更容易,这个技能也更容易提高。
这里涉及到的两个例子都是比较偏向于信息表达的,对于操作较多的界面,这个方法仍旧适用。

方法二. 结构图法

这个方法的思路:抛开页面细节只考虑信息的组织形式。抛开页面细节,是的,就是上面讨论的那些具体的页面细节,只考虑信息的整体构架,而页面的细节留在确定了信息构架之后,用自然语言法来解决。

信息构架的原则:
1. 一个页面一个主要内容。
2. 个人信息&公共信息。
3. 网页基本内容有两种:列表和文档
4. 更少的信息更好
5. 一个用户自己生成内容的document页,有两个状态:浏览状态&编辑状态。
6. 信息树应该尽量窄而浅,并且尽量保持平衡。
7. 与现实生活经验相符
 ● 页面在网站中需要有一个固定的位置。
 ● 同等级的内容应表现成并列的样子。
     ……

信息构架的常见模型:
1. 列表+详情页+列表聚合页
2. Wizard模式。第一步->第二步->第三步…
3. 主页+若干个“临时”页面。例如:google帐户

具体操作
第一步. 明确描述全部内容。总结归纳产品所需要表达的所有信息。
第二步. 画树状图。
第三步. 用纸画各页草图。草图中需要包含的关键元素:页面标题、导航、重要的链接和按钮。
第四步. 模拟演示网页操作行为。

实例:黄钻等级



第一步. 总结归纳内容:
● 用户个人的的黄钻等级信息
● 等级介绍
● 黄钻功能特权介绍
● 黄钻贵族可免费领取的道具
● 黄钻活动

第二步. 树状图:
如果单纯的按照上面概括的信息罗列,则可以规划出一个黄钻贵族的网站,树状图如下:

然而,信息构架的设计往往要建立在对现有产品深刻的理解基础上。


Qzone的现状:一个社区,成千上万个个人空间。如何在现有的基础上设计新的黄钻等级?
我们的方案是这样的:

第三步. 草图:


这里需要强调:纸原型中应包括页面标题、模块的标题、导航、重要的链接和按钮,而不只是页面最顶端的导航。有了重要的链接和按钮才能清楚的演示出各个页面之间跳转的关系。

最后,第四步. 手握原型,演示页面间的跳转,确保整个流程的顺畅。

练习:QQ空间日志、心情、私密记事本

参考方案
总结归纳内容:
1. 日志
2. 心情
3. 私密记事本

树状图:
方案一:
● 主页
● “大日志”
    ■ 日志
    ■ 心情
    ■ 私密记事本
● 音乐盒
● 留言板
● 相册
……

方案二:
● 主页
● 日志
● 心情
● 私密记事本
● 音乐盒
● 留言板
● 相册

根据上面两种不同的树状图方案,接下来的页面草图也会是不同的,你可是试着画画…

方法三. 任务走查法

这是一种优化现有产品的方法。成本低,见效快。对产品整体上影响小。

以用户任务为线索,以可用性准则为依据。是的,这个说话很好记,类似“以事实为依据,以法律为准绳。”
“用户任务”是指用户实际使用这个产品时需要完成的任务。这个方法中,需要操作者依据主观判断制定用户任务,而不是通过用户研究。这虽然有可能造成更大的误差,但同时节约了时间成本。实际工作中,参与这个产品设计的同学坐在一起讨论一下,通常是可以比较准确的描述出用户任务的。
“可用性准则”在这个方法中是指:页面表达原则、信息构架原则、视觉表现规范,这三部分。页面表达原则和信息构架原则就是前面提到的,视觉表现规范是专门针对视觉设计而制定的。这个方法要处理的问题是现有产品,因此,不同于产品原型,更多了视觉表现这一环,在视觉设计过程中出现的问题也应该在走查中一起发现。

视觉表现规范
1. 滚动条看上去应该象滚动条
2. 表单的对齐方式
3. 重要的内容显示在第一屏
4. 导航应出现在第一屏上半部分
5. 尽量避免使用装饰性的图标
6. 避免内容看上去象广告
7. 光标样式
8. Tab需要有三种状态而不是两种
9. 红色表示警示,绿色表示ok,黄色表示提示
10. 灰色通常表示“暂不可用”(disabled)

具体操作
第一步. 分析并总结所有任务
第二步. 根据任务进行评估

评估中需要注意:
1. 不影响任务的问题不记录
2. 被记录的缺陷是有根据的(根据可用性准则),而不是根据自己的感觉。

实例:QQ秀快速换装

第一步. 任务列表:
● 换一套新形象
● 换表情
● 换心情
● 随便逛逛
● 换一个自己以前的形象

第二步. 评估。以“换心情”任务为例:

问题1 副标题表意不明确
描述:

这句说明仍旧没能说明“这里是什么功能”。如果能通过这句话说明:“在这里添加文字内容,显露您的心情”,说明的效果会更好。至于“让好友都知道!”这几个字几乎是没有用的,没有传达任何信息量。
依据:页面表达原则:信息的表达应该清楚、明确、直接。

问题2 “请输入心情秀”表意不明
描述:

“请输入心情秀文字”其实是第二层要表达的信息,第一层应该是:“这里还没有输入文字”。没有第一句,直接是第二句,需要用户花些时间来推断,推断出,这里显示“请输入心情秀文字”是因为自己没有写文字进去。
依据:页面表达原则:信息的表达应该清楚、明确、直接。

问题3 拖动心情秀时,光标使用不正确
描述:

光标在框中的是link的手型,实际上应该是十字箭头。现在会被误解为有点击操作。
依据:视觉表现规范:光标

问题4 “心情秀”概念不清
描述:

“心情秀预览”暗示出,“心情秀”是指外框+文字内容。
“换心情秀”功能只是换框,这意味着“心情秀”是指外框。
措辞上的含混使得同一个名词出现两种不同的定义,不易于理解。“既然心情秀是指外框+文字内容,那么当我点击“下一个”后,其中的文字内容是不是也会变化?”
依据:页面表达原则:措辞统一

问题5 换心情秀外框操作不便
描述:

“上一个”“下一个”的操作不方便。无预览图,无法确定当前选项在全部“框”的列表中所处位置。
依据:页面表达原则:操作结果不可预知

问题6 “预览”按钮视觉效果不佳
描述:

预览按钮视觉样式比较象disabled
依据:灰色通常表示“暂不可用”(disabled)

问题7 “脱掉”按钮不易找到
描述:

“脱掉”按钮在框的有下角,很多时候看不到,并且文字超小。
依据:页面表达原则:信息的表达应该清楚、明确、直接。

练习1:QQ秀照相馆

练习2:Qzone滔滔心情

总结任务走查法:
为什么要强调是“按任务”。因为,类似“保存形象按钮太难看啦~~”之类的问题是不应该提出来的。因为用户在实际使用的时候,这个问题是远远不如“误以为预览按钮不能点击”重要。“按任务”是在确保评估更接近真实。

“按任务”很多时候与“按栏目”差不多的,但是按任务的优点在于:
1. cover到了各个栏目之间跳转可能出现的问题。
2. 抓住了重点的问题,而放过了无关紧要的问题。比如:“申请红钻”按钮。

总结任务的过程实际是简化了的“人物角色-情景描述-任务分解”方法。

最后最后的总结

从狭义的交互设计的定义来看,交互设计的主要任务是:表达。通过清晰、准确、简洁的表达进而实现人机交互。
互联网产品的交互设计应该怎么做的问题,就演化成了:互联网产品应该如何去表达。
以上方法都紧紧围绕着“什么样的方法才能让产品的表达更有效”这个核心展开。

那么,
let’s talk
let’s talk
let’s talk
……

( 注:本文是UPA user friendy 2008中由我主持的一个同名工作坊的讲稿。

 

附讲稿:互联网产品交互设计方法

产品设计流程

产品开发流程和项目管理流程时常被大家关注,合理的过程是团队协作的基础。在大家把产品的功能和特性放在第一位的时候,开发和项目的管理至关重要,而产品的设计却往往被忽视,开发团队会为了那些晦涩难懂、令人费解的功能而夸夸其谈,复杂的产品特性通常会迫使产品团队放弃优雅简洁的设计,用户体验永远是可能是项目过程中最不重要的环节。如果你和你的团队希望重视产品的设计,就应该首先从团队架构和项目流程上来进行改造,我们的目标是设计优先、用户至上。当然技术团队和产品开发还是至关重要的环节,你需要将设计和开发的流程无缝的整合起来。

下面的团队架构和流程应该适用于各种产品、软件和网站的设计(如果您有好的建议或者不同的看法,可以直接留言或者邮件给我)

产品设计团队的六种逻辑角色

你也许不需要六个人来组成团队,但每个人的职能必须清晰。《Getting Real》中关于 “团队组织” 的建议值得参考,他告诉你了在这个快速的软件开发时代如何去组建一个高效的产品团队。

业务负责人(business owner)

通常是你的BOSS、产品最初的策划人或者是整个产品的业务主管,他们会分析产品的市场、定位客户、定义品牌、提出想法,同时拿定主意,产品团队里面的万金油

产品经理(product manager)

对产品负责的人,产品主管,他们会提出概念、收集确定需求、制定计划、控制进度并保障产品质量。在很多团队里面“业务负责人”和“产品经理”通常是同一个人。

产品设计(ui/id/ia design)

user interface design(人机界面设计), industry design(工业设计)and information architecture design(信息架构设计)。将这三种职能混合起来,因为他们并不能孤立存在,我们统称为产品设计。他们决定产品的所有功能细节,配合产品经理制作产品原型,与视觉设计师和用户研究人员共同完成产品的详细设计。产品设计过程中最重要的产品功能说明文档将由他们来跟踪完善。

视觉设计(visual design)

产品团队中最有艺术细胞的人,他们完成产品的外观和界面设计,是否好看由他们说了算,他们作为产品团队的艺术设计权威指导。

用户研究(user research)

最接近用户并了解用户的人(不需要技术高手或者是逻辑人),他们从产品的原型阶段就介入,配合产品设计师们做典型用户分析和用户目标分析,并对原型进行可用性测试,并制定最终的可用性测试计划。在很多产品团队里面,产品设计、视觉设计和用户研究通常会由一到两个人来担任,UI设计师会做用户研究,视觉设计是会做信息架构分析。

产品开发(production)

产品团队中的技术开发人员,网页制作或者程序开发,他们是产品的最终实现者,他们开发并进行单元测试,控制产品的最终品质。

产品从设计到发布的六个阶段

产品开发的过程可以看作是整个产品设计环节的最终实现部分,对于非技术人员来说它是一个把理想变成现实的神秘阶段

1. 概念阶段(concept)

一切从有了一个想法开始!

需要做的事情

  • 业务负责人与产品经理沟通商业需求以及产品品牌的定义
  • 产品经理针对这个想法提出自己的问题和需求,并提供解决方法与好处
  • 产品经理从各方面收集信息并制作概念文档
  • 业务负责人、产品经理、产品设计还有视觉设计们做到一起,来一场头脑风暴,证实这个想法并确定实现一个什么样的原型
  • 产品设计负责完成最初的产品原型

阶段交付物: 概念文档(concept document)或者是概念原型(concept prototype)

2. 探索阶段(discover)

那个伟大的想法已经得到了证实!

需要做的事情:

  • 在获取了多方面的意见之后业务负责人与产品经理进一步沟通商业需求以及产品的定义
  • 产品经理需要分析产品的战略、商业案例、财务计划、应对策略以及执行方案
  • 产品设计需要分析上一个版本的用户反馈和竞争对手的产品近况,将这些信息提交到产品经理那里
  • 产品设计和用户研究小组共同做用户案例分析,理清用户的使用目标并分析用户的使用流程
  • 产品设计、视觉设计和开发负责人预估自己的投入,并将这些信息提交给产品经理
  • 产品经理从市场分析(报告)、产品设计、视觉设计和开发负责人那里收集尽可能详细的信息,用来制作提案(可行性)文档

阶段交付物: 提案(可行性)文档(Proposal Document)

3. 定义阶段(definition)

大家的建议已经通过,产品经理来负责制定计划

需要做的事情:

 

  • 业务负责人要确定产品的最终定位(必须的)
  • 产品经理进一步分析产品团队提交过来的各种信息,开始制作产品需求文档
  • 产品经理宣布项目启动
  • 产品设计对产品概念设计进行进一步的完善,细化功能,制作一些具体的用户使用场景
  • 视觉设计开始为产品的视觉表现收集意见、寻找灵感
  • 用户研究小组在概念设计的基础上进行用户使用调研,问卷在白板上模拟用户操作都行
  • 产品对团对概念设计进行评审

阶段交付物: 需求文档(Product Requirement Document),产品概念设计(Concept Design Meterials)

4. 细化阶段(refinement)

开始按照需求的定义来细化产品的设计

需要做的事情:

 

  • 业务负责人需要对产品的推广和市场需求进行评估
  • 产品经理需要制定产品的路线图,并确定最终的发布时间和计划
  • 交互与视觉设计进入一个迭代的设计阶段,一次又一次的设计修改,直到最终的设计方案得到确认
    • 产品设计制作产品线框图、完成特性清单,并以 HTML、Flash 或其他的形式拿出产品的最终原型设计
    • 视觉设计配合产品设计细化产品外观的设计
    • 用户研究小组使用现有的原型进行可用性测试

阶段交付物: 产品线框图(Wireframes)、产品特性清单(Feature List)、最终的原型设计(可以是任何版本的,例如 HTML、Flash或者是专用的原型制作工具)

5. 开发阶段(development)

产品团队会在这个阶段与开发团队进行融合,双方对需求和设计进行充分的沟通,组成一个强大的产品开发团队

需要做的事情(产品团队):

 

  • 业务负责人要去进行商务拓展、寻求合作伙伴并规划市场
  • 产品经理需要制定详细的推广计划
  • 产品设计开始制作产品功能说明书,同时按照用户研究小组的测试来完善产品的UI设计
  • 视觉设计对产品团队进行艺术指导,同时要确认最终的产品外观设计
  • 用户研究小组进行原型测试
  • 产品经理对所有的设计进行确认,正式进入开发阶段,接下来就祈祷成功吧
  • 产品设计把最终确定的产品功能说明是提交给开发团队

这里有一点需要强调,你不需要去写冗长的功能说明和毫无意义的文档,因为原型设计已经帮你完成了很多流程和功能描述性的工作,如何做好你的产品文档,可以参考一下《Getting Real》中的 “关于文档”。

产品交付物 产品功能说明书(Product Functional Specification)

需要做的事情(开发团队)

 

  • 产品设计加入到开发团队里面,继续维护产品功能说明,同时帮助开发阶段的产品测试和质量监控
  • 用户研究小组也参与到开发团队之中,随着开发的进行去来更新他们的用户测试计划
  • 开发人员在一个接一个的小小胜利中拿出第一个 Beta 版本。

这里有几个原则需要铭记,保持小巧的软件、让开发人员为快乐而编码、倾听你的代码、使用开放的格式。关于编码的详细建议可以参考《Getting Real》中的 “关于编码”。

开发交付物: 产品的第一个 Beta 版本(Beta Launch)

6. 发布阶段(launch)

邀请用户参与你的 Beta 版本测试,直到产品正式发布

需要做的事情:

  • 用户研究小组收集用户的使用反馈,为下一个版本的改进做好准备
  • 产品设计维护现有的UI设计
  • 视觉设计继续修正现有的产品外观
  • 用户支持是产品团队中所有成员都应尽的义务,善待你的用户,从自己做起。

如何做好用户支持以及产品发布的维护,您可以参考一下《Getting Real》中关于对 “用户支持” 和 “产品推出之后的工作” 的建议,必定受益非浅。

参考的资源

  • Information Architecture Institute’s Tools – 这里有丰富的产品设计文档和资料,还有各种做线图和原型的模板
  • Urlgreyhot | Resource – michael angeles 的 blog,这里有丰富的产品设计文档、资源与素材
  • Getting Real – 37Signals 的这本书讲述了产品从构思到上线的全部构成,一个成功案例的教程,无论你是自己创业还是给人打工,都应该看看这本书,希望快速领悟其精髓的,可以看阅读一下 indigo 的《Getting Real 学习笔记》
  • 一叶千鸟同学的阅读收藏站 上面也有大量关于产品设计的文章

Update: 将“交互设计”更名为“产品设计”

苹果产品设计流程揭密

苹果的产品设计一向为全球用户和工业设计业内人士所瞩目,究竟在苹果公司内部进行着怎样的设计流程也令人好奇。日前在SXSW(西南偏南电影、音乐和互动媒体节)上,苹果高级工程经理Michael Lopp介绍了苹果的产品设计流程:

精细雕琢的设计原型

和其他公司设计师仅仅制作粗糙的模型不同,苹果设计师制造的模型精细到了每个细节。虽然这会大大增加工作量,也延长了设计完成的时间。但这一措施也避免了未来因设计模糊不清导致的麻烦。

10到3到1

为任何一项新功能和新设计,苹果设计师都要制作10个截然不同的设计模型。虽然很多公司都会这么做,但大部分企业制作的7个模型只是为了让其他三个看起来更好一些。苹果则不同,10个模型是设计师无限发挥想象力的作品,然后再大幅削减到三个可选模型,经过几个月的工作,最终确定一个最佳设计。

两线会议

每周,设计团队都召开两次会议。其中一次名为“大脑风暴”,设计师可以忘记所有工程上的禁锢,放飞自己的想象力,甚至拿出“疯狂”的点子。然后,他们还会召开一次完全独立的产品会议。这次会议上设计师和工程师齐聚一堂,解决设计中各种细节问题。这两线会议要贯穿整个开发进程。

高效时间管理-介绍GTD

gtd-cover

   人说在IT公司没有不忙的。你会发现每天RTX要闪烁几十个对话框是再正常不过的事情。可能你正好在写一个ppt,同时领导安排今天必须出一封邮件,刚在酝酿的时候突然还会有人电话催你开会,离开时刚好还有个朋友在QQ上请求帮忙找回密码,每天周而复始,逢人遍说忙似乎成了流行的口头禅。你会发现,时间永远也不够用,每天永远都有着“做不完”的事情。带着和所有人共同的问题,我了解了时间管理的方法论:GTD。下面我会带着一些自己的理解、更加直白的介绍一下GTD。

  GTD就是Get Thing Done的缩写,翻译过来就是“把事情做完”,David Allen这本书的中文名叫:《尽管去做》。GTD的核心理念概括一句话,就是:你必须记录下来你要做的事,然后整理安排自己一一去执行了。说起来简单,做起来不容易,我们看一下GTD的五个核心原则是:收集、整理、组织、回顾、执行。

 

gtd-principle

  先记住这五个原则的先后顺序。

  一、人类的大脑很强大,能存储很多东西,但让一个成年人回忆起所有童年的事情,很难。与其让大脑存放了这么多信息,不如把信息从脑海里拿出来记在纸上, 让大脑释放出来去思考如何做一件成功的事。所以,GTD的第一步是“收集”,把所有在脑海里浮现的信息(任务, 想法, 项目等等)记录到随身携带的小本子上(或者任何适合你的工具),把你的工作从大脑里面清出来,记录在可以看到的地方。GTD把这个叫做“收集箱”。

collect-workflow
 
  记录小提示:在纸上或其它设备里记录下工作时,应注意安排优先级,思考你的工作哪一项优先级最高,需要动脑筋。

  记录的技巧:涉及到记录的工具和线上和线下两种情况。线上能提醒的可以使用Outlook的任务和日历。比如:几点要找张三打个打电话,几点要发给李四一封邮件,几点去开会。另外还可以使用Google Calendar Sync把Google日历和Outlook日历同步,随时在多个办公地点查看。

  线下的工具是纸笔和手机,这里首先推荐的是纸和笔。当你“收集”完所有的信息后,就是“处理”了。

 二、 “处理(整理)”英文原意是Process,我提取了三点重要的内容:

  1) 不把任何信息放回收集箱,处理完一件任务就打一个对勾。
  2) 如果任何一项工作需要做,就马上执行去做(如果花的时间少于两分钟);或者委托别人完成,或者将其延期。
  3) 否则就把它存档或删除、或是为它定义合适的目标与情境,以便下一步执行。

two-minute-principle

  两分钟原则:不能不提一下处理的两分钟原则,我想更细的是:1秒+2分钟原则,对突然打断的事情,一秒钟评估,两分钟内能解决的,无论是任何事情,马上着手解决掉。如果不能在两分钟内解决,就进行下一步处理。这里不能拖,一件事一件事的来,一心不二用,两分钟处理完一件事,马上回到主要任务上来。
 
三、“组织”。“组织”应该是GTD中最关键的一点。“组织”主要分为对下一步行动的组织与对备份资料的组织。
下一步行动的组织一般可分为:等待处理清单、将来处理清单、下一步行动清单。  

  1) 等待处理清单主要是记录那些委派他人去做的工作,比如有封邮件问这件事有谁负责,可转交处理,如果你是主管,可安排下属去做。  
  2) 将来处理清单则是记录延迟处理且没有具体的完成日期的未来计划等等。  
  3) 下一步处理清单则是具体的下一步工作。而且如果一个任务涉及到多步骤的工作,那么需要将其细化成具体的项目。老外认为不能在两分钟钟内完成的、需要一系列动作来进行的任务叫作“项目”。

  常使用Outlook做时间管理的,还可以把Outlook建@todo,@waiting,@next三个文件夹进行“组织”任务。记得在工作中看到托哥使用的是“每日待办”文件夹。

  备份资料来自于对任务可行动的处理结果。对备份信息的组织主要就是一个文档管理系统,可用很多工具去存档这些资料,以前我使用的是网文快捕,现在发现Onenote也不错,推荐Onenote2007。 

  四、“回顾”

  我对回顾的理解是PDCA循环的一种方式,在每周回顾中,应该对比自己的年度目标,回顾自己在过去一周取得的进步,制定下一周的计划。如:回顾你的长期目标、中期目标和短期目标、回顾你在Onenote里的笔记、回顾你在Outook里的日程表、回顾你写在纸上的清单、回顾你的项目进展情况等等。

  目前我采用的是每日回顾、每周回顾一次,对自己的工作和其它事情进行回顾,看看哪里做的不好,需要改进,重新做出调整计划。

  五、“执行”就不用多讲,另外借用托哥的一个词“集中精神”,结合在一起就是:集中精神执行。

  最后看一下GTD的工作流,作为对GTD几个核心原则的回顾。记住工作流,然后严格按这个工作流来处理你手头上的任务。 
gtd-workflow
  接近文章结尾,如果说时间GTD时间管理可以帮助我们做什么的化,我想无非是:更合理的安排时间、更宏观的看待工作、更方便归纳总结,更快速的提升工作效率,让你成为时间的主人。有人说采用GTD时间管理可以有更为明确的人生目标,我想,严格按着他来执行你的工作,不断的去完善,一定会有一个清晰的未来。下面是一些我经常浏览的GTD中文网站或论坛:
http://www.gtdlife.cn
http://groups.google.com/group/gtdlife?hl=zh-CN
http://www.mifengtd.cn/articles/category/gtd

报告:中美用户搜索习惯对比

UCD翻译小组的三位同学齐心协力,将Enquiro Research的这篇报告有选择性地翻译了一部分,我将其整理成一份PDF文档,共分成四个部分,与大家共享。

第一部分:背景

• 50个中国学生
• 5个任务的随机分配
• 年龄介于18和26之间
• 狂热的互联网用户
• 主要语言是汉语
• 英语口语水平最高的是ESL二年级
• 对北美文化的接触有限。

第二部分:现象

• 谷歌用户的视线多数集中在头3条结果,而且超过70%的点击是在头2条结果。
• 百度用户的点击和视线都更加分散,少于45%的点击是在头3条结果上,用户似乎更倾向于扫描整个结果页面。
• 在后续访谈中,用户100%表示,百度给他们更好的体验。
• 百度用户更显著地频繁地来往于搜索结果页和搜索结果中的网页,用户似乎在利用该搜索结果页评估相关性,而非去看各条结果的内容。

第三部分:推论

• 中国消费者可能比美国消费者更细致……他们可能更愿意花时间比较一下其他他们认可的网站的搜索结果。
• 中国用户从多个SERP链接打开多个窗口,然后把所有候选项都下载到桌面,并对这些页面进行比较。

第四部分:交互习惯比较

• 在中文中,其最大的难度在于中文单字的含义受周围的单字影响,并且一个单字可以代表一个概念、一个单词,或者单词的一部分。
• 中国用户在一个页面上看到的更多。
• 中国搜索用户在最开始的交互过程中观察的是一个页面的更多空间,而北美用户是集中于左上角。
• 很多用户只输入开始几个汉字而不是更长的短语。然后他们使用页面下面给出的推荐关键词来提炼他们的查询条件。这种方式比传统键盘方式快很多。

中美用户搜索习惯对比

网页一屏有多大?

网站设计时,有一个最常用的指导性原则:页面长度原则上不超过3屏,宽度不超过1屏。这个原则明显是从用户的体验出发,特别是宽度不超过一屏,其最基本的表现是浏览器不出现横向滚动条,这几乎是目前的设计准则。那么这里的一屏到底是多大呢?

普通用户通常浏览网页时,其浏览网页的有效面积会受到下面几个方面的影响:

  1. 显示器的分辨率这个由科技发展和用户购买力及喜好决定,其数据取决于统计。
  2. 操作系统毫无疑问目前是Windows的天下,其中WindowsXP占绝大多数。
  3. 网页浏览器IE依旧份额最高,但是Firefox、Opera和Safari等也有一定市场。
  4. 个人定制主要是用户定制操作系统的样式、操作系统任务栏是否隐藏和浏览器的样式,但是总体上这部分应该属于高级用户,绝大部分用户依旧会使用操作系统和浏览器的默认样式。

下面是关于浏览器和屏幕分辨率的统计数据:
1
      W3Counter于2006.11.12发布的全球统计数据

2
    国内某知名站点2006年10月份的数据

由上面的数据可以得出:

  1. 基本上用户分辨率都在800×600以上,绝大部分都在1024×768以上,从全球情况来看,800×600的分辨率会越来越少。
  2. 国内浏览器依旧是IE6的天下,这将会持续较长的时间。从全球市场来看,国内的Firefox2.0和IE7会逐步增长,特别当IE7的中文版推出和Windows自动更新的推广开始以及随Vista上市,IE7增长会更快。

所以计算一屏大小应基于以下原则:

  1. 一屏指绝大部分用户的浏览器显示网页的有效可视区域。
  2. 一屏的计算环境是Windows XP和浏览器均处于默认样式。
  3. 由于IE无论是否超过一屏都存在纵向滚动条的位置,Firefox和Opera是在页面超过一屏的时候出现纵向滚动条,且浏览绝大部分网页都有纵向滚动条的存在,所以一屏大小的计算都基于浏览器有纵向滚动条的状态下。
  4. 由于Firefox2.0在只浏览一个网页时不出现多窗口的控制栏,而其它的多窗口浏览器都出现多窗口控制栏且使用时都会同时浏览多个网页,所以一屏大小在Firefox中指多窗口的控制栏存在时。

下面是基于上面的原则得到常用浏览器和分辨率下的的数据结果:

有效可视区域(单位:px)
屏幕
800 600 1024 768 1280 1024
IE6.0 779(+21) 432(+168) 1003(+21) 600(+168) 1259(+21) 856(+168)
IE7.0 779(+21) 452(+148) 1003(+21) 620(+148) 1259(+21) 876(+148)
Firefox2.0 783(+17) 417(+183) 1007(+17) 585(+183) 1263(+17) 841(+183)
Opera9.0 781(+19) 461(+139) 1005(+19) 629(+139) 1261(+19) 885(+139)

关于上面数据的解释和一些其他事实:

  1. 在800×600分辨率和Windows XP下定制Windows的经典样式IE6的有效可视区域是780×445,Windows98、Windows 2000和Windows2003均采用经典样式切IE5.0、IE5.5、IE6.0的布局上相似,所以相同分辨率下应该比Windows XP默认的样式要大。
  2. 知道浏览器型号和屏幕的分辨率能够很容易的推算出可视区域面积,比如1024×768下IE7.0的可视面积是(1024-21)×(1024-148)

综合上面所有的数据,结论如下:

  1. 最保守而最有兼容性的一屏大小是:779×432
  2. 最广泛的一屏大小是:1003×600
  3. 适合目前国内的情况,一屏大小是779×600

谷歌到底是谷歌,惊诧于Google宣传创意!







/ M- G; Q” ?0 R5 F

About Me

一个11年网龄的25岁小伙子。
2010终成夙愿
因为地震(5.12)未念完大学.
误打误撞进入了游戏圈。
关注范围包括:互联网产品,市场,运营,广告。
至今还一事无成。

搜索