View Mode: Normal | Article List

《Web信息架构》-导航系统

[ 2009-11-15 01:47:49 | Author: jim ]
导航系统的作用:告诉你在哪里,可以去哪里,这里有什么,附近有什么,指引你下一步的行为。
导航系统的分类:全站、区域、情境式、辅助性导航。

浏览器的导航特点

考虑浏览器环境,其实浏览器上已经有后退、前进、收藏、设为首页等功能,但有时候在页面本身的浏览情境当中也最好要放这些功能,比如在浏览一篇文章,到了结尾能看到[收藏]、[关闭]、[返回]等功能可以方便不少用户看完后其它意图的操作。还有就是区分有无链接的文字样式,区分是否浏览过文字的样式(这些其实是编写CSS样式范围内的)。

建立情境

最典型的例子用户随便从Google搜索到一张网页,当点击进入页面后,就算是进入了一个情境中。情境中应该告诉用户这是在哪里?(我在什么位置,这是什么网站),这里有什么(页内标题),用户下一步能做什么(能看,能下载,能购买),还能去哪里(栏目,本栏页内导航),以上几点类似于《Don't make me think》中内页的6点基本要素:1.站点ID、2.页面名称、3.栏目下一级栏目、4.页面导航、5.“你在这里”指示器、6.搜索。

改善灵活性

网站中各栏目之间的内容可能保持垂直的排列方式,但用户在访问内容时要考虑Ta们可以会随时跳转到其它栏目的二级、三级页面中,保持横向和纵向的导航,注意不要导航辅助功能的设置。提供增加的情境和灵活性,弥补等级式系统的不足之处。

全站导航系统

全站导航系统就是要在网站上的每一页都会展示的导航系统,可直接连向重要的区域和功能,无论用户在哪个层次中。全站导航保持一致性,以密集且重复来访的用户为中心,进行设计和测试。

值得一提:具有情境式的全局导航系统,这类导航不仅告诉你这里有什么内容,还告诉用户正在哪块内容中。(图1)

图1

区域导航系统

当用户进行某个栏目中后,可能该栏目还会分很多小栏目,把这些小栏目列出来,方便用户可以立刻浏览那些内容,有些网站会把全站导航和区域导航整合成一致且统一的系统,如下拉菜单。和全站导航一样,在同一个站点中他们的表现形式最好一致且统一的。

情境式导航

进入目的页面后,会有一些内容指向特定的网页、文件、对象。比如网站上的“相关文章”,“喜欢这个商品的用户也会喜欢”,“同类TOP10”,要注意[情境式全局导航系统]主要是说明所处的位置,[情境式导航]是说明在这张页面内容的情境下,有什么相关内容可以告诉并提供链接给用户(称外部情境式导航链接,玩概念:)。比如你在Joyo买《精通CSS》这本书,在介绍这本书的页面中,总会有一些链接是指向与CSS类的其它书籍。还有一种是在文章叙述的文字中放链接(称内联情境式导航链接,玩概念:)。

实践嵌入式导航

认识到全站、区域和情境区导航元素都在大多数网页上同时共存,如何在网站中整合好。不过这个问题可能涉及到:网站栏目多少、页面结构复杂度、实现一些效果的JS程序、交互过程相关这些。

辅助性导航系统

包括网站地图、索引、指南。确保大型网站可用性和可寻性的关键。
网站地图:1.强化信息层次,使得用户熟悉对内容的组织方式。2.对了解网站用途的用户,则便利其快速、直接访问内容。3.避免让用户承担太多信息,协助用户。网站地图强化层次感,探索感。网站地图有一个很实在的好处,当你在搜索引擎中找到某个网站,它可以直接把你带到相关的栏目中。(图2)
图2
网站索引:就是将网站的内容以关键词、词汇、标签按一定顺序(字母,笔划)排列而成。内容之间可以没有等级关系。方便已知条目的寻找,比如歌星中找“曾轶可",只要有找首字首拼音“Z”就可以。
对小型网站可以利用你对内容了解的知识来决定要引入哪些链接,来创建索引。
对大型网站首先用户从索引中选择术语,再从以该术语为索引的文件清单中选出想要的。

