交互设计技巧:网站的标签设计要明晰有效

文章描述:交互设计实用指南系列(6) –标签明晰、有效.

导航标签彼此互斥、完全穷尽。

导航标签其实就是一种文字表达形式,我们用标签来代表网站上的各种分类信息。比如“联系我们”这个标签,代表的内容通常会包括公司名称、电话、地址、邮箱等信息。它可以是文字,也可以是图片。在英文里被称作“Label”,并不同于我们常说的“tag”标签云图。

说简单一点,我们就是要为网站的信息做分类,并为它们起一个通俗易懂的名字。这其实是任何人都可以做的一件事情,所以在导航设计流程中,它的重要性也常常被忽略。在设计产品时,常会听到这样的话:“这个栏目该叫什么名字?恩。。。先别管吧,把更重要的工作做了再说。”

然而,站在用户的角度,导航标签代表的是整个网站的内容、产品的结构,他们必须依靠标签的内容和组织方式来寻找网站中的信息。

标签是访客行为的触发词,好的标签能吸引访客注意力,引导他们准确地找到信息。导航标签是访客预测目标页内容的重要依据,紧跟着它的就是导航中的关键点,网页的过渡,所以尤为重要,有歧义的标签逼人猜测它的意图,甚至让用户走错路或迷失方向。

比如这个网站的标签:

这个网站的导航标签比较极端,首先标签之间的互斥性差,“淘宝潮流榜”、“爱物秀场”、“败家俱乐部”等,含义和实际内容都非常接近;其次是一致性差,标签的粒度不同、长度不同、语气不同,甚至还有英文出现,可谓五花八门; 最糟糕的是,在标签的选择上,用了很多自作聪明的词语,如“爱骚谈资”,用户很难预测到链接背后是什么内容。

设计标签的过程,实际上就是对信息分类的过程,我们应当坚持MECE原则,也就是彼此独立、完全穷尽(Mutally Exclusive,Collectively Exhaustive)。这是一种客观的角度。你也可以站在主观的角度进行分类,但必须做到标准清晰、在目标群体中能获得充分共识。

怎样的标签才能称作好的标签?它应该满足这几个方面:

1、好的标签,应该使用客户的语言,避免使用术语、行话、缩写词等用户难以理解的词语;

2、采用描述性的标签,避免使用“信息”、“细节”等过于宽泛的词语,尽量以某种方式加以限定,如:“给买家的信息”、“交易细节”。

3、标签之间的互斥性要强,尽可能地寻找差异化;

4、使用聚焦地标签,如,能把猫、狗、仓鼠等归纳为“宠物”,就不要用“动物”。

5、在粒度、语法、展现、用法等方面保持标签的一致性;

6、较长的标签往往比短标签更好,但并非越长越好,请尽量控制在12个字以内(这不是一个硬性规定)。

那我们设计标签时的词汇从何而来呢?是凭空想象出来的吗?当然不是啦,你可以从以下几个方面获得词汇:

1、你自己的网站或产品

你的网站和产品,在前期建设中,已经积累了很多标签。我们要做的,就是遍走整个网站,尽可能收集所有标签,然后用表格进行整理。

比如,我们在淘江湖改版时,对现有标签系统进行了一次整理,在表格的帮助下,比较容易看出现有标签系统存在的问题。

2、类似网站或竞争对手网站

如果你还没有网站和产品,那就要去同类型网站或竞争对手网站去收集标签了。相信这一做法,在互联网上,几乎是无师自通的。你可以通过对同类型网站标签系统的观察和比较,得到一些行业类比较通用的词汇,降低用户的理解成本。

你可以用同样的方式,收集同类型或竞争对手网站的标签,以供参考:

3、受控词表或叙词表

这是由图书馆员和特定领域的专家所建立的资源,这些词汇都是专家们付出很多努力的成果,表达方式精确且一致,而且这些资源通常是公开的。其实信息架构的很多理论,都来源于图书馆管理。

在完全没有依据的情况下,我们必须设计新的标签系统时,应该怎么办呢?

你可以对通过对内容进行分析、要求内容的产生者提供、或者象专家或你的直接用户求助。卡片分类法也是比较流行的一种做法。

卡片分类大概有4个步骤:

1、招募志愿者,大部分项目适当的卡片分类志愿者人数是 15 人,大型项目可以达到 30 人。个人觉得如果只是想对自己想法进行验证的话,5-10 人即可。

2、 准备卡片,写上你预先设定好的标签(这些标签必须是你们内部讨论或请教过专家的结果)。

3、 让用户进行分类,你可以观察用户的分类过程,以及对标签的理解。

4、 对卡片分类的结果进行分析,如果数据庞大,你可以借用软件进行分析,推荐工具有 IBM EZSort、CardZort、WebSort 等。

对卡片分类感兴趣的同学可以进一步查阅资料,我们在这里就不详细说明了。

参考文献

《Web信息架构:设计大型网站》 (美)莫维里,(美)罗森费尔德 著

《Web导航设计》 (美)卡尔巴赫(Kalbach,J.) 著

作者:淡月

时间: 2025-01-21 09:23:29

交互设计技巧:网站的标签设计要明晰有效的相关文章

谈新版豆瓣首页交互设计:复杂网站的标签系统

