信息架构与导航系统,还傻傻分不清楚吗?

nngroup-ia-nd-vs-00

作者:Jennifer Cardello,翻译:小球娘

 

几句话概述:信息架构是支撑网站的骨架;导航指的是网站交互界面上,用来让用户到达具体信息内容的元素。

人们有时会把信息架构(IA)和导航系统的概念混淆到一起,这些概念的确是相关的,而且信息架构主导了网站导航系统的设计。但信息架构和导航系统并不相同。事实上,信息架构包涵了除网站导航以外的很多东西。Nathaniel Davis在为UXmatters杂志写的名为“建立信息架构实践”的文章里,把导航系统比喻成网站信息架构这座冰山的山尖而已。

 

一、什么是网站信息架构?

一个网站(或局域网)的信息架构有两个主要组成部分:

  • 网站内容/功能的属性和定义
  • 表层以下的组织,结构,和决定网站的内容/功能之间关系的提法

信息架构(IA)并不是可见用户交互界面的一部分——事实上,信息架构构成了交互界面。信息架构一般记录在表单和图表里,而不是在结构图,板式模拟图(简写成comps)或产品模型里。

 

nngroup-ia-nd-vs-01

这个网站信息架构图描述了http://nngroup.com上的不同内容模块以及它们之间的关系。蓝色方块显示第一层信息组成,绿色是第二层组成,黄色属于第三层信息组成。每一色块(代表的信息层级)都把所属内容包含其下。

 

虽然信息架构本身在交互界面中不可见, 但它却一定对用户体验产生影响。就像我们从用户体验定义里知道的,总体用户体验建立在用户所面对过的所有事物之中。虽然用户没法看见网站的结构,但仍期待他们能感受到内容的划分和联系符合他们的需求和预期。当然,当用户感到网站的内容/功能不是他们想要的,并且由于网站结构,组织,和提法的问题而让他们感到纠结时,他们就会离开网站,这是很悲哀的情况。

打个比方,除非你是超人或放射科医生,当看向一匹马或一只鸡时,你无法看见它们的骨骼,但正是这些骨骼让这些动物如此不同。所以不要试图骑在一只鸡上,因为它的骨骼没法承受你。(那画面太美…不敢想 ←_← )

 

用于定义信息架构的活动包括:

  • 内容调查:检视网站来寻找和定义已有内容
  • 内容筛编:评估内容的有用性,准确性,语气,和总体有效性
  • 信息组合:定义以用户为中心的内容组织关系
  • 建立分类法:定义标准化的命名机制(词汇控制)并应用在整个网站里
  • 描述性的信息创建:定义信息数据,可以生成“相关链接”列表或其他导航相关组成部分来帮助(用户)发现信息。

 

二、什么是网站导航?

一个网站导航系统是用户交互界面的元素集合。 导航系统的首要目标是帮助用户找到信息和功能,并鼓励他们进行预期操作。导航组成部分包括顶级导航,局部导航,功能性导航,面包屑导航,过滤器,分面导航,相关链接,页脚,超宽页脚等。

 

nngroup-ia-nd-vs-02

一些导航相关组成的例子:1)功能性导航; 2)顶级导航; 3)面包屑导航; 4)局部导航; 5)相关链接(这个例子里是文章和博客); 6)超宽页脚 (U.S. Small Business Administration)

 

针对每个导航组成元素的一系列决策都应包括:

  • 使用优先级:用户有多依赖这个导航组成部分?比如,用户是否首先使用局部导航来访问网站?还是相比起来他们更依赖于相关链接?
  • 位置:应该在哪些页面显示导航?应该放在页面网格布局的哪里?(如:顶部,左手边,右手边,底部)
  • 模式:哪种导航设计模式最能支持(对内容的)寻找和发现度——标签,下拉菜单,幻灯,风琴(还有其他各种选择)

 

三、信息架构和导航的关系

当设计一个新网站时, 设计师们能否忽略信息架构而只注重于导航系统?

答案是:不行。

这样做是低效的甚至是危险的。不能跟网站总体内容和功能的定义相适合的导航系统会非常昂贵。比如,我们假定一个设计团队因为他们喜欢其视觉效果而决定使用一个典型的反“L”型导航系统(一个顶部导航条和左部导航轨),反“L”型导航系统可以支持低于四层的网站结构。不幸的是,项目后期,当他们进行了站点考察后,发现很多部分的深度都多于四层。现在他们必须要么回头重新设计一个导航系统,要么把所有内容都塞进四层结构里。

 

nngroup-ia-nd-vs-03

反“L”型导航系统的例子(Suffolk University in Boston)

 

四、在设计导航系统之前定义信息架构

当进行一个设计或再设计项目时,从深入网站定义或重新定义信息架构开始zhuo shou非常重要。信息架构不需要在开始设计框架图和产品模型前完成,但必须首先理解并确认内容的量和复杂度。仅仅因为外形就决定导航系统组成部分,可能导致被迫把一个理想的信息架构改成不能很好的响应用户需求或适合网站内容的样子。

 

