WEB用户体验

点击标题下「智业人」可快速关注摘要:随着软件行业的迅速发展,各种软件产品更是形形色色,用户不再满足软件对其所需要的功能实现,更追求一种使用过程中的心里感受,因此用户体验足够好的才能走向最前端。用户体验的定义有很多,用一种比较简单的说法就是“用户对访问网站的感受”。本文主要从用户体验角度出发,从网站的构建到数据渲染完毕的过程提高用户体验。关键字:加载速度、动画、用户体验、布局一个好的网站离不开对用户体验的追求。因为良好的用户体验才能增加用...

摘要:随着软件行业的迅速发展,各种软件产品更是形形色色,用户不再满足软件对其所需要的功能实现,更追求一种使用过程中的心里感受,因此用户体验足够好的才能走向最前端。用户体验的定义有很多,用一种比较简单的说法就是“用户对访问网站的感受”。本文主要从用户体验角度出发,从网站的构建到数据渲染完毕的过程提高用户体验。

关键字:加载速度、动画、用户体验、布局

 一个好的网站离不开对用户体验的追求。因为良好的用户体验才能增加用户在网站的停留时间、使用效率等等。而用户体验取决于HTML+CSS的页面布局和样式渲染,JavaScript的动画效果,以及网站的加载速度。合理的利用这些功能才能提高用户体验。

1 HTML+CSS

HTML+CSS是网站的结构和样式。清晰的视觉效果是网站结构的重点,HTML的标签和布局能让用户了解到这部分是标题、图片、音乐还是视频。CSS是修饰网站的作用,网站中所有内容的表达方式都是通过字体表达,字体的类型、大小和样式都会给予用户不同的体验。网站每块内容的大小、间距、背景颜色都是通过CSS来控制。

HTML+CSS的布局更能提升用户体验,比如超链接的打开方式对应的用户体验也不同,鼠标的移入、点击时、点击后和未点击时的CSS字体颜色都不同;表格的标题和内容的区分,表格内容以不同的背景颜色区分每一行,以此提高可读性;表单的内容在激活时添加聚焦的样式,让用户能清楚地知道在操作哪个位置。比如公司的HIS5项目,当表格数据量多的时候,对作废、冲销、结算等不同状态的数据添加不同的底色,以及正在编辑的表格添加底色和聚焦样式。很多网站喜欢把导航定位在顶部或者底部,这样方便用户在浏览过程中时刻能够知道网页的大概内容,还有把置于顶部的小图标设置在右下角,方便用户浏览到底部时一键回到顶部。

2 JavaScript

javaScript是网站和用户之间的交互,也是网站动态功能,动态功能能够影响用户的行为,引导用户的注意力以及对用户的动作进行反馈,从而提升用户体验。那么网站有哪些地方需要加上动画效果呢,以下列举3个常用地方:

1.网页加载时的等待。页面加载时,在渲染页面样式代码和表格数据加载时可能由于数据量大,导致用户只能看到空白的页面,如果有的用户比较有耐心可能会等等,可大部分用户可能会觉得加载速度太慢,或者页面没有加载就直接退出,这样对用户体验来说是十分不友好的,如果在等待页面加载时加上一个最简单的旋转动画,能让用户清楚地知道页面正在加载中。

2.模块和模块之间的显示和隐藏。在网页中经常会看到部分内容被隐藏,当点击全文时展开全部内容,在展开内容的过程中就可加上简单的动画效果,如滑动等方式,可让用户看起来更舒服;或者促发弹窗动态显示隐藏内容的时候可让图片或者内容以淡入淡出的方式显示出来。

3.图片和文字的结合。网站的整体效果固然重要,但是小细节也是不容忽视。网站的图片跟文字是比较枯燥的,但是如果当用户浏览到某个位置,给图片加上缩放功能,文字漂浮等效果,或者图片和文字的结合效果,让自己的网站更有特点,更能提高用户阅读的积极性。

在用户操作过程中,利用反馈来进行相应的效果。在用户操作前、操作时跟操作后所展示的效果让用户明白进行了什么操作,并且在用户执行成功还是错误的操作时给予相应的提示,让用户通过效果和文字提示等方式立刻就能明白这个动作的含义。

3 加载速度