新版的豆瓣希望在架构上做一些调整,但是想得还不够透彻,并且在细节处理上还比较混乱.今天在新版的使用中又发现一个问题: [实际场景]====================================================用户在我的友邻广播中看见了一个朋友读了本书,点击书过去以后,上面的标签跳到了[豆瓣读书],但是差异很小,不明显.页面上的主导航变成了读书的导航. 用户发现整个页面都变了,刚才的导航条不见了.他很难在第一时间注意到上方的标签跳到了[豆瓣读书],因为太不明显了.两个主导

网页设计技巧:特殊人群的设计关怀

文章描述:网页设计技巧:特殊人群的设计关怀.   2010年12月,Thomas应邀参加中国交互设计体验日大会,展开了一次主题为<特殊人群的设计关怀>的演讲.演讲主要介绍了在做产品设计时,公司对于特殊群体的一些考虑.以下是对这次演讲的现场记录: "盲人对QQ的依赖度非常高." 在正式演讲之前,想请大家看一段视频.大家可以看出这是个怎样的用户吗?是的,这是一位盲人.可能很多人会吃惊,盲人怎么可以使用QQ?其实盲人不光使用QQ,他们正在利用互联网的很多服务充实自己的生活.我们关

交互设计探讨:网站导航标签要明晰有效

导航标签彼此互斥.完全穷尽. 导航标签其实就是一种文字表达形式,我们用标签来代表网站上的各种分类信息.比如"联系我们"这个标签,代表的内容通常会包括公司名称.电话.地址.邮箱等信息.它可以是文字,也可以是图片.在英文里被称作"Label",并不同于我们常说的"tag"标签云图. 说简单一点,我们就是要为网站的信息做分类,并为它们起一个通俗易懂的名字.这其实是任何人都可以做的一件事情,所以在导航设计流程中,它的重要性也常常被忽略.在设计产品时,常会

谷歌Android UI设计技巧:优秀UI设计准则

本文原是Android的官方开发者博客的一份Android UI设计的幻灯片,51CTO的译者将这份教程5部分进行翻译整理,希望对Android开发者能有帮助.本文为<谷歌Android UI设计技巧>第二部分:优秀UI设计准则. 本文为<谷歌Android UI设计技巧>第二部分:优秀UI设计准则.

网页设计技巧剖析:专题页面设计传情达意

文章描述:推荐:如何设计"传情达意"的专题头图. xiaoning:相信大家在平时的工作中,经常会碰到专题的设计吧!而且大部分是时间紧任务重.专题不同于网站的常规页面,常规页面更侧重于内容的阅读及人机的交互,因此可读性.可用性是第一位的,装饰性次之. 而专题正好相反,它更侧重于通过气氛的渲染来"传情达意".首屏的头图在气氛的渲染中尤为重要. 我们知道了头图在专题设计中的重要性,那构成头图的主要元素又有哪些呢?它们有 文字.背景.色彩.布局这四种主要元素.下面就通过一

用户体验设计实例:网站搜索的设计

文章描述:交互设计细节--搜索. 一 推荐字 关于推荐关键词放置位置的问题: 推荐字在框下:普遍认为放在下面好一些,从版面美观度考虑,从给用户的冲击力和干扰程度考虑: 推荐字在框上:有时搜索框上面会放分类等tab,推荐关键字易被认为作分类:但具体放在上面给用户带来的干扰程度,是否会让很多用户很讨厌,笔者认为来搜索的用户普遍目的性较强,会下意识自动过滤掉自己不需要的内容,此时的用户是很难被干扰到的,可放心放到搜索框之上:但可能喜欢清爽一些或有洁癖的用户比较希望什么都不要放. (图为 迅雷看看官网,

网页设计技巧总结:导航栏设计的三大要点

文章描述:在网页中设计导航菜单的三个原则(附案例). 导航菜单可能是网页设计中最重要的部分了.每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息.好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息. 而且导航栏也是整体布局的重要组成. 总结一下,导航栏的重要性. 1. 浏览完Logo后,导航栏是用户第一个看到的组件.2. 导航栏的作用是引导用户.3. 导航栏的作用也类似于索引,快速帮助用户找到所需信息. 想让导航栏更加优雅.美丽.响应式么?看看导航栏

网页设计技巧:网页表单设计经验分享

文章描述:关于表单每个设计师都必须知道的10件事. 有很多设计糟糕的表单,不管你是否喜欢他们,表单都是必不可少的.Joe Leech(cxpartners负责用户体验的)将介绍其在表单设计上的一些经验. 估计没有什么比表单更让设计师出气了.表单不一定可以让(设计师)表现创意,还是可以?我们可能需要从做基本的层面,重新审视表单,理解表单--表单是用户和软件之间的对话. 忘掉切换啊,点击什么的,表单是我们数字设计师(我想应该是依赖计算机进行设计的设计人员)将面临的最富有的交互.下一次,你要对付一个表

网页设计技巧之面包屑设计

What? 什么是面包屑 面包屑是作为辅助和补充的导航方式(secondary navigation scheme),它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点. 最常见的面包屑的样式是:横向的文字链接,由大于号">"分开,这个符号也暗示了它们的层级关系. [ 面包屑的分类] 1.基于用户所在的层级位置.(Location-based) 基于位置的面包屑用于告知用户在当前网站中所在的结构层级.用在具有多级导航(通常具有2级以上导航)的网站中. 2.基于产品的属