`
习惯在马桶上思考
  • 浏览: 114571 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

10个超实用经验提高网站的用户体验

阅读更多

   我想每个人都会赞成,网站的可用性是它能否受欢迎的一个重要方面,无论你进行的是公司网站、在线商店还是其他,让你的界面变得容易操控,使用时令人舒服是关键,近几年已经有很多针对网站界面优化的研究,而且这些研究的成果对于提高网站可用性是非常有价值的。现在这里有10个超实用的经验分享,相信我,这些建议会极大地提高你那个网站的用户体验,让用户爱上你的网站!

  这是一篇09年的老文章咯,但是这些技巧和经验并没有过时,所以我们依然翻译出来,推荐您仔细阅读。

  一、善用人物配图,使用户专注于你想呈现的

  当进入你的网站,我们会本能地关注网站上人物图片中的脸和眼睛,这倒是为我们提供了一个想法,是不是可以用人物配图吸引小伙伴的注意力呢?当然,但这仅是第一步,我们还可以这样做,你瞧,是不是大不相同!(见下图)

  这是第一步:

20090316-dmwcj8wqr8egihdihssm4xm1

  「根据眼球追踪的研究,我们先会关注这个直望着我们的小萌孩」

20090316-ppjuax3s371pecmbt9cuakwanh2

  「现在,小萌孩是仰望着右边文字的,与此同时,你是不是也把注意力转移到右边的内容呢?」

  这里是原始的研究报告 → usableworld.com,实践证明,如果其他人往某个方向望,那么人们也会跟着望同一个方向(参照脑筋急转弯:大街上有,有一个人仰着头站着。旁边的人以为天空中有什么好看的东西,都跟着往天上看,可天空中什么都没有。你猜那人怎么说?答案附最后..)基于这个特点,我们可以利用人物配图来呈现你想要让用户关注的内容。

  二、表格的最理想位置

  一个来自UX Matters 的研究发现,最理想的表格置放应该是由上至下,因为人们通常会适应垂直的表格,这样通常易于阅读与填写。

  三、人们对网站的信任度取决于设计质量

  第一印象很重要!栗子:

fever3

  这是一个展示手机应用的网站,可能我们不知道这个名为”fever”的APP究竟怎么样,可是看到一个这么干净圆润的用户界面,对它的好感理应大大提升了。

  一个有趣的研究发现,人们判断一本书的根据往往是它的封面…同样的,一个网站的布局、一致性、配色、排版等都在影响你的用户,他们会以此判断你将提供的东西。因此,你要确切保证网站的风格不仅要干净漂亮,更要适合你的受众用户。

  除了网站设计,其他影响用户对你的网站信任度的还有:网站内容的质量、出错的次数、更新的频率、操作的便捷性和网站站住的人品。

  四、大多数用户不会滚动浏览

  一份来自Jakob Nielsen的研究显示(研究在此 → nngroup)仅仅有23%的用户第一次进入网站时会滚动浏览,这意味着有77%的用户只会看那个区域(无须滚动的可见页面),更重要的是,只有16%的用户会在第二次访问时继续滚动浏览。该数据突显出,将关键的内容放在首页的突出位置是多么的重要!

  不过,这并不意味着你要填满页面的上部区域,全部塞在那儿只会让内容难懂,当用户看到太多的信息时,他们不知道该从哪里开始看。

  让我们看看优秀范例:

basecamp4

  basecamp 在这折叠线以上(768px高),网站显示了一个巨大的截图,标语、价值主张、呼吁行动、客户列表、视频以及显示特点的小图。

  这些内容对于网站主页是至关重要的,所以我们需要提供的核心要点有:

  网站的名称

  网站的价值主张(即用户能得到什么,有什么好处,如何使用它)

  与用户相关的导航设计

  然而,自那时以来,用户习惯发生了很大的改变,最近的研究证明用户很喜欢视差滚动的效果,他们宁愿滚动到页面底部而不是翻页,对很多用户来说,最重要的信息也不须置放在首页,所以有个好主意,我们可以利用留白空间的方式将页面分成几段。

  五、可以独特,但不要难懂

  有一个独特设计的网站当然是好样的,但当你需要提高网站的可用性时,建议你最好遵守大多数网站采取的方式。因为当人们浏览一个新网站时,他们会启动自身的「经验模式」去理解这个网站的使用,例如:蓝色是链接的颜色,网站LOGO的位置、导航标签的下拉行为等。

google5

  谷歌之所以所有的链接都是蓝色是由缘由的,这个颜色适合大多数用户,也便于辨认。

  链接该选什么颜色?

  颜色够深/浅,能够与背景色有强烈地对比,易于区分

  不能与文字颜色相同,所以你可以看到,没有链接是黑色的

  研究证明,选用蓝色的链接是最好的,因为浏览器默认的链接是蓝色的。选择其他颜色也没问题,但可能会影响用户找到它

  六、理想的搜索框宽度是27个英语字符

  什么是理想的搜索框?有的,Jakob Nielsen针对可用性进行了一个搜索框宽度的研究,发现大多数搜索框都太短了,搜索框太短带来的问题是尽管你可以输入足够长的字符,但只有一部分文本字符可见,这导致你很难检查或者编辑。

  这项研究发现搜索框的平均长度是18个字符,27个字符的搜索框可能会太长而很难适应,不过,它能满足90%的搜索。记住,你可以用像素和点设置宽度,而不仅仅是em。小技巧,一em的宽与高对应一个英文字符”m”,所以你可以以此来检测搜索框是否有27个英文字符的宽度。

google6

  谷歌的搜索框宽度绰绰有余

apple7

  相对而言,苹果就力不从心了。

  通常来说,搜索框稍长比稍短好,因为用户可以随时查看、核实、修改。这条经验非常简单,但是很不幸的是经常被人们忽略。其实在输入区域的一点改进也会带来更好地用户体验

  七、留白设计带来更好的阅读

  大多数设计师都知道白色空间在段落、图片、按钮以及其他项目中的价值,白色空间可以让各个项目自由地呼吸。当然,我们也可以通过空间的排列(组合、减少)来制造白色空间。对于在页面展示内容间的联系、建立层级关系非常重要。

  参照:我们为何要在设计中重视”留白”

netsetter8

  注意:文本的边缘,段落的间隔这些细节都给阅读带来了舒适的感受。

  白色空间让页面内容的可读性相应提高。一个04年的研究表明,如果在段落与左右边缘间能够卓越地地利用留白,至少提高20%的阅读舒适感。读者可以更加容易地专注于阅读。

  八、不必进行广泛的用户测试

  Jakob Nielsen的研究显示仅需要5个用户就可以发现你的网站85%的问题,如果有15人就能找出接近全部的问题。

usertests9

  第一或第二个用户会发现最大的问题,其他人会确认这些问题并且发现其他小问题,只有2个用户能找到你网站50%的问题,这意味着其实你不需花很多钱去得到一个好的结果。当你开始测试时,你已经有巨大的收获了。任何小小的测试都比没有好

  九、有多少信息,就有多少青睐。

  大多数介绍产品的页面总是缺少足够多的信息,有些仅仅能让用户扫一眼。这是个必须正视的问题,因为产品的信息将帮助人们忖度购买的决定。在可用性的研究中,贫乏的产品信息这个失败的案例占据了8%甚至10%的网站。

ipod10

  Apple提供了详细的产品介绍页面,包括产品特点及规格等。请注意,不要让一点难懂的技术细节停留在介绍页面,给消费者看的懂的。

  参照:推荐!令人为之动容的互联网文案

  提供关键的信息,而不要臃肿,让你的文案易于吸收。通过段落间隔和副标题使介绍能够一扫明了,给你的添加足够的图片,且不要使用行话,否则你的用户看不懂。

  十、大多数用户会无视广告

  Jakob Nielsen的研究表明大多数用户会直接无视广告的存在,如果他们在全神贯注地阅读文章,他们不会被广告转移注意力。

  这条经验要告诉你的是,人们会无视广告,并且与任何看起来与广告类似的东西,即使它不是广告。一些颜色风格强烈的导航会让他们误以为是广告,所以请仔细注意这个经验。

flashden11

  在左侧的方块图其实不是广告,但是看起来与广告很类似,所以可能会被一些用户误解。

  所以,广告看起来最好能像文章,那样人们才会去点击它,也能给你带来更多的收入,但无疑这将会损失你的用户信任度,当他们点击广告时他们以为会是文章,结果被你欺骗。因此当你决定这样做之前,考虑下这个交易:短期的利益与长期的信任。

  干货福利:

  在这些年,我们的杂志组为了确定最佳地设计方案,研究了很多案例。到目前为止,我们已经发现了很多有趣的模式,是的,它们可以作为你的下个设计项目的指导方针,希望这些标准能予你方便。

  行高(px)÷ 英文字符大(px)=1.48

  1.5通常被认为是最经典的排字方式,我们的研究决心为这个方式点个赞。几乎没有网站使用低于它的,那些高于这个标准的也会越来越少,特别是当你看完这篇文章后。

  行长(px)÷行高(px)=27.8

  行的平均长度是538.64px(排除边缘),对于大多数还采用12px到13px大小字体的网站来说,这是最完美的安排。

  最佳的字/行是55——75

  根据经典的排版书籍,最佳的字/行应该是55到75,但现在流行的75——85,童鞋们自由斟酌(英文字符)

  注册页面通常很简单,是为了避免人们分心

本文链接:http://www.pmtoo.com/opinion/2013/1011/3757.html
关键字:用户体验|

分享到:
评论

相关推荐

    超级实用计算器谢谢大家的支持

    五、用户体验与下载推荐 "超级实用计算器"以其全面的功能和友好的用户界面赢得了用户的广泛好评。其简洁的设计使得用户可以快速上手,而丰富的计算选项则能满足不同层次的需求。无论你是学生、教师,还是科研工作者...

    超酷超实用javascript特效100个

    "超酷超实用javascript特效100个"这个资源包显然包含了众多创新且实用的JS代码示例,旨在帮助开发者提升网页用户体验,增强网页的视觉吸引力。 在JavaScript的世界里,特效主要分为几大类:动画效果、交互效果、...

    100个前端超经典实用的案例汇总

    在前端开发领域,案例是学习和提升技能的重要资源。...总之,"100个前端超经典实用的案例汇总"是一份极有价值的参考资料,无论你是初学者还是经验丰富的开发者,都可以从中汲取灵感,提升自己的前端技能。

    超实用的软件

    《超实用的工资绩效管理软件:打造高效财务管理》 在当今的企业运营中,财务管理是至关重要的环节,尤其在员工薪酬与绩效管理方面。一款优秀的工资绩效管理软件能够帮助企业精确、高效地处理这些复杂的事务,从而...

    55个超漂亮超酷实用JS演示代码打包下载

    总的来说,"55个超漂亮超酷实用JS演示代码打包下载"提供了一个全面了解和掌握JavaScript实际应用的平台,无论你是初学者还是经验丰富的开发者,都能从中受益匪浅。通过深入研究这些代码,你可以更好地掌握JavaScript...

    超实用的改建 滚过来下载赛

    重复的"超实用的改建"可能意味着这次更新或改进极大地提升了软件的功能性和用户体验。"滚过来下载赛"这部分可能代表一种营销策略,比如限时下载竞赛,旨在激发用户的参与热情和紧迫感。 【标签】"实用"和"方便"是这...

    24款超实用的Web_2.0风格翻页代码

    在本文中,我们将深入探讨24款超实用的Web 2.0翻页代码,以及它们如何改善用户体验和提升网站的整体吸引力。 首先,Web 2.0翻页代码的核心在于其动态性。相比于传统的分页,这些代码引入了动画效果,如渐变、滑动或...

    超酷用户后台界面

    这款后台界面不仅注重外观的美观,更强调功能的实用性,旨在提升用户体验,提高管理效率。 在设计上,【超酷用户后台界面】采用了现代简洁的设计风格,色彩搭配和谐,布局清晰,使得操作者可以一目了然地找到所需的...

    超实用的JavaScript代码段.pdf

    JavaScript是一种广泛应用于网页和网络应用的编程语言,它在客户端浏览器上运行,为用户提供动态、交互式的用户体验。这篇“超实用的JavaScript代码段”文档很可能包含了许多常用的、实用的JavaScript函数和技巧,...

    超实用的CSS代码段-源码.rar

    "超实用的CSS代码段-源码.rar" 这个标题表明了压缩包中的内容是一些在实际开发中非常有用的CSS代码片段,这些代码可能包含各种CSS技巧、样式效果或者布局解决方案。"源码"一词暗示这是一份可以直接应用于Web项目的...

    超实用的css代码段 源码

    "超实用的css代码段"是一本由赵荣娇和任建智编著的书籍,旨在提供一系列实际、高效的CSS代码示例,帮助开发者提升网站设计和布局的能力。这本书的源码可能是为了读者能够更直观地理解并应用这些代码段。 首先,CSS...

    1123个超实用网页案例库

    "1123个超实用网页案例库"提供了一个丰富的资源集合,帮助开发者提升技能,了解最新趋势,并在实际项目中应用这些技术。 首先,jQuery,这是一个轻量级的JavaScript库,它简化了JavaScript的使用,使得DOM操作、...

    超牛10款JS特效|超实用的JS特效

    在这个“超牛10款JS特效”压缩包中,收集了十种极具实用价值的JS特效,非常适合前端开发者学习和使用。 1. **轮播图效果**: 轮播图是网页设计中常见的元素,用于展示多张图片或内容。JS可以实现自动切换、手动...

    超级实用的视频播放软件

    1. **简洁界面**:PotPlayer 的设计理念注重用户体验,界面简洁明了,没有冗余的元素和烦人的广告打扰,让用户在观看视频时可以专注于内容本身,享受纯粹的视听盛宴。它的布局清晰,操作直观,无论是初次使用者还是...

    超酷简单实用的后台管理页面

    这样的设计不仅提升了用户体验,还能够激发管理员的工作热情,提高工作效率。同时,"简单实用"表明该后台管理系统易于理解和操作,没有复杂的导航结构,功能分布清晰,使得管理员可以迅速找到所需功能,减少了学习...

    cad超级实用工具-CAD双倍加速插件.zip

    总的来说,"CAD双倍加速插件"是一个旨在提升CAD用户体验和生产力的工具,通过多种方式优化设计流程,减少等待时间,使设计师能更专注于创意设计,而不是软件操作。对于需要频繁处理大量图纸的专业人士来说,这样的...

    超级实用的文件搜索器

    在这个例子中,.lng文件可能包含了软件的中文界面,使得用户可以根据自己的语言习惯进行操作,提高用户体验。 总结来说,“超级实用的文件搜索器”是一款高效、便捷的文件管理工具,通过快速的全盘扫描和精确的搜索...

    超级实用ajax表格带搜索分页.zip

    Ajax表格的引入可以极大地提高用户交互性和数据管理效率。 【标签】"超级实用ajax表格带搜索分页.zip" 的标签再次确认了这个压缩包的核心内容,即一个具备搜索和分页功能的Ajax表格解决方案。 【子文件】"JQuery-...

    超简洁浏览器,简单实用

    超简洁浏览器是一款以用户体验为核心,注重易用性和实用性的网络浏览工具。它的设计风格强调简约,摒弃了不必要的复杂功能,使用户能够更加专注于网页内容的浏览,而不受过多的界面元素干扰。这款浏览器旨在提供高效...

    超级实用的多种可自定义图片轮播效果

    9. 载入提示:当图片正在加载时,可以显示一个加载动画或文字提示,提高用户体验。 10. 编程接口(API):为了方便开发者集成和控制,轮播组件通常提供API,可以设置初始参数、监听事件、手动切换等。 在"超级实用...

Global site tag (gtag.js) - Google Analytics