Featured Posts

【社会化设计】自我(self)部分——欢迎区(welcome area)

Posted by puting | Posted in 未分类 | Posted on 17-11-2009

标签:

1

问题概述(Problem Summary)
对于一项服务(网站)的注册用户,都需要一个欢迎区(向导)来告知用户他们能够在这个网站上做什么以及该如何开始。

举例(Example)

以Tumblr.com上的新用户欢迎区为例。

以Tumblr.com上的新用户欢迎区域为例

何时用(Use When)
1.新注册用户第一次登陆网站的时候;
2.需要用户了解网站的使用流程及重要性功能的时候;

解决途径(Solution)
500px-Flickr-newaccount-welcomemail
flickr.com的欢迎邮件会发送到用户的flickr站内信收件箱中。

1.以热忱亲切的态度欢迎网站新用户:在新用户注册之后,显示一个特殊的欢迎窗或者发一封专门介绍网站重要特征的邮件给用户。除了一个能让用户快速了解的网站功能的向导之外,可以考虑发送一份欢迎邮件。最好能让用户能够便捷的地移除欢迎区从而使用网站的全部功能特征。
2.像在家里款待宾客那样招待你的新用户:如果可能的话,亲自去欢迎他们,并在不打扰他们的前提下,每隔一段时候去问候一下他们。

逻辑依据(Rationale)
为网站的新用户们提供一个欢迎区或者使用向导,这类似于为新进员工或者大学新生举行的一个迎新会,或者像是带第一次去你家的朋友们参观你的家。你越是以平易近人的方式欢迎新用户,他们越能感觉到轻松舒适,同时,也愿意花更多的时间在你的网站上。

————————————————-

原文(英文):Welcome area
本文链接:http://socialdesign.cn/2009/11/welcome_area/
译者:puting
审校:Yvonne
欢迎转载,转载请标明出处和译者以及英文链接和本文链接。

【社会化设计】自我(self)部分——邀请测试版本(private beta)

Posted by puting | Posted in 未分类 | Posted on 04-09-2009

标签:, , , , , , ,

1

问题概述(Problem Summary)
用户想要加入一个目前还是处在邀请测试阶段的网站。

例子(Example) 
500px-Twine-beta-home
twine.com——左上角上显示网站还是beta版的。首页上的注册形式显示网站还处在内测版,每天通过邀请来增添会员加入网站。Twine目前已经不是测试版了。

何时用(Use When)
1.当你允许用户注册加入到内测版网站的时候,可以使用此模式;
2.当你允许一小部分用户通过邀请其他用户以病毒传播的方式(在控制范围内)来发展你网站的时候,可以使用此模式;

解决途径(Solution)
1.明确表明网站目前还处在内测阶段;
2.提供一些功能特征和好处列表或者产品演示,让用户了解注册以后能做些什么;
3.当要求用户注册以便接收有关测试版本或下一个版本的邀请信息的时候信息:
—提供一个电子邮件输入框;
—提供一个用户名输入框;
—要有一个确认页面,让用户知道了网站已经收到注册请求,并说明将在多少时间之内给予一个反馈或者是邀请。
—发送一封确认邮件到用户提供的这个邮件地址,提醒用户什么时候可以收到加入内测版的邀请

4.当允许用户可以限量邀请一部分用户加入到内测版的时候:
—明确表明用户有多少邀请可以发送;
—记录用户已经用掉了都是邀请,以及还有多少可用的邀请;
—允许用户自定义邀请的内容;
—明确地向被邀请者表达网站的一些特色功能和好处;

逻辑依据(Rationale)
在网站正式上线之前,内测版本通过一小部分人来测试网站的社交特征。从内测版本开始,让网站有机会能有一批来自朋友或者家人的种子会员,这样就避免一些冷启动带来的问题。

特殊案例(Special Cases)
在早些时候,Beta的目的是在一段时间内要求真正的用户测试网站——找出一些在较小规模的测试组不能发现的bug——然后快速采取行动或者正式发布,然后更大规模的用户可以访问。

在如今这个web2.0的时代,能够快速的发布web应用程序,我们看到越来越多的网站上浮现着beta版的标志并永远保留。

这通常是不利于用户和软件开发过程的,Beta版本无疑牵涉到质量和产品生命周期的发展。维持很长一段时间的beta版,这告诉用户网站有很多bug,而你也许不会花时间去修复它们。这意味你不在乎网站,不去改进哪些导致用户离开的功能——既然是这样,他们为什么不离开呢。

500px-Gmail-beta

Gmail从2004年到现在一直是Beta版本。

 500px-Flickr-gamma-2007

