如何提示用户 - UCD大社区

引导用户的笨办法

纯银 — 2010-03-20 11:37:47

以前啊，有段时间，自从我们在用户信息中显示IP所在城市后，跟帖中就充满了地域攻击。广东人/北京人/上海人/河南人，混战一团，甚至本省城市也频繁内斗。我觉得这很要命，如果你因为自己的城市而被别人辱骂，就会减少大量有见地的发言，而粗鲁攻击的人却不在乎，依然赤膊踊跃，劣币驱逐良币。相对于观点不合的吵闹来说，地域攻击更粗暴，更简单，鼓励了恶的行为，是社区大忌。

然而我的想法并未得到内部支持，不少人很奇怪地看着我说，你怎么会对地域攻击这么敏感？存在即合理嘛，只要不涉及审查风险和广告垃圾，我们何必去干涉用户行为，不如作壁上观。意思是“天然的就是最好的”。我提出的城市敏感字预审计划被搁置。

随后，我一直保持对跟帖进行观测。发现在大约半年以后，地域攻击的比例有所下降，不少人在跟帖中自发抵制针对城市的辱骂，显示出用户社区的自我修复能力。时间又过了半年，期间几次反复，后来我发现跟帖发表框上面多了一行字：“文明社会，从理性发贴开始。谢绝地域攻击。”

这句话有没有效果呢？

事实证明，当这么简简单单的一行字加入进去之后，地域攻击的数量直线下降，即便发生，也有不少用户自发跟帖道：“文明社会，从理性发贴开始。谢绝地域攻击。”可见民心所向。

由此联想到我在杭州挤车的经历。我上班经常坐公车，有时很挤，一大砣人堆在前门，后面的人上不了车。我想往里边走一点吧，大家都不动，我也不好蠕动。但如果司机师傅大吼几声：“往里边走！前门的人往里边走！”整个队列就开始缓缓移动，艰难地，一步步地挪到车厢中后部去。

为什么非得司机喊一嗓子大家才动弹呢？

这个问题涉及到了人的社会性，我解释不好，只能描述现象本身，即用户的动作往往会受到明确提示（尤其是催促）的指引，尤其当他承认提示合理性的时候，就愿意为此多做那么一点。多出来的“一点”很可能明显改善社区的秩序和氛围。

我在看美空发图流程的时候，注意到它加了一句话：“一组优秀的展示最好控制在2-10张(推荐)”。然后再看美空的作品，果然无不如此。用户行为与系统提示之间未必没有联系。

再看糗事百科，也有类似的提示，比如“请珍惜自己的id，一旦作恶，id将被永久删除。未来将开放邀请码注册通道，获取id会非常困难”，这是登录提示。又比如“请不要发表与本内容无关的评论，您有了账号就是有身份的人了，我们可认识您”，这是评论提示。另外在用户帮助审核的时候，还有醒目提示如下：

“近期与随机（视频）聊天的帖子太多了，希望大家把把关，没有足够笑点的帖子就不要再通过了。另，中国男足这类热点事件，也希望讨论能够集中，笑点突出的可以通过，没啥意思的就不要再放出来了。”

“追加：发现不少吐槽贴、询问贴被通过了，希望对这类帖子投通过票的同学能够认真对待自己的审核权利，糗事百科不是吐槽百科，也不是绿衣八卦百科，谢谢。”

我不认识糗事百科的人，但我相信提示效果不俗。最后得出来的结论有三点：
1、明确告知用户行为规则
2、该规则具备较强的合理性，容易被用户认同
3、在用户操作区域就近提示，千万离远不得

以上简单到笨拙的方式，堪称性价比最高的引导之道，现实中却很少被产品设计采纳。大部分时候我们一言不发，再用事后的算法、审核等“高级手段”来剔除杂质。原因无非两个，第一是“讲了也没用，讲了他们也不听”，第二是“杂质行为是少数，加强提示会对正常用户造成干扰”。

其实我觉得，干扰一点点也无妨，像城市里无处不在的公德标语。至于讲了之后他们到底听不听？个个乖乖听话是不可能的，但也并非个个用户都冥顽不灵。其中还有相当比例的，只是有点小淘气小任性的用户，被你严肃提醒一下，好像无形中有个管理员在看着你，紧接着的操作就可能走到你希望的方向上去。只不过是放了一句话在操作区域旁边，如此低廉的成本，促进效果又算不得小，何乐而不为呢？

