表單設(shè)計總結(jié)

19 評論 36171 瀏覽 405 收藏 11 分鐘

表單是我們比較常見的一個信息錄入工具。糟糕的表單設(shè)計會帶來令用戶抓狂的交互體驗,極大的影響用戶信息錄入的效率。這篇文章我就來大家梳理一下關(guān)于表單設(shè)計的一些知識點。

表單的構(gòu)成

常見表單是由多個列表項構(gòu)成的。而每一個列表項都有最基本的標簽(標題)和輸入框。顧名思義,標簽是用來告訴用戶這個列表項是什么;輸入框是供用戶輸入用的。

標簽根據(jù)所處的位置可以分為左標簽,頂部標簽和行內(nèi)標簽。

左標簽

左標簽?zāi)壳皝碚f是最常見的一種標簽樣式,但是這并不意味著我們可以無所顧慮的去使用。以手機端為例,手機端屏幕尺寸有限,左標簽會占據(jù)屏幕較大的空間,那么右邊的輸入框就可能無法展示完整的信息。

例如,如果你的郵箱地址過長就會造成信息的不完全展示,這對用戶體驗來說是致命的。因為用戶一旦輸入的信息很長,他們在確認提交之前肯定會對所輸入的內(nèi)容進行審核確認,如果連完整的內(nèi)容都無法獲知,用戶根本不會進行下一步操作,這就造成來操作流程的中斷。所以我們在使用左標簽的時候一定要考慮輸入內(nèi)容的長短。

頂部標簽

頂部標簽就是指標簽位于輸入框上方,這樣輸入框就可以獨占整個頁面,信息可以得到更完全的展示。與左標簽相比,頂部標簽可以給輸入框騰出足夠的空間。

但是這種的布局方式也有自身的缺點,那就是之前一屏就可以展示的內(nèi)容,用戶現(xiàn)在需要滾屏才可以看完。

行內(nèi)標簽

行內(nèi)標簽的樣式看起來很適合手機端的表單設(shè)計,因為它可以極大的節(jié)省頁面空間。但是一旦用戶點擊切換到輸入狀態(tài)以后,用戶就會看不到這些標簽了。如果同一頁面中表單項目很多(超過5個),用戶填寫過程中可能會忘記之前的填寫的項目是什么。此外列表項過多,用戶在填寫的時候中很容易出現(xiàn)串行,把家庭住址填到畢業(yè)院校也是可能出現(xiàn)的情況。更嚴重的是,用戶因為無法看到標簽,這類的錯誤是無法檢查出來的。

為了解決這個問題,我們可以在行內(nèi)標簽前加一個圖標來標識這個列表項,圖標所占據(jù)的空間不會太大,而且會增加頁面的美觀性。

當表單項目過多時我們要進行整合分組來提升內(nèi)容的可讀性。下圖中右表格將15個字段分成3組。同樣數(shù)量的內(nèi)容,但用戶的印象卻大不相同。

提升用戶信息錄入效率

好的用戶體驗應(yīng)該盡可能的簡化操作步驟,傳統(tǒng)的手動輸入模式費時費力,對用戶來說不是一種友好的體驗。我們應(yīng)該思考如何給用戶減負。

控件的應(yīng)用可以很好的幫助用戶進行信息的快速錄入。一般來說,表單中的控件一般有下拉列表,switch開關(guān),單選按鈕,多選按鈕,滑塊等。

滑塊

這里我們主要來說經(jīng)常被忽視的滑塊,滑塊適用于精確度不是很高的數(shù)據(jù)錄入,例如你要去預(yù)定一個房間,其中需要你輸入你所期望的最低價格和最高價格。這個時候我們可以使用滑塊來代替?zhèn)鹘y(tǒng)的手動打字輸入,我們都知道滑塊無法做到對信息的精確錄入,所以在這里滑塊默認最小單位是50,你如果要求最低180,最高720這里是無法實現(xiàn)的。

控件的使用的確可以極大提升了用戶的錄入效率,但是用戶畢竟還是需要自己去“輸入”。其實我們也可以給用戶提供一些默認值,和自動完成讓用戶連輸入這一步都免了。

默認值

如果你確定對用戶足夠的了解,在用戶進行信息錄入的時候我們可以提供合理的默認值。因為對于用戶來說,填寫信息永遠都不是一件有趣的事情,合理的默認值可以節(jié)省用戶的操作時間。

接下來說一個反面案例。

這是我們公司的報銷表單,其中有一項是項目號,這里系統(tǒng)沒有給提供默認值。其實系統(tǒng)可以根據(jù)你所在的項目組回顯出項目編號,但是這里并沒有。這在我看來是非常反人類的,因為項目號是一串漢字和數(shù)字組合,一般我們很少會記。我們遇到這種情況一般是返回上一步,查看項目編號,拿手機拍下項目編號再回來填寫,費時費力。

