当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 用户体验设计:tagging系统及其UI设计

心得技巧
品牌网站的交互设计分析
设计参考:40个about-us网页设计实例
网页设计理论:面包屑设计
移动版本的电子商务网站:首页和导航设计
移动版本的电子商务网站:搜索和目录页设计
设计心得:网站搜索的用户体验设计
总结网站导航怎么设计才好呢?
40个漂亮的应用插画风格的网页设计实例
网站设计风格:logo和导航的设计
网站设计实例:网页二级导航菜单处理案例
WEBJX收集相当不错的邋遢风格的网站设计实例
14个杂点和粗糙背景风格网站设计实例
设计欣赏:50个非常漂亮的Flash网站
10个有用的网站界面设计技术和最佳做法
10个在文字排版/网页布局中的常见错误
设计参考:定义和理解上下文语境
关于格言引用设计的创造性的例子和最佳做法
网页设计中图标与网页内容的组合设计
37个很棒的旅游行业网站设计
72个电子商务网站产品价格列表设计实例

心得技巧 中的 用户体验设计:tagging系统及其UI设计


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-01   浏览: 60 ::
收藏到网摘: n/a

http://piglili.blogbus.com/logs/45219030.html

背景:在一次关于收藏夹tag功能的讨论会上,众人就tagging的意义展开了激烈讨论。
为将思路结构化,特写此文分别论述:1. tag有用吗?;2. tagging的利与弊;3.tagging系统及其UI设计。较为枯燥,算是一个知识点的梳理吧。


1. tag有用吗?

 tag 随着web2.0而流行,已有7年历史(Keller, P. 2007)。tagging成为各大网站常见功能,但系统地使用它的人多吗?tagging的脑力负担不轻:要将信息分类尚属不易,勿论描述信息本身。对一条信息而言,应该tag类目还是属性?范畴应该更宽还是更窄?tag越多越好、还是控制在一定数量内?尤其困难的是,由于并非事前规划,无法很好预计被 tag内容的发展,入门、维护并不轻松。

 但从目前网络发展形势而言——个人自生成内容(博文、图片、视频等)迅速增加各类信息海量涌来——tag可谓管理海量信息的强大利器。本文第2部分将展开论述。

*注本文中信息是指图像、视频、音频等资源,非仅指文字信息。

2. tagging的利与弊


2-1. tag与tagging

· tag作为元数据(metadata):元数据是所谓描述数据/信息的数据,tag是一种用户自创的元数据,特点是无层次结构、自定义

· tagging构成分众分类法(folksonomy):分众分类法,指大众自发利用tag对信息进行描述、分类,构成与信息架构中传统分类法(taxonomy)相对的信息组织。二者的区别见下表1:

      
      表1:taxonomy VS. folksonomy


2-2. tagging的利

结合表1的对比,可归纳出tagging的以下好处:

· 使信息组织更经济、高效、灵活
  如《未来是湿的》作者所言,“The Only Group That Can Categorize Everything Is Everybody”(只有所有人能把所有信息都分类)。就如大英百科全书的编撰与Wikipedia的关系一样:信息越多,传统分类法的劣势越明显——开发、维护成本只升不降;基于tagging、运用群众力量的分众分类法则相反。尤其当前的趋势是个人自生成信息越来越多,系统的分类、描述能力和效率可说远不如内容创造者本身。

· 对信息的索引、描述更丰富
 (1)tag固然不如传统分类法中的控制词表(thesaurus)那么严谨标准,但由于信息可被无穷多人赋予无穷多tag,故茫茫网海中只要有一个人跟你想到的描述一样,搜索就更有机会有所获。而要恰好用上专家词表内的专业化语词,难度可能更高。对于图像、视频、音频此类系统标注成本极高、效率极低的信息而言,tagging的价值会更明显。

  :豆瓣不可能有钱请专家对系统内的资源进行电影、图书、音乐以外的分类,又或者尚无全文检索的实力,那如何找到一部同性恋主题的电影?拿普通搜索tag搜索的结果、结果的发散程度对比,就能感觉到大众的力量。

 (2)用于描述某信息的所有tag往往是公开共享的,其分布往往呈图1所示长尾状收敛(Shirky, C. 2005)。各tag及其频率,既可反映大众对于该信息本质广泛一致的定义,又不至于让小众意见(minority opinion)完全被淹没。

     
    图1:两条deli.cio.us书签的tag频率分布

· 更人性化的信息检索
  上述两利,最终优化的是搜索:由于对一组系统信息(如个人的博文、Flikr的所有相片、Youtube的所有video)的接入点更多了,用户在信息海洋中找到与之需求匹配的信息的机会也更高。即利用大众的智慧,使搜索在机器化的基础上,更语义化、人性化、社会化。

