回顾互联网的发展历程,我们会说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」的网站。