[译] 125 个优化网站可用性的小点子

2,124 阅读14分钟
原文链接: www.jianshu.com

一:控制用户的焦点和注意力

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 Norman 在《设计心理学》一书中提出的视觉信号、情景支持及通俗化。

(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