125个优化网站可用性的小意思(上)

初稿出处:
nickkolenda   译文出处:三达不留点gpj   

一:控制用户的枢纽和注意力

1、强调用户界面的视角

每个界面都应有有一个清晰的角度,即用户应该在率先眼就见到的地点。

www.316.net亚洲必赢 1

2、通过视觉上的层级关系率领用户

用户应该率先看什么地方,其次呢,再然后呢?你要构建出这种视觉上的层次结构来带领用户。

(1)合理施用负空间(物体之间的长空)

www.316.net亚洲必赢 2

(2)使用单列布局:

www.316.net亚洲必赢 3

(3)一定程度上重叠放置页面元平素强调再三再四性

www.316.net亚洲必赢 4

3、听从格式塔原则来布置页面布局

依据格式塔原则,大家因此会简化我们的感知来打败外在的糊涂。比如我们会明白将事情协会处理、给知道给元素归类。

格式塔原则包蕴一密密麻麻基本规则:相似原则,接近或邻近原则,封闭原则,屡次三番性原则,图形与背景的关联原则。

www.316.net亚洲必赢 5

(1)使用接近性原则将一般的作用或菜单项归类

www.316.net亚洲必赢 6

(2)将标题靠近各自的所属区域

www.316.net亚洲必赢 7

(3)限制标题跟进各自的一部分

www.316.net亚洲必赢 8

4、在不纷扰用户的同时描绘出界面的更动

突发性你要求在用户眼前做一些调整变动,这时候要使那一个变迁鲜明,但又不会给用户打造混乱。

(1)使用明显的动态变化

www.316.net亚洲必赢 9

(2)将那么些触发错误的元素分别出来

www.316.net亚洲必赢 10

5、消除或回落不必要的信息

我们的饱满纽带是零星的,多余的元素将会花费大家的生气,因而,应该让用户聚焦于重点的音讯或重点意义上。

(1)弹出框或模态视图下选用模糊背景

www.316.net亚洲必赢 11

(2)最大化的卓绝反映数据比率的反差

www.316.net亚洲必赢 12

(3)从陈设性因素中移除不要求的边框

www.316.net亚洲必赢 13

(4)移除多余的或本人解释性的证实

www.316.net亚洲必赢 14

(5)隐藏不常用的装置项、效用或新闻

www.316.net亚洲必赢 15

6、标示出折叠区外是否还有内容存在

现近日,半数以上浏览器都会将滚动条隐藏起来。你须求采纳“滚动线索”来报告用户折叠区域外是否还有内容。

(1)通过折叠分割线来展现扩张的要素

www.316.net亚洲必赢 16

(2)添加影子来阐明深度

www.316.net亚洲必赢 17

(3)使用文字或图标来指向更加多内容

www.316.net亚洲必赢 18

二、指导用户前往最后目的

1、将反复作用和要紧的数额放在离用户进的地点(简单发觉和拔取的任务)

(1)过滤或跳转到用户要寻找的物品

www.316.net亚洲必赢 19

(2)基于高频选择/输入给出合适的默许值

www.316.net亚洲必赢 20

(3)在货物列表项中进入紧要的数据:

普普通通情形下,用户都亟需来回变换地点来查看越来越多的情节。他们必要点击一个条条框框去查看越来越多新闻(好比从列表页到详情页),之后须要重返从前的页面使用同样的方式再去查看其余条目标新闻。这种折腾的做法对用户来讲易用性何在?因而,你应当将根本的音信就坐落主页面上,使用户的这种重复劳动降至最低(比如将紧要的商品消息就放在商品列表中,而不用用户非获得详情页才能驾驭到)。

www.316.net亚洲必赢 21

比方您不爱好这种额外的新闻造成的紊乱(页面信息量大,不够简洁),你可已考虑拔取悬停可知的办法(见下一个政策)。

(4)鼠标悬停时提供立见成效的音信

www.316.net亚洲必赢 22

(5)高频功用/操作要突显出来:

www.316.net亚洲必赢 23

(6)在主控面板页突显基础(紧要的)数据或者配置项

www.316.net亚洲必赢 24

(7)将大面积(普遍的)选项放在下拉列表的顶部

www.316.net亚洲必赢 25

2、浮现出相互动作的场地变化

由此向用户传达所有有关新闻来下降用户的不确定性心绪压力。

