DON'T MAKE ME THINK 点石成金读书笔记

Recommand
杭州/UX设计师/6年前/449浏览
DON'T MAKE ME THINK 点石成金读书笔记Recommand
幸哉mm

用此文记录一下看书的总结,一些自己的分析理解

       这次分享的书是Steve Krug的don't make me think,这本书是属于基础又经典的关于可用性设计研究的书籍,大概从迈入交互设计学习的大门的第二天你就会被推荐阅读。这本书于2000年第一次出版,2014年重新出版,2017年出版第三版,随着互联网的发展,本书在第三版中也加入了移动可用性设计的内容。在研一的时候我有阅读过这本书,当时觉得这本书都是泛泛而谈讲了很多基础知识内容,并没有眼前一亮的感觉。这次阅读的时候,看到很多文章中提及的知识,会有恍然大悟的感觉,之前踩过的坑,或是困惑的地方,这本书做了很好的解答。所以,值得偶尔来复习一下。


这次,我会从“what?why?how?”

可用性是什么?

为什么研究可用性设计?

怎么做可用性设计?

三个部分来进行分享阐述。


一、可用性是什么?


书中,作者通过有用、可学习、可记忆、有效、高效、合乎期望、令人愉快七个方面对可用性进行了定义。

简单来说,就是“能让一个有着平均能力和经验的人(甚至稍低于平均水平)能明白如何使用它。这期间不必付出过多的努力,或者遇到不必要的麻烦。”


针对可用性,krug还提出了可用性三大定律:


可用性第一定律:别让我思考——don't make me think!

别让我思考,其实是让用户面对web的时候可以不用动脑子

这就要求设计者应该尽量做到,当我看一个页面时,它应该是不言而喻、一目了然、自我解释的。

我从两个方面来讲述不言而喻、一目了然、自我解释的设计。

首先从页面布局上分析,我们看下面三个常用的订住宿、机票的网站设计。

飞猪、携程、booking都是我们日常订机票、住宿常用的网站,从首页可以感受到,携程和飞猪布局相似,但携程web的区块划分更清晰,页面元素更干净,而booking与飞猪、携程相比,简洁了很多,一个巨大的输入框非常突出,甚至没有利用首屏的广告位。就像进入超市的时候,没有人在耳边大喊看看这里,这里大减价一般神清气爽,可以让用户很明确的去寻找自己的任务目标。


接着从交互设计细节上来分析,我们还是继续看携程的网站。

这是携程订票的城市输入框,在输入框中输入杭州,会出现下拉列表,展示了两个可选项,杭州&杭州HGH,对于普通用户来说HGH这种缩写太过陌生,如果用户点击杭州后,输入框中展示的是杭州HGH,这瞬间就会让用户产生很多问号,这就是缺乏设计统一性。

继续,如果在买机票的时候在城市输入框中输入金华,下拉列表会展示附近机场的推荐,当首选项还是金华。如果用户是在目的地中输入,很有可能就是没有了解金华没有机场这个事实,这种情况下一般就会比较果断的选择金华,然后进入查询结果页的时候就会通过行程发现金华没有机场这个事实。而飞猪就直接在下拉列表告知用户金华没有机场,并且推荐了附近机场。我猜携程这么设计的目的是为了推荐购买高铁票,但是没有在合适的时机告诉用户关心的信息,容易带来困惑和麻烦。



可用性第二定律:点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。

作者指出:三次无须思考,明确无误的点击相当于一次需要思考的点击。

点击多少次都没关系其实是夸张说法,第二定律说的是,不要把选项做的太复杂让用户去思考怎么选择,应该简单明了的引导用户快速抉择。就像是我们在一个陌生城市驾车的时候,如果在每个路口,拐弯的地方都树立明确的指示牌,那对用户来说每一步都是轻松做出的选择,一路顺畅,即使绕了远路,在行驶过程中也并不会有不好的体验。其实我们现在的导航就是这样,尽量细化,甚至是告知接下来一步该怎么走。在设计的时候,可以考虑拆分步骤。



可用性第三定律:去掉页面上一半的文字,然后把剩下的文字再去掉一半。

其实就是,简洁明了,减少页面文字。去掉一半文字,再去掉一半是有历史背景的,在2000年的时候网站还是以文字堆积为主的设计,巨大的信息量让用户使用困难。发展至今,极简化风行的今天Web设计基本都可以做到在文字上力求精简,但设计的时候这条法则依旧在提醒我们,用最简短的语言表达。


二、为什么研究可用性设计?


我们的设计服务于我们的用户,那我们先来看看用户是怎么使用web的。

作者认为,我们“精心准备的文字”在用户看来就像“以每小时100公里的速度驶过的广告牌”。

作者通过观察用户,给出了关于用户网络使用情况的三个事实,也是设计师不得不面对的事实。


1.我们不是阅读,而是扫描

大多数情况下,我们进入一个网站都是带着任务而来,(当然,不包括我们刷微博这种漫无目的的浏览),我们一般会把注意力放在这些文字和短语上:1,与任务有关2,个人兴趣3,脑海中根深蒂固的一些次“免费”“大减价”等词语。

