首页 > 新闻资讯 > 十个经过验证的可用性技巧

十个经过验证的可用性技巧

24条评论
标签:
更多

增强网站可用性的技巧很多很多,今天要说的是一些从实际研究和报告中得到的、有科学理论证实的可用性技巧。这些报告包括与网站可用性和网站提高有关的眼球追踪研究、报告、分析以及可用性调查等。

 

1. “三次点击”原则未必正确

“三次点击”(Three-Click)原则:访问者在某个网站上点击寻找内容时,如果点击超过三次,会感到沮丧。

2001年,网页设计行业公认的专家Jeffrey Zeldman在他的书中指出三次点击原则“能够帮助站长建立更直观更富逻辑的网站结构层”。从逻辑上说这无可厚非。为了查找自己需要的信息而不停重复“点击”这个动作,的确会让访问者觉得挫败。

不过“三次”这个限制就有待商榷了。访问者会在三次点击后就突然放弃自己要查找的东西吗?

事实上当然不是这样。

User Interface Engineering上刊登的一项研究报告告诉我们:访问者并不会因为自己的点击次数达到3次或者更多(例如12次),就会放弃查找。“很少有人会在3次点击后就开始放弃”,报告中说到。

所以我们要记住的是,进行网站设计时,不要为了某些数字而特地减少访问者需要点击的次数,实用程度才是要关注的重点。如果你的用户界面简洁而方便,即使点上15次才能看到自己想要的信息,用户也不会不乐意。

2. F形结构更易于浏览

可用性研究领域的先锋人物Jakob Nielsen博士就网络用户的阅读习惯,对230多名参与者进行了一项眼球追踪研究。结果表明参与者在浏览网页内容时,呈现出F形的浏览趋势。

搜索营销公司Enquiro、Did-it与眼球追踪研究公司Eyetools在共同对Google搜索引擎的搜索结果页面进行眼球追踪研究后,也得出了类似结论。Google搜索结果的“金三角”现象正是由于搜索者视线对页面上侧、左侧的偏向,浏览范围整体呈F状。

对网页设计师和网站内容发布者来说,这些研究结果表明:你应该将更希望让访问者看到的信息安排在页面左侧,并采用符合F形的内容结构(如标题下紧跟段落或项目符号),以增加快速浏览型访问者看到这些内容的可能性。

3. 不要让访问者等待太久:给网站提速

站长们总是看到这样的警告:访问者都是没有耐心的,他们讨厌等待。当然,这也符合逻辑——谁喜欢漫无目的的等待呢?不过这样的警告有依据吗?页面加载速度究竟会不会对网站的访客造成影响?

微软的搜索引擎Bing进行了一项分析报告,目的是了解页面加载速度和各种表现指标(如访客满意度、平均每位访问者带来的收入、点击速度等)之间是否有联系。报告表明,页面反映速度每延长约2秒,将导致访问者满意度降低约3.8%、平均每位访问者带来的收入减少4.3%,点击率降低4.3%,等等。对像微软这样的公司来说,4.3%的收入损失可以相当于数百万的利润损失了。

事实证明,访问者的确是没有耐心的。过长的等待时间会降低他们的满意度,减少他们点击网页的机会。如果你想提高搜索引擎排名,那么页面访问速度就更重要了。

4. 让网页内容更易读

大多数互联网用户并不会真的“阅读”在线内容,Jakob Nielsen博士对自己网站上读者行为的研究也得出了这个结论。Nielsen博士的分析表明,读者只阅读某个网页上约28%的内容,网页上内容越多,读者阅读的内容就会越少。

要想增加读者最大程度看完你的页面内容的可能,可以使用一些让内容更易读的技巧,像使用高亮显示、标题、短段落、列表等。

5. 不要担心“the fold”和垂直滚动条

“Above the fold”是一个来自报纸版面的术语,指折叠起来的报纸展示在外面的内容,通常都是头版头条。就网站设计而言,“the fold”指的就是在不将页面下拉的情况下,显示在网页上的内容。有一种说法是网站也需要将所有主要内容显示在页面上方,让读者不滑动鼠标或滚动条就可以看到网站内容。

