别让我思考web
——Krug可用性第必定律数据库
点击多少次都不要紧,只要每次点击都是无需思考,明确无误的选择。——Krug可用性第二定律浏览器
去掉每一个页面上通常的文字,网络
而后把剩下的文字再去掉一半工具
——Krug可用性第三定律布局
2.1 第一个事实, 咱们不是阅读而是扫描测试
2.2 咱们不作最佳选择 而是满意便可字体
用户会选择第一个合理的选项,这就是满意策略,一旦咱们发现一个连接,看起来彷佛能跳转到咱们想去的地方,那就是咱们将会点击它的大好机会。寻找最佳策略很难,须要的时间也很长,满意策略效率更高。大数据
2.3 咱们不是追根究底,而是勉强应付动画
3 广告牌设计101法则,为扫描设计,不为阅读设计
须要注意如下5个重要方面,来保证他们尽量的看到并理解了你的网站
3.1 在每一个页面上创建清楚的视觉层次
3.2 尽可能利用习惯用法
3.3 把页面划分红明肯定义的区域
3.4 明显标识能够点击的地方
3.5 最大限度下降干扰,下降视觉噪声
4 动物、植物、无机物 (为何用户喜欢无需思考的选择)
三次无需思考、明确无误的点击至关于一次须要思考的点击
5 省略没必要要的文字
有力的文字都很简练,句子里不该该有多余的文字,段落中不该该有多余的句子。一样,画上不该该有多余的线条,机器上不该该有多余的零件。
多数页面上的大部分文字都不过是在占地方,由于没有人打算阅读他们。可是由于他们确实在那儿,因此这些多余的文字都在暗示你可能真的须要阅读它们来理解究竟是怎么回事,这样经常使得页面看起来难度更高了。
去掉没有人会用到的文字的几个好处:
1 能够下降页面的噪声;
2 让有用的内容更加突出;
3 让页面更简短,让用户在每一个页面上一眼就能看见更多的内容,而没必要滚动屏幕。
实际上我说的文字是两种特别的文字:欢迎词和指示说明
你能够——并且应该——尽可能减小欢迎词,能减多少就减多少。
若是指示说明很是冗长,用户发现他们所需信息的机会也就会很小。
你的目标应该是经过让每项内容不言而喻来彻底消除指示说明,或者尽量作到这一点,当指示文字变得彻底没有必要时。则应把它们所有去掉。
必须正确处理的几个方面
街头指示牌和面包屑 设计导航
若是在网站上找不到方向,人们不会使用你的网站。
对应于网站的搜索和导航
若是咱们想要再次访问网站上的某个内容,不是依靠他在那里的物理感受,而是记住他在概念层次上的位置,而后从新顺着以往的链接过去,这就是书签——存储的我的捷径——如此重要的缘由,也就是为何后退按钮的点击率占据网络上全部的点击率的30%-40%的缘由。
持久导航上只能放置4-5个实用工具——用户用得最多的那几个工具
持久导航中最重要的元素之一就是把咱们送回主页的按钮或连接,让一个返回主页(Home)的按钮始终可见,它或者是一个按钮或者是一个图片
提供搜索,喜欢搜索的用户比喜欢浏览的用户更多,它应该是一个搜索框,大多数用户登陆一个新站点后,第一件事就是扫描页面,看有没有搜索框,记住一个简单的公式,一个输入框,一个按钮,还有‘Search’(搜索)两个字,不要弄得太复杂——坚持这个公式,特别是要避免——花哨的用词,只是说明,选项,若是你使用搜索做为输入框的名称,那么应该使用“Go”做为按钮名称。
页面名称就是Web上的路牌,和路牌同样,若是一切顺利,我可能根本不会注意页面名称,但我以为本身可能方向不对时,就须要绝不费劲的看到页面名称来肯定方向,因此1 每个页面都须要有一个名称,2而且页面名称要出如今合适的位置,3名称要引人注目,4名称要和点击的连接一致;在web上突出个人当前位置;
面包屑菜单(层级菜单)也告诉你你的当前位置——它们之因此被称做‘面包屑’是由于她们让人想起Hansel扔在森林里的面包屑踪影,由于这样他和Cretel能找到回家的路。用于真正有庞大数据库且具备复杂层次结构的网站。例如雅虎的网站目录。
据我所知,About.com的面包屑作的是最完美的,它体现了几项最佳实践
1把它们放在最顶端(页面的最最顶端,不跟导航争宠)
2使用'>'对层级进行分割。各类尝试彷佛都已经确认,大于号是最好的分隔符
3使用小字体
4使用文字:你在这里
5将最后一个元素加粗
6没有把他们用做页面的名称
标签是大型网站导航的上佳选择,由于
1 它们不言而喻
2 它们很难被错过( 我在进行‘用户点击测试’时很是吃惊地发现,大家想不到人们对网页顶部的按钮条视而不见的状况有多严重,但标签在视觉上是如此的不同凡响,他们很难被忽略。
3 它们很灵活(标签样式能够变得很漂亮)
4它们暗示了一个物理的空间
标签作得很好的是Amazon,它作到了一下3点:
1 正确绘制,选中的标签应显示在未选中的以前,不是标签的不要用标签的形状
2 颜色编码,使色盲也能看得懂(使用同一色系的深浅色)
3 当你进入网站时,一个标签已经选中
后备箱测试
如今你已经对全部导航部分有所了解,能够进行如下的网络导航测试了,下面就是这个测试。想一想你被蒙上双眼,锁在车子的后备箱里,车开动一下子之后,把你放在某个网站内容的某个网页上。若是这个页面设计良好,当你除去眼罩时,应该能绝不犹豫地回答出一下问题:
1 这是什么网站?(站点ID)
2 我在那个网页上?(网页名称)
3 这个网站的主要栏目有哪些?(栏目清单)
4 在这个层次上我有哪些选择?(本页导航)
5 我在导航系统的什么位置?(‘你在这里’的指示器)
6 我怎么搜索?(搜索框)
主页设计
首先要认可,主页不禁你控制
主页要完成的任务:
1 站点的标识和使命 (logo 和能在此网站上找到什么)
2 站点层次——由持久导航来处理
3 搜索 大多数网站须要在主页上设置一个突出显示的搜索框
4 导读。就像杂志封面同样,主页要用一些‘里面有精彩内容’的暗示来吸引我。
5 内容更新。若是网站的成功取决于我是否常常回来访问,那么主页应该有一些常常更新的内容。——不该是一潭死水
6 友情连接 须要在主页上预留空间用来放置广告、交叉推广、合做品牌的友情连接等。
7 快捷方式 最常访问的内容片断值得在主页上放置连接,省得用户四处寻找。
8 注册,登陆。
9 让我看到本身正在寻找的东西
10 …...还有我没有寻找的。精彩的 也许我会感兴趣的
11 告诉我从哪里开始。一个新的网站里,无从下手的感受糟透了。
12 创建可信度和信任感。对于一些访问者来讲,主页将是你的网站留给他们好印象的惟一机会。
主页应——传达总体印象,越快越好,越清楚越好,在我第一次进入一个新网站时,主页应回答我头脑里的四个问题:
这是什么网站;我能在这里作什么;网站上有些什么;为何我应该在这里,而不是在别的地方;
主页上的每同样东西都有助于咱们理解这个网站是作什么的,可是在这个页面有两个重要的位置,咱们但愿能从这两个地方找到清楚的陈述。
1 口号,最有价值的位置之一是靠近站点ID的地方,当咱们看到一个和站点ID相关联的短语时,就知道这是口号,而后咱们会把它当作整个网站的描述。
2 欢迎广告,欢迎广告是网站的简要描述,在主页的首要位置显示,不须要滚动屏幕就能看到。
没有什么比得上一个好的口号,口号是一条精炼的短句,刻画了整个企业,总结他是什么。
好的口号要清楚、言之有物、长度适中,显而易见
测试:你不能只依靠本身的判断力,必须把这也拿给公司以外的人看,让他们告诉你的设计是否达到了目标,由于只有“网站宗旨”的缺失是公司内部人员不会注意到的。
当进入一个新的网站,快速扫描主页以后,我应该能明白无误地知道:
若是我想搜索,能够从这里开始。
若是我想扫描,能够从这里开始。
若是我想扫描该网站最精彩的内容,能够从这里开始
在那些针对包含一系列步骤的过程所创建的网站上,过程的起点应该很显眼,而在那些须要新用户注册、老用户登陆的网站,应该突出显示注册和登陆的位置。
遗憾的是,推销商品的须要有时会淹没上面提到的这些地方。若是主页上尽是大喊大叫的‘从这里开始!’、‘不,先点击我!’,就很难找到这些起点。
要避免这种状况,最好的方法是让搜索框看起来像搜索框,让栏目列表看起来像栏目列表。此外,要清楚的给他们加上文字描述,例如‘搜索’,‘分类浏览’、‘登陆’、‘从这里开始’(对于多步骤过程)。
主页导航和持久导航能够不一样,但也不要相去甚远,最重要的是让栏目的名称保持不变,一样的文字和一样的分组,尽量多地保持相同的视觉提示也颇有用:一样的字体、颜色和大小写。
一天10美分的可用性测试
让测试简单——这样你能进行充分的测试
关于测试的几个事实:
1、若是想创建一个优秀的网站,必定要测试
测试更像邀请外地的朋友来参观,不可避免的,当你和他们一块儿四处游玩时,你会看到平时不会注意到的一些状况,由于你对它们太熟悉了,同时你也意识到有不少你认为想固然的事情,对别人来讲却并不是如此。
2、测试一个用户比不作测试好一倍
3、在项目中,早点测试一位用户好过最后测试50位用户
一旦一个网站投入使用,要改变他就不那么容易了,有些用户拒绝作出任何变化,由于即便很小的变动也会给他们带来深远的影响,因此任何在开始时就有助于防止你犯错误的方法都很划算。
4、若是进行测试的用户接近可能使用网站的用户,那么很好,但更重要的是尽早地和常常地进行测试。
5、测试的关键不是要证实什么或者反驳什么,而是了解你的判断力。
6、测试是一个迭代的过程。
7、没有什么比现场用户的反应更重要
跳楼大减价的可用性测试
在最开始的时候,可用性测试花费昂贵,你须要创建一个可用性实验室,有一间位于单向玻璃后面的观察室,至少要有两部摄像机来录制用户的反映和正在使用的目标对象,此外,还须要招募大量的测试用户,以获得有统计意义的结果,这是科学研究,须要花费2到5万美圆,所以不会常常进行。
跳楼大减价的可用性测试应该测试多少用户?
不少状况下,我认为,每轮测试的理想用户数量应该是三个,最可能是四个,前三个用户极可能会遇到几乎全部最明显的问题,并且更重要的是多作几轮测试,而不是写下每轮测试里面发现的全部问题。只测试三名用户有助于保证你很快进行下一轮测试。
宽松招募,曲线上升
1、事实上,咱们都是初学者。
2、设计出的网站只有你的目标群体能使用,这一般并非一个好主意。
3、提供合理的激励(报酬)
4、测试前避免对网站(或网站背后的组织结构)进行预先讨论。
如今能够直接使用录屏软件。
以后的关键是让他说话,并了解他是怎样使用网络的,大体划分一下他属于哪一种用户,及时知道他在浏览网站时在想什么。只要有可能,尽可能让用户在选择任务的时候说点什么。
再给他3-4个任务,这些任务加起来不要超过45分钟。
马上回顾测试结果
1 给问题分类——回顾你们看到的问题,决定哪些问题须要修正
2 解决问题——找出修正这些问题的方法
你从可用性测试中了解到的东西老是会颇有意义,并且每一个观察了这个过程的人都能看出这些问题,
常见问题:
用户不清楚概念
他们找不到本身要找的字眼
内容太多了
一些问题分类指南:
1 忽略'Kayak'(皮划艇)问题。在任何测试中,用户暂时出现错误,而后又在不须要任何帮助的状况下回到原来的轨道,这就像皮划艇时翻船同样,没有伤人不算犯规。只要1 出现问题的人立刻发现本身偏离了原来的主题 2 他们尽可能回到原来的方向而不须要帮助 3 这种状况看起来并无扰乱他们的活动。你就能够忽略这些,若是用户关于在哪里找到他们须要的内容的第二次猜想老是对的,就已经能够了。
2 抵制添加的冲动。当在测试时清楚地看到人们没有理解某些内容时,大部分人的第一反应是增长一些内容,例如一些注释或一些指导说明。而正确的解决方案每每是去除某个(或一些)让人混淆的内容,而不是增长另外一些干扰。
3 抓住够得着的果子
*恍然大悟型
*便宜型
有时候,真正的挑战不是修正你发现的问题,而是修正这些问题的同时不破坏已经正常运行的部分。
每月一个上午:咱们就要求这么多
在理想状况下,我认为每一个Web开发团队应该在每月画一个上午的时间进行可用性测试。
一个上午,你能够测试3-4位用户,而后在午饭时间进行总结,就是这样。
可用性是基本礼貌
为何你的网站应该让人尊敬
好感存储器
下降好感的几种方式:
*隐藏我想要的信息 ; 最多见的状况是隐藏客户服务的电话号码、运费和价格。
*由于没有按照大家的方式行事而惩罚我 ;不少网站执拗地坚持不在信用卡号码中加入空格,但这些空格会有助于正确的写出号码,不要由于不想多写一点代码就让我在铁环中跳来跳去。
*敷衍我,欺骗我。咱们都会注意到虚伪的真诚,也讨厌假意的关心,想一想每次你听到‘您的电话对咱们来讲很重要’的时候是什么感受吧!
*给我设置障碍;不得不等待一个长长的flash介绍,或者浏览多达数个页面的自我感受良好的市场图片,这些都很清楚的代表,你并无理解或者关心——我很忙。
*你的网站看上去不专业;若是你的网站看起来很凌乱,组织的很差,不专业 ,在布局上没有下功夫,那么用户也会失去好感。
提升好感的几种方式:
*知道人们在你网站上想作什么,并让它们明白简易。
*告诉我我想知道的
*尽可能减小步骤
*花点心思
*知道我可能有哪些疑问,而且给予解答;保持更新;保持坦率。
*为我提供协助,例如打印友好页面;人们但愿经过一次点击就能打印出长达数页的故事。
*容易从错误中恢复;请提供一种优雅的清除的方法让我从错误中恢复。
*若有不肯定,记得道歉。若是你作不到,至少让他们明白你知道你在给她们形成不便。
可访问性 级联样式表和你
可访问性是可用性的一部分
除非你要作一个整体决定,确认那些残障人士都不是你的目标用户,不然,若是你的网站可访问性不足,就不能说它是有用的。
几乎我访问的每一个网站都没有经过个人三秒钟可访问性测试—增大字体 用浏览器的text size命令
支持可访问性才是正确的作法
如今就能正确实施的五件事来提升可访问性
*改正让人感到混淆的可用性问题 让网站对咱们其余的人更好用,会让残障人士用的更好
屏幕阅读器用户用他们的耳朵扫描
*看一本web可访问性的书
*开始使用级联样式表CSS
CSS的好处:对格式的控制没有限制;灵活性;浏览器之间的一致性;序列化你的内容(你能够用CSS将内容按顺序放置在源文件里(这就是屏幕阅读器用户将听到的)还能把它们放在页面上你但愿的位置处);容许你从新定义文字大小。
*去摘可以得着的果子
要求太多数据的危险
询问没必要要的信息可能产生三个严重的后果:
*您经常没法获得真实的数据
*您获得的完整表单更少。您要求的数据越少,获得的提交就越多,人们在网络上经常很匆忙,若是表单比他们想象的要长,不少人就会嫌麻烦而不填写了。
*使您的网站形象降低。若是您只要求必须的数据,那么您已经和他们创建了一种联系,并且在之后的交换中能够获得更多的信息。
记住如下三个原则:
*只让我提供完成这次事务所需的信息。
*不要要求填写过多可选信息,只是看到那么多要填写的字段已经让人不快了,要求的可选信息较少会获得更多的回复。
*告诉我提供本身的信息将获得的回报,明确告诉我注册之后将获得什么,给我一份电子简报的样本,等等
为您的网站增长“注意力吸引点”
在上网的绝大部分时间里,人们并不但愿被粘着,他们只想完成某些工做,试图干涉他们如今的任务或者粘着他们只会让他们以为烦人,受到愚弄,这是一种最糟糕的强制推销。试图增长注意力吸引点也一般会给他们增长障碍。例如,大图片,载入时间长,而且让页面可放置目标内容的空间变小;吸引注意力的音乐和动画是不少人都受不了的。
固然也有例外,在一些网站上,这些花哨形式是有意义的,那些提供视听享受的网站:娱乐网站(关于音乐电影等)、纯品牌网站(例如一种早餐谷类产品)、Web开发人员的素材网站等。可是若是您的网站不在此列,那么设置更多的吸引点只会拔苗助长。
世事无绝对
要知道老板可能并无错,在坚持一个糟糕设计想法的背后,几乎老是有一个良好的(或者至少是不那么糟糕的)意图,试着去理解这种好的意图经常能够找到另外一种方法来达到目的。