网站设计方法总结 | 《don't make me think》读书笔记

回顾互联网的发展历程,我们会说web1.0是以门户网站为代表的时代,web2.0是以搜索引擎为代表的时代,web3.0是移动互联网的时代。在移动互联网的时代,我们又在提「人工智能」、「VR/AR」、「大数据」等风口。仿佛web网站已有那么一些遥远。但是技术的迅猛发展总是要有一个承载体,移动端更符合用户的碎片化使用场景,但是web则更为正式,在一些专注场景下的使用、品牌宣传等更为适用。

那么,我们该如何设计一个网站呢?

互联网界的大佬们有提到「极简设计」、「克制」、「自然」、「符合人性」等等,这些设计原则我认为可以用一句话概括——don't make me think。如果一款产品做到了「不让用户思考」,那么至少在用户层面,它是一款好的产品。

《don't make me think》这本书中,讲述了网站设计的原则。本文根据 书中的内容,结合自己的思考,进行内容的总结和解读。

一、用户(我们)是如何浏览的?

只有知道了用户如何使用和浏览网站,我们才能把网站设计得更为易用。关于用户浏览,有以下三个事实——

第一个事实:我们不是阅读,而是扫描

我们为什么扫描——

(1)我们总是处于忙碌之中;

(2)我们知道自己不必阅读所有内容;

(3)我们那善于扫描

第二个事实:我们不作最佳选择,而是满意即可

在设计页面时,我们通常假设用户只是扫过整个页面,考虑到所有可能的选项,然后选择一个最好的。然而,事实上,大多数时间里我们不会选择最佳选项,而是选择第一个合理的选项,这就是满意策略。一旦我们发现一个链接,看起来似乎能跳转到我们想去的地方,那就是一个我们想去的地方,那就是一个我们将会点击它的大好机会。

那么,为什么web用户不寻找最佳选择?

(1)我们总是处于忙碌之中

(2)如果猜错了,也不会产生什么严重的后果

(3)对选择进行权衡并不会改善我们的机会

第三个事实:我们不是追根究底,而是勉强应付

为什么会这样?

(1)这对我们来说并不重要

(2)如果发现某个事物能用,我们会一直用它

二、设计网站需要遵循的原则

基于用户的浏览习惯和使用习惯,我们在设计网站时需要遵循一些原则,以便于让我们的产品达到「don't make me think」的目标。

原则一:建立清楚的视觉层次

一个视觉层次清楚的页面有三个特点:

(1)越重要的部分越突出

(2)逻辑上相关的部分在视觉上也相关

(3)逻辑上包含的部分在视觉上进行嵌套

原则二:习惯用法是你的好帮手

所谓的习惯用法,指的是符合我们习惯认知的一些设计。比如报纸的排版,是我们的习惯认知,那么一些资讯网站/门户网站设计的时候,就可以借鉴报纸的排版,这样比较符合用户的认知习惯。

关于web上的习惯用法,有两点非常重要:

(1)它们非常有用;

(2)设计师通常不愿意利用它们

习惯用法可以避免出错。如果设计师想要改变习惯用法,那么需要权衡一下,新的设计所能带来的收益,是否足够让用户放弃过往的习惯用法?

原则三:把页面划分成明确定义的区域

原则四:明显标识可以点击的地方

原则五:降低视觉噪声

让页面不易理解的一个最大原因是视觉噪声,实际上有两类视觉噪声

(1)眼花缭乱

(2)背景噪声

原则六:krug可用性第三定律——去掉每个页面上一半的文字,然后把剩下的文字再去掉一半

去掉没有人会看的文字有几个好处:

(1)可以降低页面的噪声;

(2)让有用的内容更加突出

(3)让页面更简短,让用户在每个页面上一眼就能看见更多的内容,而不必滚动屏幕

三、关于导航设计

1、当用户在浏览时,他是怎么想的?

——网络导航101法则

(1)你通常是为了寻找某个目标

(2)你会决定先询问还是先浏览

(3)如果选择浏览,你将通过标识的引导在层次结构中穿行

(4)最后,如果找不到想要的东西,你会离开

在web 上的体验缺少了许多我们在生活中用来同空间相处的感觉,想想在浏览网站时有下面这些情况,你的感受会如何?

(1)感觉不到大小

(2)感觉不到方向

(3)感觉不到位置

鉴于这些糟糕的感受,网站导航的重要性进一步凸显——

(1)它给了我们一些固定的感觉

(2)它告诉我们当前的位置

(3)它告诉我们如何使用网站

(4)它给了我们对网站建造者的信心

