现代网站的可用性原则

分阶段设计、及早测试和经常测试可以提高网站的可用性。
现在的网站同质化太严重,只有提供最佳的用户体验才会胜出。

1.用户浏览网站的习惯:

1.以访客的目光浏览每个新页面,扫视某些文本,然后点击第一下让他们感兴趣或是大体上他们正在寻找的东西类似的链接。实际上,有大量网页他们几乎不看一眼。
2.当一个令人振奋备选项被发现时,用户就会点击。如果打开的新页面没有达到他们的预期,他们就会点击“后退”按钮,并继续搜索。

  • 用户重视质量和可靠性。如果他们看到高质量的内容,他们通常愿意忍受广告和糟糕的设计。
  • 用户习惯用扫视来浏览网站。他们通常会寻找一些帮助略过页面其他内容的固定点或锚点来分析网页。
  • 用户并非总会做出最佳选择。他们总是探寻如何快速浏览想要的信息,不会以一种直线的方式阅读网站,相反,会选择那些“既充分又令人满意的”信息。
  • 用户遵循他们自己的自觉。他们会靠自己的摸索而不是设计者提供的信息解决问题。
  • 用户希望能够进行控制。比如用户不希望看到出乎意料的弹窗;希望使用“后退”按钮,让他们返回刚才浏览的网页。

2.使用整体连贯的视觉设计

如果一个界面设计良好,用户将花较少时间去学习如何使用网站。就可以有更多时间去实际使用它。
虽然页面创意很重要,但太过于创新,导致用户第一眼就无法理解,让他们不得不重新学习那些他们本已熟悉的东西。引用一些通用的惯例,用户就不需要费太大脑力去学习如何使用。

3.固定元素属于固定位置

人们已经习惯了很多事物存在的方式,比如报纸,标题和日期出现在顶部,重要标题和作者姓名出现在报道的附近。类似的,网页也一样,固定元素有固定的摆放位置。

当人们访问一个网站时,凭直觉就能理解网站的惯例,知道元素该如何操作,可以大大提高用户的效率。达到用户的某种预期,对网站设计来说是非常重要的,可以使用户理解网站的工作原理。

网站设计的一般惯例:

  • 【返回主页】一般都在左上方显示,不管是什么页面。
  • 【宣传语】和【二级标题】紧靠在【网站标题】的下面,宣传页可以会迅速地传达网站的用途。
  • 【搜索框】通常会出现在网站的右上方或中上方。
  • ……

4.搜索是简单的

以前的搜索,受限于技术的原因,为了得到一个满意的结果,需要设置一堆搜索参数。
现在的搜索,如谷歌、百度,只需用户输入一些内容,点击搜索按钮,网站就能决策出用户想要的结果。

一个输入框+一个搜索按钮,用户不需要思考就知道该如何操作界面。

input输入框外层是一个更大的div,让用户在扫视网页的时候第一眼就认得出这个元素。
不显示高级搜索选项会让页面更友好,因为高级搜索会让用户感到困惑,研究表明,大多数用户不知道该如何使用高级搜索。

5.链接要像链接

  • 不要让用户猜测一个元素是否可点击。
  • 颜色和下划线是链接最易识别的形式。
  • 可点击的元素应该突出。
  • 链接可以有不同状态,悬停hover等。

6.使注册表单尽量简洁

  • 通常注册表单单独成一个页面,防止分散用户填写表单的注意力。
  • 输入标签放在左侧时,通常右对齐。
  • 垂直排列文本框要比水平排列好一些。
  • 注册表单不包含分散注意力的内容,通常不包含悬浮、动态和聚焦等效果。
  • 提示放在输入框的下边或右侧。

7.“返回首页”链接

页面很长的网站,设置【返回顶部】按钮,可省去鼠标滚动的操作,节省时间。

8.链接应该在同一窗口打开

从可用性角度考虑,在新窗口打开链接会破坏UI设计的一条基本原则:用户应该始终能对页面进行控制。用户需要界面具有连贯性,用户需要知道他们的交互活动不会被打断。用户希望系统有可预见性,知道系统会做出什么反应,来满足用户的控制。

9.需要注意的可用性检查点

1.不要改变用户窗口的大小。认为自己比用户更清楚软件环境该如何配置是非常不合情理的。
2.不要使字体太小。防止阅读困难。留白来使每行字符在50-85个之间。
3.链接文本要清晰。链接文字应该用来描述所指向的目的地,避免含糊的描述。
4.去除死链接。不要把用户引入死路。
5.校对。确保文字在显示时不会出现问题。
6.检查功能。测试每个功能是否达到预期的结果。
7.使表单尽可能简洁。

  • 选择合适的表单元素(选择按钮、复选框、输入区域、文本区域)
  • 提供充足的空白和边距以便输入内容
  • 移除不必要的区域
  • 为每个输入区域提供描述性标签
  • 有必要时文本框可以添加提示信息
  • 不强迫用户使用严格的输入格式
  • 提供有用的、信息补充的错误提示信息