指南:网站的新手指南。设计指南原则1.指南要短。2.无论何时,用户都能离开指南。3.允许用户在指南中,前进,后退的自由移动。4.指南的设计目的是回答问题的。5.截图应该明确,具有把重点功能放大的效果。6.如果指南有好几页,要目录。

向导和配置器:主要是协助用户选择配置产品细节(图3)
图3

高级导航方法

个性化和定制化个性化(猜测用户想要什么。在特定环境中会运行的很好,但在用户体验时,就会失败)就是针对个人的行为、需求、喜好提供剪裁后的网页给用户。如网上买书时,会有“推荐同类书籍”,可能有些推荐的书你已经买过并看过了。定制化(用户告诉我们想要什么。但有时候用户自己都不知道他们要需要什么)是给用户直接控制权,可以针对展现格式、导航和内容选项的组合做调整。如Google Reader。

可视化:让用户可能采用可视化的方式浏览GROXIS。(在网上浏览博物馆网站时就像逛现实生活中的博物馆一样身临其境的感觉,想了想谷歌音乐的[挑歌]栏目可能比较类似这种概念)

社会化导航用户上网的需求点、兴趣点可以从观察其它用户行为中推论出来的基础上。比如说一些人上论坛,微博时就是看最近有什么网络话题,关注一些热门的标签,标题;而这类标签,话题主要是通过搜索日志、使用量统计数据、顾客数据库等站长统计软件中获得。(其实这也是情境式导航,只不过作者用这类导航的产生方式来归纳:这类导航的内容是通过用户的行为统计产生的,就成了[社会化导航]了)(完)...

Read More...

《Web信息架构》-标签系统

[ 2009-11-13 01:26:34 | Author: jim ]
标签可以是字、词、词组、一段文字也可以是图片,是一种概念或内容模块的说明或指引(如图1),传递用户并理解。别小看理解,就如同组织系统中说的每个用户对所看到的内容都会有不同的理解,如何做到真的让用户理解你设计的标签是比防偷菜还难的事。

uploads/200911/13_013511_fireshotcapture016www_sina_com_cn.png

图1(典型的标签)

这个例子可能会觉的这类标签比较简单,容易理解,但要为一些相对专业性的网站做这类标签就抓狂了,比如:金融,医药,教育,政府(如图2)。
uploads/200911/13_013517_fireshotcapture017www_hangzhou_gov_cn.png

图2(看到这类标签,能想到哪些内容会在相应的标签中呢?)

标签的分类

情景式链接:简单说指定的类中放相关的内容。比如看到挂着[化学品]三个字的仓库,没进仓库前就可能联想到三聚氰酸、苏丹红这类。反过来,如果先进仓库看到三聚氰酸、苏丹红,等走出仓库却看到 [食品仓库]时,一定会让人费解。再比如一个论坛的[股票]栏目和一个财经网站的[股票]栏目,在这两个不同情景下(前一种讨论股票后一种观察股票),一个标签的概念就会更让人容易理解。

标题:比如文章的题目、新闻列表的编号、项目符号(CSS中list-style-type)、图片,这类标签还能区分内容的结构层次。比如注册时的第一步,第二步;读文章时的第一节,第二节。

导航系统的标签:这个比较常见,就是网站栏目名,关键要分类好相应栏目所包括的内容和取好这个栏目的名字,尽量用一些互联网上常见的匹配,比如[公司新闻]就公司新闻,别写什么[大事记],[搜索]就搜索,别写[寻找],别玩概念。如果一定要玩概念,书中还介绍了范围批注的一种方法,就是花时间介绍网站各个[栏目名]的意思,不过现在大多网站通过[网站地图]更清楚的分清栏目的所包括的内容。

