百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

结网-用户体验三要素(网络用语结网是什么意思)

myzbx 2025-02-03 14:11 36 浏览

用户体验三要素:别让我等!别让我想!别让我烦!

别让我等

曾有很多研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页。也许这样讲,各位还不会有太多感触,接下来,我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。

怎么样?现在感受如何?是不是该马上去做测试工作呢。

这时候你也许会问:什么原因会导致网站打开慢?有什么办法解决呢?别急,我一一道来。以下内容有些偏技术层面,各位需要耐心阅读。

1、减少HTTP请求数

用户在打开一个网页的时候,后台程序响应用户所需的时间并不多,用户等待的时间主要花费在下载网页元素上了,即HTML、CSS、JavaScript、Flash、图片等,统计显示,每增加一个元素,网页载入的时间就增加25-40毫秒(取决于用户的带宽情况)。

所以,想要提高网页打开速度,就要减少HTTP请求数,方法有3种:

1)减少不必要的HTTP请求,例如用CSS圆角代替圆角图片,减少图片的使用。

2)合并文件,对于文本文件,可以直接合并内容。例如将多个JS(JavaScript的简称)文件合并成一个,将多个CSS文件合并成一个。

3)优化缓存,对于没有变化的网页元素(如页头、页尾等),用户再次访问的时候没有必要重新下载,直接从浏览器缓存里读取就可以了。

2、使用CDN(Content Delivery Network,内容分发网络)

CDN由一系列分散到各个不同地理位置上的Web服务器组成,它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求。当你的网站图片很多事,就一样要使用CDN了,比如现在的电商网站,几乎都在使用CDN。

3、压缩网页元素

网页中的每个元素越小,下载所需的时间就越少,这个很好理解。现在比较成熟和流程的压缩网页的方式,是通过Gzip,我自己的实操经验来看,一般可以将网页文本内容减少70%以上。

4、样式表放在网页Head部分

这也是我实际操作过的案例,把样式表(CSS文件)移到网页的Head部分,可以提高页面的加载速度,让页面元素顺序显示。

5、把JS文件放到网页底部

网页打开时,所有元素是顺序显示的。由于JS文件的特殊性,其相比其他元素来说,会加载的很慢,在JS文件下载完成之前,其他后面元素的顺序显示将被阻塞,因此把JS文件尽量放在底部,意味着内容能被快速显示。

6、把样式表和JS脚本放到外部文件中

尽管将样式表和JS脚本直接写入网页HTML中,可以减少外部文件调用数量,但是,这样做会增加网页的文件大小。综合来看,将样式表和JS脚本放到外部文件中,也许用户首次访问时会有点慢,但是后续在访问网站时,用户直接通过浏览器缓存就可以用,从而达到减少HTTP请求数的目的,为最优的做法。

写在最后的话:

在提升网页打开速度经常被忽视的一个问题是响应。对于用户来说,每次的操作,不管返回结果是慢,还是快,都要及时予以响应,最典型的例子就是:当用户点击打开一张图片时,是否有百分比数字显示的进度条,就是一个典型的响应设计。

一流的网站用户体验绝对不是一蹴而就的,要进行充分的可用性测试,收集用户的反馈,持续改进。

别让我想

用户不会使用一个网站绝对不是用户的错,他会打开电脑,会使用键盘和鼠标,会打开浏览器上网,经过这么步骤最终到达了你的网站,然后发现网站上一团糟,搞不懂这是什么,那是什么,也懒得学习如何使用,于是就会眼都不眨一下就关闭你的网站。这是很现实的一个用户行为。

在网站能够快速触达用户之后,网站运营人员面临的下一个重要问题就是:如何留住用户?

一、包装好你的网站

1、你是谁

我们辨识一个人,并不需要记住他从头到脚所有细节,看他的脸就OK了;当我们辨识一个网站时,也是同样的道理,网站的Logo就是脸。Logo可以让用户轻松知道网站是谁,无论浏览到网站中的任何一个网页,都能知道这是哪个网站在提供服务。

2、你是干什么的

有了网站Logo,还要告诉用户,网站是提供什么服务的,是购物网站,新闻网站,还是社交网站。尤其是对于一个新网站,清晰的一句话介绍至关重要。

3、你能带来什么好处

这就是网站的差异化优势介绍,相比同行竞争网站来说,用户使用你的网站,好处是什么,可以和“你是干什么的”整合成一句话至于Logo下方。

经过对网站的基础包装之后,我们算是完成了留住用户的第一步工作,接下来,我们希望用户在网站中做进一步的尝试,如何做呢?

二、关注用户及其任务,给予明确指引

对于用户来说,登陆任何一个网站,一定都有其目的。上购物网站是买东西,上门户网站是为看新闻,上SNS网站是为分享信息、联络朋友等,要达到这些目的,一定需要进行一系列操作。如果能让用户以最方便、最快捷的方式完成这些操作,顺利完成任务,毋庸置疑,用户一定会留下。

举例来说,如果是一家电商网站,是否有清晰的站内搜索功能提示,清晰的商品分类导航,醒目的购买按钮,以及灵活的付款结算系统等,这些都是围绕着用户及其任务(网上购物)展开的。因此,在设计网站的时候,我们一定要给予用户醒目、清晰的操作指引,以帮助用户尽快且顺利地进入下一步,下一步,直至最终完成任务(下单付款)。

