优界网

首页 > 产品经理 > 写给产品经理和设计师的用户体验知识3

写给产品经理和设计师的用户体验知识3

45

0

0

2016-09-12 00:48:55

破茧~~

分享一下,又不会怀孕!

本作品为转载作品,版权为作品原作者所有,感谢上传者的分享!

前文回顾:

在《写给产品经理和设计师的用户体验知识1》中,我们讨论了「用户体验」和「设计」的定义,明确的反对「设计原教旨主义」,以及讨论了两个最底层的设计原则,分别是符合用户使用需求原则和基于用户的心理模型设计原则。

在《写给产品经理和设计师的用户体验知识2》中,我们继续讨论了一致性原则和及时有效的反馈和解释原则。

现在,让我们来继续讨论设计原则吧。

原则5:形式追随功能

在互联网行业,很多设计师最讨厌的事情就是别人叫他“美工”。如果你去BAT或者其他稍微大一点儿的互联网公司的招聘网站上翻一翻,你会发现他们很少会招“美工”这样的职位,即便有,大部分也都是类似“客服部”、“行政部”之类不做产品的部门。主流的互联网公司早已达成一致,就是互联网产品的“设计”,远远不是“美”那么简单。即便单说“美”这个维度,也要美得有意义,绝不仅仅是所谓的“有创意”、“有视觉冲击力”这个层面上。

“形式追随功能”这个原则,或许就是“美工”与“设计师”的分水岭之一。这个原则最初由建筑设计师提出,在互联网行业,我将其解释为:对于一个产品来说,形式上的、视觉上的、起装饰作用的东西,应该是为功能和用户场景服务的。

很多人总是习惯性的将“设计”与“艺术”联系在一起,但我认为,能够与“艺术”联系在一起的,大部分是狭义的,针对表现层的设计。而我所理解的大部分设计,是跟艺术完全不同的。简单说,艺术是给人“看”的,给人“感受”的;而设计是给人“用”的,帮助人类解决问题的。所以这两者最初的出发点就是不一样的。形式追随功能这个原则也一直在提醒我,时刻记住两者的区别。

既然是建筑大师提出的观点,那我们就先来看看建筑方面案例吧。首先必须承认的是,有时候在功能之外,需要有点儿“情怀”。所以很多时候一些小的“设计”如果能够让用户身心愉悦,会心一笑,即便它没什么用,也是不错的。

在纽约地铁的某个车站,有一个很长的通道,据说每天会有很多上班族行色匆匆的路过。在这条通道上,每隔一段距离,如果你抬头看,就会有一句话,就像下面这张图:

而这些句子连起来,居然是一首诗:

Overworked.

So Tired.

If Late

Get Fired.

Why Bother?

Why the Pain?

Just Go Home.

Do It Again.

这东西看起来好像没什么“功能”,但是很有趣,可以让人会心一笑。这是好的设计,或者换句话说,能够让用户身心愉悦,也是一种“功能”。

但是有的建筑,过度追求形式,不但对“功能”没什么帮助,还会引起用户反感。2012年,美国有线电视新闻(CNN)旗下的生活旅游网站评选出了全球最丑的十大建筑,中国沈阳的一栋叫做“方圆大厦”的建筑榜上有名。我看到这则新闻的时候,马上去搜索了一下方圆大厦的图片,结果... 仅个人感觉,的确,丑...

后来我还简单搜索过相关资料,试图去了解这样的设计是不是有什么功能上的好处。但是没找到有说服力的资料。如果既没有功能上的好处,又让人觉得丑的话,那这样的“形式创新”就真的是一种失败的设计了。

对于互联网产品来说,也是一样的。下图是国内某银行信用卡app的主界面:

这个手机app内部有很多不同的功能,从账户查询、还款操作,到办卡申请、开卡、分期,再到商城、优惠信息、积分兑换等等。但是该app的主界面上的大部分面积,被一朵我个人认为并不漂亮的“花”占据... 这个形状本身其实并没有特别大的意义,但是却占用了大量的空间,以至于想推活动的时候,经常需要给用户弹下面这样的浮层,不但会阻断用户操作,引起用户反感,而且一次只能推一个活动:

  其实,何必追求这样华而不实的形式呢?我们来看另外一家银行的app吧:

