什么是交互设计方法论?
A/B测试算不算?严格来说不算,交互设计方法论应该具有普适性,而不是针对某个页面方案;数据分析算不算?单纯的数据分析不算,交互设计方法论不止是理性的,还有感性的;眼动测试呢?同样不算,交互设计方法论是全面的解决方案,而不是局部的。所以,交互设计方法论应该具备普适性,是理性或者感性的全面的交互设计解决方案。
交互设计三要素
- 用户——交互设计的服务对象,根据用户来制定相应的交互流程和界面。所以要求交互设计师具备同理心,换句话说,交互设计要经常进行换位思考,站在用户的角度去思考问题,设想用户会怎么做,然后根据用户的心理模型进行相应的设计工作。
- 需求——交互设计是承接产品经理的工作的,产品经理会提供一系列的需求。交互设计师需要根据需求来进行设计,所以交互设计的第二个要素是需求。从这点可以看到,交互设计师需要平衡用户和产品经理这两个角色的诉求,这一点是很考验交互设计师的能力。
- 场景——有了用户,有了需求,接下来就是要设想用户的使用场景。交互设计师做的每个设计都是基于场景来的。如果要在三要素里面挑选一个最重要的要素,应该就是场景。场景实际上包含“人、物、动作”三个维度,在一定程度上可以说包含前面两个要素。
用户体验五要素
书名:用户体验要素:以用户为中心的产品设计
作者:Jesse James Garrett
【PS:结构层和框架层的区别看来并不明显。框架层是针对于单页面的结构设计,而结构层则是将单页面连接在一起,从而形成了系统。】
5.Strategy 战略层
了解经营者想要什么?用户想要什么?经营者想要什么是商业需求,用户想要什么是用户需求。
设计师除了要清楚产品面对的用户群体和核心用户场景(进行了基本的Persona和Scenario分镜头剧本分析之后),了解用户在使用这个产品过程中的心理模型和行为习惯(通过共感等方式),还需要了解产品的商业价值。
在一个实际的产品开发中,战略层及范围层主要由产品经理负责,而结构层和框架层则由交互设计师来完成,表现层由视觉设计师完成。
4.Scope 范围层
关键词:功能、需求分析
范围层一般是由需求决定,需求则是从用户中分析提炼而来,功能由需求转化而来。
产品到底需要什么样的功能和特性?换言之,这个产品要做什么。
设计流程第二步,就是要知道产品需要什么样的功能。这些功能要足够满足第一步中的商业价值和用户价值,还需要把故事说清楚。在一个产品中,功能不需要太多,要从功能堆砌跨越到功能简化和聚焦。
设计师面临的挑战是:做新产品的时候,输入方太多,点子太多,如何选择、如何执行的压力很大;做改版的时候,可能现有版本的功能特性已经很多,没有办法聚焦,改动又会影响产品现有的形态和利益,如何精进?
3.Structure 结构层
关键词:信息架构、页面流
框架层是针对于单页面的结构设计,而结构层则是将单页面连接在一起,从而形成了系统。
结构层重点思考功能结构的具体表达方式,例如流程的进行方式、界面元素的位置逻辑、导航的布局原则等,所以这个层关注信息框架和交互流程设计。
海量的设计准则、丰富的设计经验、灵感和创意都可以在交互设计中得到体现。交互设计可以说是具体设计的第一步,一个产品执行过程中的质量和创新程度的起始点。
产品方和用户关注最多的是一个产品好不好用,这依赖于交互设计中的每个细节:流程是否流畅;提示是否充足;容错性好不好;操作是否自然;界面是否统一;效率是否高……
在设计流程的第三步中,交互设计需要准确把握商业价值、用户价值,理解产品的核心功能特性,有效有质量地描述整个产品结构、节奏、特质,这是设计执行中非常关键的一步。
2.Skeleton 框架层
关键词:页面布局
框架层主要就是做每个界面了。这是设计执行中交互设计量最大的工作。
界面中每个元素,例如文字、图片,如何细致地布置在一个页面中。文字设计要精确到字段的长短、字体的大小,图片设计要精确到组合布局的展示、形状的释义等。精细的交互稿可以完全展现产品形态,一个黑白的产品形态。
- 细致
这个时候的细致体现在设计师每个元素布局、像素精准、整体感观、交互逻辑定位、交互标注等方面。足够细致的交互稿,可以提升产品设计结果品质、帮助视觉设计更好地进行视觉创意、帮助开发测试更准确理解产品设计。
- 创新
战略层、范围层,我们已经经历了创新的主要阶段。框架层是二次创新的黄金机会。很多微创新、界面创新、特效创新,都来自这个阶段。苹果与Google的设计准则中强调的交互动效创新,很多可以发生在框架层设计阶段。
1.Surface 表现层
关键词:视觉传达
这是关注感官的阶段,视觉设计师、艺术家是核心。
一个产品经历了各种打磨,终于到最终呈现的阶段。最终用户看到的产品,80%是来自于表现层的设计工作。虽然产品设计背后的业务逻辑、功能巧思、开发创新非常多,但是用户看到的感官部分,表现层设计是最多的。
表现层是最直观地看设计师本事的阶段,优秀的视觉设计师、动效设计师、品牌设计师可以在这个层发挥得淋漓尽致。
一种万金油方法——5W2H分析法
5W2H分析法又叫七何分析法,是二战中美国陆军兵器修理部首创,被广泛应用在企业管理和技术开发当中,交互设计也不例外。
5W2H由7个英文单词首字母组成,分别是:What、Why、Who、When、Where、How to do、How much,用7连问发散思维,思考问题,并从中得到启发,最后得到答案。
具体的应用方式比较灵活,以交互设计流程为例:
(1)分析阶段
Why:为什么要做这个功能,拿到功能需求时,首先应该对功能需求产生质疑,是否有做下去的价值?
(2)设计阶段
解决了Why的问题之后,可以进行初步的交互设计工作,在设计的过程中,应该对4W不断的反问和回答,力求得到答案。
What:具体要做哪些功能点?一共有多少个功能点要做?
When:什么时候上线?这些功能是否能如期交付?是否需要分批上线或者砍掉不合理的功能?
Where:这些功能点放在哪个模块下面实施?对现在的模块造成的影响?
Who:谁来使用或者维护这些功能?他们之间是否有权限控制?
(3)评审阶段
How to do:整个方案是如何实施的?跟开发沟通
How much:开发的成本有多高?是否需要砍掉不合理的需求?如果花费太大,就回到了Why的问题上,如此重复循环。
目标导向设计法
【点评:偏实例化】
让交互方案更靠谱——目标导向设计法
设计水平的重要判断标准之一——产出足够靠谱的方案:对内,方案要能帮助产品不断向前发展,提升产品的数据,为公司带来收益;对外,方案要能满足用户的使用需要,方便用户的操作,提供良好的用户体验。
——设计出团队内部认可、用户也喜欢的方案。
目标导向设计法的最核心元素——设计目标。
设计鼻祖——包豪斯(世界上第一所完全为发展设计教育而建立的学院,1919年创立,国际主义风格。)
西格拉姆大厦属于典型的国际主义风格(第三任校长密斯于1958年设计完成)
包豪斯之所以伟大,是因为她首次将理性思维的光辉注入了设计活动中,提出要为大工业生产而设计。让学生能够设计出真正符合生产标准的作品,而避免产出只是看起来美好、却无法量产的作品。其次,包豪斯奠定了现代设计教育的基础,包豪斯把课程分为“对平面和立体结构的研究”、“对材料的研究”、色彩研究三个方面,使视觉教育第一次比较牢固地建立在科学的基础上。在这之前,设计被划分在艺术的门类下面,设计本身也被认为是靠感性来进行创作的一项活动。最后,包豪斯提出了“以解决问题为中心”的设计理念。设计的终极目标是解决问题。设计是为了解决问题,而艺术是为了表达内心。
设计目标的概念
交互设计领域,要靠“设计目标”理清项目需要解决的问题。交互设计的设计目标由两部分构成:产品目标和用户目标。产品目标一般由产品经理提出(通常包含在需求文档里),也可以由设计师提出(通过分析得出)。常见的产品目标如“提升XX功能的转化率”、“提高XX页面的使用时长”等。而用户目标可以概括为“用户通过做XXX的操作,可以满足XXX的需要”,一般需要设计师来分析总结。例如现在有一个需求是优化app的登录页面:数据显示很多用户没有完成操作就离开了页面,因此需要立项优化。从需求中得知,很多用户没有完成操作就离开了,页面的转化率低,因此这里的产品目标就是“提升登录页面的转化率”;下面来分析用户目标:用户其实是不愿意登录的,因为登录操作麻烦,用户也没有这个习惯。那么,当用户来到这个页面,他的需要是什么呢?答案是快速登录。用户希望登录越简单越好,越快越好。在确定用户目标时,应从用户的角度出发,发现他们的需要。千万不能把用户目标变成了给用户的任务。
如何确定设计目标
设计目标包含产品目标和用户目标。
如何确定设计目标?
先说产品目标。这里分两种情况:
1)如果产品需求是由产品经理提出的,那么先看产品需求文档里有没有写明产品目标。有的文档会写的很清楚,比如”提升登录的转化率”;有的没有那么清楚,这时候就需要我们充分理解产品需求,提炼出产品目标。这个过程往往需要跟产品经理充分地沟通,保证需求理解得清楚、准确;在沟通的过程中有时会发现产品自己也没把这个需求想清楚,这时候一个优秀的交互就得帮产品一起理清需求,明确做这个需求的目的。
2)如果产品需求是由设计师主动发起的,那么在发起需求的时候,我们要明确这个需求要解决什么问题。设计师发现一个需求,可以从以下三个方面着手:研究数据,进行用户调研/查看用户的反馈,进行可用性测试。
确定用户目标的方法:主要是从这个功能的场景出发,来明确用户的需要。
如何确定场景?这里提供一个模板:
用户场景:在某时间(when),某地点(where),周围出现了某些事物时(with what),特定类型的用户(who)萌发了某种欲望(desire),会想到通过某种手段(method)来满足欲望。
假设在新闻列表里,要插入登录领红包的卡片。用户的场景可以描述为:在用户浏览新闻列表(地点)的时候(时间),看到了“登录领5元红包”的卡片(出现某物),未登录的用户(特定类型用户)萌发了登录的欲望(欲望),会点击卡片的登录按钮(手段)来登录。通过描述场景,这里的用户目标就可以总结为“登录领红包”。
再举个例子:
某理财应用要做一个续约功能,主要针对购买的理财产品将要到期的用户,提醒他们可以续约。提供的续约信息包括用作续约的本金,续约方式(本息续约),预期增加收益,续约期限,续约后的到期日,续约说明。续约操作后需要审核,审核一般需要1~2小时,通过后会有短信通知。由于续约能够给公司带来不少收益,因此希望用户在操作上比较流畅,保证不会因为操作而流失用户。
这段需求描述中产品目标和用户目标是什么?
需求里提到“针对理财产品将要到期的用户,提醒他们可以续约”,所以提醒用户续约是一个目标。需求里还提到好多概念词:“预期增加收益”、“续约期限”等,这些词会增加用户的理解成本,如果用户不能很好地理解,完成续约操作的概率就会降低;而像需求中“希望用户在操作上比较流畅”也是为保证用户不会半路流失。所以第二个产品目标,是保证流程的转化率。
套用刚刚的模板,这里的场景是:在收到续约推送或者看到理财单里的理财产品可以续约时,购买的理财产品将要到期的用户萌发了想要续约赚取更多收益的欲望,通过续约操作来满足。分析一下这个场景,我们可以得到用户目标是了解续约信息,完成续约操作。
对于续约这类流程性比较强的需求,可采用“流程四阶段”,即“发现,了解,操作,跟进/记忆”。在每一个阶段都有需要注意的重点,在设计的时候要特别注意。比如在续约这个例子中,“发现”阶段,重点是“引起注意”;了解阶段的重点是“续约的规则和好处”;操作阶段的重点是符合用户的心理模型,不能让用户觉得不安全;跟进/记忆阶段,主要是注意结果的反馈。
发现部分可使用消息push和理财单中的肩标提示,相对来说容易一些。
主要的心思要花在了解和操作部分上。而这里面的重点,是心理模型。
“心理模型指相互关联的言语或表象的命题集合,是人们作出推论和预测的深层知识基础。”通俗一点讲,心理模型就是大家对于事物普遍的认知。
假设我们来到一个会议室,室内温度13度。我们想通过空调把温度升到24度。在调空调温度的时候,很多人会下意识地把温度调到26,甚至28度,因为人有一种“温度越高,空调会更努力地工作”的认知。
这种认知,就是人的心理模型。而实际上,即使你把温度调得再高,空调也为你加速一点点。
空调的制热有自己的一套运作模型,不论你是设置的24度,还是30度,空调把温度升到24度所花的时间都是一样的。
回到续约的例子,人们在花钱购买东西的时候,都希望能有一个类似订单页的确认页面,告诉我买的是什么,花了多少钱,何时生效。因此,在流程中设计一个这样的页面,就是符合用户心理模型的。
确定设计目标之后的工作
确定了设计目标之后,可以按照“竞品分析→流程图→原型图”的流程继续进行。竞品分析是一个较大的话题,另辟一篇文章跟大家分享。本文重点说流程图和原型图。
把一个流程图画出来,需要两步:第一步将需求涉及的元素列出来,并进行归类;第二步根据心理模型进行排序。
画完流程图,需要根据设计目标找出流程中每一步的设计重点。
【需求】新建视频列表:用户在手机客户端里新建一个视频列表,加入选定的视频。这其中涉及的元素有:列表名称、简介、封面、选择视频(包括上传新的视频和选择已上传过的视频)、标签。
分析一下这些元素:名称、简介、封面和标签是关于视频介绍的,归为一类;选择视频是为列表添加内容,归为一类。
然后根据心理模型,也就是人们普遍的认知,来为它们排序。一般是先为列表取个名字,设置好封面这些基本信息,再为其选择内容。所以流程设计为:填写列表信息→选择视频。
请思考一下:由于这个需求涉及的功能点比较简单,可否把这两步流程放在同一个页面呢?这就需要用考虑“设计目标”。
分析一下这个需求的设计目标:产品目标是这个功能的完成率尽可能高;用户目标是快速、准确完成这个任务。由于这个需求是为手机客户端提出的,而手机屏幕的尺寸较小,两步如果放在一个页面会变得很长。同时因为该需求需要操作的点比较多(输入名称、设置封面、选择标签、选择视频等都需要操作),如果放在同一个页面会变得比较重。因此较好的做法是把选择视频这一步挪到第二个页面,从而使页面轻盈,减少用户负担。
流程确定之后是分析每一步的设计重点。在第一步,涉及输入操作,联系用户目标,因此这里的重点是输入尽可能方便。而选择视频的那一步,迅速找到用户想找的视频很关键,所以这是重点。
带着这些重点来设计原型。在设计填写列表信息页的时候,我希望让这个页面清晰、简单——在没填写内容时,我们使用默认文字来告知用户这里应当填写的内容,并且把标题和简介只用一条线分开。为了使输入方便设计了一个细节:在用户输入标题之后,在下简介区域会自动匹配和标题相关的内容,然后后面有一个“使用”按钮,用户点击“使用”就可以添加上这些内容,减少了用户的输入。同时,标签部分也会为用户根据标题进行自动匹配。所有这些设计,都是为了达到方便用户输入的目的。
在选择视频页面,设计的重点是迅速找到视频。因此,方案采用了一行两个视频的展现方式,方便用户通过封面图迅速辨识视频;同时一行两个的排布方式,并按照视频名称的字母顺序进行排列,用户浏览效率比较高。在选择了视频之后,页面底部会有提示栏提示用户选择了几个视频,点击可以查看,方便确认。另外,需求里是没有提搜索功能的。但是考虑到如果用户有很多视频,这个列表会很长,不容易找到列表后部的视频。所以方案里增加了搜索功能,帮助用户快速找到视频。
完成设计后,可以对照设计目标,通过数据和反馈来看设计有没有达到设计目标。成功的设计可以变成经验,没有达到设计目标的方案则可以从中分析原因,避免以后再犯。
获取数据方面,可以跟数据分析师沟通需要的数据变化情况,或者自己寻求数据权限来分析结果。获取反馈有两种方式:一是用户反馈,比如用户留言、用户调研结果获取方案的反馈;二是可以通过同事和领导的反馈来检验自己的设计。