提高WEB用户体验至关重要的几点

标签: 业界观察 web | 发表时间:2015-06-17 07:44 | 作者:techug
出处:http://www.vaikan.com

一个精通算法经验丰富的后端工程师,也不一定能够完成出色的前端页面,对逻辑经验丰富的程序员来说,html/css显得繁琐低效,即便是SASS、LESS这样的框架也难以让传统程序员理解前端工程师,多数人眼中前端是编程与设计各占一部分的新职业,特别是在众人把用户体验挂在口中时,更让人觉得前端应当对此有独特的理解。其实在我看来,用户体验这东西不管是从哪方面来说都没有一个确切的定义,可能前端可以更多的用经验来认识它,亦有可能在不同人眼中的web用户体验有所差别,只不过方向相同而已。

笔者也从自己的经验中总结了一些WEB中用户体验的实际细节,当然也不可能面面俱到,限于篇幅笔者就只分享几个包含显著特征容易被认可的细节:

AJAX

看到这里肯定有人忍不住笑出声,的确这已经不算什么新技术,但要让我站在用户的角度来评价网站技术上的变化中给访问者带来最大友好性的一项,我肯定会选AJAX.

记得在我刚刚开始学会上网时候,不管是注册页面还是登录都是我最烦的,那时候网速又不快,打开一个注册页面就要几秒时间,然后从上往下有几十个选项要全部填满,比如其中有一项让我填写“密码保护问题”,这个设计简直让人想吃电脑,因为很多人一看这种问题应该都会和我一样随便写几个数字就提交,然后等几秒加载完网页提示“密码保护问题”不允许有数字,同时之前填写的十几项数据全部清空需要重新再来一遍,再花几分钟写完之后提交又提示不允许有字母,再来一遍,有时候还会提示字符太短太长有空格超时之类,总之如果你第一次注册这种页面,至少要花掉十几分钟,而且还是在重复做一件事。从网站运营者角度来看这也很烦,重复十几分钟填写表单很容易就失去很多潜在用户。

在AJAX的异步请求出现之后,这种情况明显的改善,给用户的体验感最明显。用户并不知道何时已经提交请求,就拿刚才表单的例子来说,如果每填写一项都会在当前表单的最后提示具体错误类型(在用户未点击时已经异步提交了请求并且用返回数据更新部分页面),这就给用户很直观的提示,这种即时的互动让访问者能够很直观的感受到这是一个友好的网站。(当然用javascript也能做到部分表单验证,这只是举一个例子)。在不重新加载整个页面,通过操作DOM来改写小部分数据这点上也能给访问者带来极大的交互感,现在流行的微博就是最好的例子,在发送微博/评论/转发之后用户会发现不用刷新等待整个页面加载,操作之后立刻会有小部分的页面发生变化,虽然看起来微不足道,但对一个访问者来说,这足以让他们欣喜。

网页字体

网站中所有的文字内容表达方式都是通过字体,合理的字体无疑会给用户更好的体验感。在业内来说豆瓣可能是对字体研究最多的一个网站,拿豆瓣读书都来他们用Helvetica和Arial这两种差别非常小的字体,这种非衬线字体很容易让人一目了然同时富有一些科技感,豆瓣本身就是以图片加上简短语句组成,让人能够从字体中快速找到重心是设计的目标所在。

有人担心非衬线用作正文对阅读体验有影响,实际上不难发现国外很多网站都用非衬线字体来处理正文,当然也不排除他们可能考虑的更多是英文。其实我还是非常喜欢非衬线体,它们看起来更富美感,而且如今大量的文字在互联网上比较少见,一些活泼具有现代感的非衬线字体也逐渐被更多的开发者认同而且使用。

除去这些,字体还可以在选择上再细分一些,记得曾经看过一篇统计,不同的字体会影响用户对站点权威性的信赖程度。比方说在一个公司网站上大量使用类似于幼圆、Cursive一类字体,很容易让访问者不信任网站,当然如果是以娱乐为主的网站也不能过于严肃和简朴,在使用时既要考虑到大众用户的接受程度,也要知道自己的网站是什么定位,当然技术性的问题也不能忽略,像是火狐比IE区分sans-serif要更模糊一些,有的字体“O”和“0”、“L”和“1”容易让人难以区分(代码较多的站点需要考虑)等等,这样综合对比选择得到的字体无疑能让网站更有魅力,从而留下更多的用户。