8.Javascript不起作用时展示效果也要优雅。通过测试,确保这种情况仍然能完成服务器端的有效检验。
9.不要忘记保护性设计。如404页面,同过一个有用的404页面把用户引导回来,可以导向主页,也可以向用户推荐感兴趣的页面。
10.提高网站性能。减少HTTP请求、尽可能使用CSS sprite、优化网站图片、压缩Javascript和CSS文件,这样网页可以载入更快,占用更少的服务器资源。
11.提供联系方式。提供联系方式可以增加用户对网站的信任。

10.重要的易用性法则和原则

7 ± 2原则
人脑处理信息的能力是有限的,通过把信息分成块和单元来处理复杂问题。研究发现,人短期记忆每次能处理5-9件事情,所以经常被作为把导航菜单元素限制在7个以内的依据。

2秒钟法则
这是个松散的原则,用户在使用系统时等待反应的时间不应该超过2秒。

3次点击法则
如果用户3次点击后仍然没有找到他们想要的信息,他们就会离开网站。突出了清晰的导航、符合逻辑的结构和易于理解的网站层级的重要性。大多数情况,与点击次数是无关的,如果用户始终知道自己现在在哪、从哪里来、到哪里去,对系统如何工作有个全面的理解,那即使点击10次也没问题。

80/20法则(Pareto定律)
Pareto定律也称为“少数关键定律”或“因素稀疏定律”,表明80%的结果,由20%的原因产生。这是商业中一条经典的经验法则(80%的销量来自20%的用户),对20%的用户、活动、产品或过程的定位,能为你带来80%的利润,使你对它们的注意程度最大化。

界面设计的8个黄金法则

1.努力做到连贯;
2.允许频繁使用系统的用户使用快捷方式;
3.提供信息反馈;
4.为关闭这一动作设计对话框;
5.提供简单的设计处理;
6.允许简单的撤销操作;
7.提供控制感,支持内部控制点;
8.降低短期记忆载荷。

