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 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,568评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1 92
  • 可用性工程阅读笔记 Nielsen 看这本书和写下这些笔记总共用了快两个星期的时间,这段时间事情真的有点多。。 从...
    Witty_28阅读 1,860评论 1 12
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139
  • 奥雷里亚诺第二寻找费尔南多: 家人正在为何塞·阿尔卡蒂奥准备行李: 奥雷里亚诺向庇拉尔·特尔内拉倾诉对阿玛兰坦...
    lhhan阅读 423评论 0 0