点石成金访客至上的网页设计秘籍

2017-11-4 8008

第1章 别让我思考

Krug可用性第一定律

别让我思考

设计的重要原则:别让我思考。也就是当看见一个页面时,不言而喻、一目了然,不需要花费时间去思考。

创建网站时,就是要把问号去掉

强迫思考的地方

网页上每项内容有可能迫使我们停下来,进行不必要的思考。例如很酷、自以为很聪明的名字、生僻的词。

内容容易出现的问题

1、词、文字(越简单明确越好)

2、链接图标、点击按钮(越突出越好,文字链接是差选择)

如果你做不到让一切不言而喻

不言而喻:只要看一眼就知道是什么内容,知道如何使用它

如果页面复杂,做不到,那就尽量让用户只花一点点时间去理解,让它自我解释。

为什么它这么重要

有些网站做得很差,但是还是很多人使用。网站并不是那么容易被找到,访问者没有类似的网站。

就像12306,要么做到用户必须使用。要么创新,独一无二,没有同类网站,才敢忽略用户体验,不怕用户跑掉。

那么,到底是为什么呢

大部分人会花比我们相信中少很多的时间去浏览网页。如果要让网页有效,必须在用户第一眼看见时将自己展示出来。

第2章 我们实际上是如何使用Web的

扫描,满意即可,勉强应付

大部分是在每个页面上瞥一眼,扫过一些文字,点击第一个令他们感兴趣的或者大致符合他们寻找目标的链接。

如果想设计有效的网页,必须接受关于网络使用情况的三个事实

1、我们不是阅读,而是扫描

人们会花很少的时间去阅读大部分的页面,只是扫描一下,寻找能吸引注意力的文字,也有例外:新闻、产品描述等页面

为什么扫描:

·我们总是处于忙碌之中:节约时间

·我们知道自己不必阅读所有内容

·我们善于扫描

2、我们不作最佳选择,而是满意即可

大多数时间,我们不会选择最佳选项,而是选择第一个合理的选项,这就是满意策略。

为什么用户不寻找最佳方案?

·我们总是处于忙碌之中:寻找最佳策略很难,需要的时间很长,满意策略效率更高

·如果猜错了,也不会产生严重的后果:在网站上做错误选择的后果通常只是点几次后退

·对选择进行权衡并不会改善我们的机会:在设计不佳的网站中,花费精力去做最佳选择并没有用,还不如猜第一个页面,不行就退出。

·猜测更有意思:猜测速度会更快

3、我们不是追根究底,而是勉强应付

为什么会这样?

·这对我们来说并不重要:原理对于用户不重要,只要能正常使用就好

·如果发现某个事物能用,我们会一直用它:发现某个事物能用,我们不太会找一种更好的办法,偶尔遇到一种更好的办法,我们会换更好的方法,但很少会主动寻找更好的方法。

如果人们勉强应付的时候这么对,他们有没有弄明白?答案很重要:因为有时候可以勉强应付,但它的通常效率不高,容易出错。

弄明白好处:

·更容易找到自己需要的东西,无论对用户还是你都好

·他们会更容易理解你的网站提供的服务-不止是他们偶然看见的东西

·你更可能引导他们到网站上你更希望他们看见的地方

·在你的网站上,他们会觉得自己更聪明,更能把握全局,会让他们成为老用户。只要有一个让人们感觉更好的网站,他们就会离开这种让人勉强应付的站点

第3章 广告牌设计101法则

为扫描设计,不为阅读设计

需要注意以下5个重要方面,来保证他们尽可能的看到并理解了你的网站:

·在每个页面上建立清楚的视觉层次

·尽量利用习惯用法

·把页面划分成明确定义的区域

·明显标识可以点的地方

·最大限度降低干扰

建立清楚的视觉层次

·越重要的部分越突出:最重要的标题要么字体更大、更粗、颜色更特别

·逻辑上相关的部分在视觉上也相关:把相近的内容分为一组,让在同一标题下,采用同样的样式

·逻辑上包含的部分在视觉上进行嵌套:如:一个分类的标题出现在某本具体书籍书名的上面

习惯用法是你的好帮手

比如设计师们可以安心的使用一个购物车图标,而不必加上“购物车”的文字说明。

