『交互设计经验分享』信息交互设计金字塔法则

本文由卓衡科技运营总监刘鹏分享。文中刘鹏讲述了他们在创业过程中总结出的交互设计的金字塔法则。

1417416154475138

金字塔方法这个说法来源于美国著名的现代管理咨询公司麦肯锡。大致的意思就是:任何事情都能归纳出一个中心点,而此中心论点可以由数个一级论据支撑,这些一级论据也可以被数个二级论据支撑,如此延伸,状如金字塔。

1417416175423608

当然,你也可以说这个说法最早来源于中国的老子,因为他曾在《道德经》中说:道生一,一生二,二生三,三生万物。

对于一般展示型的信息的交互设计,我们的观点是其设计核心不仅在于不断丰富信息的表现形式,更在于不断提升其被感知的速度与精准度。

对应这个观点,我们所采用的方法是:把信息展示的重点与交互行为的主任务优先展示,再根据用户在这个界面上所愿停留的时间逐级给予更多细节,我们把这种方法称之为“信息交互设计金字塔法则”

下面这种布局类型的网站大家一定还有映像,就是一打开网站,会有个大大的 Flash,先是暴长的 Loading,然后出现一个声光化电但不知所云的 Flash 一通播放,右下角通常还有个小的英文字,写着 Skip。

1417416192637807

悲剧的是,通常我们通过漫长而耐心等待之后看完这样的东西,反应是这样的。

1417416216358449

因为大多数情况下我们实在不知道他们想要告诉我们的到底是什么,只是觉得浪费了我们太多时间。

如果想让用户有效的接收信息,那么就必须从人对信息的感知特点来谈起。通常说来,人对色彩的感知速度大过图形,而对图形的感知速度又大于语言和文字,好的设计,顺应人的感知速度,运用金字塔法则来分层级地展示,让信息得到更迅速,或更精准的传达。

1417416250362442

人对于信息的接收和解读,其实是一个从模糊到精确,从定性到定量的过程。好的设计,会关注人感知信息的过程,以及在不同感知阶段的心理体验。

所以我们现在看到越来越多的信息展示型网站变成了这个样子。进入网站后,首先看到的是大图和主题文字,然后下面有更多细节的入口。

1417416410147950

说到这儿,我们来举个最近身边的例子吧。大家都知道,苹果最近推出了视网膜屏的 MacBook Pro(张鹏分享的时间),为了向大家介绍这款产品的特性并促成销售,让我们来看看苹果在他们的官方网站上是如何做的。

1417416709833862

接下来,让我们用金字塔法则来对这个网页进行一个分析。

1417416733742413

如果我们在这个网页上停留的时间只有三秒钟,那么我们看到的就只有一个核心卖点——视网膜屏,以及一个被强调的主任务——购买。如果浏览者碰巧是一个我这样的脑残型果粉,可能直接扑上去就点了那个蓝色的 Buy Now。

但通常人们会在确定有兴趣之后想得到更多的辅助信息。那么很好,当我们打算在这个网页上多停留一点时间,比如三分钟,那么把这个网页向下拖一拖我们能看到这台机器的四个主要卖点:视网膜屏、全闪存架构、机体更纤薄以及速度更快。这就是金字塔的第二级。

如果你觉得这些信息还不够呢?很好,你可以通过这四个主要卖点下面的 Learn more 点击进去,进行长达半个小时以上的浏览,直到你完全了解了这台新机器的特性。在这里,我整理了一张视网膜屏 MBP 特性介绍的思维导图,大家能看到越进入金字塔的底部,我们所得到的信息也就越多,细节也就越丰富。

1417416763608392

对于分层式信息展示,我们通常会先考虑页面整体的色彩倾向,同时对一级信息作重点展示,对二级信息作缩略展示,提供提供三级信息的交互展示或提供入口。这部分工作需要重视信息与数据的可视化,强调在第一时间传递核心信息,别让我想。

设计师做信息架构的时候除了关心信息的展示,同时还会关注用户的心理与行为,从而为之设计一系列的交互。

接下来让我们从交互的角度,来看看苹果是怎么做的。

1417416810519970

首先,金字塔的最上层,也就是核心的主任务,就是购买。如果用户的意愿很强烈和直接,那么在第一时间,就能找到那个被重点突出和强调的 Buy now,如果用户只是有兴趣,购买的意愿还不是很强烈,那么首先应该分层次多渠道的让了解更多的信息,然后不失时机的来通过增值服务和聪明的帮助来增强用 户的购买意愿,在用户产生了足够强烈的意愿之后,根据用户自身的情况,提供和推荐更多的渠道选择确保交易的最终达成。

1417416833713845

针对用户行为,我们首先要关注的是用户的主任务,然后需要关注不同类型用户在不同阶段的心理特点,适时地出现帮助,为用户提供多个选择而不是主动替用户作出决定。

