測(cè)試網(wǎng)頁(yè)表單的交互設(shè)計(jì)

作為網(wǎng)頁(yè)表單交互設(shè)計(jì)，有時(shí)候網(wǎng)頁(yè)設(shè)計(jì)師本身要進(jìn)行一些極端的測(cè)試，這就包括填寫和思考一些普通用戶很難想去做的一些動(dòng)作。比如在價(jià)格輸入框中填寫英文字母，什么都不輸入的時(shí)候按提交按鈕等等。

一般作為測(cè)試者，我們都要盡可能的把一切可能發(fā)生的用戶行為考慮到，即便這種可能性出現(xiàn)的概率很低。

以下我們來(lái)具體分析啊下網(wǎng)頁(yè)表單的交互設(shè)計(jì)中的極限測(cè)試以及對(duì)淘寶等網(wǎng)站進(jìn)行觀察，看看這些大網(wǎng)站對(duì)于表單交互測(cè)試做到了什么程度！

1. 你會(huì)在search bar什么都不輸入的情況下就按search button嗎？

2. 明知道這個(gè)輸入框應(yīng)該不支持字母，也不應(yīng)該超過(guò)大頁(yè)碼，還輸入這樣的數(shù)值嗎？

3. 在價(jià)格區(qū)間里輸入字母，比如a？

一般人都不會(huì)，設(shè)計(jì)師例外。設(shè)計(jì)師得考慮到種種極端的情況，以及在每種情況下如何讓系統(tǒng)響應(yīng)，于是他就成了最無(wú)理取鬧的用戶。設(shè)計(jì)師如果不考慮這種很mini也很沒(méi)價(jià)值的細(xì)節(jié)，萬(wàn)一某天遇到一些無(wú)理取鬧的客戶，一試試出了問(wèn)題，他會(huì)在某某blog上，寫哈哈，這個(gè)很牛的網(wǎng)站原來(lái)會(huì)犯這種錯(cuò)誤——我承認(rèn)，這種行為一般還是所謂的設(shè)計(jì)師干得出來(lái)。

Anyway，今天，終于完成了項(xiàng)目的設(shè)計(jì)說(shuō)明文檔后，心懷對(duì)某些校驗(yàn)細(xì)節(jié)的糾結(jié)，我也無(wú)理取鬧了一把，“騷擾”了眾多網(wǎng)站，嘗試了各種極端情況，也發(fā)現(xiàn)了有些貌似體驗(yàn)良好的網(wǎng)站的尷尬與措手不及。但是說(shuō)真的，who cares？畢竟真實(shí)的用戶不會(huì)這么做。

今天不玩大的，就玩簡(jiǎn)單的頁(yè)碼和價(jià)格區(qū)域的極端情況。

一，淘寶

1. 在價(jià)格區(qū)間里輸入字母——淘寶即時(shí)自動(dòng)清除，壓根就不讓你填寫，比較強(qiáng)的是，即時(shí)我無(wú)理取鬧到粘貼1A1這樣的字符串，淘寶也即時(shí)將中間的A過(guò)濾掉。

2. 在頁(yè)碼輸入框里輸入字母——點(diǎn)擊確定后,頁(yè)面刷新，頁(yè)碼還是定位到頁(yè)碼1，同時(shí)，輸入框里也清除掉字母。

有趣的是，即時(shí)我當(dāng)前已經(jīng)在其他頁(yè)面，如第99頁(yè)，在輸入框里輸入字母后，頁(yè)面刷新，還是給我定位到第一頁(yè)。

3. 再無(wú)理取鬧一些，我在輸入框里輸入了200，超出大頁(yè)碼，頁(yè)面刷新后，淘寶仍給我定位到頁(yè)碼1.——貌似邏輯是輸入不合規(guī)范要求的字符，統(tǒng)統(tǒng)刷新后回歸頁(yè)碼1.

我的評(píng)價(jià)：第一種情況，方案尚可，避免出錯(cuò)，也不會(huì)彈出提示。第二種情況：定位到頁(yè)碼1就傻了，為什么不能停留在我當(dāng)前的頁(yè)碼上。至于第三種情況，我傾向于定位到最后一頁(yè)。

二，eBay

1. 在價(jià)格輸入框里輸入字母——點(diǎn)擊go，出現(xiàn)提示，恩，看起來(lái)有點(diǎn)費(fèi)勁。

2. 在頁(yè)碼里輸入字母——go左點(diǎn)右點(diǎn)點(diǎn)來(lái)點(diǎn)去沒(méi)任何反應(yīng)，eaby是在說(shuō)：你無(wú)理取鬧，我干脆不理你，看你怎么辦？

3. 在頁(yè)碼輸入框里輸入超過(guò)大頁(yè)碼的數(shù)字——點(diǎn)擊go后頁(yè)面刷新，定位到最后一頁(yè)。ebay是在說(shuō)：不好意思，我們頂多就這么多。

我的評(píng)價(jià)：第一種情況，還是比較的出錯(cuò)提示的。第二種情況，我以為系統(tǒng)卡住了，等了半天。第三種情況，ebay做得還不錯(cuò)。

