設計更好的表單

無論是注冊流程、多頁面的步進還是單純的數(shù)據(jù)錄入,表單都是最重要的組件之一。這篇文章將會介紹在表單設計中我們該做什么,不該做什么。需要說明的是,本文只是一篇常規(guī)的設計指南,實際生產(chǎn)過程中,每一條規(guī)則都可能有例外。

表單應該是單列的

多列的表單有損用戶的垂直注意力

標簽應該頂部對齊

相對于左對齊的標簽,用戶更有可能完成標簽頂部對齊的表單。另外,頂部對齊的標簽在移動設備中的顯示效果通常也更好。不過對于有大量字段需要輸入的表單,可以考慮采用標簽左對齊,這樣可以減少表單高度,讓字段一目了然。

標簽和對應的輸入控件要在視覺上形成一組

標簽與輸入控件靠近一些,確保用戶不會產(chǎn)生疑惑

杜絕大寫

大寫的單詞會增加閱讀難度。當然,中文沒這毛病

如果選項小于6個,將他們全部展示出來

把選項放在Select中要求用戶進行兩次點擊。只有當選項數(shù)目超過6個,才考慮將他們放入select中,如果超過25個,還需要為下拉控件提供搜索功能

不用要占位符替代標簽

用占位符替代標簽很誘人,考慮到能節(jié)省不少控件。但這樣做會導致很多可用性問題

checkbox和radio采用垂直布局,方便掃視

采用垂直布局,用戶更方便掃視

文字要能夠觸發(fā)行動

文字要站在用戶的角度去描述,增加用戶采取行動的機會

錯誤提示要與對應的控件在一行

當錯誤發(fā)生時,在錯誤發(fā)生的位置后面緊跟錯誤原因

在表單填寫完成后使用內聯(lián)驗證

不要在用戶輸入沒有完成時對表單進行驗證,除非驗證提示能對輸入提供指導作用,比如實時統(tǒng)計用戶名或者密碼的字符長度

不要隱藏基本的幫助性文字

對于簡單的幫助性文字,直接將其顯示在對應的控件周圍。對于復雜的文字描述,可以考慮在控件獲得焦點后置于其后

區(qū)分主要動作和次要動作

現(xiàn)在甚至在討論次要動作是否應該包括在內

輸入控件的長度要反映出內容的可接受長度

對那些具有固定長度的字段請采用該方法,比如電話號碼、郵編等。

不要再使用 * 標記必要字段,用“可選”把非必填字段標記出來

雖然*是一個常用的標記必要字段的符號,但仍不能保證所有的用戶都能理解其含義,更好的選擇是用文字標出非必填字段

把相關字段放在一起

有很多字段的表單可能會讓用戶不知所措,將相關的字段放置在一起有助于用戶更快地進行思考和響應

為什么要問用戶?

對于可選的內容,我們應該考慮采用其他的辦法去搜集這部分信息而不是直接向用戶提出。始終問自己這個問題是否可以通過已有數(shù)據(jù)推算得到、是否可以推遲甚至完全不需要。

數(shù)據(jù)獲取正逐漸自動化,現(xiàn)在的移動設備和可穿戴設備可以在用戶毫不知情的情況下獲取大量信息。始終思考是否能購利用社交網(wǎng)絡、對話式的UI設計、短信、電子郵件、語音、光字符閱讀器(OCR)、位置、指紋和生物特征等來獲得我們想要的信息。

有趣很重要

生命短暫、沒人想把寶貴的時光浪費在填寫表單上。所以,表單務必要友好、有趣,能慢慢吸引用戶。要能打破常規(guī),對設計者來說,將公司品牌傳達給用戶并激發(fā)出情感共鳴是自己的重要職責,如果做得好,將會在很大程度上增加用戶完成表單的可能性。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 原文作者:Andrew Coyle 原文鏈接:Design Better Forms 無論是注冊流程,多圖遞進,或...
    ShusQ閱讀 246評論 0 1
  • [譯文]設計更好的表單(常見錯誤&如何解決) 字數(shù)525閱讀639評論16喜歡25 無論是連貫試、分布式,亦或是單...
    匡亮UX閱讀 469評論 1 6
  • 無論是登陸,分步驟的流程還是單調的日期輸入,表單設計都是其中最重要的部分。這篇文章主要分析了表單設計中哪些是常用和...
    瓦力UX閱讀 323評論 0 1
  • 無論是連貫試、分布式,亦或是單調的數(shù)據(jù)輸入界面,表單都是數(shù)碼產(chǎn)品的重要組成部分。這篇文章聚焦在表單設計中常見的該做...
    Z_Yuhan閱讀 2,007評論 13 43
  • HTML表單 在HTML中,表單是 ... 之間元素的集合,它們允許訪問者輸入文本、選擇選項、操作對象等等,然后將...
    蘭山小亭閱讀 3,439評論 2 14