上图是招商银行的两个app。招行貌似将用户场景分成了两类,对应的是两个不同的app。

左侧的名叫“招商银行”,以功能为主,是与银行账户强绑定的,提供的功能主要是各种银行服务,例如账户查询、转账、理财等。这个app里面大部分信息的组织形式是严谨、简洁的列表形式,用户可以比较方便的找到所需功能,操作也会比较顺畅(除了一部分内嵌wap形式的功能比较乱,其他还是挺顺畅的)。

而右侧的app叫“掌上生活”,以运营为主,会提供招行体系下包括信用卡、借记卡在内可以享受的各种优惠活动信息。其信息组织形式要活泼、生动得多,会出现大量的图片,会像电商网站一样将数字(包括人民币和积分)放大显示,更加能够吸引用户的关注,更加适合没事儿“逛一逛”的用户场景。

这两个app在信息的表现“形式”上区别还挺大,但都是为各自的功能服务的。我认为是银行里面比较不错的设计。

再看一个生活中的例子。如果你注意一下城市中的各种路牌、指示牌,你就会发现,所有指示牌上面的文字,都是非常简明的黑体或者宋体。

上图:常见的街道上的指示牌,文字大多数是简明的黑体。

上图:香港国际机场的指示牌,或许是繁体字笔画太多,用黑体类的字体会聚成一团,所以在这里中文部分使用了相对简洁的MingLiU体(类似宋体,笔画比较细一些),英文部分则是类似于Tahoma之类的字体,跟中文用黑体类的感觉差不多。

这些都是在日常生活中很自然的设计。因为指示牌的核心功能是用于指示地点或者方位的,所以其最底层的要求,就是让行人(或者机动车驾驶员)能够很容易的(有时候是距离较远的时候)看清楚上面的文字。这是典型的形式追随功能的正面案例。不信,我换一下字体你体会一下:

上图:将指示牌上的文字字体换成更加“飘逸”的舒体,(我知道... 正常的设计师很少会用这个字体... 我就只是举个例子而已,别骂我...)其识别度会降低。是不是觉得,不如原来黑体看得清楚?如果距离再远些,就更加看不清了。(英文部分我就不改了,如果改掉会更加明显)

繁体中文由于笔画多,更惨:

以上案例已经能够很明显的看出,如果抛弃了功能,单纯的去做形式上的“创新”——甚至有时候根本不是创新,而只是“不同”——往往无法做到好的用户体验。

原则6:单一任务,渐次呈现

在伟大的首都北京,有一个被戏称为“世界第九大奇迹”的建筑,这就是传说中的西直门立交桥。这座桥结构狂复杂,并且据说在每天的不同时段通过,即便是去往相同的方向都有可能有不同的走法。很多北京的出租车司机都不敢说自己能走得明白。

西直门立交桥的主要问题我觉得是产品策划的问题,或者往大点儿讲,是产品战略(所谓的城市规划)问题。但是这些都太大了,我只是想用这座桥底下的一个路牌来引出一个小得多的问题。路牌是这样的:

虽然如果您现在去西直门找,已经找不到这个路牌了,因为已经拆了。但这真不是段子,是真实存在的。如果您把路牌这东西看作UI的话,这个UI的确真实的反应了产品的功能,只是,它包含的信息量太大了。它一次性告诉用户,要在5个不同的转弯处选对方向,还不能错过任何一个。这么大的信息量,在司机开车路过的瞬间,很难记得清楚。或者,即便真的记住了,其实图上每一个圈对应的实际道路都是不一样的(虽然图上看起来一样),有的是大圈,有的是小圈,有的是上引桥,有的是进入主路,在实际驾驶过程中很难操作准确。

