[譯文]設(shè)計更好的表單(常見錯誤&如何解決)

無論是連貫試郑气、分布式怠堪,亦或是單調(diào)的數(shù)據(jù)輸入界面芽偏,表單都是數(shù)碼產(chǎn)品的重要組成部分雷逆。這篇文章聚焦在表單設(shè)計中常見的該做和不再做的點上。這些都是通用的設(shè)計指南污尉,但每條規(guī)則都肯定是有不適用的特殊情況的膀哲。

最好單列排布

多列會打擾用戶的縱向動勢”煌耄【如果數(shù)量太多某宪,雙列并不是不可以∪衿樱】

左對齊

用戶完成左對齊的表單的效率比左右分布式的要快很多兴喂。

左對齊的形式要將不同的區(qū)域分離

將文字說明和輸入框靠近,確保高度間距足夠,不會讓用戶困惑瞻想。

避免完全大寫【英文的話】

因為大寫更難閱讀和掃視压真。

選項少于6個時全部展示

下拉框至少需要用戶點兩次,并且還將選項藏起來了蘑险。所以在選項達(dá)到6個或以上時才使用下拉框滴肿。當(dāng)選項超過25個時需要加入搜索功能〉杵【這個數(shù)量也要看選項之間的關(guān)聯(lián)泼差,用戶的熟悉情況等『乔危】

最好不要將默認(rèn)文本當(dāng)作說明文字使用

用默認(rèn)文本當(dāng)作文字說明使用能節(jié)省空間堆缘,這一點的確很吸引人。但是這樣會導(dǎo)致很多可用性問題普碎。這些問題尼爾森諾曼集團的Katie Sherwin已經(jīng)整理過了吼肥。

單選/復(fù)選框最好垂直排布

這樣比較方便掃視。

讓確定按鈕具有描述性

不要用“確定”麻车,而用具體的操作缀皱。

在用戶填寫完成之前不要給出該輸入框的錯誤提示

在用戶輸入的過程中不要進行校驗(除非真的有幫助,如字?jǐn)?shù)限制等)动猬。

不要將提示隱藏起來

盡可能地展開基本的幫助文字啤斗。對于比較復(fù)雜的幫助,可以考慮讓輸入框聚焦時才在附展示赁咙。

區(qū)分主按鈕和副按鈕

如果不區(qū)分度的話钮莲,會造成很大的理解延遲(哪怕根本沒有副按鈕也是一樣)。

用寬度隱喻內(nèi)容

輸入?yún)^(qū)域的長度要能夠暗示答案的長度彼水。

不用符號標(biāo)記必填崔拥,而用文字標(biāo)記選填

用戶不一定總是知道你標(biāo)記的符號是什么意思【甚至“*”即可能用于必填項也可能用于選填項】。相較之下,最好用文字標(biāo)記出選填項。

組合相關(guān)信息

用戶的思考方式是分步的伟端,并且過長的表單會讓人感覺太多。邏輯分組能夠讓用戶更快理解表單澡绩。

為什么提問?

省去選填下項目并且想想能否用其它方式收集數(shù)據(jù)俺附。永遠(yuǎn)問自己表單里的問題是不是可以推斷出答案肥卡、延期,或者完全去掉事镣。

數(shù)據(jù)輸入越來越自動化步鉴。例如,移動和可穿戴設(shè)備手機不需要用戶的察覺就可以搜集大量的數(shù)據(jù)。想想其它的手段氛琢,例如社交喊递、對話式界面、短信阳似、郵箱骚勘、語音、文字識別撮奏、定位俏讹、指紋、生物計量等畜吊。

更有趣

人生短暫泽疆,沒人愿意填表。讓表單更加對話式玲献、更有趣殉疼、更吸引人、嘗試意想不到的方式青自。通過表達(dá)公司品牌來引發(fā)情緒反應(yīng)是設(shè)計師的角色職能株依。如果做對了,就可以提升表單的完成率延窜。只要確保不要觸犯以上的規(guī)則就好了。


原文:Design Better Froms

注釋:“【】”里的內(nèi)容是譯者添加的


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抹锄,一起剝皮案震驚了整個濱河市逆瑞,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌伙单,老刑警劉巖获高,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異吻育,居然都是意外死亡念秧,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進店門布疼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來摊趾,“玉大人,你說我怎么就攤上這事游两±悖” “怎么了?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵贱案,是天一觀的道長肛炮。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么侨糟? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任碍扔,我火速辦了婚禮,結(jié)果婚禮上秕重,老公的妹妹穿的比我還像新娘不同。我一直安慰自己,他們只是感情好悲幅,可當(dāng)我...
    茶點故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布套鹅。 她就那樣靜靜地躺著,像睡著了一般汰具。 火紅的嫁衣襯著肌膚如雪卓鹿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天留荔,我揣著相機與錄音吟孙,去河邊找鬼。 笑死聚蝶,一個胖子當(dāng)著我的面吹牛杰妓,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播碘勉,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼巷挥,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了验靡?” 一聲冷哼從身側(cè)響起倍宾,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎胜嗓,沒想到半個月后高职,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡辞州,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年怔锌,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片变过。...
    茶點故事閱讀 40,001評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡埃元,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出牵啦,到底是詐尸還是另有隱情亚情,我是刑警寧澤,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布哈雏,位于F島的核電站楞件,受9級特大地震影響衫生,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜土浸,卻給世界環(huán)境...
    茶點故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一罪针、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧黄伊,春花似錦泪酱、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至拓轻,卻和暖如春斯撮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背扶叉。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工勿锅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人枣氧。 一個月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓溢十,卻偏偏與公主長得像,于是被迫代替她去往敵國和親达吞。 傳聞我的和親對象是個殘疾皇子张弛,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,955評論 2 355

推薦閱讀更多精彩內(nèi)容