模式化窗口

臭鱼 — 2009-06-09 20:57:42

先让我们看一个例子，了解什么是模式化窗口。

以下是QQ秀商城在非登录时提示登录的一种状态。当我在非登录状态，通过保存形象的方式买一件衣服时，弹出登录对话窗口提示登录。此时，登录对话窗口锁定商城页，锁定IE，只有当对登录窗口进行操作后，才能够进行其他操作。譬如：最小化IE、浏览商城等。我们可以说，登录对话窗口就是一种模式化窗口。

模式化窗口常常给人“坏”的印象，为什么“坏”？是因为它“长”成那个样子？还是因为它通常都说些没用的话，所以用户都不看其中的内容？如果换成一个浮动层DIV，它就变“好”了？就模式化窗口的形式和“好坏”问题，我们进行了讨论。

为什么大家会认为它“坏”？
西贝：“以前系统弹出对话框，用户看不懂，或者不看，给用户的印象大多是一种警告。因此感觉很坏，对用户来讲，很暴力。”（呵呵，可以引用最近流行的，很陈，很冠希了。）Eele：“当我在填一些注册信息时，需要从另外一页复制一些内容，这个时候弹出alert无法到另一页。”（这种情况我也遇到过~~）Hiseven：“以前有一些网站，有bug，弹出‘无数’确定对话框，必须全部确定才能进行下一步的操作，于是开始点击一个又一个的确定。”（嗯，尤其是那种让我点击连续的确定，但是不断弹出确定的那种垃圾网站，让我几近崩溃的边缘~~）

臭鱼：“屏幕上出现不止一个叉子按钮，却只有一个可以点击，如photoshop。”

臭鱼：“IE7开始了，所有的浏览器都有tabs了。多个网页在一个浏览器中打开，如果在一个页面中出现了模式化窗口，要切换到其他页面都做不到了。”

臭鱼：“有的时候只要提示，不需要操作。”Gmail只提示：

QQ空间上传成功的模式化窗口:

aaron：“应与开发制定一个规范，不一定模式化的东西就差，看情况。”（由此引出下面的话题~~）

模式化窗口分几类？

A类：3锁死2，锁死1，不完成3的操作，就不能进行其他操作。
B类：3锁死2，但不锁死1。（1通常是IE浏览器）
C类：弹出3，可以进行2的操作和1上的其他操作。

什么情况下需要A类的，什么情况下需要B类的，什么情况下需要C类的？

aaron：“格式化磁盘，二次确认时需要A类。” 西贝：“与下页的操作息息相关，不进行判断，下步操作就不能进行操作时，需要A类。” 臭鱼：“对网页来讲，当前页锁定即可，不用alert锁定整个浏览器。属于B类” Hiseven：“对于网页来讲，都可以改成C类的形式，不用那么暴力。” Hiseven：“A类，在操作过程中，如安装，有取消按钮必须很明确。在C类形式，如QQ秀中“身上品”，有叉的形式表示关闭，不需要取消。”

小结一下：暂且把模式化窗口分为A类、B类和C类，A类比B类和C类要暴力，但是更安全。B类和C类更容易让用户操作。通常A类都用于非常重要的信息时使用。欢迎大家进行补充~

相关话题：如何提示用户源地址：http://webteam.tencent.com/?p=894

关于“反馈提示”的交互设计

李小帅 — 2009-05-08 00:34:19

反馈这个词儿其实是控制论的基本概念，泛指发出的事物返回发出的起始点并产生影响。在信息交互过程（输入输出）中，它是一种界面输出物，用以提醒信息输入者他的操作结果。它有很多种形式，包括界面元素、声音、影像变化和物理位移（如震动）等。

我们这里讨论的反馈仅特指用户对网页表单元素进行操作所得到的可视化的输出信息，为了加强区分避免歧义，我们这里姑且称之为反馈提示（如图）。这里分几个方面对其设计中应注意的事项加以简要说明。

位置：
页面上的反馈提示作为一种信息输出，最重要的属性要求就是迅速明确的被信息输入者所知晓，这也是对设计师来说最重要的设计原则。执行起来，可以参照两条具体标准：

