于网页上的每个动作,都应该有一个反应。反馈可以告诉用户操作是否成功,但是理想情况下,它可以告诉用户更多信息,例如下一步要做什么或操作为什么需要这么长时间。
您可能遇到了提交表单的情况。单击提交按钮后,没有任何反应。表格提交了吗?可能表单提交失败。
这是一个很好的例子,反馈可以消除用户的任何疑问或恐惧。一个简单的进度指示器可以解决此问题。它会在视觉上告诉用户服务器已经收到该表格并正在积极地处理它。
不提供反馈会引起很多麻烦。例如,我们提交了表单,但没有收到任何反馈。以下情况是可能的:
本文探讨了反馈的重要性,提供反馈的常见UI元素以及反馈的好例子。
用户界面响应动作。这就是我们所定义的反馈。反馈用于吸引,解释和消除恐惧或困惑,所有这些都可以提高用户满意度。
您遇到的大多数反馈对于用户界面都是可视的。对于游戏或其他类型的内容,用户反馈可以采取听觉反馈的形式。让我们关注视觉反馈。
视觉反馈有三个主要目标,详细说明如下。
通常不清楚元素是否可单击。因此,将鼠标悬停在按钮上时,它们会实现视觉反馈。当用户悬停Web元素时,网站设计人员使用CSS:hover选择器来应用不同的样式。我们都知道示例,当您将鼠标悬停在按钮上时,按钮的颜色会发生变化。
这种反馈形式对于告诉用户他们可以与元素进行交互非常重要。没有它,用户必须猜测哪些元素可以参与。但是请记住,触摸设备的用户无法利用悬停效果。
反馈不仅表示行动的结果。它还可以指导用户。视觉效果将用户的注意力吸引到特定的UI元素上,并鼓励用户单击它。因此,您可以使用视觉反馈来告诉用户下一步该做什么。
假设您想增加订阅电子报的用户数量。如何在注册表单中添加一些视觉提示呢?例如,当时事通讯表单可见时,使“提交”按钮短暂摇动以吸引用户的注意。这是增加参与度的一种简单而有效的技术。
最后,反馈对告诉用户正在发生的事情最有帮助。如网站表单示例中所述,进度指示器会告诉用户表单提交已被服务器接收并正在由服务器处理。
这是最关键的反馈形式!一个动作总是需要反应。缺乏反馈是用户与应用程序交互的困惑或恐惧的主要原因。最重要的是,反馈可以消除混乱,从而改善用户体验。
以下是提供反馈及其使用的常见Web元素列表。
提供出色的用户体验是关键。用户体验通常会推动销售。例如,让用户知道他们在结帐过程中要执行的步骤。面包屑是向用户提供快速反馈的强大工具。
同样,反馈有助于消除混乱或担心该过程将花费多长时间。用户可以知道他们必须完成哪些步骤才能有效地购买产品,它为用户提供了指引。
本文显示了反馈的重要性以及您可以实施以提供用户反馈的标准UI元素。反馈的最基本的UI元素之一是进度指示器。这是消除用户对流程的任何恐惧或困惑的好工具。
请记住,您可以通过各种方式使用反馈。除了发出信号活动之外,您还可以提高网站参与度或信号响应能力。
用户运营过程中,经常会遇到这样一个问题,用户的反馈信息和用户真实行为并不一致,他们所讲述的需求和真实需求并不一样,比如,面对网络购票混乱,黄牛抢票猖獗的问题,多数用户都希望12306使用技术手段防止黄牛利用软件抢票,但是当复杂的验证码在购票过程中出现时,人们似乎并不在乎黄牛抢票的问题了,而是想要更加便捷的登录方式。那为什么用户所说的和实际不一样呢?通过了解用户所说与其实际所做不一致背后的真正原因,搞清楚影响用户行为的因素,也许会帮助我们提高用户反馈的真实性。
人并不是完全理性的动物,情感、情绪、认知都会影响到人的行为,以下的几种影响因素最为常见。
一、从众
从众效应是影响用户行为的一个重要因素,所谓的从众,就是个体受到群体的影响,从而和他人保持一致。在现实生活中,从众的例子有很多,记得有一次去游乐园玩,当时走在园区内,看到一条排的很长的队伍,站到队伍的末端根本没法看清人们到底是为了什么排队,于是我就问我前面的那个游客大家都在排队买什么,没想到他竟然跟我说他也不知道,只是先排着,这位游客的行为就是一种典型的从众行为,很多人在排队似乎就暗示着前方有吸引人的东西,从而在心里上影响了个人。这种情况在现实生活中很常见,再比如很多时候我们购买东西并不是因为东西有多好,而是看到了很多人都在为了购买这样东西排队,从而影响了自己。
因此,在对用户使用情况进行调研的过程中,尽量安排用户进行一对一的信息反馈,最大程度上降低群体对个人的影响,减少从众现象的发生。
二、自信
当面对某件事情的时候,人们都会认为自己如何如何。比如,在事业中,多数人都认为自己事业很成功。对于婚姻,绝大多数人都认为自己婚姻幸福。面对困难,多数人都会认为自己能够克服。面对事业和生活,人们总是会展现出自己自信的一面,认为自己比别人强,那么这种情况下,必然会出现自我认知和实际水平不符的情况,一旦这种情况出现在技术人员对用户使用情况进行调研的过程中,最终很可能出现用户的反馈信息和用户真实行为不一致。为了尽可能避免这个问题,当技术人员在对用户使用情况进行调研的时候,调研的内容要针对当下真实的场景,询问用户是怎么做的,针对当前已经出现的问题,用户的真实行为和感受是什么。
三、情绪
人的情绪对人的行为有很大的影响,情绪有很多,包括喜、怒、忧、思、悲、恐、惊七种。行为在身体动作上表现的越强就说明其情绪越强,如喜会是手舞足蹈、怒会是咬牙切齿、忧会是茶饭不思、悲会是痛心疾首等等就是情绪在身体动作上的反应。在真实的环境中,人们的情绪各不相同,比如外部环境安静或者嘈杂,用户使用产品的心情是完全不同的。再比如,12306复杂的验证码带给人们的挫败感,导致多数用户对验证功能评价极差。所以技术人员在对用户使用情况进行调研的时候,要尽量还原真实的外部使用环境和真实的使用过程,做到不影响用户的情绪和心态。
总之,用户调研就是要尽可能的还原用户在真实环境下的真实使用情况,进行一对一的信息反馈,避免他人的影响,问题客观公正不带有任何倾向。只有这样,反馈结果才能和用户真实行为保持一致。
来源:崇立鑫博客(微信公众号:clxzmt QQ号:2042669521),原创文章如转载,请注明本文出处!http://www.chonglixin.com/531.html
众号【传智播客博学谷】回复关键词:前端 PS Java(100G) Python(80G) 大数据 区块链 测试 PPT JS(40g+300教程) HTML 简历 领取相关学习资料!
一、HTML
1、<image>标签上title属性与alt属性的区别是什么?
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》
2、分别写出以下几个HTML标签:文字加粗、下标、居中、字体
加粗:<b>、<strong>
下标:<sub>
居中:<center>
字体:<font>、<basefont>、参考《HTML标签列表》
3、请写出至少5个html5新增的标签,并说明其语义和应用场景
section:定义文档中的一个章节
nav:定义只包含导航链接的章节
header:定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer:定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside:定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。
参考《HTML5 标签列表》
4、请说说你对标签语义化的理解?
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
c. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
d. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
5、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行。
在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
6、你知道多少种Doctype文档类型?
标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,
Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
7、HTML与XHTML——二者有什么区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
参考《XHTML 与 HTML 之间的差异》
8、html5有哪些新特性、移除了那些元素?
a. HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签(header,nav,footer,aside,article,section)
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件,calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素:
a. 纯表现的元素:basefont,big,center, s,strike,tt,u;
b. 对可用性产生负面影响的元素:frame,frameset,noframes;
9、iframe的优缺点?
优点:
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点:
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面,不容易管理。
参考《iframe的一些记录》
10、Quirks模式是什么?它和Standards模式有什么区别?
在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD,所以IE6就假定 如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。
区别:总体会有布局、样式解析和脚本执行三个方面的区别。
a. 盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。
b. 设置行内元素的高宽:在Standards模式下,给等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。
c. 设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用
d. 设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。
11、请阐述table的缺点
a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td
c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。
e. 不够语义
参考《为什么说table表格布局不好?》
12、简述一下src与href的区别
src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接
公众号【传智播客博学谷】回复关键词:前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取相关学习资料!
*请认真填写需求信息,我们会在24小时内与您取得联系。