顺便一提,在使用字体时注意版权。

加载速度

很多用户在还未见到你出色的设计和内容之前就已经离开了页面,这是因为网站加载时间实在是太长,已使访问者失去耐心。其实很多的访客不关心脚本和图片的加载顺序,他们只要看到网站的整体结构能够迅速的加载出来就可以开始浏览,即便是其他元素逐渐加载也可以接受,基于这点,我们可以使用很多延时加载的方法来使用户更快的见到页面。除此之外还有很多因素可能会对加载速度造成影响,也有逐一优化的办法,之前我已经写了两篇相关文章来解决此问题(提高网站加载速度的解决方案有多少),不再细述。

结构设计

不知道大家发现没有,近来很多网站都喜欢把菜单fixed在顶部(维特博客就是个例子),只要这个菜单选择项不是太多,访客对这样的固定菜单接受程度还是很高的,这只是设计中的一个小例子,相类似的有很多,比如在表单中以深浅颜色区分每一行,以提高可阅读性;在激活窗口时为当前控件添加一个边框,使用户能够更建议的分辨自己在操作哪个窗口等等。很多的设计与排版方式都已经得到了大众认可,可以作为网站设计时的参考。

网站结构设计的好看不好看对访客来说虽然有影响,但也不至于立刻离开,而且即便是非常精致的页面却对用户不怎么友好,想必也不会有多少人愿意访问。

举个例子,以前我用好搜(360搜索)的时候总感觉怪怪的,没有google和百度顺手,研究了一段时间之后才发现好搜的的主页搜索框比百度和google要低一些,Google到顶部固定菜单的距离是286px,百度是192px(未登录238px),而好搜则是328px。相比之下,好搜的搜索框更趋向于屏幕中间,而百度与Google则是在屏幕中上方,对于已经常年习惯了百度和Google搜索的用户来说,想要改变这个习惯来适应好搜多少有些困难,除此之外搜索框还有结果页也有几个问题不一一细述,360这样做无外乎两点,一个是不在乎/不知道/不关心用户体验,一个就是故意有所不同,想要培养自己的用户习惯。(在我看来也不怎么成功)

细节决定成败

乔布斯的父亲是个木匠,曾经教给乔布斯一个理念,就是橱柜的背面里层也要细致处理甚至是打磨光滑,即便用户看不见。在理想主义的伟大试验品“麦金塔”出世之后,有人甚至感叹,就连电路板上的电路图都能当作艺术品,的确如此,乔布斯就曾经开除一个对电路图美学设计不满的员工。一个伟大产品的诞生并不是一蹴而就的,必然经过了长期的沉淀积累与琢磨,但仅此依旧不能称之为伟大,只能算成功。一个产品细节上的最后润色可能才是决定它价值的关键。对于WEB开发者来说,更是如此。

很多时候用户体验应遵循“less is more”,堆积如山的垃圾信息不仅无用还破坏了整体的用户感受,这也就是所谓的设计细节决定成败。

如果把WEB用户体验展开来说,就算说个一天一夜也说不完,太多的细微之处需要我们留意,而且想要做好任何一处都并不是简单的事。对于开发者来说,对用户体验有更深更实际的理解就是把自己视为用户,在逐渐满足自己细枝末节体验感的同时,也丰满了站点的用户体验感受。

相关 [web 用户体验] 推荐:

提高WEB用户体验至关重要的几点

- - 外刊IT评论
一个精通算法经验丰富的后端工程师,也不一定能够完成出色的前端页面,对逻辑经验丰富的程序员来说,html/css显得繁琐低效,即便是SASS、LESS这样的框架也难以让传统程序员理解前端工程师,多数人眼中前端是编程与设计各占一部分的新职业,特别是在众人把用户体验挂在口中时,更让人觉得前端应当对此有独特的理解.