满足用户,其实很简单,做到贴心、用心、上心,用户自然会向你靠近。

别让我烦

用户都是喜欢偷懒的,如果你的网站操作效率很低,就会令用户烦躁,进而导致不好的体验,甚至出现坏口碑。有一个粗略的说话是,完成任务的难度与其所需步骤的平方成正比,那么,缩短完成路径就是帮用户偷懒,就是好的用户体验。

举个正面的网站实例来说明。登陆美国亚马逊网站,当你进入一个商品页面之后可以无刷新切换商品的规格,比如我要购买一台苹果笔记本电脑,我打开了商品页(大家自己登录试试),商品右侧会有个版本切换的选项,在这里我可以快速查看不同配置的电脑价格,只需将鼠标移动上去,商品图片、价格等信息就会自动发生变化。这种人性化的设计,为想要比较商品的多个版本的用户提供了极高的操作效率,用户自然喜欢。

目标信息要醒目而亲近

在关注缩短完成路径这个问题的时候,优化操作步骤是第一位的,因为我们首先要简化用户的任务。接下来,我们要在任务内部优化指点设备(鼠标或手指等)运动轨迹和眼球运动轨迹等细节。根据费茨定律,使用指点设备到达一个目标的时间与以下2个因素有关:

1.设备当前位置和目标位置的距离,距离越短,所用时间越短。

2.目标的面积,面积越大,所用时间越短。

通俗来说,就是如果我们希望用户注意或点击某个元素(如文字、图片、按钮等),那么这个元素就不应该距离指点设备的当前位置太远(比如出现在屏幕的右侧),并且它的面积要足够大。伴随着Web2.0的热浪,网站设计也有了一系列的革新,其中最大的一个革新就是“以大为美”,大大的LOGO,大大的图片,大大的按钮,它们不光看起来更有冲击力,也更方便用户的识别和点击。

提醒方式要温和并及时

除了简化任务流程之外,在用户完成任务的过程中,网站有时需要给用户提供帮助和指引。之前常见的做法是采用弹框方式进行提示,用户需要关闭对话框才能继续自己的任务,无形中降低了操作效率。

最佳的提醒方式应该转向温柔的方式,将打断降低到最低,举个例子:当在你注册一个邮箱时,当输入用户名后,最佳的检验方式应是自动查询此用户名是否可用,如不可用,应给出建议,yeah.net邮箱就做的很好,图略(大家可以登录尝试)。

其实,有时候操作效率的降低,并不是因为功能设计得不够好,或者提示和建议处理得不够好,而是由于强行的塞进了一些用户不想要的信息或任务。比如,用户正在阅读一篇文章,忽然飘出来一个广告挡住了用户想要阅读的部分,用户怎么能不恼火?

经营网站,尽管是盈利为本,但是过分的不重视用户体验,忽视用户感受,小心衣食父母离你而去,并一去不返。

当用户犯错的时候,你是如何做的呢?

在我们做好一切运营优化后,有一种情况需要另外注意,就是用户会自己出错。

当用户出错的时候他也会很烦躁,他不会认为是他自己的问题,反倒会把责任推给网站,所以要尽可能降低用户出错的机会。

举一个网站的例子,当用户登录一个网站时,首先是输入用户名,现在最常见的用户名是采用邮箱。当用户在用户名的输入框内输入邮箱地址时,不可避免的会出现错误,比如少了1个字母,或少写了1个数字,或者邮箱后缀写错了,结果肯定是登陆不进去。用户一定会恼火,最佳的提醒方式应该是什么呢?

当用户输入用户名,光标离开输入框之后,网站应自动校验此用户名是否已注册(可用),如若用户填写错误,应及时给予提醒,如:用户名不存在,邮箱格式不对等,让用户的出错在萌芽时就完成纠正。

再举个非网站的例子。笔记本电脑电源线可能会绊倒人,同时笔记本电脑也会被摔倒地上,这很可能不在保修范围之内,这种情况很糟糕。看看Apple是怎么做的,Apple推出了名为Magsafe的电源接口以减少这种出错,Magsafe采用磁力的方式连接电源线与笔记本,当电源线受到外力时,会自动脱离笔记本。是不是很贴心的设计?

这样的例子还有很多很多,这里不再一一列举。记住:用户是否喜欢一个网站,不仅取决于他使用网站获得的好处,也取决于他在网站中获得的体验,两方面都是用户价值所在,缺一不可。

相关推荐

如何设计一个优秀的电子商务产品详情页

加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...

怎么在JS中使用Ajax进行异步请求?

大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...

中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革

前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...

前端监控 SDK 开发分享_前端监控系统 开源

一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...

Ajax 会被 fetch 取代吗?Axios 怎么办?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...

前端面试题《AJAX》_前端面试ajax考点汇总

1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...

Ajax 详细介绍_ajax

1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...

6款可替代dreamweaver的工具_替代powerdesigner的工具

dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...

我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊

接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...

福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光

时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...

2021年超详细的java学习路线总结—纯干货分享

本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...

不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!

Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...

2025 年 Python 爬虫四大前沿技术:从异步到 AI

作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...

最贱超级英雄《死侍》来了!_死侍超燃

死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...

停止javascript的ajax请求,取消axios请求,取消reactfetch请求

一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...