加载速度对于网页来说是至关重要的。如果一个网站的加载时间太长,足以让用户失去耐心。可能原因是因为代码量或者数据量太大,用户可不关心数据和代码的加载量,用户需要的是能迅速看到网站的内容。因此尽可能提高网页加载速度会让用户体验更好。而加载速度是由两个方面决定的,一个是前端代码和图片的渲染,另一个是对数据的请求。

3.1前端代码

前端代码的优化可以有效提升页面渲染速度。首先是代码质量问题,在开发前对文件的构建和命名,开发时对公共部分的合并,降低服务器请求次数,开发后对HTML、CSS、JS文件和图片进行压缩,对图片进行预加载或者懒加载以至于不会出现部分空白图片。文件的引入顺序也影响着用户体验,因为用户需要能够迅速看到网站内容,因此需要先行加载HTML、CSS文件,让用户能看到网页的大部分内容,之后再逐渐加载其他文件。

3.2 数据请求

前端是通过AJAX发送请求获取后端数据。AJAX的核心就是“异步加载,局部刷新”。也就是对某一块内容进行局部刷新,不需要刷新整个页面,最经典的例子就是表单。用户在填写完某一项表单数据后(在未点击提交就已经异步提交了请求并且已经返回数据更新了部分页面),这就给了用户很直观的感受,如果等用户全部填写完毕后再提交请求后返回给提示用户名字太长必须要有字母和数字组合,或者密码只能有数字等提示,用户又要重新重头开始填写,要多花费几倍时间来重复同一操作,这样很不利于用户体验。现在的QQ、微信和微博在用户评论和转发后也不需要刷新整个页面,操作后立即对某块数据进行更新,从而提高用户体验。His5的表格数据量相对较大,因此大部分都采用滚动加载或者分页加载的形式加载数据,否则当用户搜索的数据量大时有可能会导致长时间的等待或者页面崩溃,这样大大影响了工作效率。

4 总结

综上所述,一个用户体验好的网站,要有不但简约大气的设计,适当的动画效果还要加载速度够快。盲目追求丰富多彩的页面设计和酷炫的效果反而会影响用户体验。必须经过用户不断体验后的反馈再进行不断的改善才能真正提高网站的用户体验。 

WEB用户体验

 

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35085/

(0)
交互精选交互精选
上一篇 2018-02-03
下一篇 2018-02-03