从04年开始,Flick也保持很多年的beta版本。Flickr在06年底至07年初是gamma版本。这个是2007年2月份的flickr首页。

————————————————-

原文(英文):Private_Beta
本文链接:http://socialdesign.cn/2009/09/private_beta/
译者:puting
欢迎转载,转载请标明出处和译者以及英文链接和本文链接。

【社会化设计】自我(self)部分——授权

Posted by puting | Posted in 未分类 | Posted on 04-09-2009

标签:, , ,

1

问题概述(Problem Summary)
用户想要把站在站点A上数据或文件带到站点B上去。(译者注:比如在facebook上导入我msn上的好友列表)。

例子(Example)
flickr 授权页面
允许flickr应用访用户在facebook上的数据信息的授权页面。

flickr
允许facebook上我的Flickr应用程序读取flickr.com帐户的授权页面。

flickr授权
flickr允许第三方访问用户的flickr帐户信息的授权页面。一旦被允许访问,我在flickr上的图片就可以显示在我的facebook上的flickr应用上。

何时用(Use When)
1.通过访问其他网站(站点A)的数据,可以增强你的网站上某些功能或者填充某些内容的时候,可以用这个模式;
2.用户生成内容或您网站上的数据有可能被提高,或可以促使用户在其他网站(站点B)上参与
到你的网站上的时候,可以使用这个模式。

解决途径(Solution)
对于站点A:
1.在自动地使用密码反面模式(the Password Anti-Pattern )去访问用户的数据之前,先查看下这个网站是不是支持Oauth。如果支持,利用该协议,以方便数据的交换。
2. 站点A应该询问用户哪些信息可以被访问;
3.显示一些可能的选项,图片类的有flickr,photobucket,smugmug等,联系人的有雅虎地址簿,Plaxo,Google等;
4.一旦用户选择了有她们数据的网站,站点A就应该发送访问请求到该站点;
5. 对于获取到的用户数据在站点A上的用途应该有明确说明;

对于站点B:
1.使用开发的授权协议,如Oauth,让授权过程能顺利进行;
2.站点A将要发送她们的用户到站点B。用户登录到这个帐户,站点B应该有一个页面询问用户是否真的要和站点A共享其数据信息。
3.根据协议,用户被送回到站点A,这时,用户在站点B上的数据可以在站点A上被使用了。
4.有关如何使用站点A授予的权限应当明确地提交给站点B上的用户;
5.允许用户在任何时候取消授权。为用户提供一种简单的从站点A上撤销授权的方式。

逻辑依据(Rationale)
使用授权流程和类似Oauth协议,允许用户访问站点之间而不用曝露他们的用户名和密码。这个过程首选的方法是允许共享数据而不是使用密码反面模式。

————————————————-

原文(英文):Authorize
本文链接:http://socialdesign.cn/2009/09/authorize/
译者:puting
欢迎转载,转载请标明出处和译者以及英文链接和本文链接。

【社会化设计】自我(self)部分——密码反面模式(the Password Anti-pattern)

Posted by puting | Posted in 未分类 | Posted on 03-09-2009

标签:, , ,

0

问题概述(Problem Summary)
用户被要求输入其他网站的登录名和登录密码,以便网站能访问到该用户在其他网站的地址簿 ,联系人列表或者其他一些数据。

例子(Example)
untitled
ilike上的密码反面模式
untitled2
plaxo用了“密码反面模式”,要求用户的google帐户和密码;

何时用(Use When)
1.当你允许用户从其他网站上抓取朋友和联系人数据的时候,不要使用此模式;
2.如果你想让用户了解是如何被欺骗的(被钓鱼),请使用此模式;
3.遏制采用开放的社会化可移植标准,请使用此模式。

解决途径(Solution)
1.访问第三方数据应要求在第三方网站验证,不管网站提示说:网站不会保留用户名和密码;
2.利用诸如Oauth验证层服务,阻止钓鱼式攻击;
3.使用OpenID的,允许用户控制谁可以访问他们的授权数据。