以上三点是tagging社会性优势。Golder et al(2006)提出tag大致在描述信息的7方面:它关于什么(主题、分类、属性等),它是什么(标题、类型等),谁拥有它(作者、协作者),修饰tag的tag,它的品质(有趣、雷人等),自我参考(我买过的、我的书等),任务管理(待读、找工作等)。该分类并非绝对,但从后三种可看出tag在标引信息时的一大特点在于自我性。这带来的好处有:

· 辅助个人信息管理。对个人信息管理而言,tag可以发挥更大的作用。因其高度自定义性,使信息可被个性化地描述,使个人使用情景(context)成为信息描述的一部分。“很喜欢”、“我想要”、“妈妈生日”这类tag,是系统较难为用户索引的。

· 身份识别。如从某博客的标签云/列表,能看出博主的兴趣、甚至职业等个人信息。

     
     图2:某博客的tag云

Marlow et al (2006)Ames & Naaman(2007)曾探讨用户tagging的动机(表2),表现出社会性自我性的结合。

   
     表2:tagging的动机

这又带来另一种优势:社会化网络的构建。tag聚物(信息),亦聚人。一方面,它昭示一个人的兴趣爱好,从而帮助个体寻找同好。另一方面,它能聚合兴趣团体。例如Flikr上一个语法错误、表意模糊的tag,sometaithurts(so meta it hurts,如此“元级别”,如此痛),却聚集了来自各色用户的各色相片。给照片tag上sometaithurts的个体,由tag聚集在一起,彼此间因此有了进一步社交化的机会,并将为这个tag聚集更多的物。

2-3. tagging的弊

tagging最为人所诟病的特性有:缺乏一致性、歧义、语法错误。这是由于与专家相比:

· 大众是“懒惰”的:tagging可能停留在粗浅的表层,而不做深入思考或精准描述。尤其当tag与系统固有分类维度重合的时候,就会失去价值。例如为豆瓣上的电影打上“电影”这个tag的意义是零。
· 大众是“虚伪”的:有人会为了让自己出现在搜索结果更前面等目的而乱tag;
· 大众很“笨”
 (1)拼写问题。除了拼错字词,英文里词组的分隔、大小写、单复数等就会造成大量混乱的tag;
 (2)没记性。表现为个人在同一系统中使用不一致的tag(如字面相异,意义相同等)来标注同一或相似内容。


这导致大量污染性的垃圾tag,即所谓搜索结果中的噪音出现,从而降低检索效率。但这并非tagging的致命伤,通过设计的引导是可以改善这些问题的。第三部分将展开讨论。

3.tagging系统,及其UI交互设计

3-1. tagging系统

网站在添加tagging功能前,需要考虑若干维度,才能让tag对网站的信息管理、检索发挥真正的作用,否则只是潮而不实的装饰。

Marlow et al (2006)提出一个tagging系统模型,包括资源、tag、用户三部分,它们的关系如图3。

    
    图3:tagging系统包括资源(信息)、tag、用户三部分


笔者认为该系统忽略了另一部分:传统的系统分类。并不应该丢弃或将专家的智慧斥之于外,就如亚马逊既有商品的树状分类,以有用户提供的tag。

与模型一并提出的是该系统应考虑的7个维度(表3,最后两个维度做了合并)。

维度

种类

对设计的启示

Tagging权限

 • 只能自tagTechnorati
 • 权限性tagFlikr)
 • 随意tag(豆瓣)

 决定了资源被描述的丰富度、准确度;

 影响用户个人管理tag的复杂程度

Tagging支持

 • 半盲tag,输入后给与提示(Flikr);
 • 输入前展示自己、他人常用tag(豆瓣)

 影响tag的质量;

 用户tagging时的思维负担

聚合方式

 •  囊括式:同一资源可被赋予任何tag
                     
