当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 应对极端并微小的错误的网页用户体验设计

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 应对极端并微小的错误的网页用户体验设计


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-01   浏览: 61 ::
收藏到网摘: n/a

用户是上帝,即使用户是无理取闹的,也是在帮助我们提供发现问题的机会。

本文所说的无理取闹的用户,其实是设计师自己。因为设计师是最无理取闹的用户(为什么呢?)

有一些极端的情况,做为真实的客户,也许一辈子也遇不到几次。

如图:

1. 你会在search bar什么都不输入的情况下就按search button吗?

2. 明知道这个输入框应该不支持字母,也不应该超过最大页码,还输入这样的数值吗?

3. 在价格区间里输入字母,比如a?

一般人都不会,设计师例外。设计师得考虑到种种极端的情况,以及在每种情况下如何让系统响应,于是他就成了最无理取闹的用户。设计师如果不考虑这种很mini也很没价值的细节,万一某天遇到一些无理取闹的客户,一试试出了问题,他会在某某blog上,写哈哈,这个很牛的网站原来会犯这种错误——我承认,这种行为一般还是所谓的设计师干得出来。

Anyway,今天,终于完成了项目的设计说明文档后,心怀对某些校验细节的纠结,我也无理取闹了一把,“骚扰”了众多网站,尝试了各种极端情况,也发现了有些貌似体验良好的网站的尴尬与措手不及。但是说真的,who cares?毕竟真实的用户不会这么做。

今天不玩大的,就玩简单的页码和价格区域的极端情况。

一,淘宝

1. 在价格区间里输入字母——淘宝即时自动清除,压根就不让你填写,比较强的是,即时我无理取闹到粘贴1A1这样的字符串,淘宝也即时将中间的A过滤掉。

2. 在页码输入框里输入字母——点击确定后,页面刷新,页码还是定位到页码1,同时,输入框里也清除掉字母。

有趣的是,即时我当前已经在其他页面,如第99页,在输入框里输入字母后,页面刷新,还是给我定位到第一页。

3. 再无理取闹一些,我在输入框里输入了200,超出最大页码,页面刷新后,淘宝仍给我定位到页码1.——貌似逻辑是输入不合规范要求的字符,统统刷新后回归页码1.

我的评价:第一种情况,方案尚可,避免出错,也不会弹出提示。第二种情况:定位到页码1就傻了,为什么不能停留在我当前的页码上。至于第三种情况,我倾向于定位到最后一页。

二,eBay

1. 在价格输入框里输入字母——点击go,出现提示,恩,看起来有点费劲。

2. 在页码里输入字母——go左点右点点来点去没任何反应,eaby是在说:你无理取闹,我干脆不理你,看你怎么办?

3. 在页码输入框里输入超过最大页码的数字——点击go后页面刷新,定位到最后一页。ebay是在说:不好意思,我们顶多就这么多。

我的评价:第一种情况,还是比较的出错提示的。第二种情况,我以为系统卡住了,等了半天。第三种情况,ebay做得还不错。

三,阿里巴巴国际站

目前没有价格区间,只有骚扰页码了。

1. 如图所示,输入字母后点击go出现警示框——而且还是感叹号。唉,一本正经的严肃的阿里巴巴。

2. 在输入框里输入超过最大页码的数字——页面刷新后,回归到第一页。

我的评价:一本正经的提示,过火了。第二种情况,页码对溢出数值的反应和淘宝一样,需要改进。这点,定位到尾页是不是更符合用户原始需求?

四,Google

 

 google没跳转到第几页的功能,就拿图一中的zip输入框尝试情况1.

1. 输入字母——点击go后,页面刷新,除了将刚才的字母清除,任何变化也没有。

2. 在价格区域输入框中输入字母,点击go后,页面刷新,清除了刚才所填的字母,还是任何变化也没有!!

看来google的策略就是:你无理取闹,我也无理取闹,你拍个巴掌回来我就拍个巴掌回去,你不理解我的响应?那你到底在期待什么结果?

也顺便骚扰了一下中国的有道购物拍拍两个网站,发现方案跳不出以上的几种。但是,还是有些细节上的差异,比如,在有道的价格输入框中,先是输入正确的数值(如1-100)后,更换为字母,页面像google一样照常刷新,但是会回归到上一次的状态(1-100).

google在同样的情形下,却回归到初始状态。

映射到现实生活中的案例:

骚扰到这里,头脑里突然闪现出一幅画面,如果你有一天,很无聊,去无理取闹一下(傻子也可以啊,傻子就不能是叫做无理取闹了),去一个西瓜店,对着店主说:老板,请给我一个足球。

老板可能出现的反应和我的反应:

A. 装作没听到,没有任何反应,再喊一声,还是没反应。

——他聋了吗?还是压根没注意到我?eaby翻页就是这样干的。

B. 吼一声:你有病呀?没看到牌子上写着西瓜!

——我好害怕呀,这个老板心情不好吧?阿里巴巴翻页就是这样干的。

C. 直接给你一个西瓜。再问,还是给你一个西瓜。