Fitt`s定律

提供根据目标的距离和大小,预估除快速移动到目标区需要的时间。在定位目标区时,存在一个速度和精度的平衡,目标越小或距离越远需要的时间更久。
如鼠标从A点移到B点的表现,即内容越容易点击到,它的点击率越高。

到金字塔法则

把摘要放在文章前面的一种写作方法。这种方式使用了新闻业中著名的“瀑布效应”——新闻作者视图让读者即刻知道他们要报道的主题。
文章以结论开头,接着是关键词,最后是次要的背景资料等。
网络用户需要即时的满足,到金字塔对于提高用户体验非常重要。

11.给用户一个5万英尺的视角来看你的程序

用户第一次访问网站时,可能会感到无所适从,除了有效的展示信息,还应该仔细考> 虑一些组织内容的方法。

信息架构(Information Architecture,简称IA)
信息架构就是对网站的内容进行组织,以达到最佳的信息传递效果。

12.心智模式和象征物

心智模式又叫心智模型。所谓心智模式是指深植我们心中关于我们自己、别人、组织及周围世界每个层面的假设、形象和故事。并深受习惯思维、定势思维、已有知识的局限。

考虑一下用象征物来展现你的服务。象征物是一种介绍你的产品或服务的捷径,几乎不需要解释,好的象征物已经把你的产品或服务和用户头脑中的信息(或心智模型)结合起来。

如购物车是一个很方便的象征物,它可以在你浏览网站的时候保存你购物的列表。跟现实中在商场购物的形式一样。

13.组织网站的内容

人们脑中会有日常生活中事物如何发挥功能的“路径图”,如早上听到闹钟后起床、吃早餐、读报、洗澡、穿衣,如何开车去上班。

  • 把内容分成语义相关联的组
  • 利用元数据优化网站搜索结果(如一篇博客的元数据包括作者、发布日期、浏览次数和评论数等)。允许用户用元数据对网站的内容进行搜索和排序,这将为他们提供可以操作的内容列表,进一步逼近他们的目标。

如视频网站的“精选”,“热搜”视频分类。

14.提供站点地图

站点地图可以是一个页面或栏目,以直观的方式展示网站上可以访问的页面子集。

15.使用帮助

最直接的向用户介绍网站的方式。
不过一般用户会忽略用大块文本对服务进行描述的使用帮助,可以有其他方式来表现:

  • 白板
    白板提供一种可视化的引导用户的方法。
    展示一张图片,它显示了在包含数据的情况下你的网站看上去是什么样子。用户看完之后就知道该怎样与网站进行交互。
  • 产品介绍和内嵌帮助
    可以考虑把产品介绍融入到界面的各个部分。比如多栏布局,使网站包含这类文档变得比以往更容易。用户对某个功能有疑问,他们不需要离开当前页面就可以获得答案。

16.建立信任

正面的用户体验等同于对网站本身的信任。
如何建立信任?
想一下生活中所有你信任的东西,问自己为什么信任它们。考虑一下可信度、透明度、慷慨程度。
尊重你的用户,显示出你对他们的信任和专注的感激之情。

17.不要让用户毁掉自己的用户体验

用户会测试你的应用程序的极限:

  • 如果用户可以删除内容,请提供一个可恢复的功能。
  • 如果用户可以再输入信息的时候关闭浏览器,在没有询问之前不要抛弃他们的数据。

要考虑用户不会按照预期的方式使用网站,因此尽量不要使结果无法让人接受。

18.不要要求太多而给予太少

应该遵循一条原则:不要破坏任何事情。
任何作为用户浏览器一部分的功能,都不能偏离用户使用网站的经验。

  • 不要屏蔽用户的“后退”按钮。
  • 不要限制用户为网站加书签的功能。
  • 不要在非必要的情况下修改用户已浏览和未浏览的链接的颜色。

19.及早测试、经常测试

所谓的TETO原则应该被应用到每一个设计项目,因为可用性测试经常会为布局的问题和难题提供至关重要的参考。
测试不要太晚、测试不要太少,也不要为错误的理由进行测试。测试又有正当的理由,大多数设计决定都是局部的(理解这一点很重要)。你不能准确无误地回答一个布局是否优于另一个布局,因为你需要从特定的视角进行分析(要考虑需求、股东和预算等因素)。

一些需要记住的要点

  • 根据Steve Krug的观点,测试一个用户一定要比一个用户都不测试好,在早期测试一个用户要比在后期测试50个用户好。根据Boehm第一定律,错误最常发生在需求阶段和设计阶段,越晚发现这些错误,修改的代价越高。
  • 测试是一个反复的过程,这意味着你设计一些东西,测试它,修正它,然后继续测试它。你可能会发现一些在第一轮测试时被忽略的问题,因为用户的注意力已经被其他问题吸引。
  • 可用性测试总是会产生有用的结果。他们既指出了功能上和交互性上的错误,也指出了主要的设计瑕疵,它们从以上这两个方面为你的设计提供了有益的见地。
  • 根据Weinberg定律,一个开发者不适合测试自己写的代码。这也适用于设计师。在为一个网站工作了数周之后,你已经再也无法凭借肉眼识别任何问题。你知道一个网站是如何构建的,因此你非常清楚它怎样工作。你具有独立测试者和访客所不具备的背景知识。

底线:如果你想做一个非常棒的网站,你必须进行测试

20.最后需要考虑的事情

  • 虽然创意是个好东西,但是不要让创意盖过了设计本身。不要把界面设计的太过新颖,以至于一般的网络用户难以意识到该如何使用它。
  • 创建可以预见的网站,设计用户期望的东西。不用试图使用未来网站的特色,除非它对完成旧的任务具有明显的优势或更加直观。
  • 用户会快读浏览网页,不会停下来看那些设计者花了很多小时精心雕琢的细节。如果你能够使他们更加容易地从一处跳转到另一处,或帮助他们找到自己需要的东西,他们会更加欣赏你的工作。记住,很多用户仅仅希望把使用网站当做日常事务的一部分。
  • 在投入视觉设计之前,花一些时间规划你的用户将如何使用网站(界面设计),他们会如何在网站上进行导航(导航设计),以及网站将会如何与他们进行交流(信息设计)。
  • 总是通过路标告诉用户他们在网站中的位置。知道自己方位的用户更容易建立目标感。
  • 沿用导航管理。如果用户不清楚他们能够去哪里,在进行导航的时候会遇到困难。在设计导航的时候,不要停在第一个层级:为每个网页都设计全局导航、本地导航和上下文导航。通过让内容按语义关联进行分组,来帮助用户找到他们正在寻找的内容。
  • 总是预想用户不会按你的预期使用你的网站。设想一下他们会如何误用你的网站,不要让误用造成难以接受的后果(比如,在没有提供“恢复”选项的情况下删除一个文档)。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容