網頁表單設計中的反饋提示

來源:互聯網
上載者:User

著作權聲明:轉載時請以超連結形式標明文章原始出處和作者資訊及本聲明
http://lilong4174.blogbus.com/logs/39063960.html

反饋這個詞兒其實是控制論的基本概念,泛指發出的事物返回傳出的起始點併產生影響。在資訊互動過程(輸入輸出)中,它是一種介面輸出物,用以提醒資訊輸入者他的操作結果。它有很多種形式,包括介面元素、聲音、影像變化和物理位移(如震動)等。

我們這裡討論的反饋僅特指使用者對網頁表單元素進行操作所得到的可視化的輸出資訊,為了加強區分避免歧義,我們這裡姑且稱之為反饋提示(如圖)。這裡分幾個方面對其設計中應注意的事項加以簡要說明。

位置

頁面上的反饋提示作為一種資訊輸出,最重要的屬性要求就是迅速明確的被資訊輸入者所知曉,這也是對設計師來說最重要的設計原則。執行起來,可以參照兩條具體標準:

1.當前頁面:反饋提示應該放在操作發生地的附近。

根據心理學的注意力分配模型,不熟悉或十分關注的操作都會佔據人腦相當多的注意力資源,若任務有延時反饋,則操作完成後注意力發生聚焦,投射在行為發生地附近,以關注產生的結果。簡單點說就是,我在輸入框中輸入內容,若有任何問題,我希望反饋就在這個輸入框旁邊發生。這是再正常不過的互動與反饋了。

這條原則對於有同理心的設計師們可以說是共識,他們普遍爭議的是另一個問題,反饋與表單元素的相對位置究竟該怎樣安排才最合理?實戰派的主張“左右”,理論派的則倡導“上下”… … 但其實這一點並不需要太糾結,一般來說,如果寬度足夠或不希望表單過長(想在一屏內解決戰鬥)、過於跳躍的話,那麼把反饋提示放在表單元素右側是可行的,例如淘寶的註冊頁:

如果對象是有嚴格邏輯順序(如縱向)的系列操作,那麼反饋提示放在操作流向途中(對應的表單元素下面)則比較合理,並能達到更好的提示效果,例如淘寶的訂單頁:

所以,上下左右並不像想象中有那麼大的關係,只要在發生地附近,使用者都是可以注意到的,只是程度不同而已。倒是怎樣清晰明確地表達反饋與對發生地之間的關聯、不讓使用者產生迷惑顯得更為關鍵,關於這一點,jQuery Validation 所提供的 Plugin Demo裡給出了一個比較好的思路,設計師們可以考慮通過一些樣式的改變來製造一些聯絡。

現在facebook採用的也正是這樣的一種方式,它通過加粗的邊線與箭頭更強的表達這種關聯性:



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

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