这就说到了我们将要讨论的这个原则,叫做“单一任务,渐次呈现”。与之前我们讨论过的各种原则相比,这一则更像是一个小tips,是学习过之后马上就可以当工具直接用的。在一个流程中,我们最好是将整个流程拆分成一个一个的步骤,并且在每个步骤里面引导用户只做一件事情。

还是拿路牌来说,如果是一系列复杂的转弯动作,可以考虑将其拆分成几个步骤,在每一个分支处给用户单一的引导。例如,在深圳深南大道东行方向,行驶到“深南南海立交桥”时,会首先看到这样的一个路牌(图片来自:腾讯街景地图):

  这个路牌标注还算清晰吧,假设我想去“滨海大道”,我就知道,这里应该从右侧上引桥。进入右侧车道后,又能够看到第二个路牌,如下:

又有一个路牌,告诉我滨海大道靠右。于是我靠右直行,即可前往滨海大道方向。当然,这个方案也不是没有问题,相反,其实问题挺多的。比如,两个路牌距离比较近,不熟悉路的新手司机有时候反应不过来,来不及变道... 但这已经不是这个原则的讨论范畴了。其实由此我们也应该能够意识到,单一的设计原则往往只能解决或者缓解单一的问题,永远不要指望有一个公式一样的东西存在,只要套进去,就搞定。不可能的。(换句话讲,如果有一天,设计行业的大部分问题都可以通过简单的公式解决,那设计师们也就真的变成“美工”了。)

在互联网和软件行业,这个原则也有比较多的应用,比如最典型的,就是Windows的“安装向导”。如果我没记错的话,“向导”这种形式在Windows系统最初的应用应该是在Windows95上面。微软当年将安装Windows95整个过程切分成一个一个的步骤,将每一步依次呈现给用户,用户在安装过程中,每一步一般只需要做一件事情。例如下面这张截图,是用来设置用户信息的:

“向导”的另一个好处是,因为形成了类似流水线的方式,所以对于非关键步骤,可以给用户提供默认设置。这样,用户如果不想更改设置,只需要使用“上一步”和“下一步”按钮,就可以控制流程前进或者后退。向导的大量应用,让用户在Windows操作系统上安装软件变得特别容易,即便您看不懂路径设置,看不懂功能模块选项,甚至即便软件界面是阿拉伯语,您只要不停点击下一步按钮,就能成功安装了(当然,Mac OS上拖一个图标就搞定的方式更简单)。

在手机平台上,单一任务的设计更加重要,特别是对于比较长的流程来说,因为手机屏幕太小了。比如说著名的Instagram,将发布照片的流程分为3步,分别是:拍摄-调整(滤镜)-添加说明。

这样的步骤有利于用户在每个节点集中精力做好一件事情,以便于优化最终的效果。比如,拍摄环节,用户集中精力构图,决定要将哪些被摄主体收入镜头;调整环节,用户对颜色、风格进行细致化的微调,以适应自己的喜好;添加说明环节,则可以聚精会神的编写文字。每一个环节要进行的操作被严格控制,这也有利于降低用户的认知成本。

原则7:Less is More

不太有经验的产品经理和设计师比较容易犯的一个错误就是,将一大堆功能没有主次,不分先后的塞进一个容器里面。看起来功能强大,四通八达,但实际上信息组织混乱,功能之间逻辑不清晰,用户体验一般不会太好。比如这个:

上图是某银行手机客户端的界面。仔细研究一下,发现它的最底层结构貌似是“手机银行、金融资讯、直销银行、生活商城”这4项(上面第三个界面,是点击“手机银行”后出现的,这里同时违反了一致性原则),而这4个TAB中每一个都堆满了各种入口,并且这些入口里面有的还有非常复杂的三级或者更多级的入口和结构。再仔细研究,发现甚至有一些入口是重复的。

以上这个案例所引出的是一个老生常谈的原则,估计很多朋友都听说过。就是“Less is More”。它最初由建筑大师Ludwig Mies van der Rohe提出,是一种提倡简单,反对过度装饰的设计理念。这个原则历史太悠久,在很多行业中衍生出了很多不同的解释。在互联网行业,类似“简约的设计风格”、“做减法”、“把不必要的内容收起来”、“7加减2原则”等等说法,都或多或少与这个原则有关。

