这是一本讲互联网产品可用性的书!
本书分为13个章节,为了便于记忆,我将其总结为3大块:
一.指导原则
二.设计与方法
三.争取他人重视可用性
一。指导原则
三大可用性定律:
1.别让我思考
2.确保每次点击无需思考,选择明确无误
3.去掉页面上一半的文字
1.别让我思考
标准:不言而喻,一目了然>自我解释
不言而喻:当人看见一个网页的时候,就能知道这是_,那是_,我要找的东西在这里。
注意点:
1.使用用户语言:避免使用专业的名称
2.符合用户心理模型:有明显的视觉线索(是什么就是什么),合理的操作流程
原因:符合用户的的行为习惯—三个用户事实
1.我们不是阅读而是扫描:只看与任务相关的,个人兴趣,根深蒂固的词—免费,大减价,美女等
2.我们不做最佳选择,而是满意即可:我们很忙碌,猜错了也不会有严重后果,猜测更有意思
3.我们不是追根问底,而是勉强应付:理解原因不重要,发现某个能用的东西会一直用它(除非偶然发现另一个)
设计:未扫描而设计,不为阅读而设计
1.尽量使用习惯用法:遵循用户习惯和设计标准(一致性:简洁>一致性),除非你的创新同样不言而喻,或者有很大的价值
2.建立有效的视觉层次:越重要的部分越突出,逻辑上相关的部分视觉上也相关,逻辑上相关的部分视觉上嵌套
3.把页面划分成明确定义的区域:接近原则
4.明显标识可以点击的地方:视觉线索(颜色,下划线,指示器等)
5.降低视觉噪:眼花缭乱(信息没有区分),组织不当(信息的排序),太过密集(信息过于密集)—可以先假定所有信息都是噪音并去除没用的信息。
6.为文本设置格式,便于扫描:使用标题,保持段落简短,使用符号列表(注意段落间距),突出关键词(加粗,颜色)
2.确保每次点击无需思考,选择明确无误
普遍观点:到达网站的任何页面不应该超过(3次,4次或者5次)。
现实:三次无需思考、明确无误的点击相当于一次需要思考的点击。
注意:选择意思应该明确(非此即彼),选项的状态应该明显(可点击不可点击,已选未选)
必要的帮助和支持(困难选择):简短(最少的信息),及时(在需要的时候出现在合适的地方),不会错过(合适的格式,确保能引起注意)
3. 去掉页面一半文字
好处:减低噪音,突出重要信息,页面更加简短(减少了滚动)
行为:欢迎词必须消灭(一些废话,没有实质的帮助,描述我们有多么的好,而不是什么东西让我们更好),指示文字必须消灭(尽量简短,只留下有用的信息)
二。设计与方法
设计与方法,总共分为四部分:
1.导航与面包屑
2.主页
3.移动设计
4.可用性测试与影响因素
1.导航与面包屑
网络导航和你逛商场是一样的,主要的行为有两种:浏览和询问(搜索—互联网)。
网络导航特点:
1.没有方向
2.感觉不到大小
3.感觉不到位置
结果就导致了,书签和后退按钮的频繁使用。当然,没有物理的空间感,容易让人迷失,同时也容易忘记时间的流逝。
网络导航要做的两件事:
1.告诉我我在哪(这里有什么)
2.告诉我去往那里的路怎么走(怎么使用)
网站导航结构:
使用标准的网站导航结构,可以减轻用户的认识负担。比如:
网站导航:
1.持久导航(全局导航):包括站点ID,主导航,实用工具,搜索
2.标识(表明我在哪里):页面名称,视觉线索,面包屑
1.持久导航
让导航在每一页以相同的位置出现,表明你还在这个网站。(除表单外)
站点ID:一般出现在页面的左上角,点击可以回到主页
主导航(栏目):有时栏目下会有次级栏目,标签的形式是一种不错的选择(不言而喻,很难错过,很灵活)
实用工具(不属于内容层次的重要元素链接):注册,登录,帮助,站点地图,购物车,我的账户,帮助,论坛等
搜索:避免使用花哨的词(使用‘搜索’即可),指示说明(只在必要的时候加入—输入订单号),选项(谨慎使用,缩小搜索范围—商家or商品)
2.标识
页面名称:每个页面需要一个名称,名称出现在合适的位置,名称要引人注目,名称要尽量与点击的链接一样。
视觉线索:在点击过后,点击处应该和别的地方有区分—指示器,颜色,粗细,反向
面包屑:把它们放在最顶层(内容上,主导航下),使用>进行间隔,加粗最后一个元素
3.测试
让用户处于一个随机页面,让他们回答:
这是什么网站(ID)
我在哪个页面(页面名称)
这个网站的主栏目是什么?(栏目清单)
在这个页面我可以去往哪里?(导航)
我在网站的什么位置?(标识)
我怎么搜索?
2.主页
主页要完成的任务:
站点标识和使命:告诉我们他是什么网站,能干什么,最好能告诉我,为什么我在这里不是在别的网站(口号)
站点层次:给出网站的概貌—包括内容,功能,以及组织方式
搜索:大多数网站在主页有一个明显的搜索框
导读:主页应该项杂志一样,有精彩的额内容吸引我
内容推介:突出最好的,最人们的内容
功能推介:探索网站更多的栏目或者试用一些个性化功能
适时更新内容:告诉用户这不是一个没人管的网站
交换链接:主页的预留空间—广告,交叉推广,合作品牌
快捷方式:最常访问的内容片断
注册:表明用户的登录状态,以及提供登录入口
让我看到自己正在寻找的东西:智能推荐(大数据思维)
还有我没有寻找的:潜在的需求(大数据分析)
告诉我从哪里开始:有明显的的推荐入口
建立可信度和信任感:主页(pv最多的页面)的好坏直接影响用户的去留
兵家必争之地
主页使用户访问最多的页面,一般也是用户对网站的第一印象,它占据了网站最多的流量,谁都想要分一杯羹。满足所有人的需要时不切实际的,在这种情况下我们要保证网站的整体形象。
缓解方法:
从其他热门页面进行推介
轮流使用主页的同一空间
整体形象测试方式:
在进入网站的一瞬间(50ms),回答一下问题:
这是什么网站
我能在这里干什么
网站上有什么
为什么我应该在这里而不是在别的网站
或者
它看起来怎么样
内容多吗
页面分区明确吗
哪些部分对我有吸引力
如何传达网站信息
主页上每个东西都有助于理解网站是做什么的,但是有两个重要的位置更能帮助我们:
口号:它是什么,什么让它卓越。6-8个词,代表网站的特点和显而易见的好处(对用户),个性生动俏皮。
欢迎广告:对网站简要的描述,一般位于页面上端的左边或者中间
了解更多:别使用长段文字,用户没有耐心看下去,可以使用短视频。
指导原则(传达信息)
需要多大空间就使用多大空间
但是不要使用过多的空间:精简文字
不要把使命陈述当做欢迎广告:欢迎广告应该是传达公司是做什么的。
最重要的是进行测试
从哪里开始—布局
我想要搜索,可以从这里开始
我想要浏览,可以从这里开始
我想要看他们最精彩的内容,可以从这里开始
3.移动设计
在小屏幕上,人们移动的更快了,阅读量变小了。
设计的本质:处理约束(必须遵循和不能做的地方)和妥协(服从约束而不得已做的事情)。
确定约束有助于设计,而严重的可用性一般出现在对某个妥协的糟糕决定。
小空间的约束:可以先设计移动端(考虑最核心的功能和内容),然后将次要的内容和功能添加进去。
对于设计,我们应该进行优先级排序,最重要的和需要马上做的应该有最少的点击和最明显的视觉线索。次要的信息可以轻点几下,或者显示相对明显的线索到达。
可伸缩设计(响应式,动态布局,流式设计,自适应设计):允许缩放,不要让我站在门口(直接带用户去目的地,而不是首页),记得提供一个到“全内容”网站的链接。
在小屏幕上,不要隐藏提示。但是提示只要足够引起用户注意就可以了(但是不要把所有的提示都堆在页面上,这会很嘈杂)。
手机屏幕,没有光标,没有悬停,没有线索。操作的方式变了。
移动应用的可用性属性:
让一个有着平均能力或者经验(或者稍低于平均水平)的人能够明白如何使用(可学习)去完成某个任务(有效),而不会遇到不必要的麻烦(高效)。
应用需要可以学习:学会如何使用(提示,操作试验)
应用需要可以记忆:再次使用时是否需要可以再次学习
4.可用性测试与影响因素
焦点小组不是可用性测试。
焦点小组(用于产品设计初期):一组人(5-10)一起侃侃而谈,弹对产品的看法,产品的过往使用经验,对新概念的反应。
可用性测试(全过程—产品的运行情况和改进):一次一个用户观察他们的使用情况,并对于他们的行为作出分析和修改。
几个事实
如果想建立一个优秀的网站,一定要测试:不是每个人想的都和你一样的
测试一个用户比不测试好一倍
早一点测试用户好过最后测试50位用户
简易可用性测试
测试什么,什么时候测试
在设计网站之前就应该开始测试,测试竞争对手,测试应该贯彻整个项目,从草图,到线框图,页面排版,界面原型,到最后的实际网页。
测试什么取决于你现在需要测试什么,在测试前,应该进行任务描述(包含他们需要但是不具备的信息—用户名,密码等)。
在测试中允许用户自己决定一部分细节,比如“找一件你喜欢的衣服”而不是“找一件100元以下的衣服”。
测试流程
欢迎部分(4分钟):介绍如何进行,让用户有心理准备
提问部分(2分钟):可以问参与者几个和他们相关的问题,可以帮助他们放松
主页观光(3分钟):参考主页测试
任务测试(35分钟):不要提示用户,在用户迷惑想你询问时,你可以重复他们的话或者问他们你在想什么,做什么等
问题探查(5分钟):可以想参与者提问
结束部分(5分钟):感谢用户
典型问题
用户不明白概念:不知道页面在说什么
他们找不到自己要找的字眼:1.词汇理解不一致 2.预测错误
内容太多:看不到要找的内容,减少干扰,突出内容。
总结会
收集一份问题列表:让大家说出最严重的3个问题,把问题列出来
选择最严重的10个问题:对列出的问题可以进行非正式投票
问题评级:最严重的问题置顶
建立排序列表:从最上面的问题开始,对每个问题在下个月该怎么修复写下一些粗略的想法(谁负责,需要什么资源)。
对于容易修复的问题,建立另一份清单:一个人可以在一个小时完成的
抵制添加的冲动:
不要太看重人们对于新功能的要求
忽略皮划艇问题:用户遇到问题,但是很快就解决了
其他测试方式
远程测试,无人主持的远程测试
移动设备的可用性测试
与pc端应用或者网页的可用性测试不同,移动端的场景更加的复杂(操作方式,环境等)。
因为测试最好尽可能的基于用户的真实的场景进行,所以移动端会有以下一些问题:
1.用户是自然的拿着设备还是设备固定在桌面上?
2.观察者需要看到什么?(是设备的屏幕,还是同时看到屏幕和用户的手和表情)
3.怎么录像?
krug的推荐:
1.使用指向屏幕的摄像头而不是镜像技术(类似屏幕共享技术),同时看到屏幕和用户的操作更有利于分析用户的行为意图
2.把摄像头连接到移动设备上,让用户能自然的拿着它。
3.不要用摄像头指向测试参与者。
解决方案:
一个轻量级摄像头,一条固定可弯曲的线,一个夹板(感觉固定在手机壳后面也是不错的选择),一条连接电脑的usb连接线。
1.用USB将摄像头连接到电脑上
2.在电脑上观看画面,并通过屏幕录制工具分享给观察者看。
影响因素
最后,主要讲一下影响可用性的外界因素和产品的可访问性对可用性的影响。
外界因素
krug在书中引入了好感储存器这一概念。简单的讲就是我对于产品(网页,应用)的印象。
好感储存器受很多因素的影响,不仅受产品影响,同时也受用户的情况而定。
1.受个人的特质的影响。有些人的好感值很高,有些人的好感值很低。
2.受用户使用时的外部情况而定。情景时急迫的还是轻松的等等。
3.好感值是可以重新填满的。比如更好的用户体验等。
4.有时候一个简单的错误就能清空它。
降低好感度的几种方式:
1.隐藏我想要的信息(服务电话,运费,价格),欺骗敷衍。畅途购票隐藏保险费用,不明确标注服务费用,最后的车费总是让我很费解。
2.强制用户按照他们的方式行事。最常见的就是一些信息的输入格式问题。
3.向我询问不必要的信息。私密的个人信息在不触及产品的使用时最好别问用户索要。
4.设置障碍以及网站看上去不专业。广告是用户最大的敌人。
提升好感度的几种方式:
1.知道用户在你的网站上想做什么,并让它明白简易
2.告诉我我想知道的(和我利益相关的)。运费,咨询等。
3.减少步骤,优化流程,优化操作方式(点击代替输入等),优化信息呈现方式等。
4.知道我的疑问,并能在我需要的时候给予解答。(在合适的时候,合适的地方,呈现合适的信息)FAQ.
5.为我提供协助(人性化),友好的打印页面(去广告)。
6.容易从错误中恢复。
7.如果不确定,记得道歉。技术或者设计上做不到用户想要的,至少让他们明白你知道你给他们造成了不便。
可访问性
可访问性是web内容对残障人士的可阅读和可理解性。65%的人口是残障人士。
简单的3秒可访问性测试,增大网页字体。(wcag准则可供了解)
几个简单的容易实现的方案:
为每张照片增加合适的alt文本;使用合适的标题;表单配合屏幕阅读器;在每一页的最前面增加一个跳转到主要内容的链接;让所有的内容就可以通过键盘访问;在文本和他们的背景之间设置明显的对比;采用一份可访问性良好的模板。
三。争取他人重视可用性
如何说服管理层为可用性工作提供支持
1.演示ROI(比较困难)。
2.用他们的语言说话。不在讨论用户,了解公司内部难题,陈述我们的方法可以有力的解决这些问题。
3.让你的老板来观看可用性测试
4.在个人时间进行第一次测试。
5.对竞争对手进行测试
6.弄清楚自己在公司大局中的位置。
最后,进行一些小总结。
不要使用小而对比度不强的字体。
不要把标签放到表单字段里。除非表单超级简单,标签随着文本的输入上浮到输入框上方。
保留访问过的和未访问过的链接之间的区别。
不要让段落漂浮在段落之间。标题和相关段落有更小的距离。