存档: ‘用户体验’ 分类

“称心”的体验(一)

5 条评论 2010年7月27日

banner0727

每次体验一个网站的时候,打动人心往往是那些细节上的体验。在这里做个记号,以便以后查看。

 

爱护用户的“鼠标手”

 

一、光标输入焦点初始化

 

每天受伤较多的除了眼睛就是我的右手, 老是要在键盘和鼠标之间切换,老是要做光标的定位操作,老是 现在很多网站很贴心的会把鼠标光标默认在某输入框内,以减少该行为的操作步骤 常用到就是搜索输入框,如各大搜索网站的首页,都会默认把光标定位在输入框内。 还有一种情况就是表单页面,如注册, 登录, 发表日志等页面,会把光标定位在第一项表单元素  

 

如:网易邮箱的登录页面 

163 

 

二、“就地”解决

 

曾经“弹窗”让我们可以在同一个页面里解决很多需求,实现了“足不出户”,后来渐渐的被赋予了太多的功能,久而久之“名声”显得很不好。在这里要讨论的是数据操作这一类的弹窗展现形式。如用户提交“删除”请求时,会有个确认的对话框。一般情况下是,对话框会出现在屏幕的正中央,用户的鼠标需要前进一段“道路”才能定位到操作对象。我们的手很多时候就是在做这些“移动”的操作。 

再看看QQ的微薄“确认”操作,显得轻巧很多,更主要是用户几乎不需要再次挪动鼠标,就可以“就地”解决。 

delete

 

其实这一点在著名的“费茨法则”里也早就提到了。 

 

 

“温馨”的提示 

 

一、必要的“干扰”提示

 

提示过多,表现形式过于复杂,都会干扰到用户的体验。但有一些提示,如一些没有进行数据提交就离开页面的提示,就显得很有必要,避免了因误操作而给用户带来的损失

下图是网易邮箱没保存/发表下,离开写信页面的提示。但很多网站都忽略了这点。

mail

 

 

二、“动画类”的反馈提示

我们经常用“文字”来传达提示的主要内容,用“颜色”属性来对比突出,但随着技术的发展,更多新颖的交互模式得到广泛应用,“动画类”的提示就是一种。

下面看一下具体的实例:

 

搜狐白社会的打卡成功提示:

bai

 

新浪微薄的发表成功后的划出效果:

sina

 

上面的提示比“文字”类提示显得更形象,更有趣味性。

 

这次就写到这里,下期再会。

 

响应的体验

4 条评论 2010年5月10日
响应的体验
 
响应速度是衡量网站用户体验的重要指标,一个响应及时,交互顺畅的网站更能让用户感到信任,愉悦。反之用户的心情会瞬间变得糟糕,甚至离去。
我们可以看一下大腕们的数据统计
•Amazon 慢 0.1 s -> 1% 用户放弃交易
•Google 慢 0.4s ->  0.6% 放弃搜索
•Yahoo! 慢 0.4s ->  减少 5%-9% 的流量
•Bing 慢 2s ->  收入下降 4.3 %

 

如何提高响应速度

 

用户发出请求到页面加载完毕, 需要经过慢慢长路,因而影响响应速度也显得较为复杂。除了用户的上网环境无法改变外,我们一般会从技术上优化我们输出的代码。雅虎的YSlow, 图片、HTML、CSS、JS等优化技巧已经被大家广为应用。但很少从产品开发过程的源头去照顾这个体验的指标。到测试阶段, 数据一跑出现问题时, 才会匆忙的去救火。
本人粗略从产品规划, 交互设计,视觉设计阶段想到的:
产品规划阶段:
国内的页面一般都是“粗又长”生怕用户不知道我们有这个功能,导致页面很臃肿,加载较慢。
如果在规划阶段理解用户的目标和期望后选择能够达成其目标的“最轻”的设计,会显得更好。而不是花费大量的精力去设计些看上去很好, 但用户实际上不接受或不是很需要的需求 。
另外在新产品上线以后的改进过程中,经常做的是加法,增加新的功能或改进现有的功能,而很少会做减法来瘦身,渐渐的有些就变成了鸡肋。
 
交互设计阶段:
到这个阶段产品的功能点已经基本确认,但如何更好的展示 而不是一味的释放出来,让用户做迷茫的选择。个人觉得首先重点考虑页面的核心要素,对于那些不是很重要,就做引导链接, 或者干脆不显示。 
在交互模式的选择上,应该要考虑到技术的实现成本,不要一味的创新。还应当做好响应较糟糕时给用户的反馈提示,一方面告知用户的请求,程序已经接受,一方面也可以缓解等待时焦虑的心情。何时需要做反馈提示,可以查看Jakob Nielsen提出的3个交互响应参数。
 
视觉设计阶段:
这个阶段应该是为了更好的传达产品信息,所以设计时不应该产生附加的信息,力争做到页面简洁,传达顺畅。
以下是个人的意淫:
尽量优先考虑代码可以直接实现的样式,少使用图片,减少加载;
阴影使页面有立体的效果,但需要考虑前端的实现成本;
透明的表现形式确实很酷,如果整体实现代码已经较复杂的话,最好考虑其他形式;
图标也是种传达语言,但不要滥用,错用,受伤的是用户;
一致性是产品视觉设计要遵循的原则,设计时就应该模块化,代码的可重用性;
总之,设计时应该时刻心存用户,包括其下游—前端工程师。
 

其他途径:

 

页面延迟加载:
页面打开时只加载首屏的内容,而不是一次性加载完毕,减少加载时间。等用户拖动屏幕滚动条时再加载当前屏幕的内容。对于大流量,大信息量的页面可以考虑这项技术 
示例:淘宝的首页
taobao
 
局部延迟加载:
优先加载重点内容,局部区域先用占位图片代替,比较典型的就是广告的加载处理。
示例:天涯
tianya 
  
用户体验是贯穿整个产品的开发流程,不只是UED单个部门的责任。同样如果一开始就考虑响应的体验,做最轻,最合适用户的产品,用户也就不会老麻烦F5键了。