相关推荐

  • 交互设计|回复评论功能设计

    力匕小2在思考简单可行的产品方法论阝勹廴匚之前已经写过两篇有关评论的文章了,最近再次设计评论功能,发现“回复评论”的交互设计也有很多细节值得体会,而之前的两篇文章没有提到,所以这篇文章就来分享下“回复评论”的交互设计。我们首先来看下几种评论的展示位置。1. 内容详情页展示全部评论内容如果你的内容比较单一,比如就是一篇文章,而评论内容又比较丰富,浏览性又很高,那么评论内容可以完全展示在内容下方,比如微博的每条微博详情页,今日头条、36氪、...

    2018-03-02
  • 「抖音」用户体验分析

    和大部分人想的不一样,我是抖音和快手的忠实用户,每天都会在上面花不少时间。在玩抖音几个月后,我开始思考和分析这两款APP的设计和技术,发现其实其中充满了很多“精巧”的设置。抛开APP的针对群体和社会影响不谈,只想说作为一个普通用户的感受。抖音的交互设计是沉浸式的。在推荐页面,你每次只能看到一个视频,系统默认自动播放。因为没有给你反应时间,我们会不由自主的盯着屏幕看,而人的注意力很容易就被当前的视频(视觉和听觉)吸引。这样的交互好处是人的...

    2018-04-02
  • 场景是如何应用到交互设计的?

    我想在互联网领域,大家对“场景”这个概念并不陌生,但组成场景的关键因素有哪些?场景是如何应用到交互设计的?在工作之余,整理下相关知识,相信对大家的产品日常工作有一定的帮助,感谢大家抽出时间阅读,欢迎批评指正。1.场景的基本概念场景是指用户在一定的时间、地点等特定的情景下为了满足某种需求而触发的使用某种方法解决需求的行动画面。其关键因素包括用户、情景、需求、方法。产品的应用场景就是用户使用产品来解决需求的实际应用场景,比如上班族小张在午餐...

    2018-03-02
  • 用户体验设计 - 快问快答

    首先感谢大家关注我。上篇文章收到了很多小伙伴的反馈,很多人说想多看我更新与用户体验有关的文章,也有反应说有文章长度过长。所以这篇文章我用了快问快答的形式,回答了几个新手用户体验设计师比较关心的问题。因为我自己也是转行做UX,所以希望我走过的弯路大家可以绕过去一些。欢迎大家把我的文章发给其他小伙伴,一起共同进步。也欢迎大家给我意见与建议,你们的观点对我真的很重要!(这次文末有彩蛋)1.什么是用户体验(UX)?这是一个很大的问题,就像你问我...

    微信热点 2018-02-02
  • 交互设计中的“无意识错误”:如何帮助用户防错?

    在提高可用性的建议中,如何优雅、清楚的告知用户哪里出错了是非常重要的。当然,如果能够一开始就避免他们犯错是最好的。在讨论用户错误时,一个重要问题是在什么情况下指出用户的错误。「用户错误」这个词似乎暗示用户做错了某些事情,但不仅如此,设计师也犯下了错误,因为他们让用户轻易的做出了错的行为。所以,解决用户错误的方法不是指责用户,让用户再认真一些,或者给他们更多的指导练习,而应该是重新设计软件,让犯错变得困难。两类用户错误在讨论如何避免犯错之...

    2018-03-02
  • 浅谈交互设计的七大定律

    新年第一篇和小伙伴们聊聊交互设计七大定律在设计中的应用。说起法则、定律、原理一类的名词,大多时候我们会觉得有点故作高深,似乎离我们真实的工作很遥远,又或者似乎太过浅显熟悉不值得讨论。窃以为,如果不想每次聊起产品设计的时候,都是你看人家的用户体验做的多好,你看这交互做的多好,你看这动效做的多好……或许,我们可以更有趣除非有更好的选择,否则就遵从标准—Alan Cooper费茨定律(Fitts’ Law)由保罗·费茨(PaulM. Fitt...

    2018-02-06
  • 设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

    让人人都懂点儿设计设计史论全文字数 :4689 | 阅读 时长:12分钟今天史论君为大家分享一篇来自interaction design foundation的文章原文作者:TEO SLANG    |    翻译:于于于Jessica编辑:Sujay Wu转载后台回复 :史论君把不好的设计和好的设计的反面例子一起看,不仅有趣,而且为设计师们提供了重要的经验教训。它们突出了设计人员要避免的陷阱,并让我们理解如何将设计理论转化为在现实世界...

    2018-04-07
  • 【用户体验.春节特辑】一本相册(总第269期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第269期我的发小蔡廷是我们这座江南古镇的一位”达人”,这并非他有什么才气,而是他的行为举止与这座千年古镇淳朴温和的民风相违和。天气刚有点热他便剃了个秃瓢,赤裸着上身,永远穿着条军裤,再热也不换装。腹部有两条贯腹的伤疤,象两条粗大赤红的蜈蚣僵卧其上。他从不拉帮结派,依附于任何人,不欺行霸市,不欺凌老弱,但是蛮不讲理。他...

    2018-02-20
  • Axure RP软件

    长按链接复制链接到浏览器打开Axure RP 7.0软件及安装教程下载地址:链接:https://pan.baidu.com/s/1mkqu1Ws密码:467u长按链接复制链接到浏览器打开Axure RP 8.0软件及安装教程下载地址:链接:https://pan.baidu.com/s/1c3h7c1i密码:esqr给大狮兄一个赞赏大狮兄想生存下去,我还想以后给你更多好用的软件赞赏的狮粉记得备注名字,大狮兄想记得你的名字大狮兄资源吧专...

    2018-03-04
  • 你在无意中就打破了用户体验设计中最重要的规则!

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。产品设计中最重要的规则,可能是产品的周期管理。每个人都应该遵守一定的重要规则,特别是那些从事产品设计的人。而许多设计师却日复一日地在设计中违反规则,而这是绝对不利于他们的设计的。在本文中,我将解释什么是设计中的重要规则,以及它对产品和服务中意味着什么。我还将在组织管理、协作和总体性能方面提出这一现象存在的可能含义。在这篇文章中我所要讨论的心...

    2018-02-13