UI設計范式之二:造句填空Fill In The Blanks - 網頁設計

https://webdesign.zoapcon.com

問題綜述
需要用戶填寫內容但又表示不清填為何故。

舉例

適用范圍
當你發現即使為某個輸入框增加一個標題依然無法說清該輸入框的詳細用處的時候
當你不得不用很長的一段描述來解釋你的輸入框用途的時候
當你發現這個輸入框所填的內容正好可以成為某個句子的一部分的時候
當這個是必填項的時候。因為把他放在句子中能更引起用戶的注意。
不要在句子中加入太多的輸入框。因為太多的填空題會讓用戶怒
對于非必填項盡量少用

解決方案
整理好你的必填項(文本輸入框 text field、單選框 radio button、多選框 checkbox、下拉框combo-box)并把他們造句(回憶一下小學老師是怎么教我們的)。這樣用戶就能邊讀你的句子邊把填空給填了。

如果該輸入框不位于句首或句末的話你得注意這些輸入框可能會破壞句子的連貫性(譯者:因為HTML里面某些輸入框格式會占去很多頁面空間,或把句子強制換行等),盡量不要用高度超過句子高度的輸入框類型。簡單的文本輸入框或下拉選擇框是最好的選擇。

該范式經常被用于復雜的篩選功能里。比如Apple iTune在定制高級播放列表(Smart Playlist)的歌曲篩選界面中使用了該范式。


Apple iTune的高級播放列表定制界面

該范式的最大缺點在于面對多語言網站的時候句子會有不同的翻譯,那么由于語法的不同,輸入框的位置就會發生改變。這樣該范式就會阻礙網站向其他語言版本的翻譯工作。(譯者:尤其對于使用內容管理系統CMS的網站來說這就面臨著要重新設計一個表單的模板)

更多例子

Google高級搜索


basecamphq.com

原理總結

通過把一個輸入框放到句子中,可以借助句子的上下文來幫助用戶更好的理解。有時候你也會遇到很難為輸入框造句的時候。怎么不讓用戶面對冷冰冰的計算機術語呢?看一下這個例子:

Ruby On Rails wiki

例子中的遞交按鈕“Save”和輸入框之作者名字連同取消按鈕“Cancel”一起放入了一個句子里面。用傳統的方法這個三個操作需要分別用三行單獨的描述。但這里巧妙的運用來本范式,不但把三行變成了一行使這三個操作的作用表達清楚得一清二楚。而且還用到了“Input Prompt”范式來鼓勵用戶填寫自己的名字。

本范式讓用戶界面變得自己會說話了。我想人類的語言能力和表達天性會讓我們很樂意去把句子填寫完整的。


創作者介紹
創作者 zoap的部落格 的頭像
Zoap_網頁設計

zoap的部落格

Zoap_網頁設計 發表在 痞客邦 留言(0) 人氣( 32 )