索引术语:将网站中的内容纯粹通过一个个标签的形式组织并列出来,方便有目的用户找到相关标签或让没目的用户看到推荐标签,比如(图3),不过还有一种意义是通过设计好的标签,方便搜索引擎寻找,说白了就如同在GOOGLE搜索关键字的作用(keywords)。
uploads/200911/13_013521_fireshotcapture018flickrwww_flickr_com_explore.png
图3(这就是书中例子的变种)

图标型:通过图形来说明文字表达的内容,这类用法在专业性强的网站上比较受用,所在的情景范围越小就越能突出图形所代表的文字内容。比如你在旅游网站上看到飞机类的图标会想到什么?在一个门户网站上看到飞机类的图标又会想到什么呢?

设计标签

尽量窄化范围:这是通过减少网站所涉及的范围,整理网站栏目概念,甚至减少网站内容。

开发一致的标签系统,而非标签:比如网站首页的栏目和内页的栏目包括命名和顺序都应该是一致的。

一致性会受到很多因素的影响:风格(标点符号,大小写)、版面形式(内容页的文章有一致的风格)、语法(口气一致)、粒度(代表特定内涵)、理解度(帮助用户想到网站能提供的给Ta内容)、用户(为不同的用户独立设计标签系统,即使这些系统说的都是同样的东西)

标签系统的来源

你的网站:做网站时的资料,比如公司要把那些资料,内容放到网上去,按资料属性分分类,按资料格式分分类,按资料作用也分分类,还有,标签=目的地的标题=目的地网页的TITLE。

找同行竞争对手:向QPAI学习做BE TO SEE

受控词表及叙词表:这概念就是些专业的人给一些特定领域制定了一些精确的表达方式,并且词汇通常是公开的,而且被广泛使用。比如有“沙发”,“可爱多”,“生男生女都一样”这类也算吧

创建新标签系统

内容分析:分析文章有代表性的内容,现在QQ空间和蓝色在你写完文章的时间,都会提取这类分析标签。

内容作者:让作者或者文章相关的研究人员来定义标签,然后专人来统计分析标签。

用户代言人及主题专家:找用户代表,或者和用户有直接接触的部门、专家,从用户的角度发言。收集资料找出他们认为用户会想在些网站上找到什么。从一小群用户开始,就可以产生足以为网站做索引的标签。我们对用户(外行)有点了解,所以可以做出能适合他们的术语(例如:“种菜”替换“寂寞”)与了解用户需求的人一起工作。

直接来自用户:开放式卡分类:可以为现有内容按主题分成各自的类别,然后,再为这些类别命名标签。

封闭式卡片分类:是根据现有的类别区分主题,然后再将内容排序到这些类别。对封闭卡片分类面言,一开始要询问用户,说明他们认为类别标签所代表的意义,然后和你自己的定义互相比较。

自由列表:选出关键重要的项目或畅销产品,让新用户或者使用者对项目或产品瞬间想出一些字眼予以描述。排列分析字眼,寻找模式和使用频率。

间接来自用户:搜索日志分析:获取用户实际使用的标签信息,通过哪些关键字搜索来本页中。
标签分析:如图(3)

调整和微调
设计的标签系统必须时常调整和改进。标签代表用户和内容之间的关系,这种关系时常变动。进行用户测试,定期分析搜索日志。(完)...

Read More...

《Web信息架构》-组织系统

[ 2009-11-10 17:41:49 | Author: jim ]
组织系统=组织体系+组织结构

组织体系=说白了就是具体到研究单个页面内容的排列方法如何更合理性、可用性,操作性。
页面内容涉及包括:网站首页、分页、列表、表单、搜索结果页面等页面中各元素之间的布局。

组织结构=说白了就是研究网站每个页面之间的逻辑关系,主要体现在交互功能上。
逻辑关系涉及包括:网站地图、交互过程、数据库结构、标签分类。

组织体系
精确性:按年月,地理,字母等地球人有通用标准的名词。
模糊性:每个人对每件事都有自己的认识和表达,如何做好这类用户的整合,通过分主题类(概念)、任务(目的)、用户(需求)、隐喻(联想)、混用(前面几个适而用之)。

