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

用户体验评价方法的核心要素 用户体验评价指标体系

yuyutoo 2024-10-24 17:47 2 浏览 0 评论

所谓的用户体验,其实就是让用户"习惯", Don't make user think. 这个是终极目标啦,随着产品的不断的改善,用户体验也在随之变化。但是,如果你在做一款产品,所谓的标准,终极检验方法,还是用户,以及用户对于产品的反馈。 对于互联网产品的设计,有一些标准的用户习惯,可以作为所谓量化的标准。

用户界面设计的三大原则是:

1、置界面于用户的控制之下;

2、减少用户的记忆负担;

3、保持界面的一致性。

用户界面设计在工作流程上分为结构设计、交互设计、视觉设计三个部分。结构设计也称概念设计 (Conceptual Design),是界面设计的骨架。通过对用户研究和任务分析,制定出产品的整体架构。交互设计的目的是使产品让用户能简单使用。 任何产品功能的实现都是通过人和机器的交互来完成的。因此,人的因素应作为设计的核心被体现出来。视觉设计包括色彩、字体、页面设计等。视觉设计要达到用户愉悦使用的目的。

通过“指标”就是我们用来衡量用户体验的标准,将标准分为三个等级,分别占0分、1分、2分,每个标准都有它的评分标准,当用户反馈的问题完全符合这个标准时,就占0;如问题不符合标准,就占2分;如问题不严重,只是还不够完善,就占1分;最后拿问题去套这里的标准,得出来的总分就是我们要评定改版的指标了。

总分越高,说明该条的用户体验越差,最后我们将得出的总分来判断问题的用户体验值:总分在0 – 5 分且单个标准在2分以下的(标示用户体验为良好);总分在5 – 10分且单个标准在2分以下的(标示用户体验为较差);总分在十分以上或有2个2分以上的标准的(标示用户体验为很差)。

结构设计:

1、有足够的空间让用户看到主要的内容,要适合多数浏览器浏览(以15、17寸、19寸显示器为主)

● 足够看到主要内容

● 只看到2/3看到

● 小于1/3的内容

2、尽量避免使用结构复杂的表格,表格嵌套不要超过3层;

● 小于等于2层

● 三到四层

● 五层或五层以上

3、页面长度原则上不超过3屏,宽度不超过1屏幕。(以1024X768为准)

● 长小于3屏,宽小于1屏

● 长超出3屏或宽超出1屏

● 长超出3屏,宽超1屏

4、页面避免使用iframe,如果必须使用,采用对应的优化方式。(优化是指:对浏览器是否支持框架进行判断以及iframe宽高度自适应页面)

● 无iframe

● 有1-2个iframe,且无优化

● 多于2个iframe,且无优化

5、页面布局要重点突出,图文并茂;做数据统计,将目标客户最感兴趣的放置在最重要最显著的位置(一般为页面的头部和左上角)

● 重点突出,图文并茂,且在最重要的位置放的是用户最感兴趣的

● 重点不突出或没有图文并茂

● 重点不突出且没有图文并茂

交互设计:

1、表单的填写流程要清晰、简洁,必填的项要放在页面的显著位置(主体页面的头部,),非必填项不能影响用户填写的效率。

● 必填项位置显著,非必填项没有影响用户填写的效率

● 必填项位置不显著或非必填项影响了用户填写的效率

● 必填项和非必填项混在一起,影响了用户填写的效率

2、表单的填写尽量多采用既有选择也有输入的方式,需填写部分需注明内容的实例,并对字段作出限制。

● 既有选择也有输入的方式,并有注明实例

● 没有选择性输入或没有注明填写的实例

● 没有选择性输入且没有注明填写的实例

3、对于交互性的按钮必须清晰突出,以确保用户可以清楚地点击。

● 调查10人(8人或以上的人很快就能点击到按钮)

● 调查10人(只一半的人很快就能点击到按钮)

● 调查10人(6人或以上的人在短时间找不到要点击的按钮)

4、点击:浏览过的信息需要显示为不同的状态,以区分于未阅读内容,避免重复阅读。

● 有不同的状态显示

● 只有部分有不同的状态显示

● 没有状态显示

5、尽量减少新开的窗口,以避免开过多的无效窗口:打开的IE新窗口不超过2层;打开的IE / DIV / alert 新窗口总不超过三个,避免在DIV窗口再打开DIV窗口。

● IE窗口<=2 IE+DIV+ALERT 新窗口 <=3,DIV窗口没有再打开DIV窗口

