当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 测试网页表单的交互设计

心得技巧
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   浏览: 81 ::
收藏到网摘: 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. 问你:啥?你再说一遍?我又说:给我来一个足球,老板还问:来个啥?你再说一遍?

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

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

 

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

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

但是,也许是我想多了,也许设计师压根就没想那么多,也许只是某个人某时就顺便做成这样了,所以大家不要当真啊。