(1)突显当前速度以及剩余时间

www.316.net亚洲必赢 26

(2)在纷纭或冗长的互相中,要考虑突显阶段性进程

www.316.net亚洲必赢 27

(3)在一个队列事件中,显示当前处在哪一步

www.316.net亚洲必赢 28

(4)在独家项目下,突显出条目标数额

www.316.net亚洲必赢 29

3、提供多种艺术来成功同样职责

用户更体贴分歧的工作流。你应有创设出前往同一目标的八个不相同途径,让用户自己去挑选最适合他们的工作流。

(1)让用户选择用户名或者邮箱都得以来报到

www.316.net亚洲必赢 30

(2)对于重复性的意义/操作,提供快捷键

www.316.net亚洲必赢 31

(3)让用户可以拖拽元素

www.316.net亚洲必赢 32

(4)让用户可以直接编辑数据

www.316.net亚洲必赢 33

4、向用户指明一个交互动作的要求或者参数

要让用户对每个交互有所准备,他们形成操作必要注意哪些?交互进程咋样举办?

(1)描述用户输入要满意的原则

www.316.net亚洲必赢 34

(2)实时展现密码的设置须要及对当前输入做出的反馈

www.316.net亚洲必赢 35

(3)预置表单元素中的通用参量

www.316.net亚洲必赢 36

(4)标示出必须和可选的表单元素

www.316.net亚洲必赢 37

5、传达出一个互为动作的料想结果

在用户与一个因素发生互动前,他们应该通晓其预期结果。

(1)使用描述性的按钮标签

www.316.net亚洲必赢 38

(2)突显基于当前输入的输出的预览效果

www.316.net亚洲必赢 39

(3)能够标示出/预览一个体系中的下一项

www.316.net亚洲必赢 40

(4)使用智能菜单项来表明操作

www.316.net亚洲必赢 41

6、当用户拿到进展时,奖励或安抚他们

用户是否取得进展了?他们的操作是否管用?那些都要让用户自己精通,并引诱他们继承朝前走

(1)在超链接和对象页面之间维持一致性

www.316.net亚洲必赢 42

(2)在指点用户之间提供便捷的涉及服务

www.316.net亚洲必赢 43

(3)进程条开头于0%上述

www.316.net亚洲必赢 44

7、解决用户的基本目标

诚如情状下,大家都是解决界面层级的必要。实际上,大家理应进一步尖锐的考虑其幕后的需求。多去头脑尘暴一下,想想用户为什么需求或多或少意义仍然音讯,然后去解决用户潜在的根本上的要求。

(1)展现你的办公是开拓如故关闭

www.316.net亚洲必赢 45

(2)相比于显示音信的发生时间,不如来得其崭新度

www.316.net亚洲必赢 46

三、减弱用户的体会压力并维持体验上的余音绕梁

除去简单的点拨用户外,你要减小他们在体会上急需提交的生气,这样,你便能延长他们的施用流。

1、裁减用户的测算

永久不要让用户执行数学问题,让电脑来处理它。

(1)显示剩余项的多少

www.316.net亚洲必赢 47

2、告知用户其眼前在页面中所处的岗位

界面就像飞机场一样,借使没有“你在这”这样的指令,用户就可能迷失。由此要成立出一些标识符号告诉用户眼前的职位。

(1)杰出导航菜单中的当前选区

www.316.net亚洲必赢 48

(2)在纷纭的界面中,使用面包屑导航或者网站地图

www.316.net亚洲必赢 49

(3)将描述性或有效的消息放在页面标题的一初始

www.316.net亚洲必赢 50

3、简化接纳义务

选用日常是讲求用户权衡一下的,你要透过简化选拔义务来收缩用户的压力。

(1)标示出大多数用户都会接纳的那一项

www.316.net亚洲必赢 51

(2)提供一些宽广的查询项

www.316.net亚洲必赢 52

(3)在导航菜单中开创紧密的分类

www.316.net亚洲必赢 53

4、使用传统的Web界面

即便如此成立性是内需且有价值的,不过切记不要离开传统(常规)的陈设太远。其实用户时时习惯了一些特定的页面布局或协会,这个传统的设计方案之所以流行就是因为它们确实是可行的。

(1)使用传统(常规)的领航菜单

www.316.net亚洲必赢 54