● IE窗口>=2或 IE+DIV+ALERT 新窗口 >=3或DIV窗口没有再打开DIV窗口

● IE窗口>=2 IE+DIV+ALERT 新窗口 >=3,DIV窗口有再打开DIV窗口

6、涉及到用户操作的东西,要有及时、清楚的错误、成功或信息提示;并要能保存上一步操作。

● 有及时清楚地提示,能保存上一步操作

● 无提示或不能保存上一步操作

● 无提示也不能保存上一步操作

7、对于每一个点击进行友好提示,以增加浏览者的亲和度,对图片、图标、链接有TIP提示或在相应位置加“说明”、“注意”的文字信息。

● 每一个点击进行友好提示

● 有提示,但提示不友好 无友好的提示

8、对用户输入性的操作,提供快速反馈;将光标定位到第一个要输入的表单对象上,给用户心理上的暗示,避免用户焦急。

● 有快速的反馈,且有光标定位

● 反馈不快速或无光标定位

● 无快速反馈、无光标定位

9、栏目的命名要与栏目内容准确相关,简洁清晰,不宜过于深奥。

● 调查10人(8人或以上的人认为栏目命名很好)

● 调查10人(只一半的人认为栏目命名好)

● 调查10人(6人或以上的人认为栏目命名深奥)

10、导航要清晰,栏目的层级最多不超过三层;且随时转移功能,很容易从一个功能跳到另外一个功能。

● 导航栏的层级不超过3层

● 导航栏的层级为4层

● 导航栏的层级多于4层

11、在页面的醒目位置(主体页面的头部),提供信息搜索框和排序功能,便于查找到所需内容

● 有醒目的搜索框和排序功能

● 有搜索框和排序但不醒目

● 无搜索框和排序

12、正常情况下,尽量确保页面在5秒内打开。如果是大 型门户网站,必须考虑南北互通问题,进行必要的压力测试

● 1 – 2秒内打开

● 3 -5秒内打开

● 5秒以上打开

13、让用户控制界面(界面的大小、位置、最大化、最小化、关闭、滚动条控制等)

● 用户能很好的控制

● 控制不完善

● 用户不能控制

14、无论用户浏览到哪一个层级,哪一个页面,都可以清楚知道自己当前的位置,使其做出下一步行动的决定。

● 每个层级每个页面都有当前的位置

● 没有当前的位置或不知道下步的操作

● 用户不知道自己在哪,也不知道下一步干嘛。

15、对信息量大的操作要有批量处理的功能(如审核、删除、添加等)

● 有批量处理的功能

● 只有部分有批量处理

● 无批量处理的功能

视觉设计:

1、界面风格要协调一致,让用户有一个整体的感觉。 (最好能提供换肤的功能)

● 典型用户调查10人(符合8-7人的习惯)

● 典型用户调查10人(符合5 - 6人的习惯)

● 典型用户调查10人(符合1-4的习惯)

2、采用易于阅读的字体,避免文字过小或过密造成的阅读障碍。(主体字 中文采用标准的12PX 宋体;英文采用12PX Arial 字体)

● 文字过小或文字过密

3、动画效果要与主画面相协调,文件大小在10K以上的要有加载画面。

● 动画与页面协调,有加载画面

● 动画与页面不太协调或10K以上动画无加载页面

● 动画与页面不太协调且10K以上动画无加载页面

4、图片展示要比例协调、不变形,图片清晰。

● 图片清晰且不变形

● 图片不清晰或变形

● 图片不清晰且变形

5、图标使用要简洁、明了、易懂、准确,与页面整体风格统一;尽量使用真实世界的比喻。如:电话、打印机的图标设计,尊重用户以往的使用经验。同样的功能用同样的图形。

● 调查10人(8人或以上的人认为图标使用合理)

● 调查10人(只一半的人认为图标合理)

● 调查10人(6人或以上的人认为图标使用不合理)

6、对于长篇文章 进行分页浏览,超过1.5屏时 进行翻页(15寸显示器为准)

● 超过1.5屏能分页浏览

● 2屏以上才分页浏览

● 无分页浏览功能

7、色彩与内容。整体不超过5个色系,尽量少用红色、绿色。近似的颜色表示近似的意思。以恰当的色彩明度和亮度,确保浏览者的浏览舒适度。

● 小于5,主色没有用到红色和绿色

● 整体色调是红或绿或整体色系超出5个