用户体验

- tal-rasha - 博客园-首页原创精华区
    用户体验是一个很大的话题,先从一个故事说起.     周末参加了两天的PMP培训,听课期间注意到老师的一个细节,在讲选择题的时候,选项A、C读音正常,而“B”老师读为Boy,“D”老师读为Dog.     刚听到的时候大家莞尔一笑,以为这是个善意的玩笑.     很快,我想明白了,B和D的发音类似,容易混淆;Boy和Dog是简单的单词,发音能够明确区分,也没有类似Bog和Doy的读音混淆.

用户体验的价值

- 華 - 技术改变世界 创新驱动中国 - 《程序员》官网
当今时代,包括苹果、谷歌、Instagram等不同类型、不同规模、不同领域的企业和团队的成功用户体验案例,时时激发着你的热情、激励着你的梦想,向你描绘了运用用户体验力量的前景. 然而,一旦开始尝试在企业中构建用户体验的力量时,你会发现:用户体验的投入与回报难于衡量,用户体验的工作方式可能与团队以往的工作方式难于融合,用户体验人才难于获得、难于领导、难于培养,用户体验的力量难于持续成长.

用户体验几问

- - 互联网的那点事
对用户来说,他们可能很自然地会期望各种移动服务跟他们的日常生活息息相关,希望每款应用界面美观易于操作,而且性能良好. 但是,不可否认的是,手机作为一种媒介本身还是有一定的局限. 这就导致,在很多情况下,这三个要求很难同时满足. 很多时候,应用的性能和表现常常被开发者忽视. 但是实际上,它对用户体验的影响是先决的.

用户体验地图

- - blueui
体验地图是一种了解用户与产品/服务/系统之间交互的工具,辅助分析、改善用户体验;一张体验地图可以直观的表达出用户操作流、期望、特定的目标、用户情绪状态和整体的体验链,确定用户可能会与你的产品的一些接触点,让你整体把控和评估产品体验. 现在制作体验地图有很多种方法和观点,没有形成一套很客观的方法,下面介绍一下AdaptivePath的Chirs Risdon的五维度理论(原文):.

记录用户体验细节

- 競 - rank's technical notes
突然有个想法,想把原来我发现的,看到的,听到的一些好的用户体验列出来,这些经验对于做终端的开发,都是值得我们学习的. 现在能想到的几条,以后想起来慢慢加上来. windows虽然IE做得不怎么样,但你可知道触发拖动事件不是mousedown开始就叫拖拽(DragDrop),而是有两个条件,一个是mousedown后1秒,或者鼠标移动3px后再开始触发拖动的么.

Firefox 4 中的用户体验改进

- chenqj - M.J.
翻译自火狐用户体验设计师Limi的博客文章. 我们现在已经在正式发布Firefox 4的最后阶段了,Firefox 4马上就要正式发布了——很可能就在下个星期——现在我们一起来看看在这个版本中用户体验方面有哪些非常重要的变化和改进. 您可能已经知道了,Firefox 4的外观会在所有支持的平台上作出重大的改变——Windows、Mac OS X、Linux/BSD.

谷歌用户体验设计准则

- 雄杰 - 所有文章 - UCD大社区
Googl用户体验团队致力于创建有用的(useful)、快速的(fast)、简单的(simple)、有吸引力的(engaging)、创新的( innovative)、适合大众的(universal)、有用的(profitable)、漂亮的(beautiful)、值得信赖的(trustworthy)、个性化的(personable)的应用.

“抄袭”生活中的用户体验

- Metalrush - 所有文章 - UCD大社区
仿生学是研究生物系统的结构和性质以及工程技术提供新的设计思想及工作原理的科学,而今天我要分享的“仿生学”是指仿照人们生活中的认知心理,所产生的行为事件,并将他们“抄袭”应用到产品设计模型中,让它更易于被人接受和使用. 自从接触了用户体验工作后,总是觉得生活中的用户体验无处不在,很多事情或者某一瞬间都可以被当做很好的用户体验案例来借鉴,给大家举几个例子.