表單設計總結
表單是我們比較常見的一個信息錄入工具。糟糕的表單設計會帶來令用戶抓狂的交互體驗,極大的影響用戶信息錄入的效率。這篇文章我就來大家梳理一下關于表單設計的一些知識點。
表單的構成
常見表單是由多個列表項構成的。而每一個列表項都有最基本的標簽(標題)和輸入框。顧名思義,標簽是用來告訴用戶這個列表項是什么;輸入框是供用戶輸入用的。
標簽根據所處的位置可以分為左標簽,頂部標簽和行內標簽。
左標簽
左標簽目前來說是最常見的一種標簽樣式,但是這并不意味著我們可以無所顧慮的去使用。以手機端為例,手機端屏幕尺寸有限,左標簽會占據屏幕較大的空間,那么右邊的輸入框就可能無法展示完整的信息。
例如,如果你的郵箱地址過長就會造成信息的不完全展示,這對用戶體驗來說是致命的。因為用戶一旦輸入的信息很長,他們在確認提交之前肯定會對所輸入的內容進行審核確認,如果連完整的內容都無法獲知,用戶根本不會進行下一步操作,這就造成來操作流程的中斷。所以我們在使用左標簽的時候一定要考慮輸入內容的長短。
頂部標簽
頂部標簽就是指標簽位于輸入框上方,這樣輸入框就可以獨占整個頁面,信息可以得到更完全的展示。與左標簽相比,頂部標簽可以給輸入框騰出足夠的空間。
但是這種的布局方式也有自身的缺點,那就是之前一屏就可以展示的內容,用戶現在需要滾屏才可以看完。
行內標簽
行內標簽的樣式看起來很適合手機端的表單設計,因為它可以極大的節省頁面空間。但是一旦用戶點擊切換到輸入狀態以后,用戶就會看不到這些標簽了。如果同一頁面中表單項目很多(超過5個),用戶填寫過程中可能會忘記之前的填寫的項目是什么。此外列表項過多,用戶在填寫的時候中很容易出現串行,把家庭住址填到畢業院校也是可能出現的情況。更嚴重的是,用戶因為無法看到標簽,這類的錯誤是無法檢查出來的。
為了解決這個問題,我們可以在行內標簽前加一個圖標來標識這個列表項,圖標所占據的空間不會太大,而且會增加頁面的美觀性。
當表單項目過多時我們要進行整合分組來提升內容的可讀性。下圖中右表格將15個字段分成3組。同樣數量的內容,但用戶的印象卻大不相同。
提升用戶信息錄入效率
好的用戶體驗應該盡可能的簡化操作步驟,傳統的手動輸入模式費時費力,對用戶來說不是一種友好的體驗。我們應該思考如何給用戶減負。
控件的應用可以很好的幫助用戶進行信息的快速錄入。一般來說,表單中的控件一般有下拉列表,switch開關,單選按鈕,多選按鈕,滑塊等。
滑塊
這里我們主要來說經常被忽視的滑塊,滑塊適用于精確度不是很高的數據錄入,例如你要去預定一個房間,其中需要你輸入你所期望的最低價格和最高價格。這個時候我們可以使用滑塊來代替傳統的手動打字輸入,我們都知道滑塊無法做到對信息的精確錄入,所以在這里滑塊默認最小單位是50,你如果要求最低180,最高720這里是無法實現的。
控件的使用的確可以極大提升了用戶的錄入效率,但是用戶畢竟還是需要自己去“輸入”。其實我們也可以給用戶提供一些默認值,和自動完成讓用戶連輸入這一步都免了。
默認值
如果你確定對用戶足夠的了解,在用戶進行信息錄入的時候我們可以提供合理的默認值。因為對于用戶來說,填寫信息永遠都不是一件有趣的事情,合理的默認值可以節省用戶的操作時間。
接下來說一個反面案例。
這是我們公司的報銷表單,其中有一項是項目號,這里系統沒有給提供默認值。其實系統可以根據你所在的項目組回顯出項目編號,但是這里并沒有。這在我看來是非常反人類的,因為項目號是一串漢字和數字組合,一般我們很少會記。我們遇到這種情況一般是返回上一步,查看項目編號,拿手機拍下項目編號再回來填寫,費時費力。
自動完成
自動完成功能也可以來降低用戶的操作負擔。當用戶在文本框里輸入時,系統猜測可能的答案,顯示可選列表。
用戶也會犯錯
理想狀態下,用戶填寫完表單,然后點擊提交按鈕,系統顯示提交成功。但是現實情況卻是我們在填寫過程中經常會發生錯誤,那么如何給用戶報告錯誤是需要我們仔細研究的。
目前來說,我們經??吹降囊粋€報錯提示的樣式是彈出框。在我看來,彈出框并不是一個好的選擇。因為用戶如果要進行修改,就必須關閉彈出框,那么錯誤信息用戶就看不到了。如果用戶錯誤的項目比較多,那么用戶就需要花一定的時間去記住這些錯誤,然后再來改,這會增加用戶的記憶負擔。
所以在我看來,逐行報錯比籠統的使用彈出框給用戶報錯要友好的多。而且錯誤提示就位于你填寫錯誤項目的旁邊,用戶一眼就能明白哪里錯誤了,不用費力去找。 此外逐行報錯會一直出現直到用戶修改完成,用戶可以進行有針對性的修改。
逐行報錯缺點就是移動端受限于屏幕尺寸,錯誤原因不一定可以得到充分的展示。
以上說的是表單設計中如何給用戶錯誤提示,當然與其亡羊補牢,我們不如嘗試著來幫助用戶來避免犯錯。
表單錄入用戶經常發生錯誤的地方就是輸入格式,以日期為例。不同的地區對于日期錄入的格式也不一樣,2017-08-15,08.15.2017,08-15-2017等等。目前來說一些表單實現了容錯模式,允許用戶輸入不同格式或者不同類型的數字。這也降低了用戶犯錯的幾率。
總結
表單是主要的信息錄入工具之一,也是一款產品用戶體驗的重中之重。不存在完美且百搭的表單樣式,不同的產品在進行表單設計時有不同的出發點和思路。以上就是我的一些總結,希望這篇文章可以給你帶來幫助。
#專欄作家#
王M爭,人人都是經理專欄作家,資深互聯網人。
本文原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Pexels,基于 CC0 協議
舉例輸入日期不是很好,我覺得選擇代替輸入更好,不會有格式的錯誤了
講的確實不錯~~對于小白來說,學習了~
收藏了
很詳細 學習了~
很小,很精致。
有圖有真相 挺好的
學習啦!感謝~
逐行報錯在移動端中有沒有好的解決方案呢?能舉個例子說明一下嗎? ??
逐行報錯其實提示文字不一定要在文本框的側邊,也可以位于文本框的上下方位置,減小提示文字的大小,這樣就比較明顯了,也不占用空間,又可以全部顯示;
然后在修改完錯誤信息,焦點不在此文本框時,就可以對修改的內容做校驗;
在移動端的解決方案:一、在輸入框下方出現提示文字。此時有兩種可能:1、不同輸入框的縱向間距夠大,提示文字的出現不影響其他輸入框的位置,2、不同輸入框的縱向間距不夠大,提示文字的出現導致其下方的輸入框位置向下移動。個人覺著第一種更好。二、提示文字用toast提示,顯示在界面最下方。另外一點是關于提示文字出現的時機,這也是非常重要的一點,一種是在當前輸入框失去焦點后對內容做校驗,另一種是所有輸入框都輸入內容并點擊“確定”后對內容做校驗。
收藏了
學習了。梳理得非常清晰。??
感謝!
剛開始闡述的表單確實令人耳目一新
??
總結得好好,學習
共同學習
吸取別人的優點