关于WEB上的习惯用法:

·他们非常有用:用户访问更容易

·设计师通常不愿意利用它们:

当你有一个新的想法,且每个人看到都说好时再进行创新,否则请尽量利用习惯用法。

把页面划分成明确定义的区域

把页面划分明确定义的区域很重要,因为这可以让用户很快决定关注页面的哪些区域

明显标识可以点击的地方

明确的标识哪些地方可以点击,哪些地方不能点击,这很重要

小三角剪头也是WEB习惯用法,指向可点击的文本。

降低视觉噪音

·眼花缭乱:所有内容都很抢眼

·背景噪声:多余的间隔线

第4章 动物,植物,无机物

为什么用户喜欢无须思考的选择

有设计师和可用性专家一直在争论,有些站点规定,到达某页面需要点击的次数永远不能超过指定的次数。

点击多少次都没有关系,只要每次点击都是无需思考,明确无误的选择。

第5章 省略多余的文字

不要在Web上写作的艺术,必须正确处理的几个方面

欢迎词必须消灭

那些好的词,根本没有有用的信息,只是一个劲的说自己有多好,而不是描述什么东西能让我们感觉更好。

WEN用户没有时间闲聊,更喜欢直截了当,应该尽量减少欢迎词,能减多少就减多少。

指示说明必须消灭

多余文字另一个主要来源就是指示说明。当指示文字变得完全没有必要时,则应把它全部去掉。

第6章 街头指示牌和面包屑

设计导航

原则:明确、简单、一致

网络导航101法则

·你通常是为了寻找某个目标。

·你会决定先询问还是先浏览:在搜索框里输入想要找的东西,然后得到一堆链接,指向目标可能所处的地方。

·如果选择浏览,你将通过标志的引导在层次结构中穿行。

·最后,如果找不到想要的东西,你会离开。

无法承受的浏览之轻

·感觉不到大小

·感觉不到方向

·感觉不到位置

被忽略了的导航用途

·它给了我们一些固定的感觉

·它告诉我们当前位置

·它告诉我们如何使用网站:从哪里开始,能进行哪些选择

·它给了我们对网站建造者的信息

WEB导航习惯用法

持久导航应该包含5个元素:站点ID(o571),回主页的方式(home),搜索的方式(search),栏目(出租中心、出售中心...),实用工具(关于我们、联系我们...)

我说的是每一页(不是所有的页面都要使用持久导航)

·主页:和其他页面不一样,它要承担一些不同的任务,遵守一些不同的承诺。这样有时候意味在主页内不必使用持久导航。

·表单:表单页面不需要持久导航,否则造成不必要干扰。

现在我知道我们不是在Kansas

实用工具:持久导航上只能放置4-5个实用工具

持久导航中最重要的元素之一是把我们送回主页的按钮或链接

提供搜索:提供选项时,以便指定以何种方式搜索我们想要寻找的内容,当得到的结果太多的时候,就需要缩小范围。

页面名称

·路牌标志很大

·它们在合适的位置

·每个页面都需要一个名称

·页面名称要出现在合适的位置

·名称要引人注目

·名称要和点击的链接一致

面包屑

面包屑(层级菜单)告诉你当前的位置

·把他们放在最顶端

·使用“>”对层级进行分隔

·使用小字体

·使用了文字“你在这里”

·将最后一个元素加粗

·没有把它们用作页面的名称

来做后备箱测试

怎么判断页面设计良好:

·这是什么网站?

·我在哪个网页上?

·这个网站的主要栏目有哪些?

·在这个层次上我有哪些选择

·我在导航系统的什么位置

·我怎么搜索

第7章 首先要承认,主页不由你控制

主页要完成的任务:

·站点的标识和使命:要告诉人们这是什么网站,做什么的

·站点层次:包括内容,包括功能。这项工作通常由持久导航来处理

·搜索:设置一个突出显示的搜索框

·导读:

·内容更新:网站的成功取决于用户是否经常回来访问

·友情链接

·快捷方式

·注册

·让我看到自己正在寻找的东西

·......还有我没有寻找的

主页要回答4个问题:

·这是什么网站?

·网站上有什么内容?

·我能在这里做什么?

·为什么我应该在这里,而不是在别的地方?