——先是莫名其妙,然后,哦,原来这是西瓜店。google价格是这样干的。

D. 问你:啥?你再说一遍?我又说:请给我来一个足球,老板还问:请给你来个啥?

——哦,好吧,我服了你,我还是要西瓜吧。淘宝价格是这样干的。

E. 哦,某位同学说了,为什么不能把你要求填写的规范直接写出来呢?那就可以避免出错了呀,某些情况下是可以(若预料到50%的人会出错),但是很多时候也如同一幅滑稽画面:“西瓜店门口竖起硕大的牌子,说——本店只卖西瓜,请不要到本店买足球或其他物品”。

总结一下:面对“极端并微小的错误”时,各个网站的反应:


值得说明的是,具体设计时,肯定要“具体情况具体对待”,比如淘宝的自动纠错,固然不错,但是也只适用于字符单一限定的情况,比如价格区域不可能出现字母,所以可以即时清空。而google shopping中的zip,states那个输入框,同时存在多种字符,就不能够自动纠错(需要整体语义判断),就好象一个顾客说“老板,我要一个足球——一样的西瓜”,得等用户说完。

不弹出警示框,也不破坏页面结构,大家不妨帮google想想这个地方的校验,除了自主响应,还有没有别的方案?

校验的包容性:

任凭想破了脑袋,我们还是不能预料到所有填写出错的情况。用户输入6a我们可以清除字母,用户输入6.我们可以换算为6.0,用户输入6.6.6.呢?

这就是前几天我被问到的问题……

校验,似一道关卡,我们有原则,也有人情。这个人情就是——包容性,能不提示出错就不提示,能让用户操作不中断就不中断,甚至在一些甚为微小的出错中,我们可以直接替用户做主。

先举一个反例不够包容的校验,来自某某B2C网站:


这个网站完全可以避免弹出这个不够亲切的窗口:直接检索价格等于99或者小于等于99的产品即可。

在这种情况下,有很多网站做得相当不错,即使将价格输为前大后小,一样能够包容通过:自动转换为前小后大。他们是怎么做到的?一句话:多替用户想想,多想想细节。用户体验不是夸夸其谈就谈来的。

校验的包容以价格区间举例:

1. A输入框输入数字小于B输入框:

正面案例:淘宝和eaby、google均能够自动替换为前小后大,出现相应的区间结果。

反面案例:在amzon价格区间中输入300-100.网站照常刷新,但是结果和筛选调整停留在输入之前的状态,看来是输入无效。

2. A和B两个输入框输入.6或6.这样的字符组合:

正面案例:Amazon和eBay均会把6.换算为6.0,而.6换算为0.6进行搜索。甚至在eaby的价格输入框里输入..6这样的字符,它会自动四舍五入,以0.01进行搜索。

反面案例:goole只将6.这样的字符换算为6,但是若输入.6这样的字符就熟视无睹,不影响结果且会被清空——看来google认为不应该有那么便宜的商品。上文说淘宝是自动清空非数字字符的,所以即使小数点是价格的一部分,它也照清不误。

而顺手试了一下拍拍的表现,啊噢~

老实说,单纯从字眼上扣,我认为我可没错,我输的难道不是就是小数点和数字吗?

3. A和B均输入一样的数字,如100.

正面案例:ebay、淘宝、amazon均是直接用price=100进行搜索。

反面案例:google,它直接说没有找到任何结果。这一点我理解google,因为它都是采集的产品,都是价格区间,也许找不到完全符合价格等于100的产品,但是是否也可以按“小于等于100”来搜索?

4. A输入框输入数字,B输入框留空。

基本上都算是正面的例子,各个网站都是按照大于等于A输入框中的数字进行搜索。反之,若在B输入框中输入数字而A留空的话,也是按照小于等于B输入框数字进行搜索的。

校验的“万全之策”

当然,任凭我们怎么绞尽脑汁,也不能完全预料到用户会如何输入,比如我干脆输入.6.6.6..6,你能怎么办?聪明的eaby都傻眼了,只能提示说:

但是也可以用:只留两个小数位和只保留第一个小数点的方式进行包容,我们的前端就这样做了,他们技术很牛。

但是,包容总是有一定的限度,必要的时候还是得严肃一些,不然不但让我们这些设计者牺牲了大量的脑细胞去想这些也许不可能出现的意外,还会让系统有很大的压力。

所以,我们可以预测到一些情况,如上文输入框A和B的故事,给出转换的方案。然后,在这几种情况外,需要给出一个统一的方案:如淘宝的清空战略,又如ebay的红色提示,再如google的“自主响应”战略。具体问题具体对待了。用户体验是保障大多数用户体验良好,不是极少数,必要的时候牺牲一下这极少数的用户体验也未尝不可。

所以我才反对在用户还没输入的情况下就严肃地提醒:请在价格区间里输入正常的正数数字(半角),格式如……,这就好比是在西瓜店门口竖着一个硕大的牌子,曰:本店只卖西瓜,请不要来本店买足球等其他物品,让那99%的本来就是要来买西瓜的人觉得莫名其妙,破坏了大多数的“正常用户”的体验。