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

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

相关推荐

  • 【案例】菜鸟裹裹如何打造双11极致物流体验

    作者:CNUX设计实验室(菜鸟无线UED团队)   如往年一样,2016年的双十一如期而至。当大多数人都在关注、鼓励你买买买的时候,有多少人关心你盼望包裹的那种期待?有多少人能体会你等待包裹时的焦虑?有多少人理解…

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

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

    2015-11-08
  • 如何做让老年人也能方便使用的网站【UXRen译#176】

    作者:保罗•克瑞斯顿(Paul Crichton)  |  翻译:阿陌,校审:天蛙   英国有近三分之一的人口都超过50岁。 他们在2015年的网络消费额就达到了14.45万亿英镑。 他们中76%的人会每周至少一次进行网上购物。 50岁以上…

    交互专题 2023-03-03
  • 2016年最值得关注的16个网页设计趋势

    设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流。作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都…

    2015-12-23
  • 【新鲜译文】iPhone X人机界面规范

    译者:阿呜(UXRen翻译组成员)   iPhone X的超大尺寸、高分辨率以及它的全面屏给我们带来了以前从未有过的沉浸式体验和丰富的内容展现。   1、屏幕尺寸 iPhoneX竖屏时的屏幕宽度与iPhone6、iPhone7和iPh…

    2017-09-14
  • 【交互新人】交互设计面试,常见问题汇总

    作者:高杰   今天给大家分享面试交互设计岗时面试官常问的问题、分析目的和建议回答!但这并不表示你在面试时一定会遇到这些问题。任何一个问题,都不存在绝对正确的标准唯一答案。仅供参考!   1、自我介绍 分析…

    交互专题 2017-08-17
  • 如何完美碾压用户体验职位面试 【UXRen译#152】

    作者: Patrick Neeman |  翻译:Shea ,校审:Ariel   当你成功进入了电话面试或者面对面面试的阶段,这就意味着你已经通过了最艰难的考验:你已经具备了在该公司工作的技能。现在要被评估是否具备软实力以及能否…

    交互专题 2017-08-07
  • 设计如何操纵人的想法—来自于Google的设计伦理学家

    作者:Tristan Harris 译者:@Steve-Mr 与 @WayneMaa 和 Oscar Wei   愚弄人们,要比让人们相信自己被愚弄了简单。 我十分了解科技如何劫持我们心理上的弱点,这也是过去三年,我在谷歌研究防止上亿人的心智被科技…

    交互专题 2017-08-07
  • 设计师如何使用用户研究优化A/B测试

    作者:Jennifer Cardello; 编译:霍诗雨@ 点融黑帮   一、A/B 分类测试 A/B分类测试使得网站可以通过比较同一网页的不同设计,来决定其中哪些设计将产生最好的结果。在A/B测试中用到的指标是微观和宏观的转化率。 …

    交互专题 2017-08-07
  • 从产品到交互·2015同济设计学考研经验

    【写在前面】 我叫徐晨,来自陕西西安,毕业于兰州理工大学工业设计专业。2015年我参加了研究生入学考试,也如愿考上了同济大学创意学院的研究生。想想当初独自备战,其实都是在黑暗中摸索,曾经也担心自己的复习方…

    2015-11-08