● 整体色调就是红或绿,色系超出5个

8、提供界面的快捷方式,一个功能有多个入口;快捷方式体现出其关联性,放在显著的位置(页面的头部或左上角)

● 在显著有关联性的快捷方式

● 有快捷方式但位置不显著

● 无快捷方式

9、减少短期记忆的负担。让计算机帮助记忆,例:登录的用户名、密码、IE进入界面地址可以让机器记住。

● 有计算机帮助记忆

● 有部分记忆功能

● 无计算机帮助记忆。

对于手机客户端的用户体验标准,可以从这三个方向进行评估:结构设计请检验:1、2、5 交互设计可以全部,但是第5项改为尽可能减少打开链接。视觉设计也是可以全部,但是对于第二项字体,iphone以及安卓,有自己标准的字体,按照其标准设计,就是用户体验的最佳状态。另苹果对UI是由标准的,下载一份标准。按照标准来,体验最好。

(内容整理自知乎)

相关推荐

jQuery VS AngularJS 你更钟爱哪个?

在这一次的Web开发教程中,我会尽力解答有关于jQuery和AngularJS的两个非常常见的问题,即jQuery和AngularJS之间的区别是什么?也就是说jQueryVSAngularJS?...

Jquery实时校验,指定长度的「负小数」,小数位未满末尾补0

在可以输入【负小数】的输入框获取到焦点时,移除千位分隔符,在输入数据时,实时校验输入内容是否正确,失去焦点后,添加千位分隔符格式化数字。同时小数位未满时末尾补0。HTML代码...

如何在pbootCMS前台调用自定义表单?pbootCMS自定义调用代码示例

要在pbootCMS前台调用自定义表单,您需要在后台创建表单并为其添加字段,然后在前台模板文件中添加相关代码,如提交按钮和表单验证代码。您还可以自定义表单数据的存储位置、添加文件上传字段、日期选择器、...

编程技巧:Jquery实时验证,指定长度的「负小数」

为了保障【负小数】的正确性,做成了通过Jquery,在用户端,实时验证指定长度的【负小数】的方法。HTML代码<inputtype="text"class="forc...

一篇文章带你用jquery mobile设计颜色拾取器

【一、项目背景】现实生活中,我们经常会遇到配色的问题,这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。我们可以通过jquerymobile去设计颜色的拾取器...

编程技巧:Jquery实时验证,指定长度的「正小数」

为了保障【正小数】的正确性,做成了通过Jquery,在用户端,实时验证指定长度的【正小数】的方法。HTML做成方法<inputtype="text"class="fo...

jquery.validate检查数组全部验证

问题:html中有多个name[],每个参数都要进行验证是否为空,这个时候直接用required:true话,不能全部验证,只要这个数组中有一个有值就可以通过的。解决方法使用addmethod...

Vue进阶(幺叁肆):npm查看包版本信息

第一种方式npmviewjqueryversions这种方式可以查看npm服务器上所有的...

layui中使用lay-verify进行条件校验

一、layui的校验很简单,主要有以下步骤:1.在form表单内加上class="layui-form"2.在提交按钮上加上lay-submit3.在想要校验的标签,加上lay-...

jQuery是什么?如何使用? jquery是什么功能组件

jQuery于2006年1月由JohnResig在BarCampNYC首次发布。它目前由TimmyWilson领导,并由一组开发人员维护。jQuery是一个JavaScript库,它简化了客户...

django框架的表单form的理解和用法-9

表单呈现...

jquery对上传文件的检测判断 jquery实现文件上传

总体思路:在前端使用jquery对上传文件做部分初步的判断,验证通过的文件利用ajaxFileUpload上传到服务器端,并将文件的存储路径保存到数据库。<asp:FileUploadI...

Nodejs之MEAN栈开发(四)-- form验证及图片上传

这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R...

大数据开发基础之JAVA jquery 大数据java实战

上一篇我们讲解了JAVAscript的基础知识、特点及基本语法以及组成及基本用途,本期就给大家带来了JAVAweb的第二个知识点jquery,大数据开发基础之JAVAjquery,这是本篇文章的主要...

推荐四个开源的jQuery可视化表单设计器

jquery开源在线表单拖拉设计器formBuilder(推荐)jQueryformBuilder是一个开源的WEB在线html表单设计器,开发人员可以通过拖拉实现一个可视化的表单。支持表单常用控件...

取消回复欢迎 发表评论: