2009年1月21日星期三

在线社区交互环节中的贴心改进

作为一个在线社区,诚然所有的内容(至少大部分)都应当是由社区中的用户所贡献,因而,对活跃的参与型用户的功能/产品设计才是在线社区的重中之重。之后会找一个机会说说针对浏览型用户的产品设计。

参与型用户需要的是交互,交互的对象不是网站,而是其他的参与型用户。因此,在线社区的交互设计应当从增进交互的广度和频率两个方面下手。增进交互的广度应当(1)让活跃的参与型用户彼此发现,并(2)创建多种维度的交互方式。增加交互频率的最好方式就是—提高响应速度。看贴,发帖如果速度都很慢,那么将浇灭用户的热情(可以设想一个发了消息需要等半秒钟才可以看到的QQ群)。其次是对熟练用户提供更快速的交互方式,如键盘导航(可以设想一个不支持快捷键发送,只有一个大发送按钮的IM软件)。

交互广度方面暂且按下不表,下面先说说交互频率方面的改进。
首先是运用 AJAX 的方式来提供交互。这样用户所发表的内容可以以较快的速度直接显示,而不需要等待整个页面的刷新。但是带来的负面也很明显,响应的速度太快,用户比较难一下子接受。这样就需要给用户以反馈,可以采取的措施有:
以鲜亮的背景色填充刚发表的内容背景,并渐变至标准的背景色。
翻页使用平移动画对项目进行滚动,或者干脆不使用翻页而使用滚动条自动加载。
发送消息时可以有动态效果表示消息发送给了某人。

这些措施并不是为了单纯呈现很酷的动态效果,而是给用户一个较短的暂停时间,并通过过渡动画来协助用户构建心智模型。要注意,动态效果过犹不及。

其次是键盘导航,键盘是快于鼠标的一种操作方式。可以使用通用的 j/k 按键或者光标键来在列表中上下移动,并使用r进行回复,或者enter进入查看。在查看并返回版面选择列表后,应当自动将光标停留在包含未读项目的版面上,方便选择。查看上一篇/下一篇等浏览跳转操作均可以有方便的快捷键可以实现。

下面说说交互广度。对参与型用户而言,在首页、版面、主题、文章等页面之间要可以(1)看到其他参与用户,并(2)获知这些用户的在线状态得知是否可以进行即时交互,还要(3)跟踪自从上次查看以来的新变化。这些需求,可以通过在线用户和未读标记来提升满意度。

在线用户指的是可以在首页、版面列出当前用户的在线状态(Color Code)。当前的“在线状态”往往只是一个小图标,并且只在查看文章/用户页面的时候显示,这应当更广泛应用在全社区,只要有用户名出现的地方就应该有在线状态的表示,因此,考虑使用 Color Code ,利用颜色来区分状态,是比较合适的做法。

未读标记指的是保存用户对某篇文章/主题的阅读状态,以便(1)下次访问的时候可以快速继续,并且(2)可以迅速发现其他用户更新的内容。未读标记同样也可以使用 Color Code,或者使用一个未读指示图标也可。

结合之前所说的线性模式,目的是可以给参与型用户一个更好的交互体验。

2009年1月20日星期二

Discuz 7 的翻页功能设计



个人认为是一个亮点,将翻页功能和向上一级以及历史浏览记录的功能结合在了一起。不过依然有可以改进的空间。

返回的按钮做得和下一页太类似,应该是分离的两个功能,而不应当在一个翻页的模块中统一表现;

可以结合面包屑的功能,将翻页和面包屑导航结合来表示当前所在的位置。同时,页数也应该是面包屑导航的一部分。

总结了一下,做了下面这个草图,将翻页和面包屑导航这两个相近的功能放在了一行上,同时在视觉上做了一些区分。浏览历史同样通过将鼠标放置在当前板块的位置上可以切换,浏览历史也带有层级关系。

缺点是这样的翻页功能,会不会太重了。