逻辑依据(Rationale)
1.用户应该能访问到他们的数据,并允许从一个网站携带到另一个网站。社会化网站不应该通过 教育用户同意给出他们在任何网站的用户名和密码,来传播这种坏的行为;
2. 尽管这种现象已经变得越来越普遍和容易操作,这种交互行为是一种“反面模式”;
3. 这种进程违反了许多第三方网站的用户服务条款;
4.通过鼓励用户随意地给出他们的用户名和密码,社交网站正在让用户了解自己是如何被欺骗的(被钓鱼);
5.做为选择,社会化网站应应采用开放技术,如OAuth和OpenID的协议,该协议允许在第三方位网站上发生验证;
6. OAuth是“一种开放的协议,以一种简单标准的方式,允许安全地API授权。”换句话说,一个开 放的技术,允许想要一个用户的数据的网站能够以一种安全的方式访问,不要求用户抛出所有 在互联网上他们的登录名字和密码。实际访问发生在第三方的网站,这些数据仍存储在第三方 网站上并在其控制下的。美国在线,雅虎和谷歌都同意支持OAuth,在未来几年,应该没有理 由持续这种反面模式。

译者注:在软件工程中,一个反面模式(anti-pattern或antipattern)指的是在实践中明显出现但又低效或是有待优化的设计模式[1][2],是用来解决问题的带有共同性的不良方法。它们已经经过研究并分类,以防止日后重蹈覆辙,并能在研发尚未投产的系统时辨认出来。

————————————————-

原文(英文):The_Password_Anti-Pattern
本文链接:http://socialdesign.cn/2009/09/the_password_anti-pattern/
译者:puting
欢迎转载,转载请标明出处和译者以及英文链接和本文链接。

【社会化设计】自我(self)部分——邀请之发送邀请

Posted by puting | Posted in 未分类 | Posted on 25-08-2009

标签:, , ,

0

问题概述(Problem Summary)
用户把一个加入到某个网站的邀请发送给一个朋友或者是一群朋友。

例子(Example) 
500px-Plaxo-invitepeople
Plaxo.com通过电子邮件邀请好友。

500px-Twitter-invitebyemail
twitter.com 通过电子邮件邀请好友。

什么时候用(Use When)
1.当用户体验通过一个网络关系可以得到提升的时候;
2.当一些服务的增长需要依赖朋友的朋友的时候;
3.当网站需要通过现有用户群体的推荐来发展更多用户的时候;
4.当用户充分参与到网站中来,形成了一些有价值的观点需要向朋友推荐的时候;
5.不要在用户注册之后马上就让用户邀请好友,那时候用户还没有真正了解网站。当显示邀请选项的时候,要让用户在充分和网6.站交互并且真正有一些东西向朋友推荐。
[如果一个网站一开始就是依靠用户的网络关系的时候,是不是上面的这一点就变得无效呢?(译者注:如开心网,facebook等社交网络,如果一开始不邀请一些现实中的朋友,那是一点也不好玩啊。)]

解决途径(Solution)
1.使用一个上下文背景的邮件形式;
2.给用户提供一些加入到这个网站的好处的信息;
3.用户能编辑预先设定的邀请内容,并且允许用户对对邀请进行一些个性设置;
4.允许用户通过地址簿来邀请好友;
5.提供一个允许用户发送一个拷贝给自己的功能;
6.提供一个允许用户导入其他社会化网络上的联系人和电子邮件地址的方式。使用一个标准的可接受的技术像OAuth和OpenID,而不是使用密码反模式(译者注:一些网站在邀请你的msn用户的时候,会要求你输入你MSN的帐户和密码)。
7.不要强制用户在使用一些功能之前就要求她们邀请好友;
8.不要给用户的其他网站的邮件地址簿或者其他的联系人列表发送垃圾邮件;

————————————————-

原文(英文):Send Invitation
本文链接:http://socialdesign.cn/2009/08/send_invitation/
译者:puting
欢迎转载,转载请标明出处和译者以及英文链接和本文链接。

【社会化设计】自我(self)部分——退出

Posted by puting | Posted in 未分类 | Posted on 14-08-2009

标签:, , , , , ,

0

问题(Problem)
用户想从一个系统退出,变成一个匿名用户。

例子(Example)
500px-3-12-flickr-SignOut
flickr.com的退出页面(landing page)清晰地显示了用户已经从flick上退出

何时用到(Use When)
用户想结束他们的session;
用户想用户匿名身份浏览网站;
用户在一台公用电脑上操作,需要退出以便保护自己的隐私和帐户安全;
对于退出的用户,网站还想与其保持一种关系的时候,需要提供一些用户下一步能做的建议和一些关于新功能的信息。

解决途径(Solution)  
提供一个退出提示页面(landing page),告诉用户已经从网站退出了;
提供一些未登陆用户也能操作的功能选项,或者是一些返回的链接;
提供一个简易快速的“重登录”的链接;
保持退出提示页面(landing page)的简洁轻快,以避免用户在退出时候遇到阻碍而影响用户的积极情绪。