自動完成

自動完成功能也可以來降低用戶的操作負擔。當用戶在文本框里輸入時,系統(tǒng)猜測可能的答案,顯示可選列表。

用戶也會犯錯

理想狀態(tài)下,用戶填寫完表單,然后點擊提交按鈕,系統(tǒng)顯示提交成功。但是現(xiàn)實情況卻是我們在填寫過程中經(jīng)常會發(fā)生錯誤,那么如何給用戶報告錯誤是需要我們仔細研究的。

目前來說,我們經(jīng)??吹降囊粋€報錯提示的樣式是彈出框。在我看來,彈出框并不是一個好的選擇。因為用戶如果要進行修改,就必須關(guān)閉彈出框,那么錯誤信息用戶就看不到了。如果用戶錯誤的項目比較多,那么用戶就需要花一定的時間去記住這些錯誤,然后再來改,這會增加用戶的記憶負擔。

所以在我看來,逐行報錯比籠統(tǒng)的使用彈出框給用戶報錯要友好的多。而且錯誤提示就位于你填寫錯誤項目的旁邊,用戶一眼就能明白哪里錯誤了,不用費力去找。 此外逐行報錯會一直出現(xiàn)直到用戶修改完成,用戶可以進行有針對性的修改。

逐行報錯缺點就是移動端受限于屏幕尺寸,錯誤原因不一定可以得到充分的展示。

以上說的是表單設(shè)計中如何給用戶錯誤提示,當然與其亡羊補牢,我們不如嘗試著來幫助用戶來避免犯錯。

表單錄入用戶經(jīng)常發(fā)生錯誤的地方就是輸入格式,以日期為例。不同的地區(qū)對于日期錄入的格式也不一樣,2017-08-15,08.15.2017,08-15-2017等等。目前來說一些表單實現(xiàn)了容錯模式,允許用戶輸入不同格式或者不同類型的數(shù)字。這也降低了用戶犯錯的幾率。

總結(jié)

表單是主要的信息錄入工具之一,也是一款產(chǎn)品用戶體驗的重中之重。不存在完美且百搭的表單樣式,不同的產(chǎn)品在進行表單設(shè)計時有不同的出發(fā)點和思路。以上就是我的一些總結(jié),希望這篇文章可以給你帶來幫助。

#專欄作家#

王M爭,人人都是經(jīng)理專欄作家,資深互聯(lián)網(wǎng)人。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 舉例輸入日期不是很好,我覺得選擇代替輸入更好,不會有格式的錯誤了

    來自江蘇 回復(fù)
  2. 講的確實不錯~~對于小白來說,學習了~

    來自上海 回復(fù)
  3. 收藏了

    回復(fù)
  4. 很詳細 學習了~

    來自江蘇 回復(fù)
  5. 很小,很精致。 :mrgreen:

    來自四川 回復(fù)
  6. 有圖有真相 挺好的

    來自江西 回復(fù)
  7. 學習啦!感謝~

    回復(fù)
  8. 逐行報錯在移動端中有沒有好的解決方案呢?能舉個例子說明一下嗎? ??

    來自遼寧 回復(fù)
    1. 逐行報錯其實提示文字不一定要在文本框的側(cè)邊,也可以位于文本框的上下方位置,減小提示文字的大小,這樣就比較明顯了,也不占用空間,又可以全部顯示;

      來自云南 回復(fù)
    2. 然后在修改完錯誤信息,焦點不在此文本框時,就可以對修改的內(nèi)容做校驗;

      來自云南 回復(fù)
    3. 在移動端的解決方案:一、在輸入框下方出現(xiàn)提示文字。此時有兩種可能:1、不同輸入框的縱向間距夠大,提示文字的出現(xiàn)不影響其他輸入框的位置,2、不同輸入框的縱向間距不夠大,提示文字的出現(xiàn)導(dǎo)致其下方的輸入框位置向下移動。個人覺著第一種更好。二、提示文字用toast提示,顯示在界面最下方。另外一點是關(guān)于提示文字出現(xiàn)的時機,這也是非常重要的一點,一種是在當前輸入框失去焦點后對內(nèi)容做校驗,另一種是所有輸入框都輸入內(nèi)容并點擊“確定”后對內(nèi)容做校驗。

      來自北京 回復(fù)
  9. 收藏了

    來自山東 回復(fù)
  10. 學習了。梳理得非常清晰。??

    回復(fù)
  11. 感謝!

    回復(fù)
  12. 剛開始闡述的表單確實令人耳目一新

    來自浙江 回復(fù)
  13. ??

    來自北京 回復(fù)
  14. 總結(jié)得好好,學習

    來自廣東 回復(fù)
    1. 共同學習

      來自浙江 回復(fù)
    2. 吸取別人的優(yōu)點

      回復(fù)