web网站设计
开放性的门户网站中，这类网站中用户流量较大，且用户注意力极容易被分散，这时一个Web页面的瞬间识别性直接关系到用户转化率，也就显得尤为重要；
而对一些比较专业的或指定性的网站，政府网站等，用户面临缺少其他选择，网站缺少替代性的情况，以下原则可能没有前者这么性命攸关，但也同样具有相当的指导意义。
一、别让用户思考–关于Krug可用性第一定律：
一个优秀的网站一定是简明易懂的，所谓简明易懂是指：一个互联网的门外汉第一眼看到页面也能迅速分别出每一块布局是什么内容（导航，促销，搜索，等等），而没有丝毫的迟疑和困惑。这一原则甚至比功能的全面性和完整性还要重要。
而强迫用户思考的地方主要有以下四种情况：
1、杂乱的网站排版：
这一点是重中之重，也是对用户感官影响最大的方面；一个良好的排版可以迅速抓住浏览者的兴趣并获取用户好感，而一个糟糕的网站往往。。。算了，举栗子：
同样都是招聘信息网站，有的给人第一感受是这样的：
2、复杂/专业的标题/按钮名字：
这种例子有很多，比如专业的名称，有创意（难懂），有歧义的按钮文字往往会让用户注意力停顿或有所疑惑，这些都可能造成不必要的注意力分散和用户流失：
3、按钮的可点击性：
如下图虽然明确的写明了“Login/Sign Up”，我还是会迟疑一下：这是个按钮么？能点击么？然后需要将鼠标移上去才能确定：这是我想要的登陆按钮；
4、各种筛选、分类条件：
这类问题，常见于各政府机构老旧网站中，运营者往往较少考虑用户的体验和上手难度（胡care）：
二、客户使用Web的实际情况
1、扫描
用户通常不是在阅读页面而是在扫描页面；Krug给出了三个解释：
用户总是处在忙碌中——不想耽误太多时间浏览；
用户知道自己不必浏览所有内容——胡care；
人们都习惯一目十行——本能；
所以，综上所述，用户在面对一个大面积的网页时往往数秒钟内就浏览完毕，这时人们往往容易注意到放显示比较明显的位置（大字号，加粗，突出颜色等）或者容易引起注意力的关键词上（”免费”，”优惠”，”美女”，自己的名字等）。
2、满意即可
“满意即可”和“最优选择”相对，意思是用户往往不会浏览完页面所有内容后才综合做出最终选择，而是看到有一个差不多（相对满意）的选项就会先行选择。而原因和以上类似：
用户总是处在忙碌中
选错了也无所谓
权衡选择并不一定会更优
猜测未知的选择更有意思
3、勉强应付
这一条的意思是说，绝大多数用户并不会耐心的去试探你的所有功能；换个意思说，就是用户其实是在按自己的方式（而非你设计的方式）来使用你的产品。Krug在此总结了两点原因：
这对用户来说不重要
用户容易满足在自己的使用方式中
比如生活中，基本没有多少人会在买了新的电器后仔细阅读说明书，而是自己摸索，并按自己找到的方式来使用（即便很可能是错的）。
又比如现在，仍然会有很多人在百度搜索框内输入URL。
三、视觉设计的主要法则
1、建立清楚的视觉层次
越重要的部分越突出：职位名称和薪资，公司名称和Logo，职位描述，投个简历等信息分别通过加粗加大字体，颜色突出等方式展示；
2、尽量使用习惯用法
例如字体较大的短语通常是标题，导航栏通常在页面上方或左侧，登录通常在左上或者右上方，新闻版面通常参考报纸排版，等等；
关于习惯性用法有两点值得注意：
它们真的非常有用
设计师通常不愿意用他们（想做出更有“建设性”，更拉风，独树一帜的产品设计）
3、划分明确定义的区域
用户在扫视页面时候能很明确的指出页面的每个不同区域的不同功能，比如“哪些是功能菜单”，“哪些是商品广告”，“哪些是今日头条链接”等等，这样可以让用户很快决定关注页面的哪些区域，或者放心的跳过哪些区域。
4、标识可点击的地方
这一点在上文提到过了，无需多讲。
5、降低视觉噪声
视觉噪声的来源主要有两点：
眼花缭乱
背景噪声：有些界面虽然没有一个地方会造成过分干扰，但是过多细小的噪声同样会让人厌烦。
虽然排版整齐，然而并列的深灰色背景还是让人有些压抑。
四、关于“无需思考”的选择
这里要提一下Krug的第二可用性定律：点击多少次都没关系，只要每次点击都是无需思考，明确无误等的选择。
作者举了一个非常简单易懂的例子：动物，植物，无机物。只要你能接收一下假设：只要一个东西不是动物也不是植物，都属于无机物。那么任意说一种东西，用上面三个标准把它筛选出来几乎都毫不费力。
五、省略不必要的文字
这里Krug提出了第三可用定律：去掉页面上一半的文字，然后把剩下的文字再去掉一半。
这样的好处是显而易见的：
降低页面的噪声；
让有用的信息更突出；
让页面更简洁，展示更多的内容。
1.欢迎词必须被消灭
欢迎词就像闲聊：而用户更喜欢开门见山。
2.指示说明必须被消灭
比如注册须知，你懂得，没人会细读他们，除非在多次“尝试”失败之前不会，这就够了。
一、导航设计——街头指示牌和面包屑
1、记住一个事实 ：如果在网站上找不到方向，人们会放弃使用你的网站
（1）网络导航101法则
人们进入站点时会遵循一个类似的过程：
人们通常是为了寻找某个目标
人们会决定先询问还是先浏览
如果选择浏览，人们会通过标志的引导在层次结构中穿行
最后，如果没找到想要的东西，人们会离开
（2）Web与真实世界中的差异
感觉不到大小
感觉不到方向
感觉不到位置
不论我是来闲逛还是来寻找固定内容，我能清晰地知道自己在哪，能去哪（明细分类），以及如何回去（主菜单）。
（3）导航的用途
它给了我们一个被固定的感觉
它告诉我们当前的位置
它告诉我们如何使用网站
它给了我们对网站建造者的信心
如今我们逛一些相当成熟的购物网站（比如淘宝）的时候，甚至比在百货商厦中的感觉更清晰。我能更便捷地找到自己想要的东西。（商品分类，新品促销，其他功能。。。）
Web导航的用法基于实际导航用法，但我认为web导航现在已经实现了对现实世界导航的超越。（可快速跳转，试错成本低）
（4）只要跺三次脚，说“我要回家”
让一个“返回主页”的按钮始终可见，这一点很重要，用户可以随时（在短时间内）回到主页，可以有效地减少用户迷失方向的焦虑。
（5）提供搜索
搜索的设计要注意三点：
慎用花哨的用词：“快速搜索”“关键词搜索”“精确搜索”等等
添加指示说明：在PlaceHolder中增加对搜索的描述
添加选项：如果存在易混淆的搜索范围，如全站搜索？部分站点搜索？整个Web搜索？请加选项区分。
（6）关于页面名称
标识要大：足够引人注目
在合适的位置：通常在页面左上，目光焦点较多的地方
每个页面都需要一个名称
名称要和点击的链接一致
（7）你在这里——关于“面包屑”
面包屑帮你找到来时的路，其实就是级联菜单。
你能清晰的知道自己在哪，如何来的。也可以快速回去。
（8）喜欢标签（TAB）的四个理由
它们不言而喻：从来没有第一眼看到会不明白的用户
它们很难错过：当Krug进行“用户点击测试”时，几乎所有人都会试着点击Tab标签
它们很灵活：设计得当能增加修饰作用，更实用
它们暗示了一个物理空间：能帮助你装载大量内容
（9）“后备厢测试”
想象你被蒙上双眼，所在车子后备厢中，车子开动一段时间后，把你放在网站某个内容的某个页面上，你能迅速的判断出：
这是个什么网站？（风格主题设计）
自己现在在哪？（网页名称）
如何回到主页？
当前我有什么选择？（本页导航）
网站主要栏目有哪些？（栏目清单）
我怎么进行搜索？
如果可以，说明这个页面设计良好。
二、首先要承认，主页不由你控制
1. 主页的任务
站点的标识和使命：告诉我这是做什么的网站
站点层次总览：网站概貌
搜索
建立可信度和信任感：专业优美的设计，是良好印象和继续使用的重要因素
内容更新：展现活跃迹象，不是死水一潭
友情链接：没办法
快捷入口
注册
看到我自己正在寻找的东西：让我有继续使用的第一动力
……还有我没寻找的东西：以后用得到
告诉我从哪开始：面对一个新网站，无从下手的感觉糟透了
导读：精彩内容的推介
2. 你还要面临的一些不利因素
每个人都想占有一席之地：主页的版面很珍贵，但信息量太多会容易造成堵塞——供应不足
想要参与的人太多：产品，设计，市场，CEO，（甚至技术）都想在主页加上一些个人需要（或喜欢）的东西
一个尺寸要适合所有人：主页要呈现在每个访问者面前，不管他们兴趣差别有多大
3. 第一个受害者
由于上面的几个不利因素，主页很容易变得非常复杂，这时最重要的事情往往被忘记——传达整体形象。
忘记整体形象的五大错误理由：
这本就是显而易见的，我们不需要这么做：我们自己建立网站时，很清楚自己将提供什么，但是你很难想到别人对此其实并不清楚。
人们见过一次这些说明后，会觉得重复见到很烦人：很少有人每次看到同样的解释就不再访问这个网站。
真正需要我们网站的人会知道的：这样很容易让人觉得，那些没有马上明白的人可能不是你的目标受众，从而丢失大量流量
那是广告的任务：就算人们理解你的外部广告，但当他们来到你的网站时，真正留住兴趣的是你的主页。
我们会增加一个“初次访问？”的连接来专门针对新人：人们更倾向自己尝试摸索，而不会依赖教程。这并不能代替他们一眼见到网站的整体形象，而且很多人再试着摸索后就已经糊涂了。
4. 如何传达整体形象
口号
欢迎广告
需要多大空间就使用多大空间
但也不要使用太大空间
不要把使命陈述当做欢迎广告
最重要的是进行测试
5. 没什么比得上一个好口号——Slogan
好的口号要清楚、言之有物，不好的口号含糊不清
好的口号长度适中
好的口号能表述出网站的特点和显而易见的好处，不好的口号听起来太笼统
好的口号应该有个性、生动，偶尔很俏皮
推荐几个不错的Slogan：
（1）阅读
网易新闻：有态度的新闻门户
ONE：复杂世界里一个就够了
简书：交流故事，沟通想法
一席：听君一席话
大眼：呈现世界精彩
（2）出行
面包旅行：与世界分享你的旅行经验
蝉游记：发现旅行之美
旅行加：方便快捷的一站式旅行助手
Uber ：你的专属司机
Airbnb台湾站：躺在山海间，睡在人情里
（3）财务
支付宝：改变因我而来
随手记：理财第一步
挖财：爱记账 会生活
（4）购物
京东：多·快·好·省（「这才是最直接最长情的告白」）
手机淘宝：随时随地，想淘就淘
什么值得买：高性价比产品网购推荐，值得您常来看看
（5）音乐
网易云音乐：听见·好时光！
QQ音乐：听我想听的歌
豆瓣FM：与喜欢的音乐不期而遇
落网：我们记录独立音乐
（6）视频
爱奇艺视频：悦享品质
优酷：世界都在看
迅雷看看：你的随身电影院
（7）生活
Kitchen Stories：anyone can cook
下厨房：唯有美食与爱不可辜负
美团外卖：把世界送到你手中
百度外卖：我们想要给你更多
饿了么：叫外卖，上饿了么
百度云：云上的日子，你我共享
any.do：Organize anything with Any.do
豆瓣：汇聚一亿人的生活趣味
6. 从哪里开始？
当进入一个新的网站，快速扫描主页之后，我们应该明白无误地知道：
如果我想搜索，可以从这里开始。
如果我想浏览，可以从这里开始。
如果我想扫描网站最精彩（推荐，特价，有趣）的内容，可以从这里开始。
7. 下拉框的问题
为了节省空间，设计师常常会想方设法创造一些空间，比如……下拉框——遗憾的是，他们存在几个问题：
他们难以扫描，你必须把它们找出来：必须点击下拉框，才能看到下拉列表，然而用户精力尤其宝贵的浏览时间，这无异于自寻死路。
他们不好控制：当下拉框伸展开露出一大长串内容时……所以他们更多被用在一些用户不得不看的场景，比如注册。
8. 节约主页
因为主页的内容实在太重要，所有利益相关者都想在主页加上自己的内容（分一杯羹），这样很容易造成过度使用，需要其他方法来缓解这种需求，比如其他热门页面进行推介。
二、简单的可用性测试
Steve认为测试不该是一个花费大量金钱，组织大规模实验的过程。而是一个简单，随意，快速迭代的过程。只需要每次找3-4个用户来进行简单的点击实验，不要解释你的网站，而是询问他们的使用体验，并对他们的反馈做出及时调整。
（1）快速迭代，多次优化
相比一次性找齐50个人进行一轮测试，不如分10次，每次测试5个人，会暴露更多的问题，帮你更好的优化你的Web页面。
（2）测试什么，什么时候测试
测试没有“太早”的概念，在设计之前就可以测试同类网站。
测试什么：让用户访问并使用网站，看他们能否理解这个网站的目标、价值主张、组织结构、运行方式等等。
关键任务测试：让用户使用网站的核心功能完成一些任务，观察他们是怎么做的。
大的方面和外界影响
1、可用性是基本礼貌
（1）好感储存器
想象一个盛满的水杯，每次用户进入一个网站时，好感度都是满的，每碰到一个问题就会洒出一部分水，当水少到一定程度时为止。
它因每个人的特质而不同：一些人好感值比较高，更乐观，有耐心，而有些人好感值比较低。
它依情况而定：如果用户非常赶时间，或者刚刚在别的网站得到糟糕的体验，这时往往刚进来的时候好感值会比较低。
你可以重新填满它：一些小的优化，贴心或有趣的设计可以增加用户的好感值。
有时一个错误就会清空它：比如一个30行的注册表单。
（2）降低好感的几种方式：
看上去不专业：组织无序，布局杂乱，配色没有质感。
网站Bug：页面错误飞走，404。
隐藏我想要的信息：比如客服电话，运费和价格。
没有按你们设计的方式操作而受到惩罚：输入电话时中间要加破折号“-”，输入信用卡号时要手动用空格隔开。
询问我不必要的信息：大多数用户都很介意个人信息。
敷衍我，欺骗我：想想每次听到“您的电话对我们来说很重要”时的感受。
给我设置障碍：不得不等待一个长长的Flash介绍或者逼迫我浏览多个“自我感觉良好”的宣传图片。这些都清楚表明，你并没有理解或者关心——我很忙。
（3）提升好感的几种方式：
良好专业的版面设计
知道我来这做什么：把用户最需要也是最可能做的事情放在首页。
告诉我想知道的：把价格、运费或者咨询电话摆在我第一眼就能看到的地方。
尽量减少步骤：没有人不喜欢简单、直截了当的体验。
容易从错误中恢复：当我一步步点进了级联菜单的最深处却还没找到我想要的信息时——一个按钮能让我迅速回到主页。
如有无能为力的事情，记得道歉：绝大多数用户面对道歉还是会挽回一定的好感值。
2、可访问性
Steve特意强调了一下网站对于特殊群体的照顾，如老年人和残疾人，记得允许调整字号大小，让所有内容都可以通过键盘访问等。
虽然这些会增加额外的工作量，但总是值得的。（个人感觉由于群体的特殊性，大多数网站在资源有限的情况下可以不予考虑）。
转载自 人人都是产品经理《关于Web设计中的可用性决策》
网友评论