www.316.net亚洲必赢125个优化网站可用性的小问题(上)

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

1、强调用户界面的观点

每个界面都应该有一个分明的着眼点,即用户应该在第一眼就看看的地方。

2、通过视觉上的层级关系指导用户

用户应该首先看啥地方,其次呢,再然后呢?你要构建出那种视觉上的层次结构来辅导用户。

(1)合理采取负空间(物体之间的空中)

(2)使用单列布局:

(3)一定水平上重叠放置页面元一直强调连续性

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

按部就班格式塔原则,我们由此会简化大家的感知来战胜外在的混杂。比如我们会知道将工作社团处理、给知道给元素归类。

格式塔原则包括一雨后春笋基本条件:相似原则,接近或接近原则,封闭原则,连续性原则,图形与背景的涉嫌原则。

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

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

(3)限制标题跟进各自的有的

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

有时你需要在用户面前做一些调整变化,这时候要使这个变迁显著,但又不会给用户打造混乱。

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

(2)将这个触发错误的因素分别出来

5、消除或调减不必要的新闻

俺们的旺盛典型是个此外,多余的因素将会耗费我们的生气,因此,应该让用户聚焦于重点的音信或重点意义上。

(1)弹出框或模态视图下采纳模糊背景

(2)最大化的凸起反映数据比率的差距

(3)从筹划元素中移除不必要的边框

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

(5)隐藏不常用的安装项、效率或音讯

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

现如今,大多数浏览器都会将滚动条隐藏起来。你需要运用“滚动线索”来报告用户折叠区域外是否还有内容。

(1)通过折叠分割线来突显扩张的因素

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

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

二、指点用户前往末了目的

1、将反复效率和要紧的数量放在离用户进的地点(容易察觉和应用的地点)

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

(2)基于高频采用/输入给出合适的默认值

(3)在商品列表项中出席首要的数目:

常见情状下,用户都急需来回变换地点来查看更多的始末。他们需要点击一个条款去查看更多信息(好比从列表页到详情页),之后需要回到在此之前的页面使用同一的艺术再去查看其他条目的音信。那种折腾的做法对用户来讲易用性何在?因而,你应当将着重的消息就坐落主页面上,使用户的这种重复劳动降至最低(比如将首要的商品音讯就置身商品列表中,而无需用户非得到详情页才能驾驭到)。

比方您不喜欢这种额外的音信造成的混杂(页面音信量大,不够简洁),你可已考虑动用悬停可见的不二法门(见下一个方针)。

(4)鼠标悬停时提供实用的信息

(5)高频效能/操作要来得出来:

(6)在主控面板页显示基础(首要的)数据仍然安排项

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

2、体现出相互动作的情况变化

经过向用户传达所有有关音讯来降低用户的不确定性心情压力。

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

(2)在千头万绪或冗长的相互中,要考虑呈现阶段性进度

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

(4)在个别类型下,展现出条目标数量

3、提供多种方法来完成同样任务

用户更强调不同的工作流。你应该创设出前往同一目的的四个不等途径,让用户自己去选拔最契合他们的工作流。

(1)让用户采用用户名或者邮箱都足以来报到

(2)对于重复性的效益/操作,提供快速键

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

(4)让用户可以一向编辑数据

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

要让用户对各个交互有所准备,他们成就操作需要留意怎样?交互过程咋样进展?

(1)描述用户输入要满意的规格

(2)实时突显密码的安装要求及对最近输入做出的举报

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

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

5、传达出一个互相动作的预期结果

在用户与一个要素爆发互动前,他们应当精晓其预期结果。

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

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

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

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

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

用户是否收获进展了?他们的操作是否行得通?这个都要让用户自己清楚,并引诱他们连续朝前走

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

(2)在辅导用户之间提供高速的关系服务

(3)进度条起初于0%上述

7、解决用户的中坚目标

相似处境下,我们都是釜底抽薪界面层级的需求。实际上,大家应有更加深远的设想其幕后的急需。多去头脑风暴一下,想想用户为啥需要一些意义依然音信,然后去化解用户潜在的根本上的需求。 

(1)展现你的办公是开辟仍旧关闭

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

三、裁减用户的体会压力并保障体验上的流利

除却简单的点拨用户外,你要减小他们在体会上需要交给的生机,这样,你便能拉开他们的接纳流。

1、减弱用户的乘除

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

(1)显示剩余项的数目

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

界面就像是飞机场一样,要是没有“你在这”这样的提醒,用户就可能迷失。因而要开创出有些标识符号告诉用户眼前的地点。

(1)优异导航菜单中的当前选区

(2)在千头万绪的界面中,使用面包屑导航或者网站地图

(3)将描述性或有效的信息放在页面标题的一起首

3、简化选用任务

拔取常见是要求用户权衡一下的,你要由此简化选取任务来压缩用户的下压力。

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

(2)提供部分普遍的询问项

(3)在导航菜单中创立紧密的归类

4、使用传统的Web界面

即便如此创制性是亟需且有价值的,可是切记不要离开传统(常规)的统筹太远。其实用户时时习惯了一些特定的页面布局或社团,那么些传统的设计方案之所以流行就是因为它们确实是实用的。

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

(2)将一些公用性的条规放在页面右上角

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

在用户跟你的界面暴发互动时,他们应该体验到实时的反映。
操作成功了?仍旧没得逞?啥地方变化了?

