用逻辑支持设计决定丨Google 设计师 郑嘉带你认识UX

她为何要涉入交互设计?
进入顶级互联网公司需要具备哪些能力?
Google到底喜欢什么样的设计师?
用户体验对一个产品来说究竟有多重要?
当交互设计师究竟有多酷?
本文干货甚多,请认真观看。

郑嘉
Google 交互设计师
www.jiazhengdesign.com

本科就读于帕森斯艺术学院The New school for design 产品设计,毕业后接触到用户体验设计,很享受自己设计的东西给用户带来的不仅仅是视觉上的美感,更是方便了他们的生活的感觉。

2015年,申请到帕森斯艺术学院的Design and technology专业,拿到75%的奖学金。期间接触到了各式各样的新技术,包括做VR,AR游戏,physical computing等等,但比这些硬技术更重要的是学到如何在短时间内测试一个新想法。

毕业前一个月,被Google Ads and commerce部门录用,担任interaction designer。

进入交互设计的大门

我在大三选择了一门网页设计作为辅修课。在这门辅修课中,老师很浅显地教了我们CSS、DW,html这些软件,让我对网页设计有了初步的认识。

在本科毕业后我才意识到美国的产品设计行业处于一个过饱和的状态,很少有开放给国际学生全职工作的机会,我难以在美国进入产品设计这个行业,于是我在与友人的交谈中知道了一家规模不大的做UI、UX设计的公司。

我想要凭着自己之前对网页设计的一点点认识来进入这家公司工作做实习工作试试看,我在进入公司后跟着两个设计师工作,他们手把手地教会了我这个行业的基础知识,我从这个公司开始入门,真正开始了解交互设计。

用逻辑支持设计决定

在工作第一天,他们让我看apple human interface guidelines 和 google material design guidelines。

这两个theme works相当于人机互动的总纲领,只不过他们所属公司的分别是apple公司和谷歌公司,但是他们之间的内容是相通的,范围都十分的大。

在这里我举三个例子,说说这两个theme words里面讲的是什么。

▲google material design guidelines
▲apple human interface guidelines

例子一:给用户反馈 

假设你有一个记日记的app,在你写完日记后你要保存,如果是apple human interface guidelines,就会给用户一个反馈,问用户是否保存这个文件,如果没有apple human interface guidelines给的这个反馈,那么用户就会不停的按保存。

 例子二:明确选项含义 

如果你预约了一个理发师,但是你突然有事不能去了,你想要取消这个预约,这时候界面显示问题:确定取消?左边按钮是确定,右边按钮是取消,这个时候你就会很糊涂,不知道如何操作,因为你无法知道按钮后的结果,所以最好就是让用户能通过界面上的文字预测到点击后的结果,如果右边按钮设置的文字是取消预约,那么用户就能更好地预测到按钮后的结果。

 例子三:无障碍设计 

第三个例子涉及到无障碍设计,比如说如果我们设计密码时,密码不符合网页要求,比如字母大小写不符合、没有数字等等问题,我们不要只用颜色去表明密码不符合的状态,这对于色盲或者色弱的人来说是不方便的。 

我上面所说的例子只是两个概览里的小部分,设计的产生都是由十分严密的逻辑推导和调研来做基础的做设计不是怎么好看怎么来,而是怎么合理怎么来,正是设计这种逻辑感深深地吸引了我。

调研与用户测试

 参与前期用户调研 

在这家公司,除了参与app界面设计,我还参与了前期的用户调研,给大型的医疗器械公司调查,这个app主要是给医生看验血报告,我们想要通过调研知道给app增加什么功能让医生日常工作更加方便。

我跟我的项目经理跑遍了纽约大大小小30多家兽医院,采访了医生和护士,我觉得这个很有趣,我们首先是问他们的工作流程,了解他们在什么状况下使用这个app和他们的目的是什么,医生使用app是他们自己要获取信息,还是要把信息发给护士,还是要直接发信息给宠物主人,问完这些问题后,还会问他一些开放性的问题。比如说我会问如果他看不明白这个验血报告,想要咨询别的宠物医生,他会怎么做,我们调研会全程录像,等回公司再整理一手资料。我第一次出去调研十分兴奋认为这是唯一检测我设计是否合理的方式,很多时候结果出乎意料。

 用户测试 

屏幕上的有一个电话按钮,医生可以通过这个按钮直接打给宠物主人。一开始,我认为这个按钮放哪都可以,越大越好,医生就可以方便点,但很多宠物医生表示很害怕点到这个按钮,因为一旦拨出这个电话,可能会看见一个根本看不懂的宠物化验报告,然后宠物医生就会因此心急如焚,不知道宠物主的宠物情况到底是怎样

还有就是医生对自己的隐私十分注重,80%的医生表示不会用自己的私人电话打给宠物主,因为一旦宠物主知道他们的电话,医生就有可能会通过这个私人电话收到宠物主的电话,这对于宠物医生来说是十分困扰的。