文章授权来源:小球娘的用户体验笔记 (知乎专栏)
英文原文链接:https://www.nngroup.com
原文标题:The Difference Between Information Architecture(IA) and Navigation
发布时间:06-22-2014
头图来源:http://static.jumpstartcto.com

 

 

 

推荐阅读

交互设计师怎样理解信息架构?
从逛商场学习产品设计:信息架构设计如何从小白到精通?
移动端设计——信息架构
设计数据驱动的界面
用户体验设计必须知道的产品9种状态

 

UXRen公众账号
关注UXRen微信公众号(cnUXRen)

UXRen社区欢迎各界用户体验从业者及学生投稿优质原创文章。投稿请关注UXRen社区公众账cnUXRen(上面有二维码)留言“我要投稿”,小编会及时与您取得联系。

版权声明:除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区,并保留本站原文链接地址。本站部分文章来自互联网及公开渠道,如有侵权请及时联系我们。邮箱:contact@13tech.com.cn

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/21089/

(0)
震天下震天下
上一篇 2017-08-07
下一篇 2017-08-07

相关推荐

  • 交互设计师的60日计划第十六天

    周五综合症:不想做事...今天把昨天的需求做完善,与产品经理讨论其中的一个问题,然后将细节标注清楚,但是产品最终还没有确认。除此之外,一直在帮要晋级的一个视觉同事想文案,最后得出结论,还是得多读书,书到…

    交互专题 2015-08-20
  • 欧洲(非英国)交互设计申请攻略

    今天为大家带来欧洲(非英国)地区交互设计专业留学申请攻略,从学校/专业/费用等方便分析每个学校的优缺点,让大家在选择学校时更有的放矢。 1.代尔夫特理工大学/Technische Universiteit Delft 学位:Master of S…

    2015-11-04
  • 2016年度13篇最佳UI/UX参考文章【UXRen译#161】

    作者:Grace Jia(UI/UX Researcher & Analyst)  |  翻译:代代子,校审:Chen Jing   本文收集了2016年度最受推荐的设计文章,内容涉及(1)UI/UX设计的原则、书籍和工具(2)如何做出更好设计的方法和建议(3…

    交互专题 2017-08-07
  • 交互设计师的60日计划第十八天

    今天一直在以龟速写下周要分享的用研总结。写的过程中总是想这么讲老大会不会pk我,这么讲老大会有什么想法…果然是最近看他们做晋级ppt留下阴影了么…但不论怎么说,做一下这个分享还是挺好的,不然一个星期的时间,…

    交互专题 2015-08-20
  • 全面了解iOS 11

    作者:沄海   UI得以迅速发展,苹果公司功不可没,他开启了移动化浪潮,拥有了世界各地超过十亿的设备,有潜力使任何想法或设计成为主流。这一次,苹果对之前对设计风格做了较大变动。 今天分析的两个版本分别是 iO…

    交互专题 2023-03-03
  • APP小红点如何使用与实现逻辑

    作者:APP君   我们现在已经习惯小红点的不断的骚扰了,每天都不知道要点掉多少个手机APP上的小红点。有些童鞋点击 APP小红点 都已经成瘾。只要看到有小红点就会自然而然去触摸一下。 所以,APP的交互设计已经影响…

    交互专题 2017-08-07
  • 未来交互设计:初心未变,可用的新视角

    Terry Cao是UXPin(一款线框图与原型制作APP)的内容策略专家。要了解如何掌握现在交互设计的艺术,可以参考免费的电子书籍《Interaction Design Best Practices》。这本书中含AirBnB、 Google、 Apple、Etsy 以及…

    2015-11-08
  • 【UXRen原创】一款金融股单APP的设计之路

    作者: 股单小分队 @ 国信证券的产品设计中心   一、交互设计的那些事 许多朋友问我:你大学学的专业不是工业设计吗?都是做产品造型的呀,现在怎么跑去证券公司做交互了? 相信许多做交互设计的朋友和都会遇到这样…

    交互专题 2017-08-07
  • 【译文】来看看糟糕的用户体验如何毁掉一个设计

    作者:JAKE ROCHELEAU;译者:岩盐盐盐   谷歌团队近几年的数据研究表明,用户体验的重要性在网页设计中越来越突出。然而现在还是还有好多网站采用中心提示用来阻碍网站的可用性,它们有些疏忽导致,有些确实故意为…

    交互专题 2023-03-03
  • Hybrid APP 会吃掉微信等应用?

    先看一则新闻:Facebook今天推出了依托在Messenger上的虚拟助手M。这款虚拟助手借助AI+人工的方式为用户提供服务,M背后的人工运营者被称为M trainers,是Facebook公司里的合同工,而非正式员工。除了提供服务,他…

    2015-08-28