数极客首页

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

相信大家对街边林林总总的房产中介并不陌生,那么我们先看看下面这张图片。从右侧这家店的橱窗里,我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类,并且在视觉上做了一些划分,让我们对信息能一目了然。借这个小案例引出我们今天要分享的话题:深广度平衡

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

图1

1.什么是深广度?

其实“深广度”本身并不是一个单一的概念。在网站的信息架构中,有一种组织结构叫做树形结构:网站首页视为链接层级中第一级,与其有从属关系的页面视为链接层级中的第二级,一般称其为二级页面。通过二级页面又可以继续得到第三级页面,依此类推可以得到一个完整的树形链接结构。这样一个完整的链接结构,我们称它为树形结构。 在整个树形结构中,链接的层数被称为网页链接的【深度】(depth)。而在树形结构里,最底层页面包含的页面总数被称为网页链接的【广度】(breadth)。 我们可以通过下面这张图来理解深度和广度的概念: 交互设计实用指南系列(8)—深广度平衡

图2

2. 为什么深广度需要保持平衡?

我们回到开篇的小案例。左侧那店铺采用的是“只有内容链接的模型”(它们之间没有层级结构;链接没有模式可循;且没有某种导航方案将他们分离开)(注1)在这里每一条房产信息都可以看成一个内容链接,整个橱窗就像一张错综复杂的大网,让人头晕目眩。 而右侧的店铺采用的是“结构化浏览模型”(只有一组链接,作为获取网站信息的途径;导航区域与布局中其他内容有视觉上的分隔;要到达另一区域的某个页面,必须沿着树向上导航,再沿着另一个分支向下)(注2)店家将信息进行了规整,在房产信息上增加了一个分类,并且对不同类型的信息使用了不同的颜色,高效的将租房信息和售房信息区分开来。 一个网站的链接深度和广度最好有一个合适的均衡关系,深度过大的网站不利于用户快速获取信息,广度过大的网站则容易让用户在无数并列的超链接面前不知所措。 交互设计实用指南系列(8)—深广度平衡

3. 如何保持深广度平衡?

我们在处理网站结构时,常常会使用按组分类的方法来组织信息。而信息的分类我们能使用时间序、主题或科目、地理、字母序、受众群体以及任务等方案。现在我们再来看看深广度平衡在web上的应用。 交互设计实用指南系列(8)—深广度平衡

小结

对于不同类型,不同信息量的网站,在深广度平衡上应采用不同的策略和方式。本文仅以个人在工作中的经验来对深广度平衡的方法论进行一些实例化的分享。对这方面有兴趣的同学欢迎留言探讨。 注1:摘录《Web导航设计》第1章 第一节 导航的需要(P6) 注2:摘录《Web导航设计》第1章 第一节 导航的需要(P9) 注3:摘录《Web信息架构》第5章 第四节 组织结构(P70) 注4:摘录微软论文《Web page design: implications of memory, structure and scent for information retrieval》 参考文献: 《Web导航设计》 《Web信息架构》

来源:http://ued.taobao.com/blog/2010/01/30/the-practice-guidelines-of-interaction-design-the-balance-between-breadth-and-depth/

延伸阅读:

交互设计实用指南系列(1) – “有效性”之“操作入口明确”

交互设计实用指南系列(2) –“有效性”之“可及”

交互设计实用指南系列(3)—“有效性”之“适时帮助”

交互设计实用指南系列(4)—“有效性”之“简洁清晰,自然易懂”

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

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

交互设计实用指南系列(7) – 避免迷路

给大家推荐我国新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是用户行为分析领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

评论已关闭。

相关文章