逻辑依据(Rationale)
1.一旦用户从一个网站退出之后,往往不知道下一步该做什么。在很多时候,网站会把退出用户扔到网站的首页上去,这让用户感到很迷茫,还有很多网站总是没有明确提醒用户是否已经成功退出;
2.在退出流程中,提供一个退出提示页面(landing page),让用户明确知道自己已经成功退出了;
3.退出页面(landing page)也是个很好的向用户推介网站新特征和功能的好机会,说不定用户会发现一些新东西而重新登录。

————————————————-

原文(英文):Sign out
本文链接:http://socialdesign.cn/2009/08/sign_out/
译者:puting
欢迎转载,转载请标明出处和译者以及英文链接和本文链接。

【社会化设计】自我(self)部分——登录sign in

Posted by puting | Posted in 未分类 | Posted on 12-07-2009

标签:, , , ,

2

什么(What)
用户希望访问他们存储在网站上的个性化信息或者应用程序。

例子(Example)
雅虎登录设计

Sign in module from Yahoo!
雅虎的登录模块。

什么时候用(Use When)
1.当用户需要存储个人资料或有个性化定制需求的时候。
2.当用户需要存储他们自己贡献的内容,且需要把这些归档到其用户名下的时候;
3.涉及到安全和隐私以及用户的数据需要被保护的时候。

 怎么使用(How)

Twitter-signinmodule
Twitter.com的登录模块

             
1.提供一个用户名的输入框。这个应该是一个唯一的身份标识。许多网站使用电子邮件地址用作用户名,以避免当网站达到一定的规模而出现的用户名用完的问题。

Dopplr-signinwidget
Dopplr.com的登陆widget

为避免出现不必要的错误,应明确标明需要什么类型的用户名。许多用户经常使用各种类型的用户名登录,他们会记不起应该使用什么类型的用户来登录,如果不明确告诉是用什么类型的,这会使用户沮丧从而放弃该网站。

3-10-centerd-signinmodule
centrd.com明确告诉用户需要使用注册的email地址来做为登录用户名

2.提供一个密码输入框。
3.提供一个找回密码的明确方式。
4. 提供一个显眼的登陆和注册按钮。如果合适的话,允许用户在一段时间内保持登录状态。这常常是有一个复选框,清晰的让用户知道保持登录状态多久。
5.一旦登录成功,应通过一定的方式反映用户处在登录状态。一般通过显示用户名(登录用户名或昵称)和一个退出(Sign Out)来表示。一旦登录,提供一个退出(Sign Out)方式。
6.如果用户还没有账号,应提供一个简单的注册方式,且避免影响老用户的登录。
7.像“保持登录状态2个星期”,“在这台电脑上记住我”等选项应该是用户自愿选择的,以避免用户在公用的电脑上使用而出现的问题。

目标可达性(Accessibility)
登录表单的输入框应该可通过键盘来切换,通过敲回车键完成登录。

逻辑依据(Why)
1.要求用户登录是确保用户以某种身份参与和贡献内容,可以让用户在一个网站上建立某种声誉。
2.需要登录验证将保持网站敏感数据的安全。

————————————————-

原文(英文):Sign In
本文链接:http://socialdesign.cn/2009/07/sign-in/
译者:puting
欢迎转载,转载请标明出处和译者以及英文链接和本文链接。

【社会化设计】基本原则-巧问

Posted by puting | Posted in 未分类 | Posted on 17-06-2009

标签:, , , , ,

0

人们谈话或对话的一个最常见的结构形式是问和答。从最初的邮件列表,新闻组,Gopher(译者注:基于菜单驱动的Internet信息查询工具),到常见问题列表(FAQs)都是在寻求通过收集社区智慧或来自权威的答案来回答人们的问题。

人们自然有问题,并询问,他们要么是静静地在寻找答案,如果有机会,他们直接会询问(在一个邀请的界面上或在一个受欢迎,有着经验丰富成员的小组中) 。

这个设计样式告诉你怎么以一个“网站的声音”来询问用户问题。

例子(Example)
Twitter 通过问你一个问题让你开始twitter之旅

问题(Problem)
到达一个页面是非常简单的事情,但是不知道自己该做什么,怎么进行下一步操作,该说点什么,该写点什么。一面空白是非常可怕的事情。(你应该能想象的到我在开始写这个设计样式之前那种脑子空白) 

一个空白或者冷清的一面让访客不知道该如何进行下一步操作。

情景(Context)
在撰写一些解释性文案,帮助文字,标记一些目前还没有启用的新特征的时候会用到这个样式。

解决途径(Solution)
巧问问题。
用诱人的问题形式来提出建议。以一种好奇的方式撰写问题,让用户忍不住来回答。