那么,长页面就不受欢迎吗?读者真的不会阅读“the fold”以下的内容?我们是不是要将所有信息都堆砌在页面顶端呢?

根据一份来自网络分析公司Clicktable的报告,页面的长度不会影响访问者查看页面下方的内容。(之前我们也介绍了,为减少长页面给访问者带来的不便,可以在页面最下方加上“回到顶部”按钮。)

CX Partners公司的Joe Leech的一份研究告诉我们,一家以用户为中心的设计公司表示,实际上页面上方的内容越少,访问者更容易浏览页面下方的内容。

6. 把重要信息安排在网页左侧

如果某种语言的阅读、书写顺序都是是从左向右的,那么这种语言文化下培养出的人也会习惯于从左向右看网页。所以这么多网页设计师把设计重点分布在网页左侧不是没有道理的。

Nielsen博士的眼球追踪研究以及从右向左语言类(如希伯来语和阿拉伯语)的网站都表明了这样的规律:人们更倾向将阅读重点放在所用语言的阅读顺序的起点侧。从右向左语言类网站应该把重点放在页面右侧,而从左向右语言类网站则应该把重点放在页面左侧。

7. 文本的空白区会影响阅读效果

文字内容的易读性可以提高读者对内容的理解力和阅读速度,同时还能够增加读者继续阅读的机会,降低跳出率。字体、字号、行高、背景色以及都可能影响阅读效果。

一份关于内容易读性的报告对20名参与者进行了阅读表现测试,这些参与者被要求阅读段落相同但页边空白、行间距不同的材料。测试结果表明,阅读没有页边空白的材料时,阅读速度更快,但对内容的理解力会下降。没有页边空白的内容会加快阅读速度,这是因为文字和段落更加紧凑,节省了眼球在行与行、段落与段落之间移动的时间。

这份特别的研究表明,我们对网站内容的排版会对用户体验产生极大影响。颜色、行间距、段落分布等细节都会影响到读者的阅读体验。

8. 小细节,大不同

如果时间紧促,我们进行网站设计时经常会更关注整体布局而忽略细节。本来整体布局中已经有很多需要考虑的元素了,那些细枝末节就更容易被忽略了。

用户界面设计专家Jared Spool和设计公司Flow都因为重新设计版面细节而获得了更多收入。

9. 不要把导航功能寄希望于搜索框

互联网用户希望他们访问的网站都有縊读0e航t落分布等细节都会用果r

-ref="ha。颏互联网索框强如浏览页仍p> <阅尝诌通果r信息而不停重复&ldqu需www.useit.com/alertbgiraffeforumblic/efault/fi/ 4/25/navig?|&)i-is- &nbs映速度当同佯没朄研究经帻ww. 报言类。 点们点F形的浏

标颌那么索桸说这旐索引擎此千万字而们奘诚对甌那么索桙内容弥补会对们善标题下紧绷织背果他枝朝、h3> 7多霁背果等。题下织页面首else停釬善栦其想覂 皶司Cl其它影响i> 结讵面仅则ef="ha嘯趙旐索引擑络Gerry McGovernp://www.le的多。颻你惑站串经正读剧问<络分枌的冁行;金影响? &nbs2003年。颻你惱更重要了问39%言籂ogl 年en博访空療ogl %旐索引擎犠惑站丆间宬司的地司Cl外部WordPress那么页靨等交媒徥等订 &站上宬司的<此瓎部影响img alt=获徆节验争比嘯趄了眱网t="" height="4seit.com/alertbsixrevis&)ie_eyettespace.h8" mssipace.h/10--on-research.html#comments'>24-studi00"报 type=height="4seit.comWordPress啦!|聚全球资源 typ编译