信息交互设计的金字塔法则,不仅十我们用来判断一个信息交互设计是否优秀的方法,同时也是我们自己做此类设计时的一个指导原则。

鉴于时间的关系,在这里我能跟大家分享就只有这么小小的,然而实用的一招。如果以后机会,也许我们可以一同探讨下诸如“如来神掌”之类的华丽大招。

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/3521/

(0)
Smiler李想Smiler李想
上一篇 2015-01-27 13:28
下一篇 2015-01-27 13:38

相关推荐

  • 如何减少哑铃图中的颜色,提高用户体验?

    有奖互动话题,文末等你概述作者在 #MakeoverMonday 2018 的第 2 周的课题上,制作了一张哑铃图来比较男性与女性在寻找伴侣时所注重的特征排名。他目标是展示不同国家的男性或女性在寻找伴侣时是否都会将某一特征看作重要因素。这样让作者立即想到了哑铃图,但是他的第一份草稿存在一定的问题。Viz 中的颜色太多了,我们很难从中发现趋势。之前作者也曾遇到过这个问题,但是他觉得真正的解决办法应该是,在不减少 Viz 中数据数量的情况下...

    2018-04-19
  • 超实用!聊聊标签式导航的设计思路(附设计师做笔记方法)

    现在文章基本上都不深入,只是点到某个知识,跟大家说个理论的东西,然后罗列出所有导航的形式。读者看了之后跟没看是一样的,遇到问题还是没法解决,只知道有这类导航存在而已。今天这篇详细地讲了关于标签类导航的几个知识点,希望可以帮助大家在工作中更好的运用。

    2017-05-21
  • 2017年UX设计的3大预测

    本文作者总结了他在2016年对UX设计的预测,且又对2017年的UX设计进行了预测。

    2017-04-29
  • 初步谈谈iOS11的交互设计

    这是一篇很赶的文章。源于我看到iOS11的介绍后的一些想法,希望能在此跟大家聊聊。从iOS11的更新中我们可以看到苹果的两个方向:1、提升iOS的生产力;2、应用之间更加的无缝衔接和单应用的无声扩张。我们来看第一个…

    2017-08-01
  • 网页感知价值研究:UI中的感知价值

    “感知”本身是心理学层面的概念,界限很模糊,以下是围绕网页感知价值研究的一篇文章,来自nngourp。定义:感知价值是指对产品或服务目标的主观感受。

    2017-05-13
  • 【用户体验.春节特辑】 珍惜眼前人(总第271期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第271期2016年初,快要过春节的时候,有一天我没什么事给父亲打电话,但是半天没人接听,我就有疑虑,因为这个点按父亲的习惯应该是坐在书桌前看书或写字的。长时间没接电话,不免让我有些不安。父亲今年83岁了,作息习惯非常规律,身体也非常好。母亲比他小5岁,身体也很健康。我父母育有三个子女,我是小儿子,上面有两个姐姐,都已...

    2018-02-22
  • 众多新闻客户端,评论交互哪家强?

    上一篇文章《众多新闻客户端,评论功能哪家强?》中,我通过抽样的方法对网易新闻、腾讯新闻、今日头条评论功能的数量和质量进行了对比分析。本文将继续对这三款产品评论功能的交互设计进行对比分析。我的结论是并非某款产品明显优于其他,而是各自都有特色和优点,值得对手借鉴。

    2017-04-29
  • 如何量化用户体验并有效执行

    很多人都把用户体验看作是网站或应用成功与否的一个总体衡量标准。分析一个网站或应用在提供好的用户体验方面的效果如何,往往会变成一项很主观的事情,仅停留在观点层面,缺乏客观依据。本文描述了为何量化用户体验这么难,并提供了一个量化用户体验方法,对于网站和应用的过去开发所作努力的快速、客

    微信热点 2018-03-22
  • 用户体验,比一切事情都大

    一直想写一篇与用户体验相关的文章,因为这里面用很多误区,很多朋友认为用户体验很简单,只要高层强调和重视、把页面设计的好看就可以了。其实,用户体验是一门相当专业的跨学科综合科学。大概从2005年开始,笔者自己很有幸成为国内第一批的用户体验践行者,我们是国内第一批UCD(User Central Design)成员。当时,国际上流行的用户体验是一个五层框架模型,从底层到顶层分别是:战略、范围、结构、框架和表现。我非常清楚的记得我的第一个用户...

    2018-02-28
  • 我为什么喜欢sketch?

    数十万互联网从业者的共同关注!作者:luffy微信公众号:麒麟设计中心(ID:luffydesign)作者授权早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com文章底部可以评论留言啦,欢迎大家赞同质疑或吐槽。积极留言的同学,注意关注小编的回复,不定期送互联网畅销书以感谢你们的支持,么么哒!Adobe XD出来了,第一时间试用,感觉除了repeat grid和hotspot好像没什么亮点。笔者是一名无线U...

    2018-04-09