我在还没有出去调研时,是没有想到会有这些反馈的,所以我认为前期调研与用户测试是很重要的

 调研的小结
离用户越近,效果越好 

面对面好过视频,视频好过电话,电话好过调查问卷,用问卷调查时无法看见用户表情,无法看见用户环境,无法看见用户同时需要处理的一万件事情。

如果用户说这个软件不好,你要去知道不好的原因,而不是在意这个不好的评价。在用户调研时,如果你有可以点击的模型会比静态图片好,基本上是越接近最后产品,越高真,效果越好。

改善用户体验

 Google CIO-CSAT Dashboard 

企业使用“客户满意度调查”来了解他们的产品和代理商是否满足他们的客户。 但这些调查的响应率极低,约为15%,使企业很难知道问题出在哪里。 

我们的解决方案简单而强大:将CSAT调查替换为情绪分析,为公司提供100%的客户互动信息,使他们能够使用数据改善用户体验

CSAT:是用于获得用户满意度的调查方式。

简化系统图 

 寻求解决方案 

 集中在3号解决方案 

 设计CSAT仪表板原型 

 用户测试 

 功能标签 

 概念验证原型 

如何开发一个App

帮助电影行业的 App
Scene Seeker

Scene Seeker 是我自己调研, 设计, 开发的一款帮助导演和电影系学生用关键词搜索的方式搜索视频的app。这个app是我自己用ios代码写的。

它的主要功能是帮助导演或电影系的学生。比如说导演要拍摄打斗场景,想看看别人怎样拍摄打斗场景,他可以通过在app中查fight,就可以搜寻到一系列的打斗场景。

这是我第一次用xcode来编写ios代码,我认识到在代码中改变颜色或者去掉一个背景都是十分困难的,我也体会到程序员是十分辛苦的,这个app没有真实数据库,所有数据只是我导入进去的,并不是真正可以操纵的app,只是我自己想要练练代码,并把自己的想法表现出来。

App Demo

 用户调研 

 思想过程 

 决定一个解决方案 

 流程图 

 草图 

 线框图 

 可交互的原型 

 基于用户反馈进行迭代(一)

 基于用户反馈进行迭代(二)

iOS Swift编程

 成品诞生 

毕业设计
侦探游戏

当时测试的人都来玩我的游戏,让我觉得我得到了很多反馈。

游戏
hit the giraffe

这是一个现实虚拟模拟相结合的Physical computing游戏(Physical Computing 可以理解为通过软硬件对现实世界进行感知和交互的系统), 写代码,焊电路,是一个像是打土拔鼠的游戏,游戏中,长颈鹿把他的头露出来了,就在现实生活中的木桩打一下,屏幕上的长颈鹿就会消下去。

经验/总结

跨出第一步非常重要

我参加了康奈尔与学校合作的活动,康奈尔和学校联系了很多大公司,包括谷歌,Parsons、ADOBE这些大公司,我很幸运进入路谷歌而且进入了有两个谷歌工程师领导的小组。他们邀请了一位在谷歌入职12年的交互设计师给我们演讲,我在演讲结束后把我的作品给这位设计师看,他给我提了很多看似简单,但是我想都没想过的问题。

很多年轻设计师怕把自己的作品展现给别人看,因为怕被别人说自己的作品不好。尤其在交互设计这一行,越早能把自己的作品展现给别人看,就越早能得到反馈,就能越早得到改进,跨出这第一步是十分重要的,要不断提醒自己,在别人给意见时,不要立刻进入防御状态,要听出别人意见后面到底指出了什么问题。

就像是我前面所说的我在毕业前一个月被谷歌录取了,但从第一次HR找我到谷歌最后录取我足足花了4个月的时间。谷歌特别注重设计逻辑性,每一个设计决策,包括每一个按钮应该放哪、字体多大多小、左对齐还是右对齐,他都会问你为什么,没有任何一个决定是随意的逻辑设定要用调研和客户测试作为支持、基础,这样才能让你的设计成为一个合理的设计。

关于设计教育

在用户体验这个领域,因为更新迭代太快,很多在校老师能够教的技术都已经落后于当前在行业中使用的技术。但有一些设计的理念、基础是不会因为技术的变化而产生变化。

比如学好如何做一个完整的,有结论,可以引导产品走向的用户调研就非常重要。希望设计教育能够更注重这些基础,教会学生“自己学习的能力“。

好书推荐

1.Google Sprint Book
2.How to steal like an artist
3.沃顿商学院最受欢迎的谈判课

点击关键词,阅览文章:

AR AR交互 C4D CAA MICA Processing 三维 专访 书籍设计 交互 交互设计 克兰布鲁克艺术学院 全球毕业展 分享会 创意编程 动态 动态平面 动态视觉 动画 品牌 埃因霍芬 多摩美 字体 字体设计 展览 平面 平面设计 广告 插画 攻略 教程 数据可视化 新视野 日本 日本设计观察 武藏美 毕业展 毕设 海报 美国 荷兰 视觉传达 设计 课程 马里兰