三，阿里巴巴國(guó)際站 目前沒(méi)有價(jià)格區(qū)間，只有騷擾頁(yè)碼了。

1. 如圖所示，輸入字母后點(diǎn)擊go出現(xiàn)警示框——而且還是感嘆號(hào)。唉，一本正經(jīng)的嚴(yán)肅的阿里巴巴。

2. 在輸入框里輸入超過(guò)大頁(yè)碼的數(shù)字——頁(yè)面刷新后，回歸到第一頁(yè)。

我的評(píng)價(jià)：一本正經(jīng)的提示，過(guò)火了。第二種情況，頁(yè)碼對(duì)溢出數(shù)值的反應(yīng)和淘寶一樣，需要改進(jìn)。這點(diǎn)，定位到尾頁(yè)是不是更符合用戶原始需求？

四，Google

google沒(méi)跳轉(zhuǎn)到第幾頁(yè)的功能，就拿圖一中的zip輸入框嘗試情況1.

1. 輸入字母——點(diǎn)擊go后，頁(yè)面刷新，除了將剛才的字母清除，任何變化也沒(méi)有。

2. 在價(jià)格區(qū)域輸入框中輸入字母，點(diǎn)擊go后，頁(yè)面刷新，清除了剛才所填的字母，還是任何變化也沒(méi)有?。?br />
看來(lái)google的策略就是：你無(wú)理取鬧，我也無(wú)理取鬧，你拍個(gè)巴掌回來(lái)我就拍個(gè)巴掌回去，你不理解我的響應(yīng)？那你到底在期待什么結(jié)果？

也順便騷擾了一下中國(guó)的有道購(gòu)物和拍拍兩個(gè)網(wǎng)站，發(fā)現(xiàn)方案跳不出以上的幾種。但是，還是有些細(xì)節(jié)上的差異，比如，在有道的價(jià)格輸入框中，先是輸入正確的數(shù)值（如1-100）后，更換為字母，頁(yè)面像google一樣照常刷新，但是會(huì)回歸到上一次的狀態(tài)（1-100）.

google在同樣的情形下，卻回歸到初始狀態(tài)。 映射到現(xiàn)實(shí)生活中的案例：

騷擾到這里，頭腦里突然閃現(xiàn)出一幅畫面，如果你有一天，很無(wú)聊，去無(wú)理取鬧一下（傻子也可以啊，傻子就不能是叫做無(wú)理取鬧了），去一個(gè)西瓜店，對(duì)著店主說(shuō)：老板，請(qǐng)給我一個(gè)足球。

老板可能出現(xiàn)的反應(yīng)和我的反應(yīng)：

A. 裝作沒(méi)聽(tīng)到,沒(méi)有任何反應(yīng)，再喊一聲，還是沒(méi)反應(yīng)。

——他聾了嗎？還是壓根沒(méi)注意到我？eaby就是這樣干的。

B. 吼一聲：你有病呀？沒(méi)看到牌子上寫著西瓜！

——我好害怕呀，這個(gè)老板心情不好吧？阿里巴巴就是這樣干的。

C. 直接給你一個(gè)西瓜。再問(wèn)，還是給你一個(gè)西瓜。

——先是莫名其妙，然后，哦，原來(lái)這是西瓜店。google是這樣干的。

D. 問(wèn)你：啥？你再說(shuō)一遍？我又說(shuō)：給我來(lái)一個(gè)足球，老板還問(wèn)：來(lái)個(gè)啥？你再說(shuō)一遍？

——哦，好吧，我服了你，我還是要西瓜吧。淘寶是這樣干的。

總結(jié)一下：面對(duì)“極端并微小的錯(cuò)誤”時(shí)，各個(gè)網(wǎng)站的反應(yīng)： 值得說(shuō)明的是，具體設(shè)計(jì)時(shí)，肯定要“具體情況具體對(duì)待”，比如淘寶的自動(dòng)糾錯(cuò)，固然不錯(cuò)，但是也只適用于字符單一限定的情況，比如價(jià)格區(qū)域不可能出現(xiàn)字母，所以可以即時(shí)清空。而google shopping中的zip,states那個(gè)輸入框，同時(shí)存在多種字符，就不能夠自動(dòng)糾錯(cuò)（需要整體語(yǔ)義判斷），就好象一個(gè)顧客說(shuō)“老板，我要一個(gè)足球——一樣的西瓜”，得等用戶說(shuō)完。

不彈出警示框，也不破壞頁(yè)面結(jié)構(gòu)，大家不妨幫google想想這個(gè)地方的校驗(yàn)，除了自主響應(yīng)，還有沒(méi)有別的方案？

但是，也許是我想多了，也許設(shè)計(jì)師壓根就沒(méi)想那么多，也許只是某個(gè)人某時(shí)就順便做成這樣了，所以大家不要當(dāng)真啊

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

本文名稱：測(cè)試網(wǎng)頁(yè)表單的交互設(shè)計(jì)
文章源于：http://www.bm7419.com/news45/315295.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、App開(kāi)發(fā)、品牌網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、響應(yīng)式網(wǎng)站、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)