如果一个想要买票的用户进入携程网站,可能他只关注到了页面的局部。


2.我们不做最佳选择,而是满意即可

我们总处于忙碌中,使用网站的经验也告诉我们,如果做出了错误选择,后果通常是点击几次返回按钮而已,因此我们在使用网站的时候,一般会采取满意策略而非最佳策略。

例如,我们总是会在布局混乱,按钮繁多的下载软件页面下载错软件,其实就是满意策略的体现,感觉像是就会点击看看。



3.我们不是追根究底,而是勉强应付

对大多数人,如果发现某个东西能用,我们会一直使用它,即使用的不是很愉快,也不太会去找一种更好的方法。这就提示我们,在新功能上线的时候应该通过引导等方式直接的告诉用户,哝,这个方法更方便,快试试!用户很难去主动发现新功能。


这是用户使用web的三个事实,那就坦然接受事实吧。如果访问者的表现让你觉得你似乎在设计广告牌,那就设计出了不起的广告牌吧。


三、怎么做可用性设计?

作者给出了关于可用性设计的几个法则。

  1. 广告牌设计101法则。

这里的101不是火箭少女的101,101法则不是说有101条法则,而是比喻别人知道100条,但你知道101条。知道了“101法则”,你就比别人更好的应付一些问题。

广告牌设计法则包括:

1)尽量利用习惯用法:

     作为设计师,其实我们会比较喜欢创新,因为很少会有设计师把“习惯用法用的好”获得赞赏,设计师似乎天生就该创新。当然这条法则不是说否定创新,作者鼓励创新,当对创新提出了要求。创新设计应该满足两点:1.同样不言而喻没有学习成本2.带来很大价值,值得用户付出一点努力来学习。

2)建立有效的视觉层次

3)把页面划分成明确定义的区域

在这里,作者提到了一个广告盲点:用户发展出的一种能力,可以完全忽略那些他们认为包含广告的区域。这里可以讲一个自己踩过的坑。之前做过一个页面改版,我们为了突出我要卖车的功能,特意将这个按钮从多个并列按钮中单独进行了设计,但产品上线后,这个按钮的点击量直线下降。大概原因就是,形式太像广告推举位,而被用户直接忽略了。

 

4)明显标识可以点击的地方

5)最小化干扰

6)为内容创建清楚的格式


接着,我们来看网络导航101法则。

我们在使用网站时候的行为和我们逛商场的行为是很类似的,遵循同样的过程:通常是为了寻找某个目标(为任务而来),你会决定先询问还是先浏览(导购==搜索),找不到东西,你会离开(确信没有或者绝望了,不想再找了)。

但是,web体验也存在着不同。主要体现在三点,感觉不到大小、方向、位置。在商场中,我们可以通过视野之内、视野之外、东南底部、上下左右、隔壁对门等来感知空间定位,但在web中,页面是依靠层级联系在一起,唯有通过层级,我们才能获得关于位置的一丝轨迹。

在网站页面中,最能体现层级的就是导航。我们先来看一下这个亚马逊网站,这个页面主要包括持久导航和主体页面两部分。可以看到是由各个元素组成。


面包屑是一个次级导航系统,可以告知用户从主页到当前位置的轨迹,提供返回操作。

面包屑主要使用在以下两类网站中:

1、层级较深的网站。面包屑导航适合拥有庞大数据库或层级较深的网站,如果只有一级分类的话,通过主导航就可以起到快速定位的作用。比如“豆瓣网”类型扁平构架的网站就没有使用面包屑导航。

2、独立不交叉的网站结构。由于面包屑网站导航路径是线性结构的,因此网站内容必须划分的非常清晰,且不存在交叉;否则,面包屑导航的路径就不是唯一的,同一分类可能出现在不同的路径中,让用户感到困。


作者对面包屑导航设计,提出了设计中的几项最佳实践:

1.把他们放在最顶层,就像书的页码一样,高于内容

2.使用“>”对层次进行间隔,在视觉上暗示沿着层级向前移动

3.加粗最后一个元素,当前页面得到应有的突出


这是书上的一个例子,本着截一张清晰的配图的目标,我找到了这个案例所对应的best buy这个网站目前的页面,然后我发现它改版了!!已经没有再继续使用第三条设计原则。如下:

因为这个意外,我开启了研究面包屑设计之路。看到这个页面的时候,我刚开始的理解是,我们在使用了多年网站后,用户对面包屑已经有了认知,在没有加粗突出的情况下,我们已经可以习惯的认为最后一个层级就是当前页面,无需再突出,反而这样更加简洁。


然后,我就尝试着看了一个我们目前的产品,感觉好像面包屑的设计和作者的建议存在一些差距,可能是因为我们的产品已经很久没有进行系统性的版本更新,也可能是出于视觉等因素的考虑。我找了一个较为典型的页面,根据作者给出的建议,对这个面包屑导航进行了再设计。

图左为线上页面,右为我修改的页面。

但总觉得有点不对,这样最后一个层级与页面标题是重复的,显得累赘。

