我想每个人都会赞成,网站的可用性是它能否受欢迎的一个重要方面,无论你进行的是公司网站、在线商店还是其他,让你的界面变得容易操控,使用时令人舒服是关键,近几年已经有很多针对网站界面优化的研究,而且这些研究的成果对于提高网站可用性是非常有价值的。现在这里有10个超实用的经验分享,相信我,这些建议会极大地提高你那个网站的用户体验,让用户爱上你的网站!
这是一篇09年的老文章咯,但是这些技巧和经验并没有过时,所以我们依然翻译出来,推荐您仔细阅读。
一、善用人物配图,使用户专注于你想呈现的
当进入你的网站,我们会本能地关注网站上人物图片中的脸和眼睛,这倒是为我们提供了一个想法,是不是可以用人物配图吸引小伙伴的注意力呢?当然,但这仅是第一步,我们还可以这样做,你瞧,是不是大不相同!(见下图)
这是第一步:
「根据眼球追踪的研究,我们先会关注这个直望着我们的小萌孩」
「现在,小萌孩是仰望着右边文字的,与此同时,你是不是也把注意力转移到右边的内容呢?」
这里是原始的研究报告 → usableworld.com,实践证明,如果其他人往某个方向望,那么人们也会跟着望同一个方向(参照脑筋急转弯:大街上有,有一个人仰着头站着。旁边的人以为天空中有什么好看的东西,都跟着往天上看,可天空中什么都没有。你猜那人怎么说?答案附最后..)基于这个特点,我们可以利用人物配图来呈现你想要让用户关注的内容。
二、表格的最理想位置
一个来自UX Matters 的研究发现,最理想的表格置放应该是由上至下,因为人们通常会适应垂直的表格,这样通常易于阅读与填写。
三、人们对网站的信任度取决于设计质量
第一印象很重要!栗子:
这是一个展示手机应用的网站,可能我们不知道这个名为”fever”的APP究竟怎么样,可是看到一个这么干净圆润的用户界面,对它的好感理应大大提升了。
一个有趣的研究发现,人们判断一本书的根据往往是它的封面…同样的,一个网站的布局、一致性、配色、排版等都在影响你的用户,他们会以此判断你将提供的东西。因此,你要确切保证网站的风格不仅要干净漂亮,更要适合你的受众用户。
除了网站设计,其他影响用户对你的网站信任度的还有:网站内容的质量、出错的次数、更新的频率、操作的便捷性和网站站住的人品。
四、大多数用户不会滚动浏览
一份来自Jakob Nielsen的研究显示(研究在此 → nngroup)仅仅有23%的用户第一次进入网站时会滚动浏览,这意味着有77%的用户只会看那个区域(无须滚动的可见页面),更重要的是,只有16%的用户会在第二次访问时继续滚动浏览。该数据突显出,将关键的内容放在首页的突出位置是多么的重要!
不过,这并不意味着你要填满页面的上部区域,全部塞在那儿只会让内容难懂,当用户看到太多的信息时,他们不知道该从哪里开始看。
让我们看看优秀范例:
basecamp 在这折叠线以上(768px高),网站显示了一个巨大的截图,标语、价值主张、呼吁行动、客户列表、视频以及显示特点的小图。
这些内容对于网站主页是至关重要的,所以我们需要提供的核心要点有:
网站的名称
网站的价值主张(即用户能得到什么,有什么好处,如何使用它)
与用户相关的导航设计
然而,自那时以来,用户习惯发生了很大的改变,最近的研究证明用户很喜欢视差滚动的效果,他们宁愿滚动到页面底部而不是翻页,对很多用户来说,最重要的信息也不须置放在首页,所以有个好主意,我们可以利用留白空间的方式将页面分成几段。
五、可以独特,但不要难懂
有一个独特设计的网站当然是好样的,但当你需要提高网站的可用性时,建议你最好遵守大多数网站采取的方式。因为当人们浏览一个新网站时,他们会启动自身的「经验模式」去理解这个网站的使用,例如:蓝色是链接的颜色,网站LOGO的位置、导航标签的下拉行为等。
谷歌之所以所有的链接都是蓝色是由缘由的,这个颜色适合大多数用户,也便于辨认。
链接该选什么颜色?
颜色够深/浅,能够与背景色有强烈地对比,易于区分
不能与文字颜色相同,所以你可以看到,没有链接是黑色的
研究证明,选用蓝色的链接是最好的,因为浏览器默认的链接是蓝色的。选择其他颜色也没问题,但可能会影响用户找到它
六、理想的搜索框宽度是27个英语字符
什么是理想的搜索框?有的,Jakob Nielsen针对可用性进行了一个搜索框宽度的研究,发现大多数搜索框都太短了,搜索框太短带来的问题是尽管你可以输入足够长的字符,但只有一部分文本字符可见,这导致你很难检查或者编辑。
这项研究发现搜索框的平均长度是18个字符,27个字符的搜索框可能会太长而很难适应,不过,它能满足90%的搜索。记住,你可以用像素和点设置宽度,而不仅仅是em。小技巧,一em的宽与高对应一个英文字符”m”,所以你可以以此来检测搜索框是否有27个英文字符的宽度。
谷歌的搜索框宽度绰绰有余
相对而言,苹果就力不从心了。
通常来说,搜索框稍长比稍短好,因为用户可以随时查看、核实、修改。这条经验非常简单,但是很不幸的是经常被人们忽略。其实在输入区域的一点改进也会带来更好地用户体验
七、留白设计带来更好的阅读
大多数设计师都知道白色空间在段落、图片、按钮以及其他项目中的价值,白色空间可以让各个项目自由地呼吸。当然,我们也可以通过空间的排列(组合、减少)来制造白色空间。对于在页面展示内容间的联系、建立层级关系非常重要。
注意:文本的边缘,段落的间隔这些细节都给阅读带来了舒适的感受。
白色空间让页面内容的可读性相应提高。一个04年的研究表明,如果在段落与左右边缘间能够卓越地地利用留白,至少提高20%的阅读舒适感。读者可以更加容易地专注于阅读。
八、不必进行广泛的用户测试
Jakob Nielsen的研究显示仅需要5个用户就可以发现你的网站85%的问题,如果有15人就能找出接近全部的问题。
第一或第二个用户会发现最大的问题,其他人会确认这些问题并且发现其他小问题,只有2个用户能找到你网站50%的问题,这意味着其实你不需花很多钱去得到一个好的结果。当你开始测试时,你已经有巨大的收获了。任何小小的测试都比没有好
九、有多少信息,就有多少青睐。
大多数介绍产品的页面总是缺少足够多的信息,有些仅仅能让用户扫一眼。这是个必须正视的问题,因为产品的信息将帮助人们忖度购买的决定。在可用性的研究中,贫乏的产品信息这个失败的案例占据了8%甚至10%的网站。
Apple提供了详细的产品介绍页面,包括产品特点及规格等。请注意,不要让一点难懂的技术细节停留在介绍页面,给消费者看的懂的。
提供关键的信息,而不要臃肿,让你的文案易于吸收。通过段落间隔和副标题使介绍能够一扫明了,给你的添加足够的图片,且不要使用行话,否则你的用户看不懂。
十、大多数用户会无视广告
Jakob Nielsen的研究表明大多数用户会直接无视广告的存在,如果他们在全神贯注地阅读文章,他们不会被广告转移注意力。
这条经验要告诉你的是,人们会无视广告,并且与任何看起来与广告类似的东西,即使它不是广告。一些颜色风格强烈的导航会让他们误以为是广告,所以请仔细注意这个经验。
在左侧的方块图其实不是广告,但是看起来与广告很类似,所以可能会被一些用户误解。
所以,广告看起来最好能像文章,那样人们才会去点击它,也能给你带来更多的收入,但无疑这将会损失你的用户信任度,当他们点击广告时他们以为会是文章,结果被你欺骗。因此当你决定这样做之前,考虑下这个交易:短期的利益与长期的信任。
干货福利:
在这些年,我们的杂志组为了确定最佳地设计方案,研究了很多案例。到目前为止,我们已经发现了很多有趣的模式,是的,它们可以作为你的下个设计项目的指导方针,希望这些标准能予你方便。
行高(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
关键字:用户体验|
相关推荐
同时,导航系统还能够提高驾驶员行驶的安全性和舒适性,并且还能为乘客提供更好的旅行体验。在地理空间中确定位置的过程,这是现代社会的重要组成部分。导航技术的发展可以追溯到人类历史的早期阶段。在过去,人们...
提高用户体验和使后台管理自动化的各种实战经验; 《ASP NET 电子商务开发实战》新添了许多令人耳目一新的功能 例如 SEO 搜索引擎优化 产品推荐等 使你的网站如虎添翼; 《ASP NET电子商务开发实战》通过一个贯穿...
一站通会员制,用户体验友好。 用户注册可以享有买家订单; 发布生活分类信息; 管理网店; 管理商品; 管理订单; 装修网店; 发布团购; 参与团购; 发布分类信息等功能... 三.商家店铺批量导入功能,如果商家有...
超级右键iRightMouse Mac中文版是一款非常强大的鼠标右键增强工具,它可以让用户的鼠标右键变得多彩起来,通过软件设置在右键中添加各种功能,从而提高工作效率,非常的实用,有需要的朋友欢迎安装体验!
18、加入DIV舌头标签和焕彩鼠标提示代码,同时提供站点内部功能卓越的划词搜索功能,让您体会超越WEB2.0的刺激*,使得整个网站更加实用、方便、快捷。 测试地址、帐号: login.asp 普通用户——郭言赛 asai admin...
独家用户消费评价+评分功能,提升用户体验 城市代理商管理V1.0 每个城市产品可以由独立代理商后台管理 可修改商品时间 可对商品进行修改结束时间,让操作更加方便、人性化。 支持商品退款 提供客户申请商品模式,...
5126社区是一款专业的视频聊天网站客户端软件。软件原名51高清秀场,,是一款集KTV和聊天室于一体的在线视频互动交友应用,旨在为每一个爱唱歌、爱表演的人群提供了一个展现自我的平台。软件结合高清影视、赛事直播...
网软志成分类信息网.NET综合风格正式版下载,能帮助用户建立一个像赶集网的专业分类信息网站门户欢迎大家下载使用。是一套网软志成免费提供的分类供求信息发布网站商业建站程序。自带四套分类网站模板,强大的生活...
不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在发送文件过程中能够自动生成文件编号,自动按后台设置好手机号码发送短信提醒用户接收文件,为用户体验提高一个台阶,本程序适合党政...
不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在ASP生成HTML上做了大量的改变,为用户体验提高一个台阶,本程序适合中小企业自建网站、二次开发使用。本程序具有体积小巧、程序文件...
同时内置先进的过滤功能,可以极高的提高访问速度、减少资源占用以实现飞速上网体验;可定制的鼠标手势以及超级拖拽功能可满足不同习惯的用户。是用户实现网络浏览功能的好帮手。 行者无疆浏览器行者无疆浏览器程序...
网软志成分类信息网.NET综合风格正式版下载,能帮助用户建立一个像赶集网的专业分类信息网站门户欢迎大家下载使用。是一套网软志成免费提供的分类供求信息发布网站商业建站程序。自带四套分类网站模板,强大的生活...
是基于自由策划企业网站管理系统V2012.12版之后的升级版,不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在ASP生成HTML上做了大量的改变,为用户体验提高一个台阶,本程序适合中小企业...
5.快速而稳定:V8的整体运行速度很流畅,稳定性也有了提高,如果在低配置安装本系统,可以更加体验到速度的加快; 6.方便而快捷:系统整合了BoJoneXP工具集,方便用户装机维护,并备用了一些常用软件; 6.实用而...
用这个代码,你点击超文本链接时会在新窗口中打开,为用户带来更好的体验: $(document).ready(function() { //select all anchor tags that have http in the href //and apply the target=_bl
用户体验的新突破,有效地提高用户讨论的兴趣。 29、支持广告类型:gif图片广告、FLASH广告、文字广告、HTML代码广告。 支持7种广告位显示方式: 页内嵌入循环:就是将广告位直接置入某页面一固定位置,并在同一...
是基于自由策划企业网站管理系统V2012.12版之后的升级版,不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在ASP生成HTML上做了大量的改变,为用户体验提高一个台阶,本程序适合中小企业...
本报告导读: ...4 )AI音视频及游戏NPC生成,有望在元宇宙时代优化用户体验、激励用户自主创作。根据红杉资本预测,2023年文本、代码生成有望得以成熟应用,图像、音视频生成尚处于生成基础初稿的阶段。
是基于自由策划企业网站管理系统V2012.12版之后的升级版,不管是在程序的内部结构还是界面风格及CSS上都做了大量优化及性能提升,特别是在ASP生成HTML上做了大量的改变,为用户体验提高一个台阶,本程序适合中小企业...
X7以增强手机基础功能、美化系统使用界面、提高操作体验为核心,颠覆原始的手机操作界面设计,实现了手机操作更智能、更美观、更人性化等特点,最大程度的满足了用户的使用需求。适用于Symbian V3平台的绝大多数...