網頁表單互動設計細節:機票搜素表單的校正

來源:互聯網
上載者:User

文章描述:表單互動設計之三——機票搜尋的校正思考.

在前一篇的校正思考中,我們整體概括了一些校正出現的類型,出現的情況,以及校正設計的設計原則與經驗。而在具體設計過程中,需要結合產品的商務邏輯,旅遊機票預訂的全流程,是我碰到過互動邏輯中,相對比較複雜的情況,它的搜尋來說也囊括了比較多的輸入項,和各種類別的表單控制項,因此它的校正情況也相對比較多樣化。

我們來探討下預訂機票中的搜尋表單

1、 提到校正,我們往往會聯絡到提交表單後出現的錯誤提示類資訊,但是其實在填寫表單前的提示資訊與表單填寫校正有著莫大的關係。此類提示資訊能夠協助使用者在填寫表單前,降低出錯的可能性。

就拿機票來說,在未填寫前,有很多網站做了暗提示來輔助使用者更方便的操作輸入。

國內的通常做法是提示你可以輸入的格式,執行個體,如:

比如淘寶,就把地址選擇的輸入格式用暗提示的方式告訴使用者可以輸入漢字拼音和首字母,清晰明了。

又比如hipmunk,就把返程日期上顯示暗提示告知使用者如果不填寫該選項就搜尋單程結果集。

2、 在機票查詢中最常碰到的項比如:航程類型,地址,日曆。

a) 出錯提示

出錯提示的目的是要讓使用者清晰的知道錯在哪一項,為什麽出錯,怎麼改。

出錯提示有4個基本原則:即時反饋出錯提示,出錯提示的位置顯示恰當並且明顯突出,提示資訊內容清晰易懂,一次性顯示全部出錯提示。

即時反饋出錯提示

如下圖所示:淘寶機票首頁上輸入出發城市和到達城市均為上海,會彈出新頁面並且提示錯誤資訊,對使用者來說等待時間更長,相對來說這類提示資訊顯示在當頁更為合理。

而去哪的機票搜尋方塊,當出發城市和到達城市資訊為空白的情況下,或者當日曆選擇返程比去程早的時候,點擊搜尋之後沒有任何反應。我們一開始以為是我們的瀏覽器出了問題,未載入到js特效,結果換了n多個瀏覽器,發現它就是沒有反饋。

出錯提示的位置恰當並且明顯突出

提示出現的位置首先考慮到出錯和當前填寫資訊位置的關聯性。關聯性包括出錯提示位置和視覺呈現的效果(如:顏色,或者增加指向性箭頭等)

如下圖所示:Hipmunk在關聯性上做的就尤為突出,錯誤資訊的位置直接在填寫項的下方,整個搜尋地區一目瞭然的看出哪個項出錯。

如下圖所示:Travelocity在關聯性上就相對較弱,其提示項在搜尋方塊的上方,出錯項與提示項有一定距離。顯示螢幕如果較小的話,無法在一屏看到錯誤提示和填寫項。

雖然Hipmunk的做法看起來比較清晰,但也有一定局限性。如果頁面空間較為擁擠,就不能適用,因為這有可能造成資訊密集,也有可能造成頁面撐開而導致顯示錯誤。

如下圖所示:Expedia的做法相對合理些,因為其表單項是橫向排放,因此使得錯誤提示和出錯框的位置相對較近,比較清晰。

如下圖所示:elong在報錯提示的指向性中表現較弱,視覺上使用了較弱的提示框顏色,並且沒有箭頭指向。

[1] [2]  下一頁



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。