可用性设计这个概念不知道对你是否陌生,它充斥在我们身边,从设计师、开发人员、网站制作人、项目精力、市场人员、到某个在支票上签名的人,以及那些一个人负责完成所有工作的人都会涉及到。
那究竟什么是可用性设计呢?
可用性设计是Web设计中最重要也是难度最大的一项任务,它是关于人如何理解和使用产品的,它和技术没有关系。
只要是在设计需要人与人交换的产品,都可以适用,不管是微波炉、移动应用、还是ATM。这本书名为《DON'T MAKE ME THINK 》翻译成汉语叫别让我思考,又名点石成金,它是关于Web设计原则的一本书, 作者用多年的从业经验讲述剖析了用户的心理,在用户使用模式、为扫描进行设计、导航设计、主页设计、可用性测试等方面提出了许多独特的观点,并给出了大量简单易行的可用性设计的建议
以下对书中部分内容简单整理:
一、指导原则
可用性的定义
分解成以下几个方面:
有用:能否帮助人们完成一些必须的事物
可学习:人们能否明白如何使用它
可记忆:人们每次使用的时候,是否都需要重新学习
有效:它们是否只需花费适当的时间和努力旧能完成任务
高效:它们是否只需花费适当的时间和努力就能完成任何
合乎期望:是人们想要的妈
令人愉悦:人们使用的时候觉得有意思甚至很好玩吗
就是让一个有着平均能力和经验的人(甚至稍微低于平均水平)能明白如何使用它而不必付出过度的努力,或者遇到不必要的麻烦。
可用性指导原则
1. 别让我思考(Krug)可用性第一定律
网页上每项内容都有可能迫使我们停下来,进行不必要的思考
不必要的问号来源是那些看起来不太明显的链接和按钮
如果你不能做到让一个页面不言而喻,那么至少应该让它自我解释。
2.我们是扫描使用WEB的,满意即可,勉强应付
我们不是阅读,而是扫描
我们不作最佳选择,而是满意即可
我们不是追根究底,而是勉强应付
广告牌设计101法则,为扫描而设计,不为阅读设计
1. 尽可能利用习惯用法
如何想创新你要理解要去取代的设计价值
简洁胜过一致性
2.建立有效的视觉层次
三个特点
越重要的部分越突出
逻辑上相关的部分也在视觉上相关
逻辑上包含的部分在视觉上进行嵌套
好的可视层次可以使我们快速理解对页面的组织和优先级,减少我们的工作
坏处:我们将降低扫描页面的习惯,还要去寻找关键字拼凑我们感觉重要的内容从而增加了很多工作
3.把页面划分成明确定义的区域
明显标识可以点击的地方
降低视觉噪点(三种视觉噪点是:眼花缭乱、组织不当、太过密集。)
为文本设置格式,以便扫描
方法:充分使用标题、保持段落简短、使用符号列表、突出关键词语。
1. 明显标识可以点击的地方
2. 最小化干扰
3. 为内容创建清楚的格式,以便扫描
省略多余的文字
好处:降低页面的噪声
让有用的内容更加突出
让页面更简短,让用户在每个页面上一眼就能看见更多的内容,而不必滚动屏幕
欢迎词就像闲聊,但是大部分的Web用户都希望直截了当,所以必须消灭
指示文字都笔记冗长,没有用户会细读所以必须消灭
二、街头指示牌和面包屑----导航设计
Web导航就像商场的指示标导航一样,可以清晰的告诉你在去哪里,在哪里,你当前的位置,这些问题在Web上比在商场的物理空间严重的多,因为我们不能通过走道知道我们的位置,所以Web导航展现的层次结构补偿了这种缺失的空间感,营造出一种位置的感觉,所以做好Web导航非常重要
1.导航的作用
帮助我们找到想要的任何东西和告诉我们现在身在何处
告诉我们这里有些什么
告诉我们如何使用网站
给了我们对网站建造者的信心
2.Web导航之--全局导航或持久导航
全局导航包括4个元素:站点ID、栏目、适用工具、搜索
全局导航是在每一页以一致的外观出现在同样的位置但是也有一个例外是表单。
站点ID:它就像建筑物的名称,与实体建筑不同的是,在Web上它需要在每个页面上见到网站的名称,要么成为本页最显眼的内容,要么让它涵盖页面所以的元素。
栏目:栏目有时也叫主导航条,是到达该站点你主要栏目的链接,即站点层次结构的最顶层。实用工具:它是到达网站中不属于内容层次的重要元素的链接。这些实用工具可以帮我们使用站点(例如注册/登陆、帮助、站点地图、购物车)也可以提供网站发布者的信息(例如关于我们、联系我们)
一般情况下持久导航上只能放置4~5个实用工具,否则用户会在眼花缭乱中迷路。
搜索:搜索的用户比浏览的用户要多的多,因此除非站点规模非常小而且组织得很好,否则每个页面都应该有一个搜索框或一个到搜索页面的链接。
搜索要注意避免使用花哨的词语,多余的指示说明,设置合理的选项(避免容易混淆的搜索)
3.二级导航的原则
由于空间和时间的限制,再者认为二级导航不是很重要,所以Web设计中普遍问题没有对低层次的导航给予足够的重视。
然而事实是用户在底层页面上花的时间与顶层页面相同,除非你从一开始就从顶往下进行导航设计,否则以后很难再添加,也很难保持一致性。
页面名称的注意事项
每个页面需要一个名称
页面名称需要出现再合适的位置
名称要引人注目
名称要和点击的链接一致
当前的页面名称要突出显示
面包屑的设计原则
面包屑会告诉你从主页到当前位置的轨迹,并能让你在网站中更加容易地回到更高层次的内容。
把它们放在最顶层
使用“>”对层级进行间隔
加粗最后一个元素
标签导航
标签就像三孔活页夹或文件柜档案上的标签一样,通过标签把内容分组很容易翻到自己想要的位置。
标签导航是大型网导航上佳选择,因为它们不言而喻,很难错过,很灵活。
要营造出主页的效果,激活的标签页必须有一种不同的颜色或外形作为对比,并且与它底下的空间再物理上链接起来。
三.Web设计中的主页设计
1. 主页设计需要完成的任务
具体的需要:
站点标识和使命
站点层次
搜索
导读
内容推介
功能推介
适时更新的内容
交换链接
快捷方式
注册
抽象的需要:
让我看到自己正在寻找的东西
还有我没有寻找的
告诉我从哪里开始
建立可信度和信任感
2. 主页设计需要传到整体形象
可以通过口号、欢迎广告、了解更多来传达
在网站上,口号可能出现再站点ID的下方、上方或旁边
好的口号要清楚、言之有物,非常准确地对网站或公司进行描述
好的口号要长度适度
好的口号可以表达网站的特点和显而易见的好处
好的口号有个性、生动、有时候还很俏皮
3.可用性好的网站需要传到的内容
如果想要搜索,可以从这里开始
如果我想浏览,可以从这里开始
如果我想看看它们最精彩的内容,可以从这里开始。
四:移动端设计原则
从某种意义上来说,移动端和Web端,最基本的可用性原则都是一样的,不过也是有一些区别
1. 一切都是妥协
任何时候进行设计,你都需要面对约束,而且只要有约束就会有妥协。所以要达到良好的移动可用性,绝大多数的挑战最终归结为做出良好的设计妥协。
2.狭小空间的苛刻
管理屏幕空间的挑战不应该以牺牲可用性为代价,
3.变色龙的繁育
其实是关于可伸缩的设计(包括动态布局、流线设计、自适应设计、以及响应式设计)但是非常繁琐难以完善。
针对移动端的多页面适配有以下建议
允许缩放
不要让我站在门口
永远记得提供一个到“全内容”网站的链接
不要把你的提示藏在后面
没有光标=没有悬停=没有线索,需要找到别的方式来取代它们。
扁平化设计
移动端的网速,响应式设计大量的代码都会影响载入速度,会给用户带来挫败感影响公司声誉。
移动应用的可用性属性(可以让有平均能力和经验的人去完成某个任务而不会遇到不必要的麻烦)
让人快乐的产品(超乎寻常好的产品)
移动应用可学习
移动应用也需要可记忆
以上是针对书中的部分原则做的的一个整理,工作中常被忽略的一些问题按照书中的原则对照去一 一调整,相信可以找到不少可以改进的地方,很薄很经典的一本书,建议有时间可以亲自读下才可以领略到书中的精华所在。
鼓励大家去购买正版纸质书籍,真正收获知识的价值远远大于书籍本身的价格。
《点石成金》访客至上的Web和移动可用性设计秘笈
机械工业出版社
作者:[美]Steve Krug
本文内容出自《简约至上》,由本公众号整理编辑,转载请提前联系告知,否则必究。
关于大宝(我本人):
互联网领域设计师,跨界于广告、创意、工业设计、用户体验等领域,喜欢潮流,本身却很土,定期写文,欢迎提出你感兴趣的设计、艺术、创意等话题,试着做一个书写设计来影响你的人。
欢迎关注,阅读更多原创设计思考。