信息架构与建筑: IA 101

还差三个月就是我来欧洲生活的第二年了。如果要让我说说我对这里的什么最着迷,美食吗?我想我的中国胃真的很难同意;悠闲自在的生活方式外加25天以上的带薪年假吗?当然是其中之一。但最深深让我折服以及感动的,是欧洲的建筑。

关于罗马这个城市,太多的故事已被记录,说来也巧,光今年我就去了两次罗马,第一次游完罗马我发了一个朋友圈说:罗马是一个底层架构很扎实的app,且深谙用户需求,也因此每年都有来自世界各个角落的游客趋之若鹜,但说到用户体验,太多细节可以推敲。4个月后我又去了一次,细细品味了很多并非旅游景点的教堂、街道,发现原来罗马的建筑才是我们做信息架构设计的一本教科书。

古罗马广场遗址,它是古罗马时代的城市中心


罗马街头寻找好吃Pizza的路上

你喜欢一个城,不在于它有七种或者七十种奇景,只在于它对你的问题所提示的答案。——卡尔维诺

也许是中文翻译的原因,Information Architecture 被翻译成了信息架构,于是和Architecture这个词想去甚远,但如果我们从用户感知、组织原则、体验要素这几个方面来看的话,我想建筑艺术的学问无时不刻的在启发着我们如何进行信息架构设计。罗马这座城市让我看到,关于Information Architecture我们可以从Architecture中找到答案。

用户感知  

这两年在欧洲旅游我几乎没有去过说英语的国家,但我发现很多公共场所即便在没有标注英语且不需要问路的情况下,我也往往能顺着所谓的直觉找到我要去的地方。

即便你不识字,站在警察局门前,你也不会觉得这是一个教堂;站在银行面前你也不会觉得这是一所医院。最有趣的是我在去柏林的时候,当踏入东柏林的那一刻,只是看到眼前的那些居民楼,我竟然能够满满的嗅到社会主义的气息。而这便是建筑对人用户感知所建设的固有形象。


注意观察左侧的小白楼和右侧满是广告的墙壁

而我们再来看信息架构,是否也能带给我们相似的感受。当你打开一个电商的App,或当你打开一个新闻App,亦或当你打开一个社交App,即使在完全不理解文字的前提下,你也能够感知到这个App到底是需要完成什么样的任务的。当然关于信息架构如何服务用户任务,我们在之后还会继续聊到。和建筑是由墙体、屋顶、室内摆设等形式、空间、物件组成的一样,信息架构是由一个个的语义元素而组成的,它包括:组织结构、内容元素、导航系统、搜索系统四大部分。用户也是通过这四大部分来形成对一个网站或者App具体是做什么的整体感知的。

关于如何科学的建立用户对于信息架构的感知,后续我会专门写一期关于信息架构本体论:如何从Ontology到Taxonomy再到Choreography这三个层次来建立用户与信息的关系。

组织原则

(1)一致性

建筑设计经过几百年的精进,沉淀了一系列设计组织原则,但这其中最重要的一条就是一致性。

在卡尔维诺的《看不见的城市》里,罗马是一个精致的谜团。在罗马,你可以看到各种一团糟的现状,交通是一团糟,城市公共卫生是一团糟,住在这里也是一团糟,但卡尔维诺在《看不见的城市》里却在寻找关于罗马的秩序,因为罗马就像一座无比精致的博物馆,走在罗马街头,你可以穿越不同的历史时期。也有人说:罗马是成年人的迪士尼乐园。身处其中,你可以从中世纪徜徉到文艺复兴时期,从古罗马帝国漫步到巴洛克时代再到新古典主义时代。


万神庙是最典型的古罗马式建筑,它早于同属于古罗马建筑的斗兽场和君士坦丁凯旋门


圣彼得堡大教堂则属于文艺复兴风格

虽然罗马有很多风格迥异的体现不同时代设计风格的建筑,但在同一个建筑主体里面,设计风格通常都是统一的。应用到信息架构设计,我们通常会说用户体验应该根据平台属性进行适当的调整,比如PC的体验和平板、手机的体验就会有很大的差异,因为用户群体也许不一样、使用场景不一样、任务目标也有可能不一样。但是值得注意的是,对于信息架构设计来说,组织结构、内容元素、导航系统、搜索系统却需要保持一致性。

(2)场景式

如果你去过罗马,你一定见过许多叫做basilica的教堂,相较于其他的教堂,basilica具有非常典型的设计:它通常是一个长方形的会堂,会堂的一头是入口大门,中堂是廊柱大厅,而会堂另一头则有一个拱形的穹顶。穹顶下方则是一个比会堂其他地方都高的台子,而建造这个台子的目的则是因为通常情况下神父都在这里主持礼拜。这个台子就是一个根据使用场景进行的设计。


Basilica的平面图

同样在信息架构设计时,我们也会把符合场景的内容放入到页面中来。比如:在Booking的搜索结果页有一个筛选栏叫做 Fun Things to Do。它会根据你搜索的不同目的地展示不同的搜索结果。如果你去的是阿姆斯特丹,好玩的事情就包括骑单车还有马杀鸡(✿◡‿◡)。如果目的地是Lake Bled,好玩的事情可能就是滑雪和骑马。


Booking.com搜索结果页(搜索目的地:Amsterdam)


