交互设计实用指南系列(6) –标签明晰、有效

链接:http://ued.taobao.org/blog/2010/01/the-practice-guidelines-of-interaction-design-make-labels-clear-and-attractive/

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

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

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

时间: 2024-10-26 12:14:24

交互设计实用指南系列(6) –标签明晰、有效的相关文章

交互设计实用指南系列(12)—避免出错

http://ued.taobao.org/blog/2010/04/交互设计实用指南系列12-避免出错/ 一.如何理解本条内容: 一个“简单”和“复杂”的例子 在我和开发人员沟通一个项目需求的时候,他们频频慨叹Mockup的设计所考虑情况之细致,很多程序要实现的预判和“非基础功能点”让开发人员望而却步不情愿去实现.相比较设计师为了让用户避免出错而绞尽脑汁去设想和考虑,开发人员更倾向于直接给到一个只能容许的操作行为,其他非法请求全部报错:“程序是严谨的,他错,我报错,以不变应万变.简单一点不好吗

交互设计实用指南系列11-减少记忆负担

转载: http://ued.taobao.org/blog/2010/03/交互设计实用指南系列11-减少记忆负担/ 科普 <辞海>中“记忆”的定义是:“人脑对经验过的事物的识记.保持.再现或再认.”记忆是人类一个非常重要的心理活动,它是人类很多其他思维活动和行为的基础.在所有的认知心理活动中,记忆和软件交互的关系最为密切.我们脑内的神经元反映的信息在需要用的时候可以被准确的再次呈现,也就是储存在DNA链上的信息基因,在适当条件下,指导合成信息蛋白并呈现的过程.在信息处理的角度,我们都关心怎

交互设计实用指南系列(1) – 操作入口明确

链接: http://ued.taobao.org/blog/2009/12/the-practice-guidelines-of-interaction-design-clear-operational-entrance-of-effectivity/ “操作入口明确”,就是指产品的任何一个功能都要有明确.合理的入口.“操作入口”,指的是产品内部不同模块之间的转接元素,例如在Web产品中,按钮控件.输入框.文字链等都属于操作入口:“明确”指的是入口的视觉感是清晰的.可识别的:“合理”是指入口的

交互设计实用指南系列(4)—简洁清晰,自然易懂

链接:http://ued.taobao.org/blog/2009/12/simple/ 我们生活在信息繁杂的社会,尤其是在互联网时代,人们开始通过网络开始接触越来越多的信息,那么,如何获取/传递有效而准确的信息将非常重要.在网页交互设计中,我们提出:信息获取和传达的过程必须是简洁清晰,自然易懂.这样用户才能够有效的获取这些信息,并迅速作出决定. 1.什么是“简洁自然,清晰易懂”? 简洁清晰:使信息最简化“少即是多”.提倡使用最少的元素来表达最多的信息.如果信息繁杂,将使用户承担大量的信息负担

交互设计实用指南系列(9)— 一次点击

链接: http://ued.taobao.org/blog/2010/02/the-practice-guidelines-of-interaction-design-click-once/ 那么,如何减少用户的附加工作,保证用户工作效率呢?1,保证主操作以及用户常用功能的方便展现.这是用户快速完成任务的核心.比如播放器需要突出播放按钮,而收起了快进功能.ps的滤镜里会第一个展示出你上次应用过的滤镜效果,方便再次应用等. 2,合适的关闭与隐藏新手培训工具用户不会长期停留在新手状态,所以新手的任

交互设计实用指南系列(10)—别让我思考

转载:http://ued.taobao.org/blog/2010/02/the-practice-guidelines-of-interaction-design-dont-make-me-think/ 不让用户思考过多,原则上就是设计符合用户心智模型.大致可以从下面几个方面来讲: 1文案:需要让人容易理解,快速记忆.根据不同产品定位,找到恰当的切入点,文案过长或者使用用户不理解的情景,如技术用词,营销用词等,都会使人不知所云. 省略多余的文案,比如过分修饰,欢迎语,多余指示性语句,这些罗嗦

交互设计实用指南系列(5) – 突出重点,一目了然

链接:http://ued.taobao.org/blog/2010/01/the-practice-guidelines-of-interaction-design-emphasis-and-clarity/ 看到这张照片,我们一眼能够看到天宏(图中这位UED俊男)的眼睛.我们能从他的表情里读出一些他的性格.一张好的摄影作品,最重要的一点,就是这个照片是否有焦点,照片的主题是否一目了然.而摄影作品的用光.构图.景深等等手法,其实就是在让一个照片能够有其焦点,并且利用这些艺术手法来烘托气氛,提升

交互设计实用指南系列(8)—深广度平衡

链接:http://ued.taobao.org/blog/2010/01/the-practice-guidelines-of-interaction-design-the-balance-between-breadth-and-depth/ 相信大家对街边林林总总的房产中介并不陌生,那么我们先看看下面这张图片. 图1 从右侧这家店的橱窗里,我们能迅速分清哪些是租房信息哪些是售房信息.因为店家很贴心的将房产信息进行归类,并且在视觉上做了一些划分,让我们对信息能一目了然.借这个小案例引出我们今天

交互设计初学者的完全指南

交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域.现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互. 这篇文章对有兴趣学习更多关于交互设计的知识的人来说是一个很好的起点.我们将会简要讨论交互设计的历史,相关的指导原则,值得关注的贡献者,以及有关这个迷人学科的工具. 一.什么是交互设计? 交互设计(IxD)定义了交互系统的结构和行为.交互设计师努力在用户和用户使用的产品或者服务间创建有意义