主页导航可以不一样

可以不同,但也不要相去甚远。重要的是栏目名称保持不变,同样的文字和分组。同样是字体和大小。

·栏目描述

·不同的方向:可能是垂直方向

·用于识别的空间更多

下拉框的问题

·你必须把他们找出来

·他们难以扫描

·他们不好控制

第8章 农场主和牧牛人应该是朋友

为什么大部分关于可用性的争论是在浪费时间,如何避免这种情况?

使用测试的方法,必须使用团队的集体技巧、经验、创造力和判断力来创建一些版本,然后仔细观察人们对它的看法和使用的方法。

第9章 一天10美分的可用性测试

让测试简单——这样你能进行充分的测试

关于测试的几个事实

·如果想建立一个优秀的网站,一定要测试

·测试一个用户比不做测试好一倍

·在项目中,早点测试一位用户好过最后测试50位用户

·人们对招募用户代表的重要性估计过高

·测试的关键不是要证明什么或者反驳什么,而是了解你的判断力

·测试是一个迭代的过程

·没有什么比现场用户的反应更重要

应该测试多少用户?

理想数量应该是三个,最多是四个

测试用户选择?

·实际上,大部分用户是初学者

·设计出的网站只有你的目标群体能使用,这通常并不是一个好主意

·专家通常不会介意对初学者来说很清楚的界面

·如果你的网站几乎只由某一类用户使用,而且这些阵营有着完全不同的兴趣和需要

·如果使用你的网站需要专门的领域知识

招募测试要注意的问题?

·提供合理的激励

·邀请要简单

·避免对网站进行预先讨论

·别不好意思请朋友和邻居帮忙

在哪里测试?

需要一办公室、电脑、网络、摄像机(方便不干扰用户使用而记录用户实际操作情况)

由谁来引导测试

选择有耐心、冷静、善于倾听、公正的人

谁应该进行观察?

可以鼓励任何人参与

测试什么,什么时候测试?

·“理解”测试:看他们能否理解这个网站,理解网站的目标、价值主张、组织方法、运行方式等

·关键任务测试:让用户完成一些任务,然后观察他们是怎么做的

立刻回顾测试结果

·给问题分类

·解决问题

常见问题

·用户不清楚概念

·他们找不到自己要找的字眼:分类不符合用户的习惯,没有使用他们期望的名字

·内容太多了:没有重点层次

第10章 可用性是基本礼貌

为什么你的网站应该让人尊敬

好感储存器

每次进入一个网站时,都会有一个好感储存器,在遇到的每个问题都会降低好感储存器的高度。当好感耗尽,用户就可能会离开网站

关于好感储存器,注意

·它因个人特质的不同而不同

·它依情况而定

·你可以重新填满它

·有时候一个错误就能清空它

降低好感:

·隐藏我想要的信息:电话号码、运费、价格

·因为没有按照你们的方式行事而惩罚我

·向我询问不必要的信息

·敷衍我,欺骗我

·给我设置障碍:必须看很长的FLASH动画进入等

·你的网站看上去不专业:凌乱

提高好感:

·知道人们在你的网站上想做什么,并让他们明白简易

·告诉我我想要的

·尽量减少步骤

·花点心思:保证信息准确、组织良好、表达方式清楚

·知道我可能有哪些疑问,并且给与解答

·为我提供协助,例如打印友好页面

·容易从错误中恢复

·如果不确定,记得道歉

第11章 可访问性、级联样式表和你

正当你觉得已经完成的时候,一只猫掉了下来,背上捆着涂了奶油的面包

现在就能正确实施的五件事

1、改正让所有人感到混淆的可用性问题

2、读一篇文章

3、看一本书:关于WEB可访问性的书

4、开始使用级联样式表

·对格式的控制没有限制

·浏览器之间的一致性

·序列化你的内容

·允许你重新定义文字大小

5、去摘够得着的果子

·为每张图片增加ALT文本

·让你的表单配合屏幕阅读器

·在每页的最前面增加一个“跳转到主要内容”的链接

·让所有的内容都可以键盘访问

·如果没有充分的理由,不要使用javascript

·使用客户端(而不是服务器端)的影像地图

第12章 救命!老板想要我

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

推荐阅读更多精彩内容