網頁表單互動設計細節:表單校正設計的思考

來源:互聯網
上載者:User

文章描述:表單互動設計之二——校正思考.

你是否經常碰到在填寫表單時,提交無數次卻還是無法通過校正的情況;或者你是否在為不知道填寫中哪裡出現錯誤而抓狂;再或者你是否碰到過當你填寫了一大堆資訊,之後點擊按鈕提交時,校正報錯的同時,你發現你所填寫的所有的資訊都被清空;或者你還碰到過很多很多校正當中出現的問題,那麼我們現在就開始進行表單校正設計的思考。

那校正有哪些情況呢?

1、 READY

提到校正,我們往往會聯絡到提交表單後出現的錯誤提示類資訊,但是其實在填寫表單前的提示資訊與表單填寫校正有著莫大的關係。

此類提示資訊能夠協助使用者在填寫表單前,降低出錯的可能性。它出現的形式分為以下幾類:

a) 簡要提示——有如:icon,icon+文字,文字,暗提示。

出現情況:一般提示資訊比較簡短,能夠讓使用者一目瞭然的記住,並且不干擾表單的填寫項。

alipay.com付款頁面

alibaba.com註冊

b) 複雜提示——以縮減資訊或icon來顯示,通過點擊和hover進行查看。

出現情況:提示資訊內容較多,需要使用者仔細閱讀,並且無法簡單記憶,直接全部顯示會影響整個表單填寫,因此此類情況需要hover或者點擊操作進行查看。hover或者點擊後有浮層,蒙板,或者跳轉新頁面等情況。

taobao.com機票登機人填寫頁

ctrip.com機票登機人填寫頁

c) 限制操作——在表單填寫前,對某些需要填寫或者操作項會有一些disabled的狀態,只有當某些條件被啟用使用者才能進行操作。

出現情況:當填寫項與項之間帶有關聯性,前面的填寫項會影響後面填寫項的內容或狀態;或當填寫項較少,填寫項均可以即時校正,就可以將主提交操作項做狀態限制。

livestream.com機票登機人填寫頁

d) 其他提示——填寫表單的時候,還有一種比較特殊但又更簡單明了的提示,例如:使用圖片說明。

出現情況:當填寫表單項的提示說明很難用文字清晰表述,這時候可以使用圖片,視頻等輔助方式來協助使用者快速理解。

alipay.com水電煤繳費頁面

2、 ING~

當您瀏覽完整體的表單,接下來就是進行填寫的步驟。在填寫的過程中,我們會碰到很多類型的校正,比如:即時校正的友情類提示,即時校正的警示提示,關聯性校正的提示。即時的校正也分為三種狀態一種是on focus後的協助提示、輸入中的校正、lost focus後的校正。

出現情況:提示資訊內容較多,需要使用者仔細閱讀,並且無法簡單記憶,直接全部顯示會影響整個表單填寫,因此此類情況需要hover或者點擊操作進行查看。hover或者點擊後有浮層,蒙板,或者跳轉新頁面等情況

a) 即時校正的友情類提示

即時校正的友情類提示不是提交時無法通過的出錯警示,而是給到使用者一些更合理的建議或者協助。


Ctrip.com填寫登機人頁

(當你選擇了兒童票時會提示兒童票的某些特定限制。當你輸入的出生日期與你之前選擇的購買類型不一致的時候會建議你去購買更合適的類型,但並不強制。)

Buy360.com的註冊頁

(當onfocus的時候會出現下方協助提示類資訊,當然也有很多網站會做成暗提示。)

163.com的註冊頁

(當onfocus的時候會出現右邊密碼的強度,會根據你輸入密碼的改變而提示你的密碼強弱。)

[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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。