那应该怎么处理面包屑最后一级与页面名称的关系呢,于是我找了几个网站进行研究。

首先是这个best buy:

我通过点击products-movies&music-CDs到达了当前页面,发现,当前页面是一个CDs的展示页面,页面标题是CDs,但面包屑最后一级是music(CDs&Vinyl),其实是CDs的上一个层级。

我又找了国内的网站,果壳网。

这是文章页面,可以发现,他的面包屑最后一级是文章所在的类别。

所以,面包屑最后一级都是展示当前页面的上一个层级吗?再看下一个网站,英国的卫报。


可以看到,这个网站使用的面包屑,最后一个层级与页面标题是一致的。(当然,这个面包屑设计和导航结合在了一个,形式有些不一样。)仔细看这个页面,这个页面是一个新闻列表页,下面还承载了很多子页面。


因此,得出了关于面包屑导航最后一级是否展示的结论。

  1. 如果面包屑的最后一级是一个简单页面(不包含子层级),那么在面包屑里完全可以省略最后一级的标识文字。

  2. 如果面包屑的最后一级(当前层级)还包含较复杂的子结构,则应当以当前页的标题收尾。



在浏览best buy这个网站的时候,我还发现了一点。


他的导航中有一列叫做精选的选项,会有一些产品的推荐,我点击macbook pro后就进入了macbook pro的详情页,相当于一个快捷入口,但是在这个页面面包屑导航中,还是展示了macbook pro的具体层级路径。因此,面包屑中展示的层级,应该是整个网站或产品总体组织成层级结构,而并非单纯的点击路径。

再来看我刚才的那个例子,通过以上的研究,我又对自己再设计的页面面包屑进行了修改,大致如下:

这大概就是我对面包屑导航的研究及认识,或许还有些没有发现的点,值得继续探究。


作者提出了一些设计法则之后,又对于设计中遇到的问题,提出了些场景化的解决方案。

我们在实际项目中,经常会遇到这样的情况,不同岗位的人对一个问题有自己的看法,因为我们都是用户,对于产品的设计和体验都有发言权,所以可能就会花30分钟对一个问题进行争论,结果30分钟过去了依旧毫无进展,作者称这为信仰大战:由大量无法验证的个人信仰组成——大体上是为了在某些重要问题的最好做法上取得一致,而且很少能让人改变他们原来的看法。


我们总会有一种把这些喜欢或不喜欢投射到整个web用户身上的倾向,认为绝大多数用户喜欢我们所喜欢的,认为大多数用户跟我们一样。在出现冲突的时候,讨论常常会转化为寻找某种方式来确定绝大部分用户喜欢或不喜欢什么——找出所谓的普通用户。但作者花了很多时间来观察人们对网络的使用得出结论:所有web用户都是独一无二,不一样的。当然这不是否定了我们在做产品的时候创建用户角色这种方法,而是说,要注重用户的复杂性,设计的时候不要随意猜测认为我们的用户喜欢什么不喜欢什么。对于大部分设计问题来说,没有简单的“正确”答案。

对于信仰大战,作者给出的解药是,不要去讨论用户喜不喜欢这个功能或操作,而把问题放到具体场景中去考虑。比如不要问“大部分人喜欢下拉框吗?”,把它转化为“在这个页面,这样的上下文,这个下拉框以及这些下拉项目和措辞会让可能使用这个网站的大部分人产生一种良好体验吗?”回答这个问题最好的方法就是可用性测试。


讲述完了web的可用性设计,我们来看看第三版中作者加入的关于移动可用性设计的内容。

其实移动设备和web的可用性设计基本原则都是适用的,只不过移动设备有它的特殊性。


1.没有光标没有悬停没有线索

2.扁平化设计,需要通过样式、位置去引导用户操作

3.太过富余or严重不足,移动设备的不稳定性,需要考虑加载等情况,考虑图片、视频的大小

4.快乐是加分项,注重情感化设计

5.移动应用需要可学习,应用也需要可记忆,移动设备具有更加丰富的交互方式,包括手势等


最后,作者提出了好感储存器的概念。



每个用户对一个产品都有一个好感储存器,储存器的容量是有限的,如果用户消耗殆尽,可能就会离开网站,或者再也不来,或者不重视你们公司,甚至在社交平台抨击你们。

好感储存器有4个特点:

  1. 因个人特质而不同;每个人对一个产品的好感度是不一样的

  2. 依情况而定;如果用户从一个很烂的网站进入这边,在对比的作用下,他对这个网站好感度就会较高

  3. 可以重新填满;可能用户对这个产品的好感度快消耗完了,但当他一旦感受到某个友好的功能时候,可能好感度就瞬间暴涨。

  4. 简单的错误就能够清空,例如用户对你们的产品很喜欢,在购买的时候,一个不太容易操作的表单填写就会清空它的好感容量,然后离开

对于提升好感度,作者也给出了几个该做和不该做的建议,大致也都符合可用性设计原则,如下表所示。





大概就是这样。



最后,祝愿可用性在我们身边能成为现实。

2
Report
|
9
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Log in