网页加载速度慢,用户体验差?这4个技巧就能解决你的烦恼

发布日期:2017-09-28
浏览次数:47
  
undefined
 
网页加载速度直接决定着网站的成败。如果一个网站的加载速度很慢,访客很可能缺乏足够的耐心去等待,这在无形之中会流失不少访客,进而影响网站的销量和效益。反之,如果一个网站的速度很快,访客可以流畅的完成浏览或购买行为,用户转化率和销量都会有所提高。这也是为什么很多站长都很重视网页的加载速度。不过,就算一个网站的界面设计地再精巧,在某些情况下,网站的内容或元素也是需要一段时间才能加载出来的。而对于用户来说,这段等待加载的时间直接影响着他们的整体体验,如果用户觉得等待的时间非常长,可能就会失去耐心,直接离开。这时,我们怎样才能让加载页面更友好呢?小飞这刚好有一些让用户觉得页面加载很快(也许那只是错觉)的小技巧,快来和小飞一起看看吧!
 
 
 

1. 在用户等待加载时给予反馈

假如用户的网络连接状态很差,网站上的内容或元素可能就需要一段时间来加载。而用户从触动CTA按钮那一刻开始就处于等待状态了,这时如果网站上没有及时的反馈,比如"请稍候"、"运作中"等提示,用户一般就会认为系统没有受到指令,他们就会重复操作。很多不必要的重复点击都是由于网站加载时没有反馈引起的,在这个不断重复的过程中用户很容易变得焦虑。所以说,为了给用户提供愉悦的体验,站长们最好能够提供一个视觉反馈,告诉用户内容已经在加载中,只需耐心等待即可。
 
 
 

2. 避免使用静态的视觉反馈

静态的视觉反馈是指使用静止的图片或文本来表明网站内容正在加载,比如:"加载中"、"请稍候"的文字。虽然说在用户处于等待状态时,有反馈比没有要好,但静态的却并不可取,这是因为它常常会带来糟糕的用户体验。静态的视觉反馈往往不能直观地展示内容或元素正在加载。换句话说,用户在看到静态的视觉反馈时依旧无法判断网页是否正在加载。
 
 
 

3. 使用带有动效的加载提示

用户心理研究表明,在CTA按钮触动后的1秒后,如果系统没有给出任何反馈,用户的注意力马上就会转移。而最能有效吸引用户注意力就要数动画效果了,所以说站长们可以在网站中使用带有动效的加载提示。当然,这种样式的加载提示并不是无条件适应于所有情况的,如果你的网页加载时间很短,比如1秒以内,用户可能更不想看到那些所谓"酷炫"的动画动效。下面介绍两种不同样式的动效加载提示:
 
 

3.1 无限循环的加载提示

在所有带有动效的加载提示样式中,无限循环的提示项可以说是最简单的一种了。这种样式只告诉用户需要耐心等待,而没有说明需要等待多长时间。因此,无限循环的加载提示比较适合加载速度相当快的网页(加载速度2-10秒),因为如果在加载时间长的网页中使用这种样式,用户很容易就会觉得无趣、失去耐心。无限循环提示项的最佳拍档就是下拉刷新,它们经常一起搭配使用,作为两种界面的过渡,帮助用户更好的理解页面上的状态改变。
 
 
 

3.2 百分比式的加载提示

就像前面说的,无限循环的加载提示并不适合加载时间较长的状况(加载时间>10秒)。如果网页的加载时间比较长,让用户清楚知道他们需要等待多长时间是非常有必要的,这时站长们就可以采用百分比式的加载提示。或者,你可以提供一个系统加载的预计时间,也不用太精确,比如“可能需要一分钟”,这就足够了,这种预计的时间远比无尽头的等待要好得多,用户也会更有动力去坚持等待。
undefined
 
 
 

4. 调整用户对时间的认知

页面加载时间是长还是短很大程度上取决于用户的主观感受,而人的主观感受是可变的,我们可以适当使用一些小技巧来调整用户对于等待时间的认知。不过,注意这里并不是要改变网页实际加载所需的时间。怎样才能调整用户对于等待时间的认知呢?一般我们需要让用户心情保持愉悦,或专心做另一件事,下面是几个实用的小技巧:
 
 

4.1 进度条设计

在加载页面使用进度条可以让用户更好的感知页面加载的快慢。进度条的设计也直接影响用户对于网页加载时间的认知,进度条如何设计才能让用户觉得页面加载更快、浏览体验更顺畅呢?
 
  • 进度条最好不要停止。如果进度条突然停止,用户可能会认为网页出问题了。还有一种最糟糕的情况就是进度条已经加载到99%了,却突然停止了,这种体验对用户来说是最难以忍受的。
  • 让进度条持续、稳定的移动,从而来掩饰一些小的延迟;
  • 进度条在开始动作时可以稍微慢一点,在快结束的时候应快一点,这会让用户在潜意识中觉得页面加载的速度很快。
 
undefined
 
 

4.2 概略式布局

概略式布局是指一个逐渐加载信息出来的空白页面,在等待加载时上面会呈现一些线条或区块。它可以看作是传统动效加载提示的一种替代方案。概略式布局最大的优点在于它并不抽象,而是会向用户实际展示接下来页面的哪个区域会出现哪些内容。这能让用户将更多的精力集中于动作进程,而不是琢磨等待时间的长短。这种布局在移动端软件上应用的很多,Facebook的手机端应用就是一个栗子,当屏幕刷新、用户等待页面加载时,屏幕上就会出现灰色的区块和线条,这恰恰是等会图像和文本会出现的位置,用户在等待的过程中会更关注不同的区块处会出现什么内容。虽然,概略式的布局实际上并不会比无限循环的加载提示快多少,但在用户的心中,它就是快的。
 
 
 

4.3 后台操作

还有一种让用户觉得页面加载速度很快的技巧就是将操作隐藏在后台。Instagram的图片上传操作就是一个好栗子。当用户选择一张图片进行分享时,后台已经在上传这张图片了,不过这时系统会要求用户给图片添加名称和标题,然后当用户真正点击"分享"按钮时,图片一下子就上传好了。这时,用户的操作是十分顺畅的,这会给用户一种页面加载速度很快的错觉。
 
 

4.4 渐进式的图片加载

一图顶千言,图片往往比文本更具吸引力,更能抓住用户的目光。不过相对文本来说,图片也更大,这时图片的加载快慢就是个问题了,因为它直接影响着网站的表现力和用户体验。怎样更好的让图片加载速度看上去更快?借助模糊效果创造出一种渐进的加载效果是一个很好的选择。以Medium网站为例,首先,它会加载出模糊效果的缩略图,然后逐渐变成了清晰的大图。这些缩略图很小(只有几千字节),与模糊效果结合在一起,可以得到比纯色效果更好的占位符,且不会增加额外负载。
 
undefined
 
 

4.5 视觉"干扰"

这里所说的"干扰"并不是真正的干扰,而是能够在页面加载时有效吸引用户注意力的一些视觉效果。这些视觉干扰并不是空穴来风的,而是能和页面加载很好结合在一起的,能让用户在等待的过程中更加愉悦。有趣的动效就是其中一种,下图就是一个栗子:
 
undefined
 
快来起飞页自助建站平台做一个响应式网站吧!
 
 
相关阅读:
 

登录后即可发表评论,立即登录.