在传统行业中有很多Less is More的成功案例。比如,1979年,索尼发现大部分用户对于播放的需求远远大于录音,所以他们去掉了传统录音机的录音功能,甚至去掉了当时认为必不可少的外置扬声器。然后把剩下的部分做到一个小盒子内,并配以立体声耳机。这就是风靡全球的Walkman随身听。

上图:就是这货,当年可是潮人物件。带这玩意儿上街边走边听,酷毙了

1984年,IBM在鼠标和轨迹球的基础上,精简结构,发明了TrackPoint(小红帽),在移动设备上有效的替代了鼠标的功能,并解决了轨迹球占用空间过大等缺点。现在TrackPoint已经成为了Thinkpad笔记本的标志,并且类似的设计被应用在很多其他品牌的笔记本电脑上。

2007年,苹果精简了手机的按键,甚至砍掉了传统的实体键盘,推出了iPhone。后面的故事你们都知道了。

Less is More的正面案例太多了,很多朋友都已经能够很熟悉的应用,所以,其实今天不想跟大家讨论这些,而是希望能讨论点儿不一样的。我们从另一个角度切入,就是,看看Less is More是如何被理解错,用错的。

Less最初的意思是反对“过度装饰”,并不是一味的追求所谓的“简单”。我所理解的Less,是我们要努力降低用户的认知和操作成本,这才是在互联网行业Less的本质。

还是某银行的app,在你点击一个叫“xx商城”的入口后,或许是在不同的城市,商城提供的商品不同,所以它会先进入一个选择城市的界面,这个界面是这样的:

天啊... 把所有支持的城市列了个表。没有看出任何逻辑顺序!太不负责任了吧?请问,深圳在哪儿?杭州呢?南京呢?这样的设计(或者说,这玩意儿有“设计”吗?)根本不是Less好不好?是懒!在这个案例中,如果要帮助用户更加高效的寻找到他需要的城市,我们要做的不是减法,是加法。

比如说,最简单的,至少排个序吧:

将所有城市按照其首字母A-Z的顺序排列,寻找起来会容易很多。如果同步提供快速定位功能(界面右侧,类似iPhone的通讯录)则会更加高效。

如果你继续思考,可能还会发现其他问题,比如:

  • 能否读取用户的地理位置信息,然后在这个列表里面给出一个建议选项。例如,发现我目前在深圳,就把深圳作为默认选项(但是我可以修改)。
  • 上面那个方案,好像A-Z的方式解决了问题。但是如果用户不懂英文或者拼音呢?这个还是不work吧?要不要考虑按省份分类?这个app的目标用户中,完全不懂英文的人占多大比例呢?

回到Less上来。很多时候它会成为产品设计者懒惰和推卸责任的借口。我们在日常工作中很容易遇见这样的场景,就是对于一个功能,想着想着,想不明白了,产品经理就说:“哎呀算了,简单点儿做,先只考虑xxx吧。”或者开发就说:“这样太复杂了,为了这一个功能,整个架构都变复杂了。还是别做这个xxx了吧。”这其实并不是Less。事实上,如果你希望用户侧Less,产品逻辑侧和开发侧,很多时候就是要More。“做减法”不是单纯的“少”,也不是简单的“砍需求”,相反,是更加深入的思考每一种可能(对于试错派,也应该是尽量多的试错,遍历尽量多的可能性),最后用最合理的方案,让用户付出最少的认知成本,达到用户的目的(以及你的目的)。

另一方面,很多时候你的产品能否足够Less,是要取决于其他因素的。比如技术因素,比如环境因素。最近在网上流行的一个视频,就是有力的证据。

车载电话不懂方言 山东大汉怒骂语音服务:

已有0人赞过

+1赞

认真评论的都成大咖了

还可输入1000个字

我要评论 我要评论
  • 刚刚
  • 登录优界网 ×