什么是IxD交互设计?分分钟搞懂其中的关键要素!

先讲个故事,小互是个销售员,下午出去拜访客户,完事后发现已经六点多了,非常饿,小互想回家自己做饭吃,但是实在是太饿了,回家又要做好久的地铁,还不如就在附近找家小饭馆吃了呢,于是环顾四周,发现马路对面左前方200米有个麦当劳,于是就穿过马路,沿着道路走了过去,到了麦当劳要了一份套餐,风卷残云地吃完了。

问题来了,这个故事里面:

什么是目标?

小互饿了,想把自己填饱,这就是目标;

什么是任务?

回家自己做是一种任务,到附近的地方吃也是一种任务,任务比较抽象,实现同一个目标可能有很多不同的任务,它是利用产品达成这个目的的具体步骤,多个步骤合起来就达成了目标,比如去楼下饭馆-点餐-吃-结账-走人等五个任务。

什么是行为?

穿过马路,走到麦当劳,推门进去,排队,点餐,等候,就餐,这些就是行为,行为是每个任务的具体动作,比如吃的时候你用筷子还是刀叉,坐在靠走廊还是靠窗,行为体现出了用户的操作习惯和对这个事件的认知水平。 就是可以看到的用户的具体操作,专业点的叫“用例”,现在先这么叫做“行为”吧。这三个对于做用户体验和交互设计来讲至关重要,决定了后边的交互工作是否有效,是方向性的。

一个普遍的问题是,目标和任务容易混淆。不过这也正常,因为有三个概念,数量有点多。人们对事物的认知基本上就是二元的,比如“对-错”“好-坏”“美-丑”“想-做”等等,老D猜想,人类最熟悉的事物莫过于人类自身,我们的身体看起来就是个总体对称的物体,左手右手、左耳朵右耳朵,所以人们对于两个东西是最熟悉的,一旦超过了这个就稍微有点难以理解了,怎么区分呢?很简单:

  1. 目标——Why,为什么做
  2. 任务——What,要做什么
  3. 行为 ——How,怎么做

打个好玩的比方,大象关进冰箱的故事。把大象关进冰箱里,这其实是个任务;第一把门打开,第二把大象放进去,第三把门关上,这就是行为,但是为什么要这么做呢?其实是为了阻止大象去参加动物园的联欢会,这才是目标。

当然,目标是可以不断抽象的,比如回家过年是为了什么?目标是跟亲人团聚。那跟亲人团聚是为了什么?是为了得到亲情和爱,上升到这个高度了就不要再上升了,不要问老D得到亲情和爱是为了什么,老D回答不上来了,只能说,这是人性,不要绕进“究竟是鸡生蛋,还是蛋生鸡”这个死胡同了。

此外,任务是可以不断细分的,比如说大象的故事里那三个步骤也可以说是任务,不过没有什么意义了,开门、关门这对于一个人来说已经是很明确的操作了,没有必要再细化为伸出手-抓住扶手–拉开–这么细节的动作了。操作就是普通用户一看就知道怎么做的事,任务就是需要分解之后才能具体操作的事。

界定任务和行为,我们可以抛一个问题:这个事要怎么做?

如果不能立即做那就是任务,如果能够立即做那就是行为。通常情况下,目标和任务是可以互相转化的,这一层次的目标可能就是上一个层次的任务,是不是有点难以理解?

比如“订票”是过年回家这个目标的任务,但是却是12306注册登录、搜索车票、预定、支付任务的目标。

这三要素跟之前的五个层次有什么关系呢?之前学了用户体验框架的五个层次,可以用来分析、分解产品,是从商业角度和用户维度一起来综合分析的,是一个大框架,交互设计的工作主要影响到结构层、框架层,对范围层、表现层也有一定的影响,但是会比较少的影响到战略层,因为战略层基本是个长期稳定的东西,如果是个错误的战略,很快就被市场和用户抛弃了,并且战略层的制定通常由公司所有者来确定,交互设计师的确担负不了那么重的责任。

不过,有意思的是战略层的制定者通常关注商业方面–也就是公司想要什么,对于用户想要什么关注的并不是很够,所以有格局的交互设计师会从战略层关注用户想要什么—-用户的目标,这个可以作为交互设计师和用户体验从业人员的一个至高追求。

交互设计师在支撑用户达成目标的过程中能做些什么呢?就是范围层、结构层、框架层。交互设计师通过对用户目标的理解,分析出来用户的需求,然后给出能满足用户目标的功能(当然很多产品经理也在做这个事情,没关系,那就一起做),然后根据用户的任务将这些有功能的单元做合理的组织,将信息做合理的呈现,这阶段主要是用户使用路径的规划(用户的任务可以分为哪些子任务,需要哪些步骤),信息架构的搭建(页面的分类),然后再确定路径上每个节点的细节功能或是所包含的具体内容,到这里为止,交互设计师做的东西都是不为用户直接感知到的,之后再根据上一个环节的结果确定框架层,到这里就是具体的页面了。

