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

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

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

相关推荐

  • 针对敏捷开发中用户体验的5点建议

    根据最近惠普针对600多个专业的软件开发人员做的一个调查,由于能够加强协作,增加用户的满意度以及缩减成本,所以敏捷开发是目前大多数被调查的组织采用的工作方式。然而当把用户体验集成到敏捷开发的周期中时,很多公司会问我们采取什么样的方式才能在满足每一个敏捷时间框架要求的同时确保成功。

    2017-05-24
  • 腾讯X项目的交互设计小结

    最近在做腾讯内部系统X项目的交互,具体的项目内容现在还无法透露,趁热打铁,先来一段交互小结吧。 一、可视化 当系统的数据过多,数据结构繁杂时,可以将数据可视化展示。能让使用者更好的理解数据,有效提高使用…

    2016-09-19
  • 设计不懂开发,严重脱节的设计是怎么影响开发的

    编者按 :Anders Lassen 是 Fuse 的创始人兼首席行政官。Fuse 是一款面向设计师和开发者的本地应用工具套装。 移动应用现在已经变得十分普及,以至于技术圈的大部分人都认为开发应用是一个简单直接的过程。然而,当…

    交互设计 2015-08-04
  • 想成为云计算交互设计师,该具备哪些能力?

    最近有不少设计师会跟我聊到,做云计算的交互设计 与其他设计师有什么区别吗?我其实也不知道怎么回答,能够记起的最后一次 TC 类的项目已经是两三年前在学校的时候了,工作以后一直在做云计算的产品,没有太深入体验做其他的产品,我真的还不太能说出有什么区别。

    2017-08-28
  • 交互设计师的60日计划第十七天

    #交互设计师的每日#20150815 雨天和大学最好的朋友的离别,最后一顿饭吃了王品台塑,果然一分价钱一分货。以用户体验为招牌的海底捞告诉我们要排队2小时等位…但是贵的王品台塑不仅立刻有位,服务也要比海底捞更胜一…

    2015-08-20
  • 一个项目解读交互设计的3个核心价值

    作者: 小米渣和大冬瓜   说到交互设计的价值,很多人可能一脸懵逼,交互不就是一个画线框图的嘛,然后再用各种乱七八糟的线连在一起。其实这一直以来是行业内对交互设计的一种“误解”,线框稿只是交互设计师最终产…

    交互专题 2017-08-07
  • 减少返工!如何发现交互设计中的思维盲区?

    作为入行不久的交互设计师,我发现自己在交互设计的实践中无法顾及到方方面面,是存在思维盲区的。其中有欠缺经验的原因,也有自身知识局限的问题。进入开发阶段后,每次需要修改交互时,心里都会有些惭愧,感觉为…

    交互设计 2015-11-03
  • 写给产品经理和设计师的用户体验知识4(大结局)

    从2015年起,我陆续写了《写给产品经理和设计师的用户体验知识》系列文章,当时的写作提纲如下:第一部分:先纠结两个概念「用户体验」和「设计」第二部分:设计原则概览原则1:符合用户使用需求原则2:基于用户的心理模型设计原则3:一致性原则4:及时有效的反馈和解释原则5:形式追随功能原

    微信热点 2018-02-12
  • 新媒体人员年薪十万怎么做到的,真的难以想象

    新媒体人员年薪十万怎么做到的前些日子,和我互联网专业的师兄聊了一下,他说他们公司干活轻松,工资还高,而且公司福利还好,什么六险一金,什么妹子很多啦......卧槽,居然这么爽(我可能就听见了那句妹子很多,哈哈哈)搞得和我一起的朋友立马拍板,问我师兄你们公司还招人不,(厚颜无耻啊)我就静静的看着他,厚颜无耻的他还在继续介绍着他,说我是211硕士,之前也在世界五百强企业工作来着(看着着厚颜无耻之人,我真想立马一脚踹飞他)真的嚣张到了极点是吧...

    2018-03-13
  • 交互、研发、视觉部门的协作工作技巧分享

    本文转载自交互学堂公众号,作者阿西UED 交互、研发、视觉部门的协作工作技巧分享 微信号:IxDSchool 本文是图片形式,打开有些慢,请耐心加载完再阅读。这里有原文地址

    2016-01-15