(2)将一部分公用性的条款放在页面右上角

www.316.net亚洲必赢 55

5、每个交互动作后要向用户提供报告

在用户跟你的界面暴发互动时,他们理应体验到实时的上报。
操作成功了?仍然没成功?哪儿变化了?

(1)在首要的并行之后要显得操作成功的提示消息

www.316.net亚洲必赢 56

(2)要申明光标究竟悬停到了哪一项地方

www.316.net亚洲必赢 57

6、使等待时间的负面影响降到最低

排除所有盈余的守候阶段。假使用户须求拭目以待,这就将负面影响降到最低。

(1)在加载环节拔取冷色调下落用户的欢腾度

红色可以下降开心度,使人放松
。使用红色的加载元素,用户会感知到更快的加载时间。点击这里精通越来越多。

www.316.net亚洲必赢 58

(2)在短期的守候阶段要抓住用户留下

www.316.net亚洲必赢 59

(3)倘诺用户上传的文件不满足需求,在上即刻传时就拦截

www.316.net亚洲必赢 60

(4)突显正在周转的职务

www.316.net亚洲必赢 61

7、裁减用户对记念的器重性

纯属不要强求用户记住任何业务(也无须指望用户能记住所有业务),把富有有关音信都举办来。

(1)保持表单标签随时可知

幸免内联标签在用户点击元素时熄灭。

www.316.net亚洲必赢 62

(2)将占位文本放在表单元素的异乡

www.316.net亚洲必赢 63

(3)在活动字段后增加复制按钮

www.316.net亚洲必赢 64

8、最小化眼球跳跃方式

保持所有互补性的数额在上空上看似,裁减眼部的过往运动。

(1)合并一致性的数据来扶持用户比较物品

www.316.net亚洲必赢 65

(2)相邻表单元素的标签要对齐

www.316.net亚洲必赢 66

9、要表现出怎么样要素可点击或可以并行

用户应该力所能及辨识出哪些元素是足以相互的以及咋样与之互相。假使您熟练UX/UI设计,这您恐怕清楚
Don 诺玛(Norma)n 在《设计心情学》一书中提出的视觉信号、情景支持及通俗化。

(1)使用3D特性设计按钮

www.316.net亚洲必赢 67

(2)添加一些纹理来讲明可拖曳元素

www.316.net亚洲必赢 68

(3)使用图标和符号传达一个相互动作的意思

您可以在PowerPoint或者Keynote中使用多种样子来构建出超过一半这类图标。

www.316.net亚洲必赢 69

10、使用用户熟习的文字和标记来传达音信

在半数以上气象下,清晰的发挥要胜过所有创设性和规范的表述。

(1)请说人话,而非系统语言

www.316.net亚洲必赢 70

(2)当出现外语时提供一个翻译按钮

www.316.net亚洲必赢 71

(3)选择语义一致(合适)的颜色

颜色不和谐的时候,用户就会在处理进度碰到麻烦。现在, meetup.comwww.316.net亚洲必赢, 有很科学的易用性,可是他俩还在选拔灰色来确认用户的出勤率(应该使用粉红色更适合人们的体味)。

www.316.net亚洲必赢 72

11、最大化你的界面的可浏览性

一大半用户通过浏览音讯来拍卖消息。你不应有排斥这种表现,应该迎合它才对,要让您的界面更有利用户浏览。

(1)保持段精简,卓越重点术语

www.316.net亚洲必赢 73

(2)把重大的新闻放在列表项的上马地方

www.316.net亚洲必赢 74

(3)表格的每一行添加底纹

www.316.net亚洲必赢 75

(4)子标题单独写出来

www.316.net亚洲必赢 76

(5)让纯文本突显有余视觉样式

www.316.net亚洲必赢 77

12、最大化文本的可读性

明朗地,对于一段文本音讯来讲,其主干要领应该是可读的,上边是一对可以增加可读性的祥和提醒。

(1)在文书和其背景间设置鲜明比较度

在放任自流背景上出示文本时要留意,你也许要求考虑通过叠加或歪曲的成效来出色比较度。比如在自身的头像背景上添加文(加文)字:

www.316.net亚洲必赢 78

(2)正文的大举要维持左对齐

www.316.net亚洲必赢 79

13、整个界面使用同一的设计格局