很多时候,一些交互设计师只是把页面布局画出来,纠结于页面上的一些具体细节,比如要用check box还是radio button啊,点一下按钮菜单是从顶部还是从底部浮出来啊;或是画个流程图,琢磨于这个流程是不是可以少几个环节等等,这些工作是必要的,没错!但是这只是最初级的水平,甚至说是错误的方式。交互设计师是为用户创造好的使用体验,这么纠结出来的方案有时候用户根本不care,看一下这东西不是自己想要的扭头就走,哪怕你的按钮交互做得多优秀多妙,达不成用户的目标,满足不了用户的需求,一切工作都没有意义。

所以,从现在开始多把设计的工作提升到用户目标的层面来思考,然后在进入到任务和行为的设计,先看用户要什么,再看怎么做功能和结构才能更好地帮助用户实现目标。

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

(0)
Smiler李想Smiler李想
上一篇 2015-01-26
下一篇 2015-01-26

相关推荐

  • 网页的交互设计and界面与用户体验案例:Nike Tech Pack in store app

    第一段是动效的视频,请注意观看交互效果与配色设计。 图片都可以点击放大,更清楚哦。 原文地址:https://www.behance.net/gallery/26097251/Nike-Tech-Pack-in-store-app 多个作者: Shakir Dzheyranov / Detail …

    2016-01-10
  • UI设计、交互、产品、都应该具有这十种思维模式!!

    注:文章由 集创堂联合创始人CEO纯色老师和设计帮联合出品!这篇文章从十个维度深入挖掘交互设计的思维模式,如果你是UI设计师、初级交互设计师、产品经理、那么这篇文章很值得你学习。笔者在和纯色老师探讨交互设计思维时,老师说“不管你是UI、交互、产品,在团队中都不能是孤立单一的技能,要用联系的观点去看设计,不能分裂来看”。老师说的很对,做UI设计到最后是离不开交互知识支撑的,同样交互、产品也应该具备对设计的审美,这样每一个角色再探讨产品时才...

    2018-01-30
  • HOW TO—撰写可用性测试报告

    在报告可用性测试结果时,首要关注的应当是本次测试的发现与改进建议,并且将测试的发现与建议按照严重等级划分优先级。其次,还应当包括测试计划和测试执行过程,当然不用面面俱到,但是加入部分细节内容可以帮助读者了解此次测试所使用的方法,方便其评判该报告的可信度。在报告中,尽量保持段落简短,多使用图表、短视频等方式来描述。

    2017-05-28
  • 网页设计中常见的五种交互设计错误

    交互设计 从来都不是简单的事情。可靠的交互通常需要借助对用户行为的深入分析,然后有针对性的精心策划。可是随着新的技术和新的交互模式的不断涌现,事情就变得不是那么容易了。

    2017-06-05
  • 网络心理学与用户体验:如何使用户爱上我们的产品?

    什么是网络心理学?网络心理学(Cyberpsychology)是研究人与科技交互的背景下人们的心理与行为的新兴学科。它关注网络世界以及网络对人们行为产生的影响。近年来,网络心理学逐渐脱离其他研究人类行为的学科(如社会心理学),形成了自己专门的心理学研究领域。了解来自这个新领域的研究可以帮助设计人员更准确地预测人类在使用不同技术时会如何反应。因此,在思考如何使用户爱上我们的产品时,了解网络心理学是一个非常有用的手段。通过更好地理解用户与技...

    2018-02-23
  • Stack自动布局:Sketch中的Flexbox

    Skacks会彻底改变你对Sketch布局方式的理解。Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。小提示:

    – Stacks能产生一致性。

    – 一致性使设计清晰。

    – Stacks能使设计清晰。我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具,让设计师定义和构建UI与UX设计中所有零零碎碎的元素,并且最终能自动生成本地代码,1:1还原设计。这就使设计师不依赖团队的其他部分,比如开发人员的优先关注点就与设计团队不同。

    2017-05-06
  • Axure官方教程中文版第5课:动态面板介绍-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(5).MP4 新建文件 1、添加一张图片和按钮 2、转换为动态面板并添加状态 3、为每个状态添加一张图片 4、设置点击“Next”按钮时进行下个状态的切换

    2015-01-26
  • Axure 8.0手机页面拖动弹回效果

    Axure RP8.0教程 手机页面的拖动和弹回效果 。用户向上拖动页面,页面向上滑动。用户向下拖动页面,页面向下滑动。当用户拖动页面到最底部时,页面弹回显示第一屏。当用户拖动页面到最顶部时页面弹回显示最后一屏。步骤一.在部件库中拖入一个图片部件,双击打开浏览手机外壳图片,加入到工作区中,跳转这张手机外壳图的大小和位置。步骤二在手机内部框中制作一个列表页面,页面,使用到的部件有图片部件、标签部件、水平线部件、将这些部件相互组合,设计一下...

    2018-03-10
  • 交互设计:补上学校不教的这一环

    作者:郦橙 锦妖链接:https://zhuanlan.zhihu.com/p/25279058不知道其他专业有多么具体和细致,我自己的专业(CMU Mii-PS)是典型地抓大放小,各种设计实操细节统统不讲,全靠自己摸索。我也曾经狂看blog,看书,…

    2017-08-02
  • Welcome to the Gutenberg Editor

    The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around…

    2023-03-03