1.当前页面：反馈提示应该放在操作放生地的附近。

根据心理学的注意力分配模型，不熟悉或十分关注的操作都会占据人脑相当多的注意力资源，若任务有延时反馈，则操作完成后注意力发生聚焦，投射在行为发生地附近，以关注产生的结果。简单点说就是，我在输入框中输入内容，若有任何问题，我希望反馈就在这个输入框旁边发生。这是再正常不过的交互与反馈了。

这条原则对于有同理心的设计师们可以说是共识，他们普遍争议的是另一个问题，反馈与表单元素的相对位置究竟该怎样安排才最合理？实战派的主张“左右”，理论派的则倡导“上下”… … 但其实这一点并不需要太纠结，一般来说，如果宽度足够或不希望表单过长（想在一屏内解决战斗）、过于跳跃的话，那么把反馈提示放在表单元素右侧是可行的，例如淘宝的注册页：

如果对象是有严格逻辑顺序（如纵向）的系列操作，那么反馈提示放在操作流向途中（对应的表单元素下面）则比较合理，并能达到更好的提示效果，例如淘宝的订单页：

所以，上下左右并不像想象中有那么大的关系，只要在发生地附近，用户都是可以注意到的，只是程度不同而已。倒是怎样清晰明确地表达反馈与对发生地之间的关联、不让用户产生迷惑显得更为关键，关于这一点，jQuery Validation 所提供的 Plugin Demo里给出了一个比较好的思路，设计师们可以考虑通过一些样式的改变来制造一些联系。

现在facebook采用的也正是这样的一种方式，它通过加粗的边线与箭头更强的表达这种关联性：

2.刷新页面：反馈提示应该放在用户最渴望看到它的地方或最容易注意到的地方。
网页的加载特性让我们的操作区域有可能会在页面刷新后消失于我们注意力的聚焦范围之内。新的页面中，紧张、“短暂失忆”的用户不一定会拖动滚动条来找刚才的操作区域（原来的聚焦范围也很快消失掉了），进而找到反馈结果。他们担心、茫然，渴望在新页面中一目了然地看到它。这个时候，把反馈提示放在新页面中的显著位置无疑是最佳选择，页面导航的下方和表单区域的上方都是不错的位置。

状态，样式：
关于状态和样式在这里不去做过多的探讨，注意两点：1.将状态分类（对/错/提/警等）并进行差异化设计是一个不错的办法，至少对你的中高级用户会有一定的好处；2.icon能起到明显的状态提示作用，但选用时需慎重，要明确，要友好，不要夸张。至于形式上到底需不需要有底色、带边框、配icon、长箭头等，对反馈来说并不必要，不需要很纠结，具体情况具体分析一下，只要能引起注意、表意快速明确并且不让用户产生迷惑，所有的样式都是值得尝试的。

文案：
虽然说最好的文案就是没有文案，但这只是个遥远的vision，现实中文案必不可少，交互设计师是应该注意一些的，它的好坏直接影响用户体验。

首先你需要一个文案模板以辅助设计和保证统一性，业内比较认同的是“[状态+解释]+(解决办法)”的文案结构，一般来说，按照这个套路来，大体上都能保证文案的完备和明确。下图中都是同形式同指意的反馈提示，百度说的就比YouTube要清楚。

除了明确、清楚之外，文案还需要尊重用户的扫读习惯和个人情感：比如，你想表达一个or的关系，用“或”会比用“或者”好些，因为“或”字会让两边的主体内容在扫读的情况下变得更容易识别；再比如，你面向的是注重风水和彩头的商人，也许“恭喜，只差一步…”就应该写成“恭喜，还有一步…”，因为你的用户们对负面的文字和语义会比其他人更加敏感… …

写文案比写文章困难，它需要更多细腻的心思和周全的考虑，在满足基本要求的同时还必须在狭小的发挥空间内体现出独特的产品气质，这是非常难能可贵的事情。如果你有精彩的案例，请跟我们分享吧！

出口：
出口，即上文中提到的解决办法，它可以是用户对当前反馈的非正常状态的解决途径，如图中的[?]；也可以是一个交互阶段结束后，系统给用户的操作引导，如图中的文字链接。在某些情况下，这些出口是十分必要的，这就好像当你告诉用户此路不通时最好指给他一条能通的路，当用户走到一个丁字路口时，你最好能告诉他是该往左还是该往右。