组织结构
等级式:自上而下的做法,简单的说让公司来做网站地图,引导用户使用网站。
数据库模式:自下而上的做法,简单的说让大多数用户的习惯或者说问题所产生的数据,再通过这些数据来引导和解决用户进行使用浏览网站。

以上仅个人认识,欢迎交流:)(完)...

Read More...

信息架构的组件可以拆分成四类

组织系统

如何组织信息,例如,依据主题或年代顺序。

标签系统

如何表示信息,例如,科学术语(“Acer”)或通俗术语(“maple”)。

导航系统

如何浏览信息,例如,通过等级体系的点击。

搜索系统

如何搜索信息,例如,对索引系统进行搜索的查询。

-----------------------------------------------------------------------------------------------------------

分类信息架构的方式

浏览Browsing Aids

这些组件会展现一些预设的路径给用户看,协助他们浏览网站。用户无需清楚地说出查询的内容,而是通过菜单和链接找出他们要的东西。浏览帮手的种类包括:

组织系统

网站内容分类或分组的主要方式(例如,按主题、按任务、按用户,或者按年代),也称分类法和等级体系。标签云图(根据用户产生的标签)也是一种组织系统。

全站导航系统

主要的导航系统,协助用户了解他们人在网站的什么位置,以及在网站中可以到哪里去(如“面包屑”)。

区域导航系统

主要的导航系统,协助用户了解他们人在子网站的什么位置,以及在子网站中可以到何处去。

网站地图/目录

支持主要导航系统的次要导航系统,提供浓缩过的总览以及连向主要内容和子网站的链接,通常是采用概要的形式。

网站索引

辅助性的导航系统,可以提供排序后的链接列表,连向网站的内容。

网站指南

辅助性的导航系统,针对特定主题提供特定的信息,以及连向网站中相关子主题的链接。

网站向导

辅助性的导航系统,可以通过一系列的步骤来引导用户,也有连向网站中相关子主题的链接。

情境式导航系统

用链接统一连向相关内容。通常内嵌在文字内,一般是用来连结网站中高度专业化的内容。


搜索Search Aids

这些组件可以让用户定义查询字符串,然后自动回应一组满足查询条件的结果给用户。可以把搜索帮手当成是动态的、几乎全自动化的一种浏览帮手。搜索组件的种类如下:

搜索界面

输入和修改搜索字符串的方法,通常会提供一些教你怎么改善查询的信息,以及其他设定搜索的方式(例如,从特定搜索区域中选定)。

查询语言

搜索查询的语法。查询语言包括了布尔运算符(如AND、OR、NOT),相似运算符(如ADJACENT、NEAR),或者是指定要搜索哪个字段的方法(如AUTHOR= "Shakespeare")。

查询构造器

一些提升查询效果的方式:常见范例包括拼写检查器,词干分析、概念搜索,以及从辞典中取出同义词。

搜索算法

是搜索引擎的一部分,决定哪些内容可以满足用户的查询。Google的PageRank也许是最著名的例子。

搜索区域

网站内容的子集合,已经特别做过索引设计,以满足较细致的搜索(例如,搜索软件厂商网站中的技术支持区)。

搜索结果

展示满足用户搜索条件的内容。牵涉到哪些类型的内容应组成为个别的结果,应该显示多少结果,以及结果应如何分级、排序和聚类。

内容和任务Content and Tasks

这是用户最终的目标,以及用户达到目标时所需的个别组件。然而,要从信息架构中把内容和任务单独提取出来是很困难的,因为内容和任务中都会嵌入组件协助我们找到方向。嵌入在内容和任务的信息架构组件实例如下:

标题

为内容命名的标签。

嵌入式链接

文字内的链接,就是连向某些内容的标签。


嵌入式元数据

可以作为元数据的信息,但是必须先被抽取出来(例如,在食谱之中,如果有提到某种材料,这项信息可以索引起来,可支持以材料搜索的功能)。

成块信息

内容的逻辑单元;这些单元可大可小(如节和篇章都是成块信息),而且可以是嵌套的(如章节是在书本之内)。

清单