如若不一样界面间使用不均等的设计方式,用户将会要求越多资金来熟识和读书,因此请在维持一致性布局和外观的前提下尽可能简化你的界面。

(1)创制一个前端样式指南

始建一个文档统计你的界面中种种元素的设计规范。

www.316.net亚洲必赢 80

别的的要素蕴含:

颜色;

网格和布局;

尺寸与形态;

标签和言语;

导航;

表格;

列表;

链接;

话音和语调;

要求越来越多启发?点击这里查看越来越多

(2)保持导航菜单始终出现在平等地方

www.316.net亚洲必赢 81

14、创设美观的视觉设计并保持视觉平衡

当您的安顿性从美学的角度上更讨喜时,其可用性也会增加——这就是“雅观实用机能”(Kurosu
& Kashimura, 1995
)。

(1)使用数学原理构造设计

www.316.net亚洲必赢 82

(2)选用显明的书体

有些人摘取要同盟的书体时,他们平常会轻易地查找一个看起来跟现有的一个字体类似的书体。但这实质上是破绽百出的办法。平常情状下,选用相似性将代表可能会是一个不当。

相反,你应有深思。选取这几个可以形成分明相比的书体。若是你是个设计师新手,你能够选拔一个衬线字体和无衬线字体的咬合。

www.316.net亚洲必赢 83

四、最大化的卓殊所有用户和意况

你的用户多是抱有分化目的的分化人群,而你要统筹出可以同盟所有人使用的界面。

1、最大化的相当用户的学识和技巧水平

你的用户可能是新手,专家,或在于两者之间,你要规划相应的用户界面。

(1)使用方便数量的新手引导

重点有八个新手指导政策:

www.316.net亚洲必赢 84

这四种艺术刚好结合一个 2 x 2
的矩阵。使用下图来摘取出最符合你的界面的主意:

www.316.net亚洲必赢 85

(2)在不打搅专家用户的还要添加工具提醒来支援新手用户

www.316.net亚洲必赢 86

(3)使用卡片式的分类来构建新闻架构

假定您想看到用户是何许抉择菜单分类的,请使用开放式的卡片分类方法。

万一你想看看用户是怎么样将现有的要素协会成预先确定的连串,则使用闭合式的卡片分类法。

www.316.net亚洲必赢 87

2、最大化的合作用户的工作流

用户会有两样的须要,你要对这一个不相同的行事流定制界面。

(1)要让用户可控数据的外观样式

www.316.net亚洲必赢 88

(2)让用户可控数据的逐条

www.316.net亚洲必赢 89

其余的排序规则包含:

按字母;

按可用性;

按日期;

按距离;

按热度;

按价格;

按相关性;

按尺寸大小;

……

(3)让用户可控数据的多少

www.316.net亚洲必赢 90

(4)构建用户画像来定义具体的工作流

www.316.net亚洲必赢 91

(5)让用户可以在新的选项卡下打开页面

与多用户都有窖藏页面的习惯,他们会在稍后打开新的选项卡查看收藏的页面。

www.316.net亚洲必赢 92

3、最大化界面的可访问性

使您的界面对于残疾人平等适用,那样您的宏图也尤为圆满,仍可以避免可能涉及到的法规问题。(1)在HTML5中拔取语义标签

www.316.net亚洲必赢 93

(2)使用几个线索来传递音讯

大致8%的男性都是干眼症(详见这里),永远不要只经过颜色来传递新闻,最好总是提供额外的线索。

www.316.net亚洲必赢 94

4、对具备输入和无限意况要做最大化的格外

用户的输入可以不发出任何结果,但要给用户丰裕的开放度可以进行大范围的输入。

(1)使用自动生成的音讯解决不利的结果

www.316.net亚洲必赢 95

(2)使用接受各样格式输入的表单元素

www.316.net亚洲必赢 96

(3)展现解决了搜索者的需求的结果

www.316.net亚洲必赢 97

(4)搜索框可以同盟拼写错误、同义词和变体词

www.316.net亚洲必赢 98

5、最大化的匹配所有媒介

你的界面应该能够在其他条件下(设备、浏览器等)工作。

(1)针对分裂的浏览器制定相应的命令表达

www.316.net亚洲必赢 99

(2)在小屏设备上选取单窗口形式

www.316.net亚洲必赢 100

2 赞 1 收藏
评论