并计算重复频率(豆瓣)
 •  组式:同一资源不重复tag,无累计(Flikr

 囊括式反映大众意见;
 组式反映平均

资源类型

网页、图片、视频、音乐等

 标示资源的难易程度会影响用户所需的tagging支持:

资源来源

  用户贡献(Flikr)
 • 系统提供(Amazon)
 • 抓取(豆瓣)

tagging权限的设置

联通性

 •  通过链接(资源);
 •  通过社交群组(人);

决定用户间的互动程度、资源的可发现

表3:tagging系统的维度及设计启示

笔者以为,还需补充的一个维度是,tagging清理。对于系统而言,是任由tag无限泛滥不做任何事情?还是结合传统的机器索引、专家人工干预,适当过滤、聚合,以实现收敛?Gruber (2006)提出通过tag内在的规范名(Canonical Name)对字面各异、实质相同的tag进行清理。如通过算法将User Experience, UX, user_experience在系统内部统一为规范名User Experience。无论用户输入的是哪个形式的tag,系统都将返回所有的结果。

tagging支持维度还需要虑的一个问题是:系统是否该教育、引导用户打某些维度的tag?上文提及,当tag与系统固有分类维度重合的时候,就会失去价值、没有发挥其作用。

不考虑这两点的话,随着tag几何级数增长时,噪音也会越来越多。对于系统、对于面对这么多“原始”tag的用户,都很糟糕。

3-2. tagging系统的UI设计

UI作为tagging系统与用户的交互层,肩负适当引导用户tagging行为的重任,是决定tag质量的关键。

· 添加tag
   要引导用户创造更优质的tag,输入时刻的辅助至为重要。
  (1)提供参考
   如罗列个人常用tag,他人常用高频tag,可有效减少拼写相异语义重复的tag,提高tag之间关联性,并可减轻用户思考负担。
  
  在Delicious上收藏URL时,每输入一个tag都有tag池中同首字母的罗列。下方列有个人常用tag,且优先放置与该资源可能相关的tag。并有他人常用tag的罗列。

  

   图4:在delicious上收藏一条URL

  (2)批量添加。对于所tag资源是用户自发贡献时(典型如相片),批量添加tag的功能能提高效率以及减少二义性。

  

    图5:在Flikr上传时

· 编辑tag
   目前常见的编辑操作包括:
  (1)删除。
  (2)重命名
。除了基础的重命名,此功能可延伸为tag的合并与分拆。合并指,若改为与现有另一tag重名的tag,自动将二者下的信息合并。分拆指,将当前tag进行概念细化成新的若干概念。

  

    图6:在Delicious重命名一个tag
 
  (3)tag tag.较为高级的操作,包括用一个tag 囊括若干tag(tag bundle),对tag增加描述等。

· 浏览tag
   目前tag的展现方式主要有列表与云图两种。列表无重点,云图则降低了较小字号tag被发现的效率。但无论采取哪种视图,由于标签的增长性较强,数量的增加相应提高寻找成本。从算法的角度,可考虑Montero et al(2006)所提出的语义聚类:根据不同tags同现的频率将其聚合、相邻放置。从交互的角度,应提供一种或以上排序(按字母、热度)。具体设计案例可参考此文

 

  图7:Delicious的tag云页面

总结:

Tag以及tagging的社会性、自我性,能帮助实现个人化、社会化、情景化搜索,但前提是:
· 有更成熟的tagging系统构建。底层技术上,目前对于垃圾tag的收敛、清理,做得不够,也尚未良好地结合传统分类与大众分类。UI上,尚未实现有效引导用户去tag系统已有维度之外、更具附加值的维度。如在豆瓣上打“友情”这个tag是有价值的,但打“电影”就无甚价值了。)

· 对大部分人来讲,tagging的门槛——无论是操作上还是脑力负荷上——仍然较高。如果结合SNS著名设计师Joshua Porter的使用周期论以及产品接纳三阶段来看, 一个tagger的发展可用下图来表示:

 
 图8:tagger的进阶

目前大部分人仍处于第一阶段之外,但也许随着tag的好处被更好地表现,tagging的易用程度增加,更多的人会进入这个周期。当系统完善了,人更能轻松发挥力量去补足系统了,语义网的实现就将更有可能。

参考文献
Ames, M., and Naaman, M. (2007). Why We Tag: Motivations for Annotation in Mobile and Online Media. Proceedings of the SIGCHI conference on Human factors in computing systems
• Golder, S., and Huberman, B. (2006). Usage patterns of collaborative tagging systems. Journal of Information Science, 32(2), 198-208.
• Gruber, T. (2005). Ontology of folksonomy: A mash-up of apples and oranges. 1st On-Line Conference on Metadata and Semantics Research (MTSR ‘05).
• Marlow, C., Naaman, M., Boyd, D., and Davis, M. (2006). HT06, Tagging Paper, Taxonomy, Flickr, Academic Article, ToRead. Proceedings of Hypertext 2006, New York: ACM Press,2006

• Mathes, A. (2004). Folksonomies — Cooperative classification and communication through shared metadata,” Computer–Mediated Communication, LIS5900CMC (Doctoral seminar),
• Montero, Y. & Solana, V. (2006). Improving tag-clouds as visual information retrieval interfaces. In Proceedings of the International Conference on Multidisciplinary Information Sciences & Technologies.
• Porter, J. Designing for the Social Web: The Usage Lifecycle.
• Shirky, C. Ontology is Overrated: Categories, Links, and Tags.
• Wichowski, A. Survival of the fittest tag: Folksonomies, findability, and the evolution of information organization
• Wikipedia, http://en.wikipedia.org/wiki/Tag_(metadata); http://en.wikipedia.org/wiki/folksonomy