《Web表單設計》讀書心得

本書一共14章,講了三部分內容:表單結構、表單元素、表單交互。表單是橫在用戶和企業之間的一道障礙, 沒有任何人喜歡填寫表單,不合時宜的表單往往會讓用戶反感,從而終止我們給設定的任務,比如說購買。而設計表單就如同設計模式一般,有規律可循。盡量減少用戶填寫表單時候的反感是每個表單設計人員必須首要考慮的因素。

表單結構部分:

1. 表單的問題,能夠不問問題,就不要問,精簡問題。

2. 懷著面對面交流的心情來設計表單,就像日常談話一樣,把用戶填寫表單的過程設計成一次對話,你說出標簽,能夠讓對方反應出需要做什么。

3. 將問題有邏輯的組織起來,比如個人身份信息,安全條款,郵寄地址等,在表單里面用不同區域分開, 每一塊專注一個邏輯,就像談話一樣。

4. 可選問題,可以在表單填完后給出,這樣減少侵略性,這些問題可能會得到更多照顧。

5. 進程提示,比較大的表單,分頁的表單,要有識符,當前填到哪一步,是否完整,要標示出來。 二級進程提示,把表單里面的邏輯表單塊也列出來。 如果進程提示沒有固定的步驟,那么可以采用籠統的,沒有明確期望的進程提示。

6. 表單命名,鏈接上的名字和表單實際頁面上的名字要保持一致

7. 表單起始頁,當有大量東西要填的時候,在起始頁提示用戶要做什么準備,比如ID,駕照,護照,銀行卡等,不要等到花不少精力之后,發現缺失必要物品而無法繼續。

8 建立視覺線,清晰完成路徑,標簽,輸入框,主要動作按鈕形成一個垂直軸

9. 填寫表單的界面,應該減少噪音,減少其他任務路徑,用以減少用戶退出表單填寫的幾率。

表單元素部分:

標簽對齊方式,書中講了有5種對齊方式:

1、頂對齊表單:是幾種類型的表單中用戶完成速度和完成效率最高的,因為這種排列方式為用戶提供了非常清晰地瀏覽線(垂直方向),用戶的視覺焦點不需要跳躍就可以瀏覽到所有表單項;同時頂對齊表單靈活性也比較強,標簽長短有較大的調整空間,適用于需要多語言顯示的網站。其缺點是占用的垂直空間較大,不適用于表單項很多以及包含人們不熟悉的填寫項的表單。


2、

左對齊表單:

因長標簽會增加標簽與輸入框之間的距離,從而拖延完成時間,所以左對齊表單是三種表單中用戶完成速度最慢的,但是因為這種方式便于用戶瀏覽標簽,因此適用于含有用戶不熟悉的填寫項的表單,讓用戶能夠認真思考標簽含義,從而提高填寫的有效率。左對齊與頂對齊相比還有一個優點,即占用垂直空間小。

3、右對齊表單:用戶完成速度介于頂對齊和左對齊之間,與頂對齊相比占用垂直空間小,與左對齊相比易讀性降低(標簽在垂直方向上參差不齊),是國內注冊表單中較常用的一種(如新浪微博、開心、人人等)。

4、輸入框內標簽:光標放入輸入框,標簽迅速消失,以便用戶能輕松填寫,是一種可靠地交互方式。但是有時候標簽會很快消失,有時候標簽會留在輸入框中成為答案的一部分。填寫時,輸入框內標簽消失,因此答案情境也隨之消失,如果突然忘了要回答什么,一時會找不到標簽。因此如果表單較長,輸入框內標簽并不是好的解決方法。輸入框內標簽更適合用于只有一個問題或是幾個輸入框問題非常熟悉的表單。


5、混合對齊:不知道作者所說的混合對齊是什么樣的表單,但是日常應該是用過的。可能有的時候混合對齊表單也能很好地輔助用戶填完表單。


輸入框有6種類型

1、文本框:允許人們選擇輸入任意數量字符,一行或者多行。

2、單選按鈕:允許人們從兩個或多個可見互斥選項中選擇一個,由于單選是互斥選項,應當有默認選項。

3、復選框:允許人們選擇列表中的任意選項,一個或者多謳歌,數量不限。使用復選框時應當確保選擇輸入框或者其標簽都能激活選項。

4、下拉菜單:允許人們從兩個或多個排他性選項中選擇一個答案。不使用時,下拉菜單僅顯示當前被選項。如果互斥選項較多時,下拉菜單比復選框要好,下拉菜單占據屏幕空間小。一般情況下盡量避免下拉菜單中有太多選項。

5、列表框:可作為單選按鈕使用,也可當復選框使用。列表框可以像下拉菜單一樣顯示更多選項,而占用空間比單選按鈕或者復選框要小,但是列表框的單選或多選的性質容易給人帶來困擾。

6、按鈕:產生動作


1. 采用合適的長度,不要所有長度都一致,不利于暗示用戶輸入內容。 如果長度不能起到暗示的作用,那么就盡量一致。? 比如postcode 6位

2. 必填項和可選項需要明確標示。 required * 顯示圖例, 或者寫上required,? 或者optional.

3. 采用視覺分割對齊的方式,對輸入框進行分組:??組合行生日的年月日, 相關型, 包含型(checkbox里面包含細節的輸入)

幫助文字:

1. 幫助文字應該非常簡單,如果需要大段的說明來進行幫助,那么也許這個問題的問法存在一些不妥的地方

2. 幫助旨在消除用戶疑問,比如隱私保密方面,安全方面