需要提醒的是，这种出口切忌太多，阶段交互结束后，对于思路中断并且茫然的用户来说，太多选择甚至比不上没有选择。按照用户心理需求和操作习惯排个序，最多放出两个，一主一次。

可以说有交互就会有反馈，反馈是交互设计中最前线最直接的一环，它的好坏直接影响产品体验。实际设计中，由于缺乏意识或项目时间紧张，设计师对这一块往往并不给以过多的关注，设计起来也比较仓促和盲目，这点需要特别纠正过来，在原型中期，就需要把表单元素的校验规则以及可能的反馈情况都设计好。这是一个良好的习惯。

随机文章：

[预告]：搜狐博客相册3.0版即将优雅上线，敬请期待！ 2008-05-07

甜蜜人生 2008-03-31

为了丢失的寻找 2008-02-25

李小帅的花花草草2.0 2007-11-26

被蚊子点名 2007-10-19

《城客》：第一本中文互动杂志！

收藏到：Del.icio.us

使用Title提升可访问性

千鸟 — 2009-04-02 10:44:24

最早大家都没有给链接加title的习惯，后来因为w3c标准普及，又集体加上了title。从一个极端走到另个极端，于是出现很多怪异现象。两方面，第一a标签内title不是必须使用，第二title可以用在除了base, basefont, head, html, meta, param, script和title之外的所有标签。

抛开标签语义、搜索引擎友好等因素，在纯用户角度找几个场景来分析。

列表内容被截断后通过title显示完整，此时如果没有被截的链接，也会被再显示出来。试想本来已经看清楚的信息，触发又提示一遍，传达是不是感觉很婆妈。此时没有截的链接控制不输出title，效果或许合理很多。或者title在此时根本就不应该？印象中英文好站似乎很少做列表截取。

最典型类似对icon图示的辅助说明，可以最大化平衡界面复杂度与可操作性。并且针对某些群众认知度比较高的操作，如果图形传达到位，完全可以使用icon代替，更多交互场景请参考臭鱼在06年完成文字还是图标的总结。

在导航系统的各条目中，title主要作用是做补充说明。同时也对应可访问性原则中，要求导航传达清晰简洁的建议。用户感兴趣后操作触发，再title提示更多详细，强调信息引导而不是推送。

还有种做目的指引之用的案例，明确告知用户这个链接做什么？到哪里？在某些容易引起误会，或者不是很清晰的地方效果比较好。另外title不在a标签内也有广泛应用，典型如表单。可以为用户提供更精准、得体的操作指引，并且我想一定程度上可以代替明文提示。

学以致用，顺手给评论模板加了条语句。上次改的时候本想写出来，又感觉多余，现在好多了。准备动手评论的用户，自然会看到，并且这么土的语句也没有兼容性问题。

相应的不良应用不再图示举例，互联网上不胜枚举，深入分析语义和用法不仅能纠正错误、开拓思路，而且能贯通很多理论上的困惑。总结起来，title并不像seo从业者鼓吹的那么简单，在用户角度除避免与文字、图形重复传达，并且主要有三类用途：

描述非文本内容
补充说明文本内容
操作指引

使用Alt提升可访问性

千鸟 — 2009-04-03 09:13:24

alt的准确含义是，当照片不存在或者load错误时的提示。但同时img也同时支持alt和title，再有某些浏览器的错误解析，因此经常被误导并误用。最简单、准确的理解，在看不到图片的情况下如何用文字传达给用户？

比如下图flickr的订阅图标通过alt告知用户Add to My Yahoo!，个人认为这里使用title进行操作指引更合适，alt属性应该进行描述。并且此时只有在IE6和IE7中才可见tip，其他任何智商稍微正常的浏览器都看不到，更糟糕的是IE8仍旧没有改善。

某些图片带链接，也就是img外层有a的情况下，并没有注意传达需求上的差异，把img标签的alt与a标签的title都应用同样的说明。但实际上它们本质不同，如下图flickr提供给用户的外链代码，可惜与上个例子有同样问题，在IE环境下看不到a标签的tip。