2、如何设计一个好的网站导航?

(1)运用web导航习惯用法

(2)网站的常用结构——

1)网站-网站的栏目-下一级栏目-下下一级栏目,以此类推-本页-本页的各个区域-页面元素

栏目:有时候也称为主导航条,是到达站点主要栏目的链接,即站点层次结构的最顶层

实用工具:是到达网站中不属于内容层次的重要元素的链接

只要跺三次脚,说“我要回家”:持久导航最重要的元素之一是把我们送回主页的按钮或链接

2)提供搜索:由于搜索的潜在威力和喜欢搜索的用户比喜欢浏览的用户更多,因此除非站点规模非常小而且组织得很好,否则每个页面都应该有一个搜索框或一个到搜索页面的链接。

(3)利用面包屑导航:

about.me的面包屑实现最完美的,它体现了几项最佳实践:

1)把它们放在最顶端

2)使用“>“对层级进行分隔

3)使用小字体

4)使用了文字”你在这里“

5)将最后一个元素加粗

6)没有把它们用做页面的名称

(4)运用标签

喜欢标签的四个理由:

1)它们不言而喻

2)它们很难错过

3)它们很灵活

4)它们暗示了一个物理的空间

3、后备箱测试

想象你被蒙上双眼,锁在车子的后备箱中,车开动一会儿后,把你放在某个网站内容的某个网页上,如果这个页面设计良好,当你出去眼罩时,应该能毫不犹豫地回答出一下问题:

——这是什么网站?(站点ID)

——我在那个网页上?(网页名称)

——这个网站的主要栏目有哪些?(栏目清单)

——在这个层次上我有哪些选择?(本页导航)

——我在导航系统的什么位置?(“你在这里”的指示器)

——我怎么搜索

通过后备箱测试,我们能够review自己的网站,是否做到了「don't make me think」


四、关于可用性测试

1、什么是可用性测试?

让一群具有代表性的用户对产品进行典型操作,同时观察员和开发人员在一旁观察,聆听,做记录。

该产品可能是一个网站,软件,或者其他任何产品,它可能尚未成型。测试可以是早期的纸上原型测试,也可以是后期成品的测试。

2、关于可用性测试最大的秘密就是:测试对象是谁并不重要。对大部分网站来说,你只需要懂得上网基本知识的用户就可以了

3、关于测试的几个事实:

(1)如果想建立一个优秀的网站,一定要测试

(2)测试一个用户比不做测试好一倍

(3)在项目中,早点测试一位用户好过最后测试50位用户

(4)人们对招募用户代表的重要性估计过高

(5)测试的关键不是要证明什么或者反驳什么,而是了解你的判断力

(6)测试是一个迭代的过程

(7)没有什么比现场用户的反应更重要

4、应该测试多少用户:

每轮测试的理想用户数量应该是三个,最多是四个

前三个用户很可能会遇到几乎所有最明显的问题,而且更重要的是多做几轮测试,而不是写下每轮测试里面发现的所有问题。

5、测试什么,什么时候测试:

测试内容分为两种:理解测试和关键任务测试。

理解测试:测试用户是否理解网站所传达的信息

关键任务测试:观察用户在使用的过程中,如何完成常见操作,以及在操作的过程中遇到了什么事

测试时间:早期原型的测试,或者后期成品测试

测试结束后,务必立即回顾测试结果:

(1)给问题分类;

(2)解决问题(即测试到的问题给出对应的解决方案);

6、可用性测试中的常见问题

(1)用户不清楚概念

(2)他们找不到自己要找的字眼

(3)内容太多了

7、可用性是基本礼貌

降低好感的几种方式:

(1)隐藏我想要的信息

(2)因为没有按照你们的方式行事而惩罚我

(3)向我询问不必要的信息

(4)敷衍我,欺骗我

(5)给我设置障碍

(6)你的网站看上去不专业

提高好感的几种方式:

(1)知道人们在你网站上想做什么,并让它们明白简易;

(2)告诉我我想知道的

(3)尽量减少步骤

(4)花点心思

(5)知道我可能有哪些疑问,并且给予解答

(6)为我提供协助,例如打印友好页面

(7)容易从错误中恢复

(8)如果不确定,记得道歉



网站是一个承载体,它帮我们传达出想要给用户传达的信息;网站是一个解决方案,它帮用户解决用户所遇到的问题。因此,让用户理解你所想要传达的,让用户能够不费任何成本就能够使用网站,是对网站最基本也最重要的要求。希望我们能够打造出一个「don't make user think」的网站。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容