3. 幫助文字適時彈出,自動顯示幫助文字。需要能夠讓用戶控制打開,或者關閉。 另外彈出的幫助文字的位置也要考究。體現相關性,另外不能遮蓋其余的表單元素。

4. 自動即時幫助,在幫助信息最合適的時間和位置顯示幫助信息。用戶激活的幫助,采用可點擊的圖標,點擊之后才顯示幫助。用戶激活的幫助區域,顯示在表單中的一致位置,利用更大顯示面積,提供廣泛的幫助文字和內容,人們可以在固定位置顯示找到幫助內容。

表單交互部分:

1. 及時驗證輸入內容,用戶名(重復),密碼(是否符合安全級別), 電子郵件。注意驗證的時機,需要等到輸入完成以后再驗證。

2. 多頁表單,多模塊表單輸入的時候,需要采用正確以及錯誤的圖標,標示已經完成的模塊的正確性。

3. 及時反饋還可以提供一系列的正確答案給用戶選擇,這種體驗會更加舒適。

4. 格式轉換, 當用戶輸入的數據與預期的格式不一致的時候, 等用戶輸入完,立刻進行格式的轉換,然后再驗證輸入是否正確,給出提示。

5. 限制的交互,比如某些輸入框有長度限制,超出長度的輸入,則給出紅色的提示,并警告會截斷多下的字符。 而不是簡單設置一個文本長度,讓之后的輸入都無法進行。

基于選擇的輸入:

1、頁面級選項:把過程明確分為兩步,是解決表單中選擇輸入問題最簡單的方法,但是一旦做出選擇,兩步模式就會失去情境關系,無法查看并訪問未選選項。


2、

水平選項卡:

選項卡顯示一組初識選項,發揮當前選擇強大指示作用。但是這種方法很肯會降低人們的效率。因為很多人都是習慣自上而下填表,所以可能會忽略水平選項卡,而且這種選項之間是否互斥也不夠清晰。該種方式會讓用戶視線從屏幕左側移到右側,偏離了填表過程中清晰的線性掃描。


3、垂直選項卡:垂直選項卡選擇性輸入將后續問題顯示在初始選擇的右側,隱藏了無關表單控件,只在人們需要時才出現。確保了選擇一個單選按鈕后眼鏡不需要太多移動。垂直選項卡基于選擇的輸入方式中,眼球不必在初始選項和額外輸入之間來回移動。


4、下拉列表:下拉列表利用菜單和分組框將所有季宇軒額的輸入放在表單中的特定區域,雖然這樣會隱藏大部分初始選項,但使用單一控件可能會更好地傳達初始選項的范圍和影響。允許人們從潛在初始選項的長列表中選擇后續問題,而不占用大量屏幕區域。


5、單選按鈕下方顯示:保持你所有初始選項適中可見。選擇性輸入下方的顯示方式將后續問題顯示在初始問題下方一致位置,通過強烈視覺指示來表明初始選項和額外輸入之間的依賴關系,有助于更清晰地表明兩者關系。但是,當額外輸入很長時,如果人們改變選項,屏幕刷新來更改額外輸入的內容,頁面跳轉的效果會導致人們迷失方向。


6、單選按鈕內顯示:選擇性輸入內顯示方式將后續問題直接顯示在每個初始選項下方,如果額外輸入很少,該方法可以保持初始選項的情境,同時又能在最相關的地方顯示所需輸入的選擇性輸入。對眼睛壓力小,能迅速完成。但是如果選擇性輸入數量很多,頁面跳動加上初始選項移動,人們會頻繁困惑到底選擇了哪個選項。


7、顯示非活動選項:此方法保持所有額外輸入可見,但一次只有一組選項可以操作,多數情況顯示灰色。但是大量所有可見輸入項會讓人們看起來崩潰。如果每個初始選項都有很多額外輸入,個人選項和其他初始選項之間就會喪失聯系。

8.組的顯示:此方法幾乎沒見過,額外輸入太多,書上說降低初始選項可見度,其實很多時候,用戶看到這個,就會感覺要做的事情太多,很難做選擇。

減少輸入框:

1.?注冊界面只保留操作關鍵路徑上的必須信息收集框,其他部分全部去除,即使有些部門需要。

2.?當然也不能因為去除了一些問題,從而導致另外一些問題變的很復雜。

注冊表單:

1.?為你的網站或者系統考慮,是否真的需要一個注冊表單。?因為這個表單很可能讓用戶放棄你提供的服務。

2.?采取循序漸進的方式,讓用戶在操作期間完成賬號的填寫。發送郵件,生成密碼等。

3.?自動給用戶生成賬號的時候,確保用戶知道清晰訪問賬戶的方式。

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

推薦閱讀更多精彩內容

  • 一、表單結構 1、表單的設計 -設計原則 盡量減少痛苦 說明填寫完成途徑 考慮情境 確保一致溝通 2、表單...
    ba帝兒閱讀 639評論 0 0
  • 一. 表單設計的影響與原則 1.1 表單的產生 由內而外,網站根據自身信息存儲格式要求,從數據庫映射成表單。 由外...
    曉夢蟬君閱讀 12,140評論 1 30
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,301評論 1 41
  • 表單基礎知識 在HTML中,表單是由 元素來表示的,而在JS中,表單對應的則是HTMLFormElement類型。...
    oWSQo閱讀 918評論 0 1
  • 然后我倆各自一端望著大河彎彎終于敢放膽嘻皮笑臉面對人生的難 同陌生人面對面坐在一起,真是件令人尷尬的事。 并且他是...
    昔夢同學閱讀 657評論 9 10