Booking.com搜索结果页(搜索目的地:Lake Bled)

(3)层级式

如前面提到的,在信息系统设计中,我们是通过对结构和规则的设计来让用户感知到这是一个什么样的产品。体现在建筑上,我们可以问问自己:我们通常都是如何找到建筑的入口的?这个入口听上去非常傻,因为答案当然是门了。可是,一个建筑的“门”那么多,我们是怎么分辨哪个才是大门呢?那当然是那个被很多大圆柱“加粗高亮”了的门啦。

在网站的信息架构设计中,我们也往往能够看到这样“带节奏”的设计,比如对比京东和天猫的类目导航,我们就可以看到两个网站都把自己的优势类目放在了最开头的位置。此外在fat menu的顶端,京东还特地把一些优势或主推的类目进行了单独的入口强化处理。

京东首页类目栏设计


天猫首页类目栏设计

(4)节奏感

再说说关于节奏,在建筑设计中,我们会发现某些走廊的柱子设计得稀疏,而到了某个入口的两旁柱子则设计得密集,这样也是典型的带节奏设计,为的是让人们能够远远的便知道哪里才是入口,或者说在什么位置快走,在什么位置需要停留更多时间。


应用到信息设计上,如果还用京东和天猫进行比较,我们可以看到天猫在服装品类的搜索页,最强带节奏的设计是页面顶部的服装品牌筛选栏(带有品牌logo),而京东的服装对于品牌性弱一些,在品牌筛选栏中并没有logo的插入。但涉及到手机品类时,两个网站都采用了logo植入顶部筛选栏的设计。


京东搜索结果页(搜索关键词:羽绒服)
天猫搜索结果页(搜索关键词:羽绒服)

两个网站在图书品类方面如果对比亚马逊都有差强人意的地方:那就是对于图书品类来说,当用户发起一次搜索,需要找到的更多的是符合这个搜索关键词的相关书籍,而非具体在哪家书商购买,具体在哪里购买属于次级信息,但两个网站都采用了和其他品类相似的搜索结果页结构来处理这个品类。亚马逊则采用了和服装品类不同的方式来处理图书品类:同一标题的书只出现了一次,且把更多的位置留给了书籍的作者、出版时间、纸质/kindle、新旧图书价格差异这些更为关键的信息。

天猫搜索结果页(搜索关键词:信息架构设计)


亚马逊搜索结果页(搜索关键词:信息架构设计)

体验要素

Jesse James Garrett作为用户体验咨询公司Adaptive Path的创始人之一,曾在2007年出版过一本名为《用户体验要素》的书,这本书里把用户体验分为战略层、范围层、结构层、框架层、表现层。

如果运用到建筑与信息架构设计,仿佛这几个层次也同样存在。

建筑体验要素 v.s.信息架构体验要素

(1) 用户需求

我们的用户是谁?他们需要完成哪些任务?他们完成这些任务的目的是什么?他们完成这些任务的场景是什么样的?完成这些任务时他们都有哪些典型的行为模式?

(2)系统结构

我们是如何组织信息的?以主题来组织,还是按时间来组织?我们组织信息的方式也反映了我们看待自己的方式。在生活中,我们按性别来分类自己,还是按国籍,又或者是按职业,或者按家庭角色?如果是按家庭角色,你是母亲还是女儿还是妻子?这都反映了我们对待周遭对待自己的方式。

(3)标签系统

我们是如何表述信息的?当你指着🍅你选择说西红柿还是番茄?

(4)导航系统

我们是怎样浏览或者找到信息的?

(5)搜索系统

我们是怎样搜索信息的?

(6)内容管理

根据用户需求,我们需要哪些内容,这些内容分为哪些类型,他们的来源是哪里,获得了这些内容后它们需要被投放到网站的哪些位置上去?

(7)运营管理

谁来采集内容?谁来更新网站?谁来为网站的用户提供服务?

接下来几期的内容规划是根据Research-Strategy-Design这样一个顺序说说一个完整的信息规划项目都需要做哪些事情。不过也欢迎你留言告诉我接下来还应该说说哪些内容。

如果你想了解我的最新UX相关文章,请关注我的微信公众号UXtoto,或扫描下方二维码。


UXtoto
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容

  • [产品设计] [用户体验] 封面用研整编 信息架构通常是由产品经理、设计师、开发人员以及内容策划师共同承担的工作,...
    CoverUER阅读 11,163评论 2 44
  • 华岳雄奇碧如带, 河绕玉润数亿载。 老祖一觉不知醒, 神斧落下声犹来。 奇险俊秀西岳巅 上山容易下山难 宝莲神奇方...
    石水轩阅读 401评论 1 7
  • 作为把一个以阅读当职业的职业阅读者,一周读几本书并不稀奇。但大多数人不是以阅读为职业,他们不需要一周读几本...
    bydefault阅读 158评论 0 0
  • 白袖素手捧春风, 人面杜鹃相映红。 盈步袅娜青丝绕, 转身娉婷影朦胧。 天晴好,偶相逢。顾盼神飞君眼眸。 今朝犹将...
    来深务工人员阅读 216评论 0 0
  • 你遇到困难了,去找人帮忙。 嘴上答应的客客气气的,不一定真的会帮你。 而满嘴刻薄的那个,说不定回头就替你办了。 所...
    baizer阅读 181评论 0 0