(1)在根本的交互之后要显得操作成功的指示新闻

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

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

消除所有盈余的等待阶段。倘使用户需要拭目以待,这就将负面影响降到最低。

(1)在加载环节拔取冷色调降低用户的兴奋度

紫色可以降低兴奋度,使人放松
。使用粉色的加载元素,用户会感知到更快的加载时间。点击这里精通更多。

(2)在遥远的等候阶段要掀起用户留下

(3)如若用户上传的文书不知足要求,在起来上传时就截留

(4)展现正在运行的任务

7、缩短用户对记念的依赖

相对不要强求用户记住任何工作(也不用期望用户能记住所有业务),把所有相关信息都举办来。 

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

制止内联标签在用户点击元素时熄灭。

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

(3)在运动字段后增长复制按钮

8、最小化眼球跳跃格局

保持所有互补性的多少在半空中上看似,缩短眼部的过往运动。

(1)合并一致性的数目来提携用户比较物品

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

9、要展现出什么样要素可点击或能够相互

用户应该可以分辨出哪位元素是足以并行的以及哪些与之相互。倘诺你熟习UX/UI设计,这您或许知道
Don 诺玛(Norma)n 在《设计情绪学》一书中指出的视觉信号、情景协理及通俗化。

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

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

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

您可以在PowerPoint或者Keynote中使用多种造型来构建出大部分这类图标。

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

在大部场地下,清晰的表述要胜过所有创制性和正规的表明。

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

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

(3)选用语义一致(合适)的颜料

水彩不调和的时候,用户就会在处理过程遭遇麻烦。现在, meetup.com 有很不利的易用性,但是他俩还在运用粉色来确认用户的出勤率(应该利用红色更契合人们的咀嚼)。

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

大多数用户通过浏览新闻来拍卖信息。你不应该排斥这种作为,应该迎合它才对,要让您的界面更有利用户浏览。

(1)保持段精简,优良重点术语

(2)把首要的音讯放在列表项的最先地方

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

(4)子标题单独写出来

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

12、最大化文本的可读性

引人注目地,对于一段文本音信来讲,其基本要义应该是可读的,下边是一些方可增强可读性的友善提示。

(1)在文书和其背景间设置显著相比度

在早晚背景上显得文本时要留意,你或许需要考虑通过叠加或歪曲的效用来优异相比度。比如在自家的头像背景上添加文字:

(2)正文的三头要保全左对齐

13、整个界面使用同一的设计情势

若果不同界面间使用不一样的设计情势,用户将会需要更多资金来熟知和读书,因而请在保持一致性布局和外观的前提下尽心尽力简化你的界面。

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

创办一个文档总计你的界面中每个元素的设计规范。

任何的元素包括:

颜色;

网格和布局;

尺寸与形态;

标签和语言;

导航;

表格;

列表;

链接;

语音和语调;

内需更多启发?点击这里查看更多

(2)保持导航菜单始终出现在同一职务

14、创制赏心悦目的视觉设计并维持视觉平衡

当你的计划性从美学的角度上更讨喜时,其可用性也会进步——这就是“赏心悦目实用效率”(Kurosu
& Kashimura,
1995
)。

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

(2)选取显明的字体

稍微人摘取要配合的字体时,他们时常会随便地搜寻一个看起来跟现有的一个字体类似的字体。但这实在是荒唐的点子。常常境况下,采纳相似性将意味可能会是一个不当。

反而,你应当深思。接纳那多少个可以形成分明相比的字体。假若您是个设计师新手,你可以挑选一个衬线字体和无衬线字体的重组。

四、最大化的卓殊所有用户和面貌

您的用户多是抱有例外目标的两样人群,而你要规划出可以兼容所有人使用的界面。

1、最大化的匹配用户的文化和技艺水平

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

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

要害有六个新手指引政策:

这四种办法刚好组合一个 2 x 2
的矩阵。使用下图来抉择出最契合你的界面的不二法门:

(2)在不打搅专家用户的还要添加工具指示来匡助新手用户

(3)使用卡片式的分类来构建消息架构

若果你想看看用户是哪些选用菜单分类的,请使用开放式的卡片分类方法。

假设您想看看用户是怎样将长存的元素社团成预先确定的类型,则使用闭合式的卡片分类法。

2、最大化的十分用户的工作流

用户会有两样的急需,你要对那么些不同的行事流定制界面。

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

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

其它的排序规则包括:

按字母;

按可用性;

按日期;

按距离;

按热度;

按价格;

按相关性;

按尺寸大小;

……

(3)让用户可控数据的数量

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

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

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

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

使您的界面对于残疾人平等适用,这样你的计划性也越来越全面,还可以制止可能波及到的法度问题。(1)在HTML5中使用语义标签

(2)使用多少个线索来传递消息

粗粗8%的男性都是红眼病(详见这里),永远不要只透过颜色来传递信息,最好总是提供额外的端倪。

4、对富有输入和极端意况要做最大化的匹配

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

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

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

(3)显示解决了搜索者的需要的结果

(4)搜索框能够兼容拼写错误、同义词和变体词

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

您的界面应该可以在其余条件下(设备、浏览器等)工作。

(1)针对不同的浏览器制定相应的命令表明

(2)在小屏设备上采纳单窗口形式

点击这里查看:125个优化网站可用性的小问题(下)

译自:http://www.nickkolenda.com/user-experience/\#ux-category1