1. “三 style='heightannounclassp'>

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5667cript tclassr-block"> /a> < <-il/85sh司evan css="clear-block">增强网站可Top">
  • al'> #4eadent>ds_more">更多 Wordpgpopsv2.jshoushn/ 0913140362le="">互联nofoltowth 朜效;t减肥药> 24条评论 <-5667c='heightactiv_">/顆解i宨源!

    "bds_qzon/顆解i宨源!="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5670cript tclassr-block"> /a> < <-il/85sh司oddlass="clear-block">增强网站可Top">
  • al'> #5eadent>ds_more">更多 Word9696_clickg>互联nofoltowth疯子微/> 24条评论 <-5670c='heightactiv_">/p升大影响t萝元硵;t直呀t=""

    "bds_qzon/p升大影响t萝元硵;t直呀t="="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5674cript tclassr-block"> /a> < <-il/85sh司evan css="clear-block">增强网站可Top">
  • al'> #6eadent>ds_more">更多 57218mythcc>互联nofoltowth。鼘化> 24条评论 <-5674c='heightactiv_">收藏转载ogl哈"

    "bds_qzon收藏转载ogl哈="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5675cript tclassr-block"> /a> < <-il/85sh司oddlass="clear-block">增强网站可Top">
  • al'> #7eadent>ds_more">更多 Word96ya.n="/s联nofoltowth州seo> 24条评论 <-5675c='heightactiv_">会让的“性”亮昻错..."

    "bds_qzon会让的“性”亮昻错...="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5676cript tclassr-block"> /a> < <-il/85sh司evan css="clear-block">增强网站可Top">
  • al'> #8eadent>ds_more">更多 Wordqibo,chanpinpaihang_eye>互联nofoltowth祛斑产哊yeto 24条评论 <-5676c='heightactiv_">所栦毚丅读*宬司依赖那么页靫节尵设讬对网n博块变得"

    "bds_qzon所栦毚丅读*宬司依赖那么页靫节尵设讬对网n博块变得皬司皱网="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5677cript tclassr-block"> /a> < <-il/85sh司oddlass="clear-block">增强网站可Top">
  • al'> #9eadent>ds_more">更多 Worddandubli>互联nofoltowth德意o 24条评论 <-5677c='heightactiv_">/元关注章尵藏p> <<看t=""

    "bds_qzon/元关注章尵藏p> <<看t="="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5678cript tclassr-block"> /a> < <-il/85sh司evan css="clear-block">增强网站可Top">
  • al'> #s="tdent>ds_more">更多 Wordjxdype=ye>互联nofoltowth绍兴seo> 24条评论 <-5678c='heightactiv_">/养错导告章尥等3> <帬学习 alt="=里惑 告?|&)i=an c%2F %23 <-d="sea登录 <-5680cript tclassr-block"> /a> < <-il/85sh司oddlass="clear-block">增强网站可Top"> al'> #11eadent>ds_more">更多 Wordju>告-bieber-sho00"互联nofoltowthju>告 bieber> 24条评论 <-5680c='heightactiv_">*宬司依赖那么页靫

    "bds_qzon*宬司依赖那么页靫="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5681cript tclassr-block"> /a> < <-il/85sh司evan css="clear-block">增强网站可Top">
  • al'> #s2eadent>ds_more">更多 xuefuzi_eye"互联nofoltowth学夫子> 24条评论 <-5681c='heightactiv_">司放谷歌广用访隄

    7. 渊边节呵呵"

    "bds_qzon司放谷歌广用访隄

    7. 渊边节呵呵="bds_mor="content ">
  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5683cript tclassr-block"> /a> < <-il/85sh司oddlass="clear-block">增强网站可Top">
  • al'> #13eadent>ds_more">更多 Wordg96.cn>互联nofoltowth东

    纳斯> 24条评论 <-5683c='heightactiv_">收藏界面

    "bds_qzon收藏界="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5689cript tclassr-block"> /a> < <-il/85sh司evan css="clear-block">增强网站可Top">
  • al'> #s4eadent>ds_more">更多 Worda&)ijde=ye>互联nofoltowth永恒了基地> 24条评论 <-5689c='heightactiv_">/习业抁及15次。啚"

    "bds_qzon/习业抁及15次。啚="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5703cript tclassr-block"> /a> < <-il/85sh司oddlass="clear-block">增强网站可Top">
  • al'> #15eadent>ds_more">更多 Word6读性n="/s联nofoltowth第六空间> 24条评论 <-5703c='heightactiv_">/者对强.只阸p:/论ㅻ业.."

    "bds_qzon/者对强.只阸p:/论ㅻ业..="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5706cript tclassr-block"> /a> < <-il/85sh司evan css="clear-block">增强网站可Top">
  • al'> #16eadent>ds_more">更多 Word8lu.infi>互联nofoltowtht萂蓝> 24条评论 <-5706c='heightactiv_">求东东太,

    "bds_qzon求东东太,="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5709cript tclassr-block"> /a> < <-il/85sh司oddlass="clear-block">增强网站可Top">
  • al'> #17eadent>ds_more">更多 Wordseoshaik_eye"互联nofoltowth大连SEOaTT(未巧24条评论 <-5709c='heightactiv_">飘过

    "bds_qzon飘过="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5712cript tclassr-block"> /a> < <-il/85sh司evan css="clear-block">增强网站可Top">
  • al'> #18eadent>ds_more">更多 jayuhe=ye>互联nofoltowthJayuhaTT(未巧24条评论 <-5712c='heightactiv_">UID麎UIEㅱ网t=""

    "bds_qzonUID麎UIEㅱ网t="="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5719cript tclassr-block"> /a> < <-il/85sh司oddlass="clear-block">增强网站可Top">
  • al'> #19eadent>ds_more">更多 Wordtabshowe=ye>互联nofoltowthjunofeengaTT(未巧24条评论 <-5719c='heightactiv_">/如此啸/习界面

    "bds_qzon/如此啸/习界="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5736cript tclassr-block"> /a> < <-il/85sh司evan css="clear-block">增强网站可Top">
  • al'> #2="tdent>ds_more">更多 <20/ - 13:54 —.wordpress.la"> Word51shmr_eye>互联nofoltowth海整形> 24条评论 <-5736c='heightactiv_">/e的抾很 告?|&)i=an c%2F %23 <-d="sea登录 <-5742cript tclassr-block"> /a> < <-il/85sh司oddlass="clear-block">增强网站可Top"> al'> #21eadent>ds_more">更多 <20/ - 15:28 —.wordpress.la"> Wordniusili_eye>互联nofoltowth纽斯丽> 24条评论 <-5742c='heightactiv_">错/习

    "bds_qzon错/习="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5804cript tclassr-block"> /a> < <-il/85sh司evan css="clear-block">增强网站可Top">
  • al'> #22eadent>ds_more">更多 Word597waigua_eye>互联nofoltowthCF透视> 24条评论 <-5804c='heightactiv_">文章错面

    "bds_qzon文章错="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5825cript tclassr-block"> /a> < <-il/85sh司oddlass="clear-block">增强网站可Top">
  • al'> #23eadent>ds_more">更多 <24/ - 15:19 —.wordpress.la"> Word669559.cn>互联nofoltowthp> <官

    会> 24条评论 <-5825c='heightactiv_">容响i什下影剧

    "bds_qzon銹响i什下影剧="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录 <-5910cript tclassr-block"> /a> < <-il/85sh司evan css="clear-block">增强网站可Top">
  • al'> #24eadent>ds_more">更多 <27/ - 15:25 —.wordpress.la"> Wordludoung.ht>互联nofoltowthLudou> 24条评论 <-5910c='heightactiv_">/e的抾很of"

    "bds_qzon/e的抾很of="bds_mor="content ">

  • 告?|&)i=an c%2F %23 <-d="sea登录
    s="clear="nosubuttob="bdss="clear-block"rs"y_tordpress.la"> feeddefault/files/">订更多 feeddefault/files/"> sit_dedcspy.o"#">收听全球资源! 收听是e">更多
      6132 altowTran">rencyscrolty":sno
      WordPress主>456" es/wordpressLa/jquery.js?u"> s/gH_bl

      6.227http://www85特别aT->yle='heightgrid" Boriiv>
      i随机推荐章v gdTON Boriiv>

      1" Borit BUerm>

        24究wwm>
          >">/持续/客>