专业科班的答案!一个完整的交互设计流程是怎样的? - 优设网 - UISDC

专业科班的答案!一个完整的交互设计流程是怎样的?

2016/10/05 15005评论区

complete-interaction-design-flow-1

编者按:初学交互设计的新人,因为没有做过任何的设计项目,所以不知道整个交互设计师的工作流程会有哪些内容,今天这篇文章请了专业科班出身的设计师来科普他们在实际项目中的工作流程,强烈建议阅读。

Spell(高级产品设计@Salesforce):先说下我的背景吧。我是国内软件工程本科+美国UW HCDE master,现在在硅谷做用户体验设计并且教用户体验课程。在这里我想给出我负责的几个项目里所用到的流程,这些也是我教给学生的流程。

我自己教课的经验以及我和其他教授讨论的结果就是,About Face在北美各大最顶尖的交互设计/HCI院校都是学生的必读物不假,但是教授在启发学生真正去做项目的时候,往往会告知他们:

1. 这些步骤并不是每步都是必须的,要根据项目去分析你所使用的方法

2. 这个过程中每一步都是和用户相关的,切莫主观臆断。

所以其实业界对于方法论的认识,和学术界是有偏差的,业界的步骤可以被总结为:

1. 认识产品所要解决的问题

像我以及众大神们经常强调的一样,交互设计的初衷就是解决用户的问题。不论设计什么产品,能够被用户认可的途径只有这个产品解决了他们生活中的一个问题。

交互设计的第一步,不论是对成熟产品还是初创产品都一样,就是定义这个设计到底要解决用户的什么问题。像之前很多人提到的一样,这一步的做法有:用户访谈,实地考察,发放问卷等等。

这一步可以说是整个流程中最核心的一步。

比如当年在亚马逊的时候,我们想研究一下在意大利市场的亚马逊存在哪些问题,于是我们的用研人员就去了意大利。在实地考察的过程中发现了很多有意思的事情,比如意大利家用电脑其实普遍比较落后,快递系统也和美帝有很多不同等等,那么翻译成用户的实际问题,就变成了用户看到的信息过载的网页往往需要更长时间加载,而他们在意的关于快递的很多信息却不能直接从网站上得到等等。当然这只是研究发现的很小一部分,举这个例子的意思是说,只有真正的在用户所处的环境里,看到他们到底在做什么,如果使用产品,有哪些问题,才能为自己的设计打下基础。

2. 收集能解决这一问题的用户相关的信息

了解了自己要解决什么问题之后,还要确定自己到底要为谁解决这个问题。近些年面试有个很大心得,就是即使在硅谷这个用户体验已经被炒的热的不能再热的地方,很多人仍然不知道如何了解自己的用户。当听着面试者给我大谈特谈persona的时候,我就很想告诉他们,你那个访谈了三五个用户的东西,根本也不是persona。下面这个是Weebly的persona,原文在此 Persona Cards by Ryan Hunter。至于做的怎么样我大家可以自己体会一下。(我会说我的好朋友兼美国同事和他们的CEO有个人纠葛我很难给出公正评价咩)

uisdc-20161005-128

了解用户的途径其实特别多,很多人为了表现自己特别熟悉UX的各种方法,而在选择着华而不实的调研的途径。其实了解用户是谁的最好途径,就是通过协作。做市场,销售,用户支持等各个岗位的人,都会对这个问题有自己的见解。在这个基础上,再通过访谈以及观察确认到底谁才是你真正的用户,往往比你直接start from scratch(从零开始)要有效的多。

有一张很经典的图,送给大家。图片来自About Face 4,是Cooper加工过的版本。这个具体问题要讲其他估计得能讲上好几个小时,欢迎大家来切磋。

uisdc-20161005-121

3. 提供这一问题的解决方案

其实这一阶段,可能是我认知中和传统设计理论和方法中最贴近的一个阶段。线框图,不同方式的建模,头脑风暴,流程图,到原型图,所有的设计方法在这个阶段都可以用。

不过对于复杂的系统,我想特别强调一下线框图和流程图的巨大帮助。我有幸在老东家带着大家做了个用户数量庞大的产品,复杂系统中的分支情况和边缘条件,往往不是设计师在设计过程中最直觉去考虑的内容,而线框图和流程图,可以很大程度的帮助这一过程。同时,也是跟PM已经程序员撕逼大战的时候的利器,一个定义好了的线框图,可以最大程度的避免需求一改再改。(反正一直改需求的PM可能也不是好PM哼╭(╯^╰)╮)