帖子排列:主题布局 vs 线性布局

主题布局


典型的 Discuz 的帖子排列方式是主题布局,也就是将所有的回复依照发表时间顺序排列在若干“主题”下,并以主题最后的时间倒序排列。
回复之间没有体现紧密相关的关系,体现的是回复和主题之间的回复关系。
主题布局的优缺点

优点

可看到最新的回复主题并进行参与,方便了在线用户交流
将讨论话题集中在主题范畴内,新讨论的内容以新开主题的方式进行
缺点

帖子顺序因回复而改变,难以直接定位到之前参与过的某个主题
众多用户在同时参与若干话题时跳转回复不便
需求分析

首先,主题布局的目的应该是鼓励用户回帖讨论,以及进入版面的时候给用户提供新的内容,并不是为了要给用户显示出最热门的内容(这样就应该按照点击/回复数量来排序)。鼓励回帖讨论的做法是将最新的回复列在最上,直接可以点击最后发表的时间来查看刚发布的回复,并加以回应。
其次,对用户来说区分为浏览型用户,以及参与型用户。浏览型用户的需求是查看有价值的信息(看主题),偶尔发表一下看法。参与型的用户需求的是和其他用户进行交互(看回复)。对浏览型用户来说,使用主题方式组织,可以较好的满足他们对有价值信息的追求,但依照最新回复进行排序,则不容易满足用户查看新鲜主题的需求。
因此,有必要将看主题的浏览型用户,和看回复的参与型用户分别用不同的产品形态予以满足。由此,带来了“线性布局”的补充方式。

新增线性布局的解决方案


解决办法是将所有主题默认按照最新发表时间进行排序(可选按最新回复时间),新增一个线性布局方式
线性布局是将用户的最新回复内容直接显示,提示当前所选择文章所属的主题,选择文章后可以进行回复,回复时保留引用内容和回复关系。这是一个比较依赖于 AJAX 的一种互动应用。
线性布局的起源

之前的天地人大是基本依照线性布局的方式,但是在 Web 下存在如下几个问题:无法直接呈现回复的内容,用户的浏览路径是点击一个回复,查看完内容并回复,返回查看下一个回复,需要多次点击刷新页面。而其默认使用的是“普通模式”也就是线性浏览模式,忽略了绝大多数用户都是查看主题的浏览型用户的需求,切换的查看模式也不能保留。但是,因为参与性用户对最新回复的需求可以在 telnet 方式下得到满足,所以这个糟糕的 Web 只是增加了对浏览型用户带来的困扰。之后改版成为 wforum 的方式,确实在一定程度上提升了用户的体验。
线性布局的优势

在线性模式下,可以“只看回复”(当然主题也应该要呈现出来),让参与型的用户可以紧密跟踪众人最新的回复内容。需要使用 AJAX 允许用户使用键盘来进行操作,因为对于参与型的用户来说,键盘操作是比鼠标要来的快的。同时需要搭配有“未读标记”功能,标记用户对于每一篇文章的阅读状态,在用户切换版面的时候可以迅速回到之前离开的位置继续阅读。因为文章的顺序都是固定的,因此可以给用户以一个较流畅的体验方式。
线性布局的缺点

线性布局是偏向于单个回复和交互的查看布局,显著提升了需要一览话题讨论内容的成本(需要多次点击所有回复)因此并不适合对于对特定主题有需求的浏览型用户,因此这种布局方式将成为一种补充方案而非替代方案。当然,如果一个社区所需要营造的氛围就是以讨论和交互为主,看淡主题的话题作用,则可以将线性布局方式看作是多个 Web 下的 QQ 群/聊天室一样来使用。

总结


总之:我只是尝试将 telnet 下的操作方式移植到 web 上来,用以增进 web 下的在线社区用户体验,提升核心用户的参与度,依靠核心用户的迅速响应和参与来增进浏览用户的黏性。
抛砖引玉之文,希望猛烈回复。
 
Creative Commons License
本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。