一群成块信息,或者连向成块信息的链接。这些很重要,因为它们已经按组分类了(例如,具备某些共同特点),而且以特定次序展现(如按年表)。

顺序式帮手

暗示用户在某一流程或任务中所在位置的线索,以及完成任务之前还要走多远(例如,在八个步骤中的第三个步骤)。

标识符

暗示用户在信息系统中的所在位置的线索(例如,标志指出用户正在使用的网站是什么,“面包屑”表明现在处于网站的哪个位置)。

“隐藏的”组件"Invisible" Components

某些重要的组件完全是在幕后执行的,用户很少会和这一类组件交互。这些组件通常会“喂养”其他组件,诸如用来提升搜索查询的词典。一些隐藏的信息架构组件种类如下:

受控词表和叙词表

预先确定较佳的词汇,用以描述特定领域(如赛车,或外科手术)。通常会包含其他的称法(例如,“brewskie”是“beer”的另一种称法)。 叙词表是通常包含上位类、下位类、相关关系的叙词链接和优选词的说明(也就是“范围注释”)组成的受控词表。搜索系统可以从受控词表中取出查询的同义词以 提升查询效果。

搜索算法

用于对搜索结果按相关性排序;搜索算法反映了程序设计师对如何决定相关性的判断。

最佳猜测(Best Bets)

手动和搜索查询相配的较佳搜索结果;编辑和主题专家会决定哪些查询应该取出最佳猜测,以及哪些文件应有最佳猜测状态。(完)


...

Read More...

填写表单时*(必填)的前后位置

[ 2009-10-22 23:20:59 | Author: jim ]
这几天在找网站交互设计方面的工作,曾看到过一道*(必填)所在位置的问题:
先看下面三张截图。
第一张:“*”显示在开始
uploads/200910/21_232049_.png


第二张:“*”显示在中间
uploads/200910/21_232100_.png


第三张:“*”显示在后面
uploads/200910/21_232214_.png

请问“*”放在哪个位置相对合理?为什么?

===========================================================

首先换个角度看看上面的内容,把过程分成三块:
*=提醒
用户名、会员登录名、邮箱名称=说明
文本框=执行

大多数人的视觉一般是从左往右的方向,所以这三张图的逻辑流程应该是:

第一张:显示在开始
提醒(这是必填的) > 说明(填的是什么内容) > 执行(填写内容)

第二张:显示在在中间
说明(填的是什么内容) > 提醒(这是必填的) > 执行(填写内容)

第三张:显示在后面
说明(填的是什么内容) > 执行(填写内容) > 提醒(这是必填的)

===========================================================

显示在开始:一上来就先提示你一定要执行。(这感觉就好像有人先不告诉你做什么事,但先提醒这件事你一定要做。)感觉好吗?!

显示在中间:一上来先说明你要做什么事,然后提示这是你一定要执行的。(这感觉就好像有人先和你说要做什么事,然后提醒你这件事是一定要做,接下去你愿意的话就可以做。)比较尊重用户,也比较符合逻辑。

显示在后面:一上来先说明你要做什么事,然后你愿意的话就执行,执行完后提醒你一定要执行。(这感觉就好像有人先和你说要做什么事,然后你做了,最后才告诉你这是一定要做的。)事都做完了,这时候才知道是一定要做的,对用户来说已经不重要,何况如果不是一定要做的,用户不是可以选择不做吗?

所以我的结论“*”相对来说放在中间最合理!

以上个人看法,不供参考,欢迎交流:)完...

Read More...

可怕的1分钱1k

[ 2009-08-19 17:27:15 | Author: jim ]
uploads/200908/19_173617_1.gif

中国移动GPRS标准资费:一分钱=1K,一毛钱=10K,一块钱=100K,十块钱=(就算它)1M,一百块钱=10M,一千块钱=100M,一万块钱1G都没有,今天算了一下,真是暴利,暴力啊。
这种定价难道合理吗?
我知道可以包月,但不想包月或者包月超过流量的用户要用的话,就一定只能当猪吗?