问题也不是没办法解决，如下图Wordpress2.7上传图片插入编辑器自动生成的代码，把img标签的alt和title都写了出来，可以保证在各种浏览器中的兼容性。

再来看看flickr.com顶部logo的代码，直接使用alt写入Flickr logo. If you click it, you’ll go home。如果按照刚才探讨的结论调整还有更优答案，参考下图第二个例子。也就是说，图片在有链接的情况下，alt传达内容是什么？title传达链接到哪里？

分别测试IE7, FF3, Chrome1, Safari4四个浏览器，可证明其良好通用性。依次如图：

结合title来更好的说明alt用法，可见如果结构、表现分离彻底，辅助修饰等图片根本不需要img插入，也就避免了很多alt的错误应用场合。Junchen在05年译的alt属性和title属性中有更多规范和细则，alt相较title而言用途单一，但给img插入使用alt替换文字时，也应该注意：

简洁
清晰
符合语境

分析通用提示来提升用户体验

cancan — 2009-04-12 20:15:52

web2.0时代后到SNS社区再到云算法网站的SaaS平台。多交互流程和用户自定义的复杂化，都需要各种各样的提示信息来给用户带来引导。

通用提示是网页的重要组成部分，应用的多元化造成复杂的提示场景：

网站运者会在网站的变更中加上提示文字；
开发人员的系统提示也会出现在页面上；
一些网站独特的功能中也必须给出相应的提示信息来引导用户；

种种的情况导致每当有提示出现时，需求方都要去找交互设计师进行相应的沟通。当成一项需求去进行开发，从文案到视觉、布局，再将以前做好的提示模板拿出来改动、从运营PO，产品规划师PD，UED部们的交互、视觉，发布时QA的质量监控。。。等等部门，改丝毫而动全身，成本提升，工作严重下降。

那么对其进行量化和归类的重要性就可见一斑了。下面我总结了一些通用的提示信息：

通用提示信息分为四种：

第一类：提示，它诠释当前需要提示内容的信息，依附于所提示的内容显示。

alt：图片的XTHML提示信息，主要是为了SEO优化和低端环境下的提示；

title：文字、操作的解释，在大多数情况下用于段落显示不全的提示信息；

tips：对信息的对话云式的提示，用作在当前区域的提示；

注：在XTHML中，系统题注的alt和title会在几秒中后消失，对于比较重要的提示建议用tips或者用JS行为来控制提示信息。

第二类：反馈，是由一个操作所引导的提示页面，并独立成提示区域，通常在页面的顶部显示。

构成：
图标（可选）：跟据不同的提示场景来应用。

字体：指字体上的强弱变化和色彩区别；
如有操作，需给出操作引发的结果提示和详细内容；
如果通过用户介入，当前流程可继续执行，需要提示用户或进行引导到相应功能页面；
为起到提示的作用，提示内容必须单独成行或与其他内容独立；

文案不能太长，适当情况请换行；
文案文案不能有责备的词汇；
需要告知用户引发错误的原因，除非系统异常，其他错误都应以用户看的懂得文字进行描述；
业务规则不满足的提示:{说明不满足的业务规则}，不能执行{##}操作！

系统异常的提示：{显示系统错误信息}，请与服务人员联系等！

用例：

成功
场景：成功提示；
操作正确时需要的提示；

（此图例提供了包含丰富信息的提示，下面的图就省略了）

错误

场景：系统异常；
当前链接失效，必须终止当前流程；
且用户无法通过修改继续提交，提交修改的已被
删除；保存时发现其执行当前操作的先决业务规则已不满足；

提醒
场景：通常情况下的系统提示信息；
不带有警示作用；
具有提示作用；

警示
场景：由于无法再往下走，产生的提醒、警告之类的提示；
通常情况下的系统警告，由于##操作引发的问题；

第三类：备注，对现有信息的补全和关联，通常出现在页面的底部和尾部。

关联
由于现有的内容所引导相关的解释性内容；

备注
是对当前内容的补充，以完善它的用用意；

第四类：图示，用图例和当前状态的图例来直接引导用户进行相关操作。

流程图
流程图有很强的导向性，告知用户当前步骤和要完成操作的整个流程关系；

引导
引导是指向性的图例，用当前图例来指导用户完成操作；

相关话题：如何提示用户源地址：http://www.alisoftued.com/?p=169