逻辑依据(Rationale)
问题引发反应,以邀请参与的方式问问题。

例子(Examples)
twitter-what are u doing

Twitter问:“你在做什么?”一些人就“上钩了”,不管他们是不是望文生义,至少他们被询问和提示了。他们开始交谈了。他们诚挚地邀请您答复。

——————————————

原文(英文):Ask Questions
本文链接:http://socialdesign.cn/2009/06/ask-questions/
译者:puting
欢迎转载,转载请标明出处和译者以及英文链接和本文链接。

【社会化设计】基本原则-严格界定VS灵活多变

Posted by puting | Posted in 未分类 | Posted on 14-06-2009

标签:, , , ,

1

严格界定VS灵活多变

留下未完成的设计部分包括那些确定的内容和自由形态的内容。因为我常常会使用Flickr ,作为一种典型兴盛的社会化应用,人们很容易看到这两种设计的例子。Flickr界面的一些要素是严格确定的,这些包括对象模型,网站的主导航和预定义关系类型得的候选名单。

 该对象模型规定了人,人们收藏的媒体对象,人们可以参加群组和在群组中提交媒体对象等等。该网站的主导航这些项目已在最高层:(主页,你,整理,联系人,小组,发掘) 。预定义关系类型的候选名单允许一个人确定另一人作为联系(这种关系无须对方同意就可以生效),并随意地进一步将其归为朋友、家庭成员、或两者兼而有之。

3057294286_b18c7ab656_o.png

在Flickr上,你可以把一个联系人归类成朋友,家人或者两者兼而有之(或者都不是)

我不是说这些设计和信息架构是一成不变的。自上线以来,Flickr增加了第二媒体类型(视频) ,在不改变基本设计理念下重构了其导航菜单,还从允许用户定义其他关系的自由连接的模式发展到今天仅有一种的形式(很少用户利用这一功能,因此它提供的价值有限) 。

这最后的变化回到采用更为灵活的分类的做法上,这可以使用户在适当情况下用一个不断发展的方式,创造出一些概念,标签,分类和群组,以满足他们的需求,而不需要你的要求。作为设计者,应该充分预测可以促进和支持你的社会化应用的各种情形 。

除了这些“刚性”分类法,Flickr确实给予了用户无限自由并仔细界定沿轴线发明他们需要的东西。这方面的例子包括Flickr的众所周知的自由标记功能,用户可以标记自己的对象和给用户允许其他用户标记的选择权限。

3057318132_ecd0c41fb2_o.png

社会化应用的设计者没有办法可以预见每个用户可能要用到得标签。例如,一个受控词汇是否都将包括一个标记所谓“ thehairofchrisheilmann ” ?

Flickr固有的另一个自由分类元素的设计是可以无限制的用任何可以想象的名称或意图来创建群组。这个特征将涉及我们目前讨论的一些模式,包括群组的概念,极其简单的群组形式,讨论,参与和邀请方式,并可以向群组pool中添加照片和视频 。

 Flickr用户还发明了群组奖赏的概念。这些往往是在用户对一个特别相关的图片或视频的评论提供一些华而不实的图像和通常一些伴随着加入相关的群组的邀请 。许多人认为这些奖励是俗气和强迫人的,但它们却代表了用户的创新发明和Flickr UI的许可(但不直接支持) 。

用这种方式(带或不带奖),群组可以作为用户的浏览“支点”,通过他们延伸到一个朋友,一个相关的群组,然后再到其他的图片。

3180720700_9c1a512e4e_o.png

一个达芬奇风格的梅兰曼恩漫画群组“ Vetruvian Man”的邀请促使一批致力于这样模仿和变化的人加入这个群组。

3180725712_2631257055_o.png

这个Vitruvian variations 群组展示了一系列关于这个主题的图片。

3180729004_d8ac261979_o.png

另一个群组中图片提示了一个进一步的邀请,显然滑稽的模仿整个“嗨,我是管理员为一组所谓的… ”这样一个社会化互动过程。

————————————

原文(英文):Strict vs. Fluid Taxonomies
本文链接:http://socialdesign.cn/2009/06/strict_vs-_fluid_taxonomies/
欢迎转载,转载请标明出处和译者以及英文链接和本文链接。 

【社会化设计】基本原则

Posted by puting | Posted in 未分类 | Posted on 14-06-2009

标签:, ,

0

一、为每个人而设计

 

二、像一个人那样交谈

  • 自谦的错误信息
  • 提问
  • 你的vs我的
  • 不是闹着玩的

 

三、要开放

四、成为一个游戏