测试网页表单的交互设计

作为网页表单交互设计，有时候网页设计师本身要进行一些极端的测试，这就包括填写和思考一些普通用户很难想去做的一些动作。比如在价格输入框中填写英文字母，什么都不输入的时候按提交按钮等等。

一般作为测试者，我们都要尽可能的把一切可能发生的用户行为考虑到，即便这种可能性出现的概率很低。

以下我们来具体分析啊下网页表单的交互设计中的极限测试以及对淘宝等网站进行观察，看看这些大网站对于表单交互测试做到了什么程度！

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想想这个地方的校验，除了自主响应，还有没有别的方案？

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

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

本文名称：测试网页表单的交互设计
文章源于：https://www.cdcxhl.com/news45/315295.html

成都网站建设公司_创新互联，为您提供域名注册、App开发、品牌网站设计、虚拟主机、响应式网站、

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联