uisdc-20161005-122

4. 验证所提出的解决方案

交互设计的难点和亮点我觉得就是验证和迭代的过程。说到底有才的人毕竟很多,有创意的方案层出不穷,能经历用户和市场考研的方案才是好方案。

测试的过程那就太多了。我先罗列几个基本我做过的每个公司都会用的:(*如果我的翻译有误欢迎指出,我可能只熟悉他们的英文说法)

1、用户测试(usability testing)

我见过的几个用户测试实验室,基本设置都差不多,就是用户在一间房间里面做测试,房间里面要不就是有摄像头,要么就是有只能单向看到的玻璃,然后其他旁观测试的同事都会在另一间会议室,要么看实时直播,要么就通过玻璃直接观察。这样的目的是为了让用户在尽可能自然的情况下进行测试。要知道,当年我最怕的就是用户告诉我:为了做你们的测试,我昨晚很认真的研究了一下amazon!真是泪崩。

uisdc-20161005-123

2、AB 测试

这个就不是一个交互设计师自己能够完成的了,需要工程师哥哥们的配合。我个人还是AB testing的忠实粉丝的。只是曾经待过的某互联网巨头(说老东家坏话有点心虚此处略去名字了)所有的设计都要经过AB testing,而每次赢得胜利的都是比较丑的那个,当时玻璃心也是收到了一万点伤害的。毕竟还是有设计师对于美学的追求的。

扯回来。AB testing在很多时候其实都很有用,有个叫GoodUI的组织经常会讲一些他们做AB testing的发现,很有帮助,但是每个报告都要钱。下面就是个例子,是说你在自己的网站上面自夸的效果是不如引用别人在社交媒体上的评价的。听起来谁都知道,但是人家有了数据是不是撕逼的时候就更容易了,比如PM说咱们要写一大段这样那样的话的时候就可以拿出这些数字甩他们一脸了(感觉自己以后很可能全职做产品了这样说PM真的好么)

uisdc-20161005-127

3、五秒测试 (five second test)

不知道这个测试现在在国内有没有人用,我个人非常喜欢。就是你给一个用户看你的设计五秒,只有五秒,然后让用户回答一个问题。我目前觉得这种测试适合非常小的点,比如一个icon用户到底能不能认出了,别自己做的是嫩牛五方别人以为是麦辣鸡这样。一个很好的做五秒测试的网站是 The original Five Second Test • UsabilityHub ,大家可以去试试。

uisdc-20161005-124

4、远程测试(remote testing)

远程测试太热了,最近我们想买一个服务做远程测试,结果被价格吓得一脸豪血。感觉没法给大家推荐具体用哪个了,我认为非常复杂的产品不适合远程测试。远程测试还是2C的产品更好进行测试。

uisdc-20161005-125

5、热图测试(heat map testing)

这个还需要解释么?就是下面这只怪物啦

uisdc-20161005-126

除此之外还有些不具有普世性的测试方法,我就不一一赘述了,比如眼动仪测试什么的。想最后个在学校的学生以及创业公司的你推荐一个测试方法:游击队测试 (guerrilla testing)。其实这个测试特别简单,就是你拿着你的原型去大街上随便找人来用,告诉你他们的反馈。当然实践起来也没用这么简单,你要有很明确的目的,很清楚你想要得到哪方面的反馈,不然一定会被用户带着跑偏了的。

图为我的学生们在洛杉矶做guerrilla testing,全文可以戳这里 https://medium.com/iq-design/how-to-become-a-ux-designer-from-my-experience-of-teaching-ux

5. 改善解决方案

说到最后,交互设计的精髓不就是一直的迭代么,哪里没做好改哪里。对于开发周期很长的传统行业,互联网行业赋予设计师最大的自由度,就是随时没做好,咱就改呗~具体步骤就是酌情重复前面四步啦~

写的有点长了,有些地方还没有写的特别具体,以后可以慢慢来更新~

作者简介:Spell,高级产品设计@Salesforce。曾助力微软,亚马逊,HTC,Citrix及若干创业公司的产品设计。当下乐趣是将UX的知识传递给更多的人,并创立了UXOffer-专注于帮助中国学生获得最好的HCI/交互设计教育机会。

个人网站:http://hangyu.me/

欢迎关注作者的微信公众号,提供HCI留学培训精英服务:(友情宣传非软文)

uxofferqr1

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/